Styling tag selection screen

1 files changed, 31 insertions, 17 deletions

diff --git a/src/screens/moments/TagSelection.tsx b/src/screens/moments/TagSelection.tsx
index d087591b..83b0551a 100644
--- a/src/screens/moments/TagSelection.tsx
+++ b/src/screens/moments/TagSelection.tsx
@@ -58,6 +58,9 @@ const TagSelection: React.FC<TagSelectionProps> = ({route}) => {
     });
   });
 
+  /*
+   *
+   */
   const loadUsers = async () => {
     const data: ProfilePreviewType[] = await loadTaggUserSuggestions();
     const filteredData: ProfilePreviewType[] = data.filter((user) => {
@@ -67,6 +70,9 @@ const TagSelection: React.FC<TagSelectionProps> = ({route}) => {
     setUsers([...filteredData, ...selectedUsers]);
   };
 
+  /*
+   *
+   */
   const getQuerySuggested = async () => {
     if (query.length > 0) {
       const searchResults = await loadSearchResults(
@@ -78,25 +84,19 @@ const TagSelection: React.FC<TagSelectionProps> = ({route}) => {
     }
   };
 
+  /*
+   *
+   */
   useEffect(() => {
     loadUsers();
   }, []);
 
-  const [searching, setSearching] = useState(false);
-  const [query, setQuery] = useState<string>('');
-  const handleFocus = () => {
-    setSearching(true);
-  };
-  const handleBlur = () => {
-    Keyboard.dismiss();
-  };
-  const handleCancel = () => {
-    setQuery('');
-    navigation.goBack();
-  };
-
+  /*
+   *
+   */
   useEffect(() => {
     if (query.length === 0) {
+      setLabel('Recent');
       loadUsers();
     }
 
@@ -107,13 +107,10 @@ const TagSelection: React.FC<TagSelectionProps> = ({route}) => {
     if (query.length < 3) {
       return;
     }
+    setLabel('');
     getQuerySuggested();
   }, [query]);
 
-  useEffect(() => {
-    console.log('selectedUsers: ', selectedUsers);
-  }, [selectedUsers, users]);
-
   return (
     <SafeAreaView style={styles.safeAreaView}>
       <View style={styles.searchBarContainer}>
@@ -125,6 +122,7 @@ const TagSelection: React.FC<TagSelectionProps> = ({route}) => {
           value={query}
         />
       </View>
+      <Text style={styles.title}>{label}</Text>
       {users && (
         <FlatList
           data={users}
@@ -145,6 +143,14 @@ const TagSelection: React.FC<TagSelectionProps> = ({route}) => {
 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',
@@ -160,4 +166,12 @@ const styles = StyleSheet.create({
     marginBottom: '3%',
     marginHorizontal: 10,
   },
+  title: {
+    fontWeight: '700',
+    fontSize: normalize(17),
+    lineHeight: normalize(20.29),
+    marginHorizontal: '7%',
+    marginTop: '4%',
+    marginBottom: '2%',
+  },
 });