From b8167487f9b069262459efd81b8860ddf615df13 Mon Sep 17 00:00:00 2001
From: Shravya Ramesh <shravs1208@gmail.com>
Date: Thu, 20 May 2021 14:00:28 -0700
Subject: Change screen name

---
 src/routes/main/MainStackNavigator.tsx     |   2 +-
 src/routes/main/MainStackScreen.tsx        |   6 +-
 src/screens/moments/TagSelection.tsx       | 177 ---------------------------
 src/screens/moments/TagSelectionScreen.tsx | 185 +++++++++++++++++++++++++++++
 src/screens/moments/index.ts               |   2 +-
 src/screens/profile/CaptionScreen.tsx      |   8 +-
 6 files changed, 193 insertions(+), 187 deletions(-)
 delete mode 100644 src/screens/moments/TagSelection.tsx
 create mode 100644 src/screens/moments/TagSelectionScreen.tsx

(limited to 'src')

diff --git a/src/routes/main/MainStackNavigator.tsx b/src/routes/main/MainStackNavigator.tsx
index 67be9e46..a8da3030 100644
--- a/src/routes/main/MainStackNavigator.tsx
+++ b/src/routes/main/MainStackNavigator.tsx
@@ -101,7 +101,7 @@ export type MainStackParams = {
   ChatList: undefined;
   Chat: undefined;
   NewChatModal: undefined;
-  TagSelection: {
+  TagSelectionScreen: {
     selectedUsers: ProfilePreviewType[];
   };
 };
diff --git a/src/routes/main/MainStackScreen.tsx b/src/routes/main/MainStackScreen.tsx
index d18d11c6..61491641 100644
--- a/src/routes/main/MainStackScreen.tsx
+++ b/src/routes/main/MainStackScreen.tsx
@@ -32,7 +32,7 @@ import {
   SuggestedPeopleScreen,
   SuggestedPeopleUploadPictureScreen,
   SuggestedPeopleWelcomeScreen,
-  TagSelection,
+  TagSelectionScreen,
 } from '../../screens';
 import MutualBadgeHolders from '../../screens/suggestedPeople/MutualBadgeHolders';
 import {ScreenType} from '../../types';
@@ -312,8 +312,8 @@ const MainStackScreen: React.FC<MainStackProps> = ({route}) => {
           options={{headerShown: false, ...newChatModalStyle}}
         />
         <MainStack.Screen
-          name="TagSelection"
-          component={TagSelection}
+          name="TagSelectionScreen"
+          component={TagSelectionScreen}
           options={{
             ...headerBarOptions('black', ''),
           }}
diff --git a/src/screens/moments/TagSelection.tsx b/src/screens/moments/TagSelection.tsx
deleted file mode 100644
index 83b0551a..00000000
--- a/src/screens/moments/TagSelection.tsx
+++ /dev/null
@@ -1,177 +0,0 @@
-import {useNavigation} from '@react-navigation/core';
-import {RouteProp} from '@react-navigation/native';
-import React, {useEffect, useState} from 'react';
-import {
-  SafeAreaView,
-  StyleSheet,
-  Text,
-  TouchableOpacity,
-  View,
-} from 'react-native';
-import {FlatList} from 'react-native-gesture-handler';
-import {MainStackParams} from '../../routes';
-import BackIcon from '../../assets/icons/back-arrow.svg';
-import {SearchBar, TaggUserSelectionCell} from '../../components';
-import {SEARCH_ENDPOINT_MESSAGES} from '../../constants';
-import {loadSearchResults} from '../../services';
-import {ProfilePreviewType} from '../../types';
-import {
-  loadTaggUserSuggestions,
-  normalize,
-  SCREEN_HEIGHT,
-  SCREEN_WIDTH,
-} from '../../utils';
-
-type TagSelectionRouteProps = RouteProp<MainStackParams, 'TagSelection'>;
-interface TagSelectionProps {
-  route: TagSelectionRouteProps;
-}
-
-const TagSelection: React.FC<TagSelectionProps> = ({route}) => {
-  const navigation = useNavigation();
-  const [users, setUsers] = useState<ProfilePreviewType[]>([]);
-  const [selectedUsers, setSelectedUsers] = useState<ProfilePreviewType[]>(
-    route.params.selectedUsers,
-  );
-  const [searching, setSearching] = useState(false);
-  const [query, setQuery] = useState<string>('');
-  const [label, setLabel] = useState<string>('Recent');
-
-  useEffect(() => {
-    navigation.setOptions({
-      headerLeft: () => (
-        <TouchableOpacity
-          onPress={() => {
-            if (selectedUsers.length > 0) {
-              navigation.setParams({selectedUsers: selectedUsers});
-            }
-            navigation.goBack();
-          }}>
-          <BackIcon
-            height={normalize(18)}
-            width={normalize(18)}
-            color={'black'}
-            style={styles.backButton}
-          />
-        </TouchableOpacity>
-      ),
-    });
-  });
-
-  /*
-   *
-   */
-  const loadUsers = async () => {
-    const data: ProfilePreviewType[] = await loadTaggUserSuggestions();
-    const filteredData: ProfilePreviewType[] = data.filter((user) => {
-      const index = selectedUsers.findIndex((s) => s.id === user.id);
-      return index === -1;
-    });
-    setUsers([...filteredData, ...selectedUsers]);
-  };
-
-  /*
-   *
-   */
-  const getQuerySuggested = async () => {
-    if (query.length > 0) {
-      const searchResults = await loadSearchResults(
-        `${SEARCH_ENDPOINT_MESSAGES}?query=${query}`,
-      );
-      setUsers(searchResults?.users);
-    } else {
-      setUsers([]);
-    }
-  };
-
-  /*
-   *
-   */
-  useEffect(() => {
-    loadUsers();
-  }, []);
-
-  /*
-   *
-   */
-  useEffect(() => {
-    if (query.length === 0) {
-      setLabel('Recent');
-      loadUsers();
-    }
-
-    if (!searching) {
-      return;
-    }
-
-    if (query.length < 3) {
-      return;
-    }
-    setLabel('');
-    getQuerySuggested();
-  }, [query]);
-
-  return (
-    <SafeAreaView style={styles.safeAreaView}>
-      <View style={styles.searchBarContainer}>
-        <SearchBar
-          onChangeText={setQuery}
-          onFocus={() => {
-            setSearching(true);
-          }}
-          value={query}
-        />
-      </View>
-      <Text style={styles.title}>{label}</Text>
-      {users && (
-        <FlatList
-          data={users}
-          keyExtractor={(item) => item.id}
-          renderItem={(item) => (
-            <TaggUserSelectionCell
-              item={item.item}
-              selectedUsers={selectedUsers}
-              setSelectedUsers={setSelectedUsers}
-            />
-          )}
-        />
-      )}
-    </SafeAreaView>
-  );
-};
-
-export default TagSelection;
-
-const styles = StyleSheet.create({
-  safeAreaView: {
-    backgroundColor: 'white',
-    height: SCREEN_HEIGHT,
-  },
-  backButton: {
-    marginLeft: 30,
-    marginTop: 20,
-  },
-  searchBarContainer: {
-    width: SCREEN_WIDTH * 0.9,
-    alignSelf: 'flex-end',
-    marginTop: 10,
-  },
-  searchContainer: {
-    alignSelf: 'center',
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    width: '100%',
-    height: normalize(42),
-    alignItems: 'center',
-    marginBottom: '3%',
-    marginHorizontal: 10,
-  },
-  title: {
-    fontWeight: '700',
-    fontSize: normalize(17),
-    lineHeight: normalize(20.29),
-    marginHorizontal: '7%',
-    marginTop: '4%',
-    marginBottom: '2%',
-  },
-});
diff --git a/src/screens/moments/TagSelectionScreen.tsx b/src/screens/moments/TagSelectionScreen.tsx
new file mode 100644
index 00000000..6920c75c
--- /dev/null
+++ b/src/screens/moments/TagSelectionScreen.tsx
@@ -0,0 +1,185 @@
+import {useNavigation} from '@react-navigation/core';
+import {RouteProp} from '@react-navigation/native';
+import React, {useEffect, useState} from 'react';
+import {
+  SafeAreaView,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import {FlatList} from 'react-native-gesture-handler';
+import {MainStackParams} from '../../routes';
+import BackIcon from '../../assets/icons/back-arrow.svg';
+import {SearchBar, TaggUserSelectionCell} from '../../components';
+import {SEARCH_ENDPOINT_MESSAGES} from '../../constants';
+import {loadSearchResults} from '../../services';
+import {ProfilePreviewType} from '../../types';
+import {
+  loadTaggUserSuggestions,
+  normalize,
+  SCREEN_HEIGHT,
+  SCREEN_WIDTH,
+} from '../../utils';
+
+type TagSelectionScreenRouteProps = RouteProp<
+  MainStackParams,
+  'TagSelectionScreen'
+>;
+interface TagSelectionScreenProps {
+  route: TagSelectionScreenRouteProps;
+}
+
+const TagSelectionScreen: React.FC<TagSelectionScreenProps> = ({route}) => {
+  const navigation = useNavigation();
+  const [users, setUsers] = useState<ProfilePreviewType[]>([]);
+  const [selectedUsers, setSelectedUsers] = useState<ProfilePreviewType[]>(
+    route.params.selectedUsers,
+  );
+  const [searching, setSearching] = useState(false);
+  const [query, setQuery] = useState<string>('');
+  const [label, setLabel] = useState<string>('Recent');
+
+  /*
+   *
+   */
+  useEffect(() => {
+    navigation.setOptions({
+      headerLeft: () => (
+        <TouchableOpacity
+          onPress={() => {
+            if (selectedUsers.length > 0) {
+              navigation.setParams({selectedUsers: selectedUsers});
+              navigation.navigate('CaptionScreen');
+            } else {
+              navigation.goBack();
+            }
+          }}>
+          <BackIcon
+            height={normalize(18)}
+            width={normalize(18)}
+            color={'black'}
+            style={styles.backButton}
+          />
+        </TouchableOpacity>
+      ),
+    });
+  });
+
+  /*
+   *
+   */
+  const loadUsers = async () => {
+    const data: ProfilePreviewType[] = await loadTaggUserSuggestions();
+    const filteredData: ProfilePreviewType[] = data.filter((user) => {
+      const index = selectedUsers.findIndex((s) => s.id === user.id);
+      return index === -1;
+    });
+    setUsers([...filteredData, ...selectedUsers]);
+  };
+
+  /*
+   *
+   */
+  const getQuerySuggested = async () => {
+    if (query.length > 0) {
+      const searchResults = await loadSearchResults(
+        `${SEARCH_ENDPOINT_MESSAGES}?query=${query}`,
+      );
+      setUsers(searchResults?.users);
+    } else {
+      setUsers([]);
+    }
+  };
+
+  /*
+   *
+   */
+  useEffect(() => {
+    loadUsers();
+  }, []);
+
+  /*
+   *
+   */
+  useEffect(() => {
+    if (query.length === 0) {
+      setLabel('Recent');
+      loadUsers();
+    }
+
+    if (!searching) {
+      return;
+    }
+
+    if (query.length < 3) {
+      return;
+    }
+    setLabel('');
+    getQuerySuggested();
+  }, [query]);
+
+  return (
+    <SafeAreaView style={styles.safeAreaView}>
+      <View style={styles.searchBarContainer}>
+        <SearchBar
+          onChangeText={setQuery}
+          onFocus={() => {
+            setSearching(true);
+          }}
+          value={query}
+        />
+      </View>
+      <Text style={styles.title}>{label}</Text>
+      {users && (
+        <FlatList
+          data={users}
+          keyExtractor={(item) => item.id}
+          renderItem={(item) => (
+            <TaggUserSelectionCell
+              item={item.item}
+              selectedUsers={selectedUsers}
+              setSelectedUsers={setSelectedUsers}
+            />
+          )}
+        />
+      )}
+    </SafeAreaView>
+  );
+};
+
+export default TagSelectionScreen;
+
+const styles = StyleSheet.create({
+  safeAreaView: {
+    backgroundColor: 'white',
+    height: SCREEN_HEIGHT,
+  },
+  backButton: {
+    marginLeft: 30,
+    marginTop: 20,
+  },
+  searchBarContainer: {
+    width: SCREEN_WIDTH * 0.9,
+    alignSelf: 'flex-end',
+    marginTop: 10,
+  },
+  searchContainer: {
+    alignSelf: 'center',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    width: '100%',
+    height: normalize(42),
+    alignItems: 'center',
+    marginBottom: '3%',
+    marginHorizontal: 10,
+  },
+  title: {
+    fontWeight: '700',
+    fontSize: normalize(17),
+    lineHeight: normalize(20.29),
+    marginHorizontal: '7%',
+    marginTop: '4%',
+    marginBottom: '2%',
+  },
+});
diff --git a/src/screens/moments/index.ts b/src/screens/moments/index.ts
index f2f4cbc5..3cdd3128 100644
--- a/src/screens/moments/index.ts
+++ b/src/screens/moments/index.ts
@@ -1 +1 @@
-export {default as TagSelection} from './TagSelection';
+export {default as TagSelectionScreen} from './TagSelectionScreen';
diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx
index bc7c9ed0..4fa81f8c 100644
--- a/src/screens/profile/CaptionScreen.tsx
+++ b/src/screens/profile/CaptionScreen.tsx
@@ -126,17 +126,15 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
               onChange={setCaption}
               partTypes={mentionPartTypes('blue')}
             />
+            {/* TODO: Add tag friends component */}
             <TouchableOpacity
               style={{width: SCREEN_WIDTH}}
               onPress={() =>
-                navigation.navigate('TagSelection', {
+                navigation.navigate('TagSelectionScreen', {
                   selectedUsers: taggedUsers,
                 })
               }>
-              {/* TODO: Add tag friends component */}
-              <Text style={{color: 'white', fontSize: normalize(14)}}>
-                Tag Friends
-              </Text>
+              <Text style={styles.tagFriendsTitle}>Tag Friends</Text>
             </TouchableOpacity>
             {/* TODO: Display tagged friends component */}
           </View>
-- 
cgit v1.2.3-70-g09d2