Commit ecd7029c authored by psakac's avatar psakac
Browse files

Merge remote-tracking branch 'origin/master'

parents 3f5012a4 583e4ec7
......@@ -4,10 +4,7 @@
"slug": "ATvI2",
"privacy": "public",
"sdkVersion": "32.0.0",
"platforms": [
"ios",
"android"
],
"platforms": ["ios", "android"],
"version": "1.0.0",
"orientation": "portrait",
"icon": "./assets/images/icon.png",
......@@ -19,11 +16,16 @@
"updates": {
"fallbackToCacheTimeout": 0
},
"assetBundlePatterns": [
"**/*"
],
"assetBundlePatterns": ["**/*"],
"ios": {
"supportsTablet": true
},
"android": {
"config": {
"googleMaps": {
"apiKey": "AIzaSyD1EA7IOghHVC_u08e1zH5LIVs0pYD0XX8"
}
}
}
}
}
\ No newline at end of file
}
import React, { PureComponent } from "react";
import { ListItem, Divider, Icon } from "react-native-elements";
import { StyleSheet } from "react-native";
import { withNavigation } from "react-navigation";
import { iOSColors } from "react-native-typography";
class BranchListItem extends PureComponent {
_onPress = () => {
this.props.navigation.navigate("BranchInfo", {
branch: this.props.item
});
};
render() {
const { item } = this.props;
return (
<ListItem
title={item.address}
subtitle={`${item.city}, ${item.zip}`}
onPress={this._onPress}
leftAvatar={
<Icon
type="feather"
name="home"
color="white"
size={15}
containerStyle={styles.avatarContainer}
/>
}
chevron
subtitleStyle={styles.subtitle}
/>
);
}
}
BranchListItem.Divider = () => <Divider style={styles.divider} />;
const styles = StyleSheet.create({
divider: {
backgroundColor: "#ccc",
marginLeft: "7%",
width: "93%"
},
subtitle: { color: iOSColors.gray },
avatarContainer: {
display: "flex",
alignItems: "center",
justifyContent: "center",
height: 36,
width: 36,
borderRadius: 18,
backgroundColor: iOSColors.blue
}
});
export default withNavigation(BranchListItem);
import React, { PureComponent } from "react";
import { StyleSheet, View, Text } from "react-native";
const DANGER_RATES = {
1: "#D8D8D8",
2: "#AFAFAF",
3: "#FCBBBB",
4: "#FF8E8E",
5: "#FF5353"
};
class DangerRating extends PureComponent {
getDangerRating = () => {
const { rate } = this.props;
if (!DANGER_RATES.hasOwnProperty(rate)) {
console.log("Cannot match danger rate from: ", rate);
return false;
}
return DANGER_RATES[rate];
};
render() {
const { rate } = this.props;
const backgroundColor = this.getDangerRating();
if (!backgroundColor) return null;
return (
<View style={[styles.iconContainer, { backgroundColor }]}>
<Text style={styles.textStyle}>{rate}</Text>
</View>
);
}
}
const styles = StyleSheet.create({
iconContainer: {
display: "flex",
alignItems: "center",
justifyContent: "center",
height: 42,
width: 42,
borderRadius: 21
},
textStyle: {
color: "white",
fontSize: 25
}
});
export default DangerRating;
import React, { PureComponent } from "react";
import { StyleSheet, View, Text } from "react-native";
import { Icon } from "react-native-elements";
import { iOSColors, systemWeights } from "react-native-typography";
export default class NotificationAVMatch extends PureComponent {
render() {
const { audioMatch, videoMatch } = this.props;
return (
<View style={styles.container}>
<View style={styles.entityContainer}>
<Icon
name="video"
type="feather"
size={16}
iconStyle={styles.iconStyle}
/>
<Text style={styles.textStyle}>{videoMatch}%</Text>
</View>
<View style={styles.entityContainer}>
<Icon
name="volume-2"
type="feather"
size={16}
iconStyle={styles.iconStyle}
/>
<Text style={styles.textStyle}>{audioMatch}%</Text>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flexDirection: "row",
marginTop: 8
},
entityContainer: {
flexDirection: "row",
justifyContent: "center",
marginRight: 17
},
iconStyle: { color: iOSColors.gray, marginRight: 7 },
textStyle: { color: iOSColors.gray, ...systemWeights.thin, fontSize: 14 }
});
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, FlatList } from "react-native";
import NotificationListItem from "./NotificationListItem";
export default class NotificationScreen extends PureComponent {
_keyExtractor = item => `bank-${item.id}`;
_renderItem = ({ item }) => <NotificationListItem item={item} />;
render() {
return (
<FlatList
// contentContainerStyle={styles.listContainer}
keyExtractor={this._keyExtractor}
initialNumToRender={6}
renderItem={this._renderItem}
ItemSeparatorComponent={NotificationListItem.Divider}
data={this.props.data}
/>
);
}
}
const styles = StyleSheet.create({});
import React, { PureComponent } from "react";
import { StyleSheet } from "react-native";
import { ListItem, Divider } from "react-native-elements";
import DangerRating from "./DangerRating";
import NotificationDate from "./NotificationDate";
import NotificationAVMatch from "./NotificationAVMatch";
import { iOSColors } from "react-native-typography";
export default class NotificationListItem extends PureComponent {
render() {
const { item } = this.props;
return (
<ListItem
title={`${item.city}, ${item.address}`}
subtitle={
<NotificationAVMatch
audioMatch={item.audioMatch}
videoMatch={item.videoMatch}
/>
}
rightTitle={<NotificationDate timeStamp={item.timeStamp} />}
leftAvatar={<DangerRating rate={item.rate} />}
contentContainerStyle={styles.rowMargin}
subtitleStyle={styles.subtitle}
/>
);
}
}
NotificationListItem.Divider = () => <Divider style={styles.divider} />;
const styles = StyleSheet.create({
divider: {
backgroundColor: "#ccc",
marginLeft: "7%",
width: "93%"
},
subtitle: { color: iOSColors.gray },
avatarContainer: {
display: "flex",
alignItems: "center",
justifyContent: "center",
height: 36,
width: 36,
borderRadius: 18,
backgroundColor: iOSColors.blue
},
rowMargin: { marginVertical: 7 }
});
export const BRANCHES = [
{ address: "OC Aupark", zip: "040 01", city: "Košice", id: 1 },
{ address: "Autobusova 71", zip: "040 01", city: "Košice", id: 2 },
{ address: "OC Galeria", zip: "040 01", city: "Košice", id: 3 },
{ address: "OC Optima", zip: "040 01", city: "Košice", id: 4 }
];
export const NOTIFICATIONS = [
{
branchId: 1,
address: "OC Aupark",
city: "Košice",
id: 1,
audioMatch: 82,
videoMatch: 65,
rate: 5,
timeStamp: "2019-05-01T06:50:27"
},
{
branchId: 3,
address: "OC Galeria",
city: "Košice",
id: 2,
audioMatch: 45,
videoMatch: 42,
rate: 2,
timeStamp: "2019-05-01T05:50:36"
},
{
branchId: 1,
address: "OC Aupark",
city: "Košice",
id: 3,
audioMatch: 35,
videoMatch: 40,
rate: 1,
timeStamp: "2019-04-30T20:42:41"
},
{
branchId: 1,
address: "OC Aupark",
city: "Košice",
id: 4,
audioMatch: 82,
videoMatch: 72,
rate: 1,
timeStamp: "2019-04-30T06:50:48"
},
{
branchId: 1,
address: "OC Aupark",
city: "Košice",
id: 5,
audioMatch: 55,
videoMatch: 60,
rate: 3,
timeStamp: "2019-04-29T18:49:12"
},
{
branchId: 1,
address: "OC Aupark",
city: "Košice",
id: 6,
audioMatch: 58,
videoMatch: 63,
rate: 3,
timeStamp: "2019-04-28T15:16:12"
},
{
branchId: 3,
address: "OC Galeria",
city: "Košice",
id: 7,
audioMatch: 75,
videoMatch: 65,
rate: 4,
timeStamp: "2019-04-24T15:16:12"
}
];
......@@ -6,12 +6,14 @@ import {
} from "react-navigation";
import TabBarIcon from "../components/TabBarIcon";
import BranchScreen from "../screens/BranchScreen";
import BranchesScreen from "../screens/BranchesScreen";
import BranchInfoScreen from "../screens/BranchInfoScreen";
import NotificationsScreen from "../screens/NotificationScreen";
import SettingsScreen from "../screens/SettingsScreen";
const BranchStack = createStackNavigator({
Branch: BranchScreen
Branches: BranchesScreen,
BranchInfo: BranchInfoScreen
});
BranchStack.navigationOptions = {
......@@ -29,7 +31,7 @@ const NotificationStack = createStackNavigator({
});
NotificationStack.navigationOptions = {
tabBarLabel: "Links",
tabBarLabel: "Notifications",
tabBarIcon: ({ focused }) => (
<TabBarIcon
focused={focused}
......
This diff is collapsed.
......@@ -16,6 +16,7 @@
"react": "16.5.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",
"react-native-elements": "^1.1.0",
"react-native-typography": "^1.4.0",
"react-navigation": "^3.0.9"
},
"devDependencies": {
......
import React, { Component } from "react";
import { StyleSheet, View, InteractionManager } from "react-native";
import { NOTIFICATIONS } from "../constants/Data";
import NotificationList from "../components/notifications/NotificationList";
export default class BranchInfoScreen extends Component {
static navigationOptions = ({ navigation }) => {
const branch = navigation.getParam("branch", null);
const headerTitle = branch ? branch.address : "Branch";
return { headerTitle };
};
constructor(props) {
super(props);
this.state = {
isLoaded: false,
branch: this.props.navigation.getParam("branch", null)
};
}
componentDidMount() {
InteractionManager.runAfterInteractions(() => {
const branchID = this.state.branch.id;
this.setState({
isLoaded: true,
data: NOTIFICATIONS.filter(item => item.branchId === branchID)
});
});
}
render() {
return (
<View style={styles.container}>
<NotificationList data={this.state.data} />
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff"
}
});
import React, { memo, PureComponent } from "react";
import { ListItem, Divider } from "react-native-elements";
import { FlatList, StyleSheet } from "react-native";
const STATIC_DATA = [
{ address: "OC Aupark", zip: "040 01", city: "Kosice", id: 1 },
{ address: "Autobusova 71", zip: "040 01", city: "Kosice", id: 2 },
{ address: "OC Galeria", zip: "040 01", city: "Kosice", id: 3 },
{ address: "OC Optima", zip: "040 01", city: "Kosice", id: 4 }
];
export default class BranchScreen extends PureComponent {
static navigationOptions = {
title: "Branches"
};
state = {
data: STATIC_DATA
};
_keyExtractor = item => `bank-${item.id}`;
_renderItem = ({ item }) => <BranchListItem item={item} />;
render() {
return (
<FlatList
keyExtractor={this._keyExtractor}
renderItem={this._renderItem}
// ItemSeparatorComponent={<BranchListItem.Divider />}
data={this.state.data}
/>
);
}
}
const BranchListItem = memo(({ item }) => (
<ListItem title={item.address} subtitle={`${item.city}, ${item.zip}`} />
));
// const BranchListItemDivider = memo(() => <Divider style={styles.divider} />);
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff"
},
divider: {
backgroundColor: "#ccc",
marginLeft: "10%",
width: "90%"
}
});
import React, { Component } from "react";
import { StyleSheet, FlatList, View } from "react-native";
import BranchListItem from "../components/branches/BranchListItem";
import { BRANCHES } from "../constants/Data";
export default class BranchesScreen extends Component {
static navigationOptions = {
title: "Branches"
};
state = {
data: BRANCHES
};
_keyExtractor = item => `branch-${item.id}`;
_renderItem = ({ item }) => <BranchListItem item={item} />;
render() {
return (