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

added Branch info screen

parent a4cd9688
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";
export default class BranchListItem extends PureComponent {
class BranchListItem extends PureComponent {
_onPress = () => {
this.props.navigation.navigate("BranchInfo", {
branch: this.props.item
});
};
render() {
const { item } = this.props;
......@@ -11,6 +18,7 @@ export default class BranchListItem extends PureComponent {
<ListItem
title={item.address}
subtitle={`${item.city}, ${item.zip}`}
onPress={this._onPress}
leftAvatar={
<Icon
type="feather"
......@@ -20,6 +28,7 @@ export default class BranchListItem extends PureComponent {
containerStyle={styles.avatarContainer}
/>
}
chevron
subtitleStyle={styles.subtitle}
/>
);
......@@ -45,3 +54,5 @@ const styles = StyleSheet.create({
backgroundColor: iOSColors.blue
}
});
export default withNavigation(BranchListItem);
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({});
......@@ -7,6 +7,7 @@ export const BRANCHES = [
export const NOTIFICATIONS = [
{
branchId: 1,
address: "OC Aupark",
city: "Košice",
id: 1,
......@@ -16,6 +17,7 @@ export const NOTIFICATIONS = [
timeStamp: "2019-05-01T06:50:27"
},
{
branchId: 3,
address: "OC Galeria",
city: "Košice",
id: 2,
......@@ -25,6 +27,7 @@ export const NOTIFICATIONS = [
timeStamp: "2019-05-01T05:50:36"
},
{
branchId: 1,
address: "OC Aupark",
city: "Košice",
id: 3,
......@@ -34,6 +37,7 @@ export const NOTIFICATIONS = [
timeStamp: "2019-04-30T20:42:41"
},
{
branchId: 1,
address: "OC Aupark",
city: "Košice",
id: 4,
......@@ -43,6 +47,7 @@ export const NOTIFICATIONS = [
timeStamp: "2019-04-30T06:50:48"
},
{
branchId: 1,
address: "OC Aupark",
city: "Košice",
id: 5,
......@@ -52,6 +57,7 @@ export const NOTIFICATIONS = [
timeStamp: "2019-04-29T18:49:12"
},
{
branchId: 1,
address: "OC Aupark",
city: "Košice",
id: 6,
......@@ -61,6 +67,7 @@ export const NOTIFICATIONS = [
timeStamp: "2019-04-28T15:16:12"
},
{
branchId: 3,
address: "OC Galeria",
city: "Košice",
id: 7,
......
......@@ -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 = {
......
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, { PureComponent } from "react";
import { FlatList, StyleSheet } from "react-native";
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 BranchScreen extends PureComponent {
export default class BranchesScreen extends Component {
static navigationOptions = {
title: "Branches"
};
state = {
data: BRANCHES
};
_keyExtractor = item => `bank-${item.id}`;
_keyExtractor = item => `branch-${item.id}`;
_renderItem = ({ item }) => <BranchListItem item={item} />;
render() {
return (
<FlatList
contentContainerStyle={styles.listContainer}
keyExtractor={this._keyExtractor}
renderItem={this._renderItem}
ItemSeparatorComponent={BranchListItem.Divider}
data={this.state.data}
/>
<View style={styles.container}>
<FlatList
contentContainerStyle={styles.listContainer}
keyExtractor={this._keyExtractor}
renderItem={this._renderItem}
ItemSeparatorComponent={BranchListItem.Divider}
data={this.state.data}
/>
</View>
);
}
}
......
import React, { PureComponent } from "react";
import { View, StyleSheet, FlatList } from "react-native";
import React, { Component } from "react";
import { View, StyleSheet } from "react-native";
import { ButtonGroup } from "react-native-elements";
import NotificationListItem from "../components/notifications/NotificationListItem";
import NotificationList from "../components/notifications/NotificationList";
import { iOSColors } from "react-native-typography";
import { NOTIFICATIONS } from "../constants/Data";
export default class NotificationScreen extends PureComponent {
export default class NotificationScreen extends Component {
static navigationOptions = {
title: "Notifications"
};
......@@ -23,12 +23,8 @@ export default class NotificationScreen extends PureComponent {
this.setState({ selectedIndex });
};
_keyExtractor = item => `bank-${item.id}`;
_renderItem = ({ item }) => <NotificationListItem item={item} />;
render() {
const buttons = ["New", "Displayed"];
const buttons = ["New", "All"];
const { selectedIndex } = this.state;
return (
......@@ -43,21 +39,14 @@ export default class NotificationScreen extends PureComponent {
disabledTextStyle={styles.disabledTextStyle}
containerStyle={styles.buttonTabContainer}
/>
<FlatList
contentContainerStyle={styles.listContainer}
keyExtractor={this._keyExtractor}
initialNumToRender={6}
renderItem={this._renderItem}
ItemSeparatorComponent={NotificationListItem.Divider}
data={this.state.data}
/>
<NotificationList data={this.state.data} />
</View>
);
}
}
const styles = StyleSheet.create({
container: { flex: 1, paddingHorizontal: 15, paddingTop: 25 },
container: { flex: 1, paddingHorizontal: 15, paddingTop: 15 },
buttonTabContainer: {},
tabButtonsStyle: {
borderColor: iOSColors.blue
......
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