Commit a4cd9688 authored by Sebastian Trebunak's avatar Sebastian Trebunak
Browse files

timeStamp for notifications implemented

parent ad622526
import React, { PureComponent } from "react";
import { StyleSheet, View, Text, InteractionManager } from "react-native";
import { Icon } from "react-native-elements";
import { iOSColors, systemWeights } from "react-native-typography";
const MILLISECONDS_IN_DAY = 1000 * 60 * 60 * 24;
function getDayOfWeekString(day) {
if (day === 0) {
return "Sunday";
} else if (day === 1) {
return "Monday";
} else if (day === 2) {
return "Tuesday";
} else if (day === 3) {
return "Wednesday";
} else if (day === 4) {
return "Thursday";
} else if (day === 5) {
return "Friday";
} else if (day === 6) {
return "Saturday";
}
}
export default class NotificationDate extends PureComponent {
state = {
timeString: ""
};
componentDidMount() {
// datetime operations could cause performance problems so we delay
// them after untill all interactions are completed.
InteractionManager.runAfterInteractions(() => {
this.setState({ timeString: this.timeStampToString() });
});
}
timeStampToString = () => {
const current = new Date();
const required = new Date(this.props.timeStamp);
const diffTime = Math.abs(current.getTime() - required.getTime());
const diffDays = Math.ceil(diffTime / MILLISECONDS_IN_DAY);
if (diffDays <= 1 && required.getDay() == current.getDay()) {
return `${required.getHours()}:${required.getMinutes()}`;
} else if (diffDays === 1) {
return "Yesterday";
} else if (diffDays > 1 && diffDays < 7) {
const dayOfWeek = required.getDay();
return getDayOfWeekString(dayOfWeek);
} else {
return `${required.getDay()}.${required.getMonth()}`;
}
};
render() {
return (
<View style={styles.container}>
<Text style={styles.textStyle}>{this.state.timeString}</Text>
<Icon
name="chevron-right"
type="feather"
size={14}
iconStyle={styles.iconStyle}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flexDirection: "row",
alignItems: "center"
},
iconStyle: { color: iOSColors.gray },
textStyle: {
color: iOSColors.gray,
...systemWeights.light,
fontSize: 14,
marginRight: 5
}
});
import React, { PureComponent } from "react";
import { StyleSheet } from "react-native";
import { ListItem, Divider } from "react-native-elements";
import DangerRating from "../components/DangerRating";
import NotificationAVMatch from "../components/NotificationAVMatch";
import DangerRating from "./DangerRating";
import NotificationDate from "./NotificationDate";
import NotificationAVMatch from "./NotificationAVMatch";
import { iOSColors } from "react-native-typography";
export default class NotificationListItem extends PureComponent {
......@@ -18,6 +19,7 @@ export default class NotificationListItem extends PureComponent {
videoMatch={item.videoMatch}
/>
}
rightTitle={<NotificationDate timeStamp={item.timeStamp} />}
leftAvatar={<DangerRating rate={item.rate} />}
contentContainerStyle={styles.rowMargin}
subtitleStyle={styles.subtitle}
......
......@@ -22,7 +22,7 @@ export const NOTIFICATIONS = [
audioMatch: 45,
videoMatch: 42,
rate: 2,
timeStamp: "2019-04-30T21:50:36"
timeStamp: "2019-05-01T05:50:36"
},
{
address: "OC Aupark",
......@@ -40,7 +40,7 @@ export const NOTIFICATIONS = [
audioMatch: 82,
videoMatch: 72,
rate: 1,
timeStamp: "2019-05-01T06:50:48"
timeStamp: "2019-04-30T06:50:48"
},
{
address: "OC Aupark",
......@@ -49,6 +49,24 @@ export const NOTIFICATIONS = [
audioMatch: 55,
videoMatch: 60,
rate: 3,
timeStamp: "2019-04-30T18:49:12"
timeStamp: "2019-04-29T18:49:12"
},
{
address: "OC Aupark",
city: "Košice",
id: 6,
audioMatch: 58,
videoMatch: 63,
rate: 3,
timeStamp: "2019-04-28T15:16:12"
},
{
address: "OC Galeria",
city: "Košice",
id: 7,
audioMatch: 75,
videoMatch: 65,
rate: 4,
timeStamp: "2019-04-24T15:16:12"
}
];
import React, { PureComponent } from "react";
import { FlatList, StyleSheet } from "react-native";
import BranchListItem from "../components/BranchListItem";
import BranchListItem from "../components/branches/BranchListItem";
import { BRANCHES } from "../constants/Data";
export default class BranchScreen extends PureComponent {
......
import React, { PureComponent } from "react";
import { View, StyleSheet, FlatList } from "react-native";
import { ButtonGroup } from "react-native-elements";
import NotificationListItem from "../components/NotificationListItem";
import NotificationListItem from "../components/notifications/NotificationListItem";
import { iOSColors } from "react-native-typography";
import { NOTIFICATIONS } from "../constants/Data";
......@@ -46,6 +46,7 @@ export default class NotificationScreen extends PureComponent {
<FlatList
contentContainerStyle={styles.listContainer}
keyExtractor={this._keyExtractor}
initialNumToRender={6}
renderItem={this._renderItem}
ItemSeparatorComponent={NotificationListItem.Divider}
data={this.state.data}
......
Supports Markdown
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