Skip to content

S
safetcut-app
Commit f1b46072 by Tonk
Options

update notification, add notification mock-data

parent 08f1b4ed
Showing with 97 additions and 51 deletions
screens/Private/NotificationScreen/NotificationScreen.js
...@@ -3,63 +3,91 @@ import { Text, Tab, Tabs, ScrollableTab, Icon } from 'native-base'; ...@@ -3,63 +3,91 @@ import { Text, Tab, Tabs, ScrollableTab, Icon } from 'native-base';
import { View, StyleSheet, FlatList, ScrollView } from 'react-native'; import { View, StyleSheet, FlatList, ScrollView } from 'react-native';
import { color, theme } from '../../../constants/Styles'; import { color, theme } from '../../../constants/Styles';
import { SearchBar } from 'react-native-elements'; import { SearchBar } from 'react-native-elements';
import { format, sort } from 'date-fns'; import { format, isToday, isYesterday, isSameDay } from 'date-fns';
const mockdata = [ const tabHeader = [
{ time: 1566207933, user: 'Sukanya161', log: 'Switch on sub breaker1', type: 'notification' }, { type: 'all', label: 'All' },
{ time: 1566299471, user: 'Sukanya161', log: 'Switch off sub breaker1', type: 'notification' }, { type: 'notification', label: 'Notifications' },
{ time: 1566271564, user: 'Sukanya161', log: 'Switch on sub breaker1', type: 'log' }, { type: 'log', label: 'Logging' },
{ time: 1573514603, user: 'Sukanya161', log: 'Switch off sub breaker1', type: 'notification' },
]; ];
const dt2 = require('./notification.json');
export default class NotificationScreen extends React.Component { export default class NotificationScreen extends React.Component {
static navigationOptions = ({ navigation }) => ({ static navigationOptions = ({ navigation }) => ({
title: 'Notifications', title: 'Notifications',
}); });
state = { search: '' }; state = { search: '', data: [] };
componentDidMount() {
this.sortDate();
}
updateSearch = search => { updateSearch = search => {
this.setState({ search }); this.setState({ search });
}; };
renderActivityCard(data) { renderActionCard(data) {
return ( return (
<View <View style={[theme.rowContainer, styles.actionContainer]}>
style={[ <View style={styles.thumbnail}>
theme.rowContainer,
{
paddingHorizontal: 30,
paddingVertical: 10,
alignItems: 'flex-start',
backgroundColor: color.white,
width: '100%',
},
]}
>
<View
style={{
width: 16,
height: 16,
marginRight: 10,
borderRadius: 100,
backgroundColor: color.primary,
alignItems: 'center',
justifyContent: 'center',
}}
>
{/* first letter of operate's username */} {/* first letter of operate's username */}
<Text style={{ color: color.white, fontSize: 8 }}>A</Text> <Text style={{ color: color.white, fontSize: 8 }}>{data.user.charAt(0).toUpperCase()}</Text>
</View> </View>
<View style={{ display: 'flex', flexDirection: 'column', flex: 1 }}> <View style={{ display: 'flex', flexDirection: 'column', flex: 1 }}>
<View style={[theme.rowContainer, { justifyContent: 'space-between', marginBottom: 5 }]}> <View style={[theme.rowContainer, { justifyContent: 'space-between', marginBottom: 5 }]}>
{/* operate's username */} {/* operate's username */}
<Text style={[theme.smDescription]}>{data.user || 'JohnDoe'}</Text> <Text style={[theme.smDescription]}>{data.user || 'unknown'}</Text>
{/* operate time */} {/* operate time */}
<Text style={[theme.smDescription]}>{format(data.time, 'hh:mm A') || '00:00 AM'}</Text> <Text style={[theme.smDescription]}>{format(data.time * 1000, 'hh:mm A')}</Text>
</View> </View>
{/* operate activity. */} {/* operate action. */}
<Text style={[theme.normalText, theme.textDark]}>{data.log || 'Unknown activity'}</Text> <Text style={[theme.normalText, theme.textDark]}>
{data.action} {data.device}
</Text>
</View> </View>
</View> </View>
); );
} }
sortDate() {
this.setState({
data: dt2.sort(function(a, b) {
var dateA = new Date(a.time),
dateB = new Date(b.time);
return dateB - dateA;
}),
});
}
renderDayList(type) {
const data =
type === 'all'
? this.state.data
: this.state.data.filter(x => {
return x.type === type;
});
let view = [];
let day;
for (let i = 0; i < data.length; i++) {
if (isToday(data[i].time * 1000) && i === 0) {
view.push(
<>
<Text style={[theme.normalText, { paddingHorizontal: 30, paddingVertical: 10 }]}>Today</Text>
{this.renderActionCard(data[i])}
</>
);
day = data[i].time * 1000;
} else if (isSameDay(day, data[i].time * 1000)) {
view.push(this.renderActionCard(data[i]));
day = data[i].time * 1000;
} else {
view.push(
<>
<Text style={[theme.normalText, { paddingHorizontal: 30, paddingVertical: 10 }]}>
{isYesterday(data[i].time * 1000) ? 'Yesterday' : format(data[i].time * 1000, 'DD/MM/YYYY')}
</Text>
{this.renderActionCard(data[i])}
</>
);
day = data[i].time * 1000;
}
}
return view;
}
render() { render() {
const TabStyle = { const TabStyle = {
textStyle: theme.description, textStyle: theme.description,
...@@ -68,15 +96,14 @@ export default class NotificationScreen extends React.Component { ...@@ -68,15 +96,14 @@ export default class NotificationScreen extends React.Component {
activeTabStyle: { backgroundColor: color.primary, borderRadius: 100, margin: 10 }, activeTabStyle: { backgroundColor: color.primary, borderRadius: 100, margin: 10 },
style: { backgroundColor: color.defaultBg }, style: { backgroundColor: color.defaultBg },
}; };
const today = new Date();
return ( return (
<View style={theme.container}> <View style={theme.container}>
<Tabs <Tabs
tabBarUnderlineStyle={{ backgroundColor: 'transparent' }} tabBarUnderlineStyle={{ backgroundColor: 'transparent' }}
renderTabBar={() => <ScrollableTab style={{ backgroundColor: color.defaultBg, borderWidth: 0 }} />} renderTabBar={() => <ScrollableTab style={{ backgroundColor: color.defaultBg, borderWidth: 0 }} />}
> >
{['All', 'Notifications', 'Logging'].map((item, index) => ( {tabHeader.map((item, index) => (
<Tab heading={item} {...TabStyle}> <Tab heading={item.label} {...TabStyle} key={index}>
<View <View
style={{ style={{
padding: 15, padding: 15,
...@@ -100,19 +127,8 @@ export default class NotificationScreen extends React.Component { ...@@ -100,19 +127,8 @@ export default class NotificationScreen extends React.Component {
onPress={() => this.setState({ isfilterVisible: true })} onPress={() => this.setState({ isfilterVisible: true })}
/> />
</View> </View>
{/* filter date length */}
<ScrollView> <ScrollView>
{/* >date */} <View>{this.renderDayList(item.type)}</View>
<View>
<Text style={[theme.normalText, { paddingHorizontal: 30, paddingVertical: 10 }]}>
Today {/* Today/Yesterday/date.. */}
</Text>
{/* >>log list */}
<FlatList
data={mockdata}
renderItem={({ item, index }) => this.renderActivityCard(item)}
/>
</View>
</ScrollView> </ScrollView>
</Tab> </Tab>
))} ))}
...@@ -145,4 +161,20 @@ const styles = StyleSheet.create({ ...@@ -145,4 +161,20 @@ const styles = StyleSheet.create({
fontSize: 12, fontSize: 12,
color: color.grey, color: color.grey,
}, },
actionContainer: {
paddingHorizontal: 30,
paddingVertical: 10,
alignItems: 'flex-start',
backgroundColor: color.white,
width: '100%',
},
thumbnail: {
width: 16,
height: 16,
marginRight: 10,
borderRadius: 100,
backgroundColor: color.primary,
alignItems: 'center',
justifyContent: 'center',
},
}); });
screens/Private/NotificationScreen/notification.json 0 → 100644
[
{ "type": "log", "user": "Sukanya161", "time": 1566370057, "action": "Switched on", "device": "sub breaker 4" },
{ "type": "log", "user": "Sukanya161", "time": 1564639200, "action": "Switched off", "device": "sub breaker 1" },
{
"type": "notification",
"user": "Sukanya161",
"time": 1566370196,
"action": "Switched on",
"device": "sub breaker 2"
},
{ "type": "log", "user": "Sukanya161", "time": 1566371305, "action": "Switched on", "device": "sub breaker 1" },
{ "type": "log", "user": "Sukanya161", "time": 1566374629, "action": "Switched on", "device": "sub breaker 3" },
{ "type": "notification", "user": "Tonk", "time": 1566317460, "action": "leaved", "device": "office" }
]
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment