Refactoring changes

1 files changed, 23 insertions, 135 deletions

diff --git a/src/screens/profile/SettingsScreen.tsx b/src/screens/profile/SettingsScreen.tsx
index f9d437d0..cb049a96 100644
--- a/src/screens/profile/SettingsScreen.tsx
+++ b/src/screens/profile/SettingsScreen.tsx
@@ -1,150 +1,50 @@
 import React from 'react';
 import {
-  Alert,
-  Image,
   SectionList,
   StatusBar,
   StyleSheet,
   Text,
   TouchableOpacity,
+  SafeAreaView,
   View,
 } from 'react-native';
-import {SafeAreaView} from 'react-native-safe-area-context';
-import {normalize, SCREEN_WIDTH} from '../../utils/layouts';
+import {useSelector} from 'react-redux';
+import {RootState} from 'src/store/rootReducer';
 import {Background} from '../../components';
 import {BackgroundGradientType} from '../../types';
-import {logout} from '../../store/actions';
-import {useDispatch, useSelector} from 'react-redux';
-import {useNavigation} from '@react-navigation/core';
-import {RootState} from 'src/store/rootReducer';
-import {ERROR_ATTEMPT_EDIT_SP} from '../../constants/strings';
-
-const DATA = [
-  {
-    title: 'ACCOUNT',
-    data: [
-      {
-        title: 'Suggested People Profile',
-        preimage: require('../../assets/images/tagg-logo.png'),
-        postimage: require('../../assets/images/settings/white-arrow.png'),
-      },
-      {
-        title: 'Privacy',
-        preimage: require('../../assets/images/settings/settings-white.png'),
-        postimage: require('../../assets/images/settings/white-arrow.png'),
-      },
-    ],
-  },
-  {
-    title: 'GENERAL',
-    data: [
-      {
-        title: 'Terms of use',
-        preimage: require('../../assets/images/settings/termsofuse.png'),
-        postimage: require('../../assets/images/settings/white-arrow.png'),
-      },
-      {
-        title: 'Privacy Policy',
-        preimage: require('../../assets/images/settings/privacypolicy.png'),
-        postimage: require('../../assets/images/settings/white-arrow.png'),
-      },
-    ],
-  },
-];
+import {normalize} from '../../utils/layouts';
+import SettingsCell from './SettingsCell';
+import {SETTINGS_DATA} from '../../constants/constants';
 
 const SettingsScreen: React.FC = () => {
-  const dispatch = useDispatch();
-  const navigation = useNavigation();
   const {suggested_people_linked} = useSelector(
     (state: RootState) => state.user.profile,
   );
-  const goToUpdateSPProfile = () => {
-    if (suggested_people_linked === 0) {
-      Alert.alert(ERROR_ATTEMPT_EDIT_SP);
-    } else {
-      // Sending undefined for updatedSelectedBadges to mark that there was no update yet
-      navigateTo('UpdateSPPicture', {
-        editing: true,
-      });
-    }
-  };
-
-  const navigateTo = (screen: string, options: object) => {
-    navigation.navigate(screen, options);
-  };
-
-  const getActions = (type: string) => {
-    switch (type) {
-      case 'Suggested People Profile':
-        goToUpdateSPProfile();
-        break;
-      case 'Privacy':
-        navigateTo('PrivacyScreen', {});
-        break;
-      case 'Terms of use':
-        //TODO:
-        break;
-      case 'Privacy Policy':
-        //TODO:
-        break;
-      default:
-        break;
-    }
-  };
-
-  const Item = ({
-    title,
-    preimage,
-    postimage,
-  }: {
-    title: string;
-    preimage: number;
-    postimage: number;
-  }) => (
-    <TouchableOpacity onPress={() => getActions(title)} style={styles.item}>
-      <Image
-        resizeMode={'cover'}
-        style={{width: SCREEN_WIDTH * 0.05, height: SCREEN_WIDTH * 0.05}}
-        source={preimage}
-      />
-      <View style={{marginLeft: 40}}>
-        <Text style={styles.title}>{title}</Text>
-      </View>
-      <Image
-        style={{width: 15, height: 15, position: 'absolute', right: 0}}
-        source={postimage}
-      />
-    </TouchableOpacity>
-  );
 
   return (
     <>
       <StatusBar barStyle="light-content" />
       <Background gradientType={BackgroundGradientType.Light}>
         <SafeAreaView>
-          <View style={{marginLeft: 28, marginRight: 43}}>
+          <View style={styles.container}>
             <SectionList
-              sections={DATA}
+              sections={SETTINGS_DATA.SettingsAndPrivacy}
               keyExtractor={(item, index) => item.title + index}
-              renderItem={({item: {title, preimage, postimage}}) => {
-                return <Item {...{title, preimage, postimage}} />;
-              }}
+              renderItem={({item: {title, preimage, postimage}}) => (
+                <SettingsCell
+                  {...{title, preimage, postimage, suggested_people_linked}}
+                />
+              )}
               renderSectionHeader={({section: {title}}) => (
-                <View style={{marginTop: 46}}>
-                  <Text style={styles.header}>{title}</Text>
+                <View style={styles.headerContainerStyles}>
+                  <Text style={styles.headerTextStyles}>{title}</Text>
                 </View>
               )}
               ListFooterComponent={() => (
                 <TouchableOpacity
-                  style={{marginTop: '20%', marginLeft: '12%'}}
-                  onPress={() => {
-                    navigation.reset({
-                      index: 0,
-                      routes: [{name: 'SuggestedPeople'}],
-                    });
-                    dispatch(logout());
-                  }}>
-                  <Text style={styles.logoutStyle}>Logout</Text>
+                  style={styles.logoutContainerStyles}
+                  onPress={() => {}}>
+                  <Text style={styles.logoutTextStyles}>Logout</Text>
                 </TouchableOpacity>
               )}
             />
@@ -156,28 +56,16 @@ const SettingsScreen: React.FC = () => {
 };
 
 const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  item: {
-    marginTop: 36,
-    flexDirection: 'row',
-    justifyContent: 'flex-start',
-    alignItems: 'center',
-  },
-  header: {
+  container: {marginHorizontal: '8%', marginTop: '8%'},
+  headerContainerStyles: {marginTop: '14%'},
+  headerTextStyles: {
     fontSize: normalize(18),
     fontWeight: '600',
     lineHeight: normalize(21.48),
     color: '#E9E9E9',
   },
-  title: {
-    fontSize: normalize(15),
-    fontWeight: '600',
-    lineHeight: normalize(17.9),
-    color: 'white',
-  },
-  logoutStyle: {
+  logoutContainerStyles: {marginTop: '20%', marginLeft: '12%'},
+  logoutTextStyles: {
     fontSize: normalize(20),
     fontWeight: '600',
     lineHeight: normalize(23.87),