feat: initiial settings page set up

hopetambala · Feb 27, 2021 · ff166fe · ff166fe
1 parent 54d1d7b
commit ff166fe
Show file tree

Hide file tree

Showing 3 changed files with 184 additions and 15 deletions.
diff --git a/components/Header/index.js b/components/Header/index.js
@@ -13,7 +13,7 @@ import I18n from '../../modules/i18n';
 import countService from '../../services/parse/calculate';
 import styles from './index.styles';
 
-const Header = ({ logOut }) => {
+const Header = ({ logOut, view, setView, setPrevView }) => {
   const { header, headerText, headerIcon } = styles;
 
   const [drawerOpen, setDrawerOpen] = useState(false);
@@ -104,11 +104,14 @@ const Header = ({ logOut }) => {
         setSubmission(false);
       });
     });
-    // .catch(() => {
-    //   setSubmission(false);
-    // });
   };
 
+  const navToSettings = () => {
+    setDrawerOpen(false);
+    setPrevView(view)
+    setView('Settings');
+  }
+
   return (
     <View style={styles.container}>
       <View style={header}>
@@ -120,14 +123,12 @@ const Header = ({ logOut }) => {
           />
         </View>
         <View style={headerIcon}>
-          {logOut && (
-            <IconButton
-              icon="logout"
-              color={headerIcon.color}
-              size={30}
-              onPress={logOut}
-            />
-          )}
+          <IconButton
+            icon="settings"
+            color={headerIcon.color}
+            size={30}
+            onPress={navToSettings}
+          />
         </View>
       </View>
       {drawerOpen === true
@@ -146,8 +147,8 @@ const Header = ({ logOut }) => {
                 {I18n.t('header.submitOffline')}
               </Button>
             ) : (
-              <Button disabled>{I18n.t('header.submitOffline')}</Button>
-            )}
+                <Button disabled>{I18n.t('header.submitOffline')}</Button>
+              )}
             {submission === false && (
               <View>
                 <Text style={styles.calculationText}>{I18n.t('header.failedAttempt')}</Text>
@@ -171,6 +172,7 @@ const Header = ({ logOut }) => {
                 <Button onPress={() => setSubmission(null)}>{I18n.t('header.ok')}</Button>
               </View>
             )}
+            <Button onPress={navToSettings}>Settings Page</Button>
           </View>
         )}
       <IconButton

diff --git a/domains/DataCollection/index.js b/domains/DataCollection/index.js
@@ -2,7 +2,7 @@
 import React, { useEffect, useState } from 'react';
 import {
   KeyboardAvoidingView, Platform,
-  ScrollView, Text, View
+  ScrollView, Settings, Text, View
 } from 'react-native';
 import {
   Button, Card
@@ -15,6 +15,7 @@ import NewRecordSVG from '../../assets/icons/New-Record-icon.svg';
 import FindResidents from '../../components/FindResidents';
 import Header from '../../components/Header';
 import MapView from '../../components/MapView';
+import SettingsView from '../Settings';
 import { getData } from '../../modules/async-storage';
 import { customFormsQuery } from '../../modules/cached-resources';
 import I18n from '../../modules/i18n';
@@ -35,6 +36,7 @@ const puenteForms = [
 const DataCollection = ({ navigation }) => {
   const [scrollViewScroll, setScrollViewScroll] = useState();
   const [view, setView] = useState('Root');
+  const [prevView, setPrevView] = useState('Root')
   const [selectedForm, setSelectedForm] = useState('id');
   const [selectedAsset, setSelectedAsset] = useState(null);
 
@@ -134,6 +136,9 @@ const DataCollection = ({ navigation }) => {
     >
       <Header
         logOut={logOut}
+        view={view}
+        setView={setView}
+        setPrevView={setPrevView}
       />
       <KeyboardAvoidingView
         enabled
@@ -249,6 +254,13 @@ const DataCollection = ({ navigation }) => {
                 />
               </View>
             )}
+          {view === 'Settings' && (
+            <SettingsView
+              prevView={prevView}
+              setView={setView}
+              logOut={logOut}
+            />
+          )}
         </ScrollView>
       </KeyboardAvoidingView>
     </View>

diff --git a/domains/Settings/index.js b/domains/Settings/index.js
@@ -0,0 +1,155 @@
+import React, { useState } from 'react';
+import { Keyboard, TouchableWithoutFeedback, View, StyleSheet } from 'react-native';
+import { Button, Headline, IconButton, Text } from 'react-native-paper';
+import { Header } from 'react-native/Libraries/NewAppScreen';
+import { theme } from '../../modules/theme'
+
+export default SettingsView = ({ setView, prevView, logOut }) => {
+
+  const [settingsView, setSettingsView] = useState('Settings')
+  return (
+    <View>
+      <View style={{ paddingTop: '7%' }}>
+        {settingsView === 'Settings' && (
+          <View>
+            <View style={{ flexDirection: 'row', marginLeft: 'auto', marginRight: 'auto' }}>
+              <View style={{ paddingRight: '5%' }}>
+                <Button mode="contained">Settings</Button>
+              </View>
+              <View style={{ paddingLeft: '5%' }}>
+                <Button onPress={() => setSettingsView('Support')}>Support</Button>
+              </View>
+            </View>
+            <View style={{ paddingLeft: '5%', paddingRight: '5%', paddingTop: 20 }}>
+              <Headline style={{ fontWeight: 'bold' }}>Account Settings</Headline>
+              <View
+                style={{
+                  borderBottomColor: '#D0D0D0',
+                  borderBottomWidth: 1,
+                  marginTop: 10,
+                  marginBottom: 10,
+                }}
+              />
+              <View style={{ flexDirection: 'row' }}>
+                <Text style={styles.text}>Name, Phone, Email</Text>
+                <IconButton
+                  icon='chevron-right'
+                  size='30'
+                  color={theme.colors.primary}
+                  style={{ marginLeft: 'auto', marginTop: -5, marginBottom: -10 }}
+                />
+              </View>
+              <View
+                style={{
+                  borderBottomColor: '#D0D0D0',
+                  borderBottomWidth: 1,
+                  marginTop: 10,
+                  marginBottom: 10,
+                }}
+              />
+              <View style={{flexDirection: 'row'}}>
+                <Text style={styles.text}>Change Password</Text>
+                <IconButton
+                  icon='chevron-right'
+                  size='30'
+                  color={theme.colors.primary}
+                  style={{ marginLeft: 'auto', marginTop: -5, marginBottom: -10 }}
+                />
+              </View>
+              <View
+                style={{
+                  borderBottomColor: '#D0D0D0',
+                  borderBottomWidth: 1,
+                  marginTop: 10,
+                  marginBottom: 10,
+                }}
+              />
+              <View style={{flexDirection: 'row'}}>
+                <Text style={styles.text}>Find Records</Text>
+                <IconButton
+                  icon='chevron-right'
+                  size='30'
+                  color={theme.colors.primary}
+                  style={{ marginLeft: 'auto', marginTop: -5, marginBottom: -10 }}
+                />
+              </View>
+              <View
+                style={{
+                  borderBottomColor: '#D0D0D0',
+                  borderBottomWidth: 1,
+                  marginTop: 10,
+                  marginBottom: 10,
+                }}
+              />
+              <View style={{flexDirection: 'row'}}>
+                <Text style={styles.text}>Language</Text>
+                <IconButton
+                  icon='chevron-right'
+                  size='30'
+                  color={theme.colors.primary}
+                  style={{ marginLeft: 'auto', marginTop: -5, marginBottom: -10 }}
+                />
+              </View>
+              <View
+                style={{
+                  borderBottomColor: '#D0D0D0',
+                  borderBottomWidth: 1,
+                  marginTop: 10,
+                  marginBottom: 10,
+                }}
+              />
+            </View>
+          </View>
+        )}
+        {settingsView === 'Support' && (
+          <View style={{ flexDirection: 'row', marginLeft: 'auto', marginRight: 'auto' }}>
+            <View style={{ paddingRight: '5%' }}>
+              <Button onPress={() => setSettingsView('Settings')}>Settings</Button>
+            </View>
+            <View style={{ paddingLeft: '5%' }}>
+              <Button mode="contained">Support</Button>
+            </View>
+
+          </View>
+        )}
+      </View>
+
+
+
+
+
+      <Button onPress={() => {
+        setView(prevView)
+      }}>Back</Button>
+      <Button onPress={logOut}>Logout</Button>
+    </View >
+  );
+}
+
+const styles = StyleSheet.create({
+  cardSmallStyle: {
+    height: 110,
+    width: 150,
+    marginHorizontal: 7,
+    marginVertical: 7,
+  },
+  svg: {
+    marginLeft: 'auto',
+    marginRight: 'auto',
+  },
+  cardContainer: {
+    alignItems: 'center',
+    marginHorizontal: 14,
+    marginVertical: 14,
+  },
+  textContainer: {
+    flexDirection: 'row'
+  },
+  text: {
+    flexShrink: 1,
+    // fontWeight: 'bold',
+    fontSize: 16,
+    color: '#555',
+    marginVertical: 7,
+  }
+});