update notification filter & search

constants/Styles.js

@@ -2,7 +2,7 @@ import { StyleSheet } from 'react-native';
 
 export const color = {
 	white: '#fff',
-	defaultBg: 'rgba(243,243,243,0.5)',
+	defaultBg: '#fbfbfb',
 	lightGrey: '#cfd7db',
 	grey: '#9b9b9b',
 	darkGrey: '#4a4a4a',

screens/Private/NotificationScreen/NotificationScreen.js

@@ -3,7 +3,7 @@ import { Text, Tab, Tabs, ScrollableTab, Icon, Footer } from 'native-base';
 import { View, StyleSheet, ScrollView, Modal } from 'react-native';
 import { color, theme } from '../../../constants/Styles';
 import { SearchBar } from 'react-native-elements';
-import { format, isToday, isYesterday, isSameDay, isThisMonth, startOfDay } from 'date-fns';
+import { format, isToday, isYesterday, isSameDay, isThisMonth, startOfDay, getTime, endOfDay } from 'date-fns';
 import SlideUpModal from '../../../components/SlideUpModal';
 import FadeDimBG from '../../../components/FadeDimBG';
 import { width, height } from '../../../constants/Layout';
@@ -25,6 +25,7 @@ export default class NotificationScreen extends React.Component {
 		this.state = {
 			search: '',
 			data: [],
+			filterData: [],
 			initial: [],
 			isfilterVisible: false,
 			selectedStartDate: null,
@@ -60,32 +61,38 @@ export default class NotificationScreen extends React.Component {
 			});
 		}
 	}
+	clear() {
+		this.setState({
+			selectedStartDate: null,
+			selectedEndDate: null,
+			filterBy: null,
+			toggleCalendar: false,
+		});
+	}
+
 	updateSearch = text => {
 		this.setState({ search: text });
-		const { initial } = this.state;
-
-		const newData = initial.filter(item => {
+		const { filterData, initial, filterBy } = this.state;
+		let data = [];
+		if (filterBy) {
+			data.push(...filterData);
+		} else {
+			data.push(...initial);
+		}
+		const newData = data.filter(item => {
 			const itemData = `${item.user.toUpperCase()} ${item.action.toUpperCase()} ${item.device.toUpperCase()}`;
 			const textData = text.toUpperCase();
 
 			return itemData.indexOf(textData) > -1;
 		});
-
 		this.setState({
 			data: newData,
 		});
 	};
-	clear() {
-		this.setState({
-			selectedStartDate: null,
-			selectedEndDate: null,
-			filterBy: null,
-			toggleCalendar: false,
-		});
-	}
+
 	filterByDate() {
-		const { filterBy, initial } = this.state;
-		this.setState({ isfilterVisible: false });
+		const { filterBy, initial, selectedStartDate, selectedEndDate } = this.state;
+		this.setState({ isfilterVisible: false, search: '' });
 
 		if (filterBy === 'today') {
 			console.log('filter today');
@@ -93,13 +100,13 @@ export default class NotificationScreen extends React.Component {
 			const newData = initial.filter(x => {
 				return isToday(x.time * 1000);
 			});
-			this.setState({ data: newData });
+			this.setState({ filterData: newData });
 		} else if (filterBy === 'yesterday') {
 			console.log('filter yesterday');
 			const newData = initial.filter(x => {
 				return isYesterday(x.time * 1000);
 			});
-			this.setState({ data: newData });
+			this.setState({ filterData: newData });
 		} else if (filterBy === '7days') {
 			console.log('filter 7 days');
 			const newData = initial.filter(x => {
@@ -108,7 +115,7 @@ export default class NotificationScreen extends React.Component {
 				const daysRange = startDay - 7 * 24 * 60 * 60 * 1000;
 				return x.time * 1000 >= daysRange && x.time * 1000 <= today;
 			});
-			this.setState({ data: newData });
+			this.setState({ filterData: newData });
 		} else if (filterBy === '30days') {
 			console.log('filter 30 days');
 			const newData = initial.filter(x => {
@@ -117,26 +124,44 @@ export default class NotificationScreen extends React.Component {
 				const daysRange = startDay - 30 * 24 * 60 * 60 * 1000;
 				return x.time * 1000 >= daysRange && x.time * 1000 <= today;
 			});
-			this.setState({ data: newData });
+			this.setState({ filterData: newData });
 		} else if (filterBy === 'month') {
 			console.log('filter this month');
 			const newData = initial.filter(x => {
 				return isThisMonth(x.time * 1000);
 			});
-			this.setState({ data: newData });
+			this.setState({ filterData: newData });
 		} else if (filterBy === 'lastMonth') {
 			console.log('filter last month');
 		} else if (filterBy === 'custom') {
 			console.log('filter custom');
+			const start = getTime(selectedStartDate);
+			const end = endOfDay(getTime(selectedEndDate));
+			const newData = initial.filter(x => {
+				return x.time * 1000 <= end && x.time * 1000 > start;
+			});
+			this.setState({ filterData: newData });
+		} else if (filterBy === 'all') {
+			this.setState({ filterData: initial });
 		}
 	}
+
+	// render component -----------------------------------------------
 	renderActionCard(data) {
 		return (
 			<View style={[theme.rowContainer, styles.actionContainer]}>
-				<View style={styles.thumbnail}>
-					{/* first letter of operate's username */}
-					<Text style={{ color: color.white, fontSize: 8 }}>{data.user.charAt(0).toUpperCase()}</Text>
-				</View>
+				{data.type === 'log' ? (
+					<Icon
+						name="info"
+						type="SimpleLineIcons"
+						style={{ color: color.primary, fontSize: 12.5, marginRight: 10, marginTop: 1 }}
+					/>
+				) : (
+					<Icon
+						name="ios-notifications-outline"
+						style={{ color: color.primary, fontSize: 16, marginRight: 10, marginTop: -1 }}
+					/>
+				)}
 				<View style={{ display: 'flex', flexDirection: 'column', flex: 1 }}>
 					<View style={[theme.rowContainer, { justifyContent: 'space-between', marginBottom: 5 }]}>
 						{/* operate's username */}
@@ -154,10 +179,16 @@ export default class NotificationScreen extends React.Component {
 	}
 
 	renderDayList(type) {
+		let data2render = [];
+		if (this.state.filterBy && !this.state.search) {
+			data2render.push(...this.state.filterData);
+		} else {
+			data2render.push(...this.state.data);
+		}
 		const data =
 			type === 'all'
-				? this.state.data
-				: this.state.data.filter(x => {
+				? data2render
+				: data2render.filter(x => {
 						return x.type === type;
 				  });
 		let view = [];
@@ -283,7 +314,7 @@ export default class NotificationScreen extends React.Component {
 								/>
 								<Icon
 									name="md-funnel"
-									style={{ color: '#c7cad1', fontSize: 14, marginLeft: 10 }}
+									style={{ color: '#c7cad1', fontSize: 20, marginLeft: 10, marginRight: 5 }}
 									onPress={() => this.setState({ isfilterVisible: true })}
 								/>
 							</View>
@@ -314,6 +345,7 @@ export default class NotificationScreen extends React.Component {
 						<View style={[theme.mt2, styles.pickerContainer]}>
 							<RNPickerSelect
 								onValueChange={value => this.setState({ filterBy: value })}
+								placeholder={{ label: 'All', value: 'all' }}
 								items={[
 									{ label: 'Today', value: 'today' },
 									{ label: 'Yesterday', value: 'yesterday' },
@@ -338,6 +370,8 @@ export default class NotificationScreen extends React.Component {
 		);
 	}
 }
+
+// style -------------------------------------------------------
 const pickerStyle = {
 	inputIOS: {
 		color: color.darkGrey,

screens/Private/NotificationScreen/notification.json

@@ -28,5 +28,6 @@
 	{ "type": "notification", "user": "Tonk", "time": 1566317460, "action": "Leaved", "device": "office" },
 	{ "type": "notification", "user": "Tonk", "time": 1561975930, "action": "Entered", "device": "office" },
 	{ "type": "notification", "user": "Tonk", "time": 1564481530, "action": "ง่วง", "device": "มากๆ" },
-	{ "type": "notification", "user": "Tonk", "time": 1563790330, "action": "หิว", "device": "ข้าว" }
+	{ "type": "notification", "user": "Tonk", "time": 1563790330, "action": "หิว", "device": "ข้าว" },
+	{ "type": "notification", "user": "Tonk", "time": 1566528669, "action": "Sleep", "device": "" }
 ]