update notification tab header style, fix invalid custom filter

screens/Private/NotificationScreen/NotificationScreen.js

@@ -28,8 +28,8 @@ export default class NotificationScreen extends React.Component {
 			filterData: [],
 			initial: [],
 			isfilterVisible: false,
-			selectedStartDate: null,
-			selectedEndDate: null,
+			selectedStartDate: new Date(),
+			selectedEndDate: new Date(),
 			filterBy: null,
 			toggleCalendar: false,
 		};
@@ -135,11 +135,14 @@ export default class NotificationScreen extends React.Component {
 			console.log('filter last month');
 		} else if (filterBy === 'custom') {
 			console.log('filter custom');
+
 			const start = getTime(selectedStartDate);
-			const end = endOfDay(getTime(selectedEndDate));
+			const end = endOfDay(getTime(selectedEndDate === null ? selectedStartDate : selectedEndDate));
 			const newData = initial.filter(x => {
 				return x.time * 1000 <= end && x.time * 1000 > start;
 			});
+
+			console.log('start', start, 'end', end, 'start state', selectedStartDate, 'end state', selectedEndDate);
 			this.setState({ filterData: newData });
 		} else if (filterBy === 'all') {
 			this.setState({ filterData: initial });
@@ -165,9 +168,11 @@ export default class NotificationScreen extends React.Component {
 				<View style={{ display: 'flex', flexDirection: 'column', flex: 1 }}>
 					<View style={[theme.rowContainer, { justifyContent: 'space-between', marginBottom: 5 }]}>
 						{/* operate's username */}
-						<Text style={[theme.smDescription]}>{data.user || 'unknown'}</Text>
+						<Text style={[theme.smDescription, { color: '#b9babc' }]}>{data.user || 'unknown'}</Text>
 						{/* operate time */}
-						<Text style={[theme.smDescription]}>{format(data.time * 1000, 'hh:mm A')}</Text>
+						<Text style={[theme.smDescription, { color: '#b9babc' }]}>
+							{format(data.time * 1000, 'hh:mm A')}
+						</Text>
 					</View>
 					{/* operate action. */}
 					<Text style={[theme.normalText, theme.textDark]}>
@@ -233,7 +238,8 @@ export default class NotificationScreen extends React.Component {
 					style={[styles.pickerContainer, theme.mt2, theme.rowContainer, { justifyContent: 'space-between' }]}
 				>
 					<Text style={[theme.normalText, theme.textDark]}>
-						{format(startDate, 'DD-MM-YYYY')} - {format(endDate, 'DD-MM-YYYY')}
+						{format(startDate, 'DD-MM-YYYY')}
+						{endDate === '' ? '' : ' - ' + format(endDate, 'DD-MM-YYYY')}
 					</Text>
 					<Icon
 						type="MaterialCommunityIcons"
@@ -282,9 +288,9 @@ export default class NotificationScreen extends React.Component {
 	render() {
 		const TabStyle = {
 			textStyle: theme.description,
-			activeTextStyle: [theme.description, theme.textWhite],
-			tabStyle: { backgroundColor: color.white, borderRadius: 100, margin: 10 },
-			activeTabStyle: { backgroundColor: color.primary, borderRadius: 100, margin: 10 },
+			activeTextStyle: [theme.description, theme.textDark],
+			tabStyle: { backgroundColor: 'transparent', borderRadius: 100, margin: 10 },
+			activeTabStyle: { backgroundColor: 'rgba(238, 84, 84, 0.15)', borderRadius: 100, margin: 10 },
 			style: { backgroundColor: color.defaultBg },
 		};
 		return (