Merge pull request #304 from TaggiD-Inc/tma-700-private-account-toggle

[TMA 700] : Private Account toggle + Settings Screen

1 files changed, 87 insertions, 0 deletions

diff --git a/src/screens/profile/SettingsScreen.tsx b/src/screens/profile/SettingsScreen.tsx
new file mode 100644
index 00000000..05e051b5
--- /dev/null
+++ b/src/screens/profile/SettingsScreen.tsx
@@ -0,0 +1,87 @@
+import React from 'react';
+import {
+  SafeAreaView,
+  SectionList,
+  StatusBar,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import {useDispatch, useSelector} from 'react-redux';
+import {logout} from '../../store/actions';
+import {RootState} from 'src/store/rootReducer';
+import {Background} from '../../components';
+import {SETTINGS_DATA} from '../../constants/constants';
+import {BackgroundGradientType} from '../../types';
+import {normalize, SCREEN_HEIGHT} from '../../utils/layouts';
+import SettingsCell from './SettingsCell';
+import {useNavigation} from '@react-navigation/core';
+
+const SettingsScreen: React.FC = () => {
+  const dispatch = useDispatch();
+  const navigation = useNavigation();
+  const {suggested_people_linked} = useSelector(
+    (state: RootState) => state.user.profile,
+  );
+
+  return (
+    <>
+      <StatusBar barStyle="light-content" />
+      <Background gradientType={BackgroundGradientType.Light}>
+        <SafeAreaView>
+          <View style={styles.container}>
+            <SectionList
+              stickySectionHeadersEnabled={false}
+              sections={SETTINGS_DATA.SettingsAndPrivacy}
+              keyExtractor={(item, index) => item.title + index}
+              renderItem={({item: {title, preimage, postimage}}) => (
+                <SettingsCell
+                  {...{title, preimage, postimage, suggested_people_linked}}
+                />
+              )}
+              renderSectionHeader={({section: {title}}) => (
+                <View style={styles.headerContainerStyles}>
+                  <Text style={styles.headerTextStyles}>{title}</Text>
+                </View>
+              )}
+              ListFooterComponent={() => (
+                <TouchableOpacity
+                  style={styles.logoutContainerStyles}
+                  onPress={() => {
+                    dispatch(logout());
+                    navigation.reset({
+                      index: 0,
+                      routes: [{name: 'SuggestedPeople'}],
+                    });
+                  }}>
+                  <Text style={styles.logoutTextStyles}>Logout</Text>
+                </TouchableOpacity>
+              )}
+            />
+          </View>
+        </SafeAreaView>
+      </Background>
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {height: SCREEN_HEIGHT, marginHorizontal: '8%', marginTop: '8%'},
+  headerContainerStyles: {marginTop: '14%'},
+  headerTextStyles: {
+    fontSize: normalize(18),
+    fontWeight: '600',
+    lineHeight: normalize(21.48),
+    color: '#E9E9E9',
+  },
+  logoutContainerStyles: {marginTop: '20%', marginLeft: '12%'},
+  logoutTextStyles: {
+    fontSize: normalize(20),
+    fontWeight: '600',
+    lineHeight: normalize(23.87),
+    color: 'white',
+  },
+});
+
+export default SettingsScreen;