GTHC · rikkikendall · Nov 16, 2019 · Nov 16, 2019 · Nov 21, 2019 · Nov 21, 2019
diff --git a/app/containers/App.js b/app/containers/App.js
@@ -1,11 +1,19 @@
 // @flow
 
 import React, { Component } from 'react';
+import { Text, StyleSheet, View } from 'react-native';
 import { Provider } from 'react-redux';
 // import Login from './Login';
 import UpcomingShifts from './UpcomingShifts';
+import SettingsTabs from './SettingsTabs';
+import EditTeamSettings from '../settings/EditTeamSettings';
+import EditUserSettings from '../settings/EditUserSettings';
+import Dashboard from './Dashboard';
+import Notifications from './Notifications';
 import { configureStore } from '../redux/utils/store';
 
+import { NativeRouter, Route, Link } from 'react-router-native';
+
 type Props = any;
 
 export default class App extends Component<Props> {
@@ -14,7 +22,14 @@ export default class App extends Component<Props> {
 
     return (
       <Provider store={store}>
-        <UpcomingShifts />
+        <NativeRouter>
+          <Route exact path="/" component={Dashboard} />
+          <Route exact path={'/notify'} component={Notifications} />
+          <Route exact path={'/shifts'} component={UpcomingShifts} />
+          <Route exact path={'/settings'} component={SettingsTabs} />
+          <Route exact path={'/editteamsettings'} component={EditTeamSettings} />
+          <Route exact path={'/editusersettings'} component={EditUserSettings} />
+        </NativeRouter>
       </Provider>
     );
   }

diff --git a/app/containers/AppFooter.js b/app/containers/AppFooter.js
@@ -0,0 +1,45 @@
+import React, { Component } from 'react';
+import { Container, Header, Content, Footer, FooterTab, Button, Icon, Text } from 'native-base';
+import { NativeRouter, Route, Link } from 'react-router-native';
+import { View } from 'react-native';
+
+export default class AppFooter extends Component {
+  render() {
+    return (
+        <Footer>
+          <FooterTab>
+            <Button>
+              <Link to={'/'}>
+              <Icon name="apps" />
+              </Link>
+              <Text uppercase={false}>Dashboard</Text>
+            </Button>
+          </FooterTab>
+          <FooterTab>
+            <Button>
+              <Link to={'/notify'}>
+              <Icon active name="chatboxes" />
+              </Link>
+              <Text uppercase={false}>Notifications</Text>
+            </Button>
+          </FooterTab>
+          <FooterTab>
+            <Button>
+              <Link to={'/shifts'}>
+              <Icon name="calendar" />
+              </Link>
+              <Text uppercase={false}>Calendar</Text>
+            </Button>
+          </FooterTab>
+          <FooterTab>
+            <Button>
+            <Link to={'/settings'}>
+            <Icon name="cog" />
+            </Link>
+            <Text uppercase={false}>Settings</Text>
+            </Button>
+          </FooterTab>
+        </Footer>
+    );
+  }
+}
diff --git a/app/containers/Dashboard.js b/app/containers/Dashboard.js
@@ -0,0 +1,30 @@
+import React, { Component } from 'react';
+import { Button, Icon, Title, Right, Left, Container, Header, Content, Tab, Tabs, Body } from 'native-base';
+import AppFooter from './AppFooter';
+
+import { View, Dimensions, Text } from 'react-native';
+
+import { Link } from 'react-router-native';
+
+export default class Dashboard extends Component {
+  render() {
+    return (
+      <Container>
+      <Header>
+          <Button>
+            <Link to={'/'}>
+              <Icon name='arrow-back' />
+            </Link>
+          </Button>
+          <Left />
+          <Body style={{flexDirection: 'row'}}>
+          <Title>Dashboard</Title>
+          </Body>
+        </Header>
+        <Content>
+        </Content>
+        <AppFooter />
+      </Container>
+    );
+  }
+}
diff --git a/app/containers/Notifications.js b/app/containers/Notifications.js
@@ -0,0 +1,30 @@
+import React, { Component } from 'react';
+import { Button, Icon, Title, Right, Left, Container, Header, Content, Tab, Tabs, Body } from 'native-base';
+import AppFooter from './AppFooter';
+
+import { View, Dimensions, Text } from 'react-native';
+
+import { Link } from 'react-router-native';
+
+export default class Notifications extends Component {
+  render() {
+    return (
+      <Container>
+      <Header>
+          <Button>
+            <Link to={'/'}>
+              <Icon name='arrow-back' />
+            </Link>
+          </Button>
+          <Left />
+          <Body style={{flexDirection: 'row'}}>
+          <Title>Notifications</Title>
+          </Body>
+        </Header>
+        <Content>
+        </Content>
+        <AppFooter />
+      </Container>
+    );
+  }
+}
diff --git a/app/containers/SettingsTabs.js b/app/containers/SettingsTabs.js
@@ -0,0 +1,40 @@
+import React, { Component } from 'react';
+import { Button, Icon, Title, Right, Left, Container, Header, Content, Tab, Tabs, Body } from 'native-base';
+import TeamSettings from '../settings/TeamSettings';
+import UserSettings from '../settings/UserSettings';
+import AppFooter from './AppFooter';
+
+import { View, Dimensions, Text } from 'react-native';
+
+import { Link } from 'react-router-native';
+
+export default class SettingsTabs extends Component {
+  render() {
+    return (
+      <Container>
+      <Header>
+        <Button iconleft primary>
+          <Link to={'/'}>
+            <Icon name='arrow-back' />
+          </Link>
+        </Button>
+        <Left />
+        <Body style={{flexDirection: 'row'}}>
+        <Title>Settings</Title>
+        </Body>
+      </Header>
+      <Content>
+        <Tabs>
+          <Tab heading="User">
+            <UserSettings />
+          </Tab>
+          <Tab heading="Team">
+            <TeamSettings />
+          </Tab>
+        </Tabs>
+        </Content>
+        <AppFooter />
+      </Container>
+    );
+  }
+}
diff --git a/app/containers/UpcomingShifts.js b/app/containers/UpcomingShifts.js
@@ -1,13 +1,18 @@
 // @flow
 
 import React, { Component } from 'react';
+import { Text, StyleSheet } from 'react-native';
 import { Agenda } from 'react-native-calendars';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import moment from 'moment';
+import AppFooter from './AppFooter';
 
 import { getAllShifts } from '../redux/actions/shifts';
 import { renderItem, renderEmptyDate, rowHasChanged } from '../components/AgendaItems';
+import { Container } from 'native-base';
+
+import { Link } from 'react-router-native';
 
 type Props = {
   getAllShifts: () => void,
@@ -25,11 +30,12 @@ class UpcomingShifts extends Component<Props> {
       .format('YYYY-MM-DD');
 
     return (
+      <Container>
       <Agenda
         items={{
-          '2019-10-13': [{ text: 'Anesu, Aman', time: '3 - 5PM' }],
-          '2019-10-12': [{ text: 'Anesu, Rikki', time: '11AM - 2PM' }],
-          '2019-10-10': [
+          '2019-11-13': [{ text: 'Anesu, Aman', time: '3 - 5PM' }],
+          '2019-11-13': [{ text: 'Anesu, Rikki', time: '11AM - 2PM' }],
+          '2019-11-13': [
             { text: 'Anesu, Vinit', time: '12 - 5PM' },
             { text: 'Anesu, Gouttham', time: '1AM - 8AM' },
           ],
@@ -43,6 +49,8 @@ class UpcomingShifts extends Component<Props> {
         pastScrollRange={3}
         futureScrollRange={3}
       />
+      <AppFooter />
+      </Container>
     );
   }
 }

diff --git a/app/settings/EditTeamSettings.js b/app/settings/EditTeamSettings.js
@@ -0,0 +1,85 @@
+// @flow
+
+import React, { Component } from 'react';
+import { Agenda } from 'react-native-calendars';
+import { connect } from 'react-redux';
+import { StyleSheet, View } from 'react-native';
+import { bindActionCreators } from 'redux';
+import moment from 'moment';
+
+import { getAllShifts } from '../redux/actions/shifts';
+import { renderItem, renderEmptyDate, rowHasChanged } from '../components/AgendaItems';
+import AppFooter from '../containers/AppFooter';
+
+import { Toast, Button, Icon, Body, Left, Right, Title, Text, Container, Header, Content, Form, Item, Input, Label } from 'native-base';
+
+import { Link } from 'react-router-native';
+
+type Props = {
+  getAllShifts: () => void,
+};
+
+const styles = StyleSheet.create({
+
+});
+
+
+class EditTeamSettings extends Component<Props> {
+  componentWillMount() {
+    this.props.getAllShifts();
+  }
+
+  render() {
+
+    return (
+          <Container>
+          <Header>
+          <Button iconleft primary>
+          <Link to={'/settings'}>
+          <Icon name='arrow-back' />
+          </Link>
+          </Button>
+          <Left />
+          <Body style={{flexDirection: 'row'}}>
+          <Title>Team Settings</Title>
+          </Body>
+          </Header>
+            <Content>
+              <Form style={{margin: 25}}>
+                <Item floatingLabel>
+                  <Label>Team Name</Label>
+                  <Input />
+                </Item>
+                <Item floatingLabel last>
+                  <Label>Tent Type</Label>
+                  <Input />
+                </Item>
+              </Form>
+              <View style={styles.content}>
+              <Button primary block style= {{marginTop: 40, margin: 75}}>
+              <Text> Change Team Settings </Text>
+              </Button>
+              </View>
+            </Content>
+            <AppFooter />
+          </Container>
+    );
+  }
+}
+
+const mapStateToProps = state => ({
+  shifts: state.shifts,
+});
+
+const mapDispatchToProps = dispatch =>
+  bindActionCreators(
+    {
+      getAllShifts,
+    },
+    dispatch,
+  );
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps,
+)(EditTeamSettings);
diff --git a/app/settings/EditUserSettings.js b/app/settings/EditUserSettings.js
@@ -0,0 +1,84 @@
+// @flow
+
+import React, { Component } from 'react';
+import { Agenda } from 'react-native-calendars';
+import { StyleSheet, View } from 'react-native';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import moment from 'moment';
+
+import { getAllShifts } from '../redux/actions/shifts';
+import { renderItem, renderEmptyDate, rowHasChanged } from '../components/AgendaItems';
+import AppFooter from '../containers/AppFooter';
+
+import { Toast, Button, Icon, Body, Left, Right, Title, Text, Container, Header, Content, Form, Item, Input, Label } from 'native-base';
+
+import { Link } from 'react-router-native';
+
+type Props = {
+  getAllShifts: () => void,
+};
+
+const styles = StyleSheet.create({
+
+});
+
+class EditUserSettings extends Component<Props> {
+  componentWillMount() {
+    this.props.getAllShifts();
+  }
+
+  render() {
+
+    return (
+          <Container>
+          <Header>
+          <Button iconleft primary>
+          <Link to={'/settings'}>
+          <Icon name='arrow-back' />
+          </Link>
+          </Button>
+          <Left />
+          <Body style={{flexDirection: 'row'}}>
+          <Title>User Settings</Title>
+          </Body>
+          </Header>
+            <Content>
+              <Form style={{margin: 25}}>
+                <Item floatingLabel>
+                  <Label>Name</Label>
+                  <Input />
+                </Item>
+                <Item floatingLabel last>
+                  <Label>Phone Number</Label>
+                  <Input />
+                </Item>
+              </Form>
+              <View style={styles.content}>
+              <Button primary block style= {{marginTop: 40, margin: 75}}>
+              <Text> Change User Settings </Text>
+              </Button>
+              </View>
+            </Content>
+            <AppFooter />
+          </Container>
+    );
+  }
+}
+
+const mapStateToProps = state => ({
+  shifts: state.shifts,
+});
+
+const mapDispatchToProps = dispatch =>
+  bindActionCreators(
+    {
+      getAllShifts,
+    },
+    dispatch,
+  );
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps,
+)(EditUserSettings);