From 594de4668248bac9b744e6882329183c95ac339c Mon Sep 17 00:00:00 2001
From: Leon Jiang <35908040+leonyjiang@users.noreply.github.com>
Date: Wed, 10 Mar 2021 18:15:26 -0500
Subject: Add utils, fix ordering of recent searches

---
 src/utils/users.ts | 102 +++++++++++++++++++++++++++++++++++++++--------------
 1 file changed, 75 insertions(+), 27 deletions(-)

(limited to 'src/utils')

diff --git a/src/utils/users.ts b/src/utils/users.ts
index 15107c99..3e0d9eef 100644
--- a/src/utils/users.ts
+++ b/src/utils/users.ts
@@ -166,55 +166,86 @@ export const defaultUserProfile = () => {
   return defaultImage;
 };
 
-export const addUserToRecentlyViewed = async (user: ProfilePreviewType) => {
-  const jsonValue = await AsyncStorage.getItem('@recently_searched_users');
-  let recentlySearchedList = jsonValue != null ? JSON.parse(jsonValue) : null;
-  if (recentlySearchedList) {
-    if (recentlySearchedList.length > 0) {
-      if (
-        recentlySearchedList.some(
-          (saved_user: ProfilePreviewType) => saved_user.id === user.id,
-        )
-      ) {
-        console.log('User already in recently searched.');
-      } else {
-        if (recentlySearchedList.length >= 10) {
-          recentlySearchedList.pop();
+/*
+ * AsyncStorage key for list of recently-searched users.
+ */
+const recentlySearchedUsersKey = '@recently_searched_users';
+
+/*
+ * Stores `user` in AsyncStorage as a recently-searched user.
+ */
+export const addUserToRecentlySearched = async (user: ProfilePreviewType) => {
+  let users: ProfilePreviewType[];
+  // retrieve and update recently-searched categories list
+  try {
+    const usersJSON = await AsyncStorage.getItem(recentlySearchedUsersKey);
+    if (usersJSON) {
+      users = JSON.parse(usersJSON);
+      // if category already exists, move it to the end
+      for (let i = 0; i < users.length; i++) {
+        // TODO: speed up comparison by adding some id field to category
+        if (users[i].id === user.id) {
+          users.splice(i, 1);
+          break;
         }
-        recentlySearchedList.unshift(user);
       }
+      users.push(user);
+    } else {
+      users = [user];
+    }
+    // store updated list of recently-searched categories
+    try {
+      AsyncStorage.setItem(recentlySearchedUsersKey, JSON.stringify(users));
+    } catch (e) {
+      console.log(e);
     }
-  } else {
-    recentlySearchedList = [user];
+  } catch (e) {
+    console.log(e);
   }
+};
+
+/*
+ * Retrieves and returns user's recently-searched categories from AsyncStorage.
+ */
+export const getRecentlySearchedUsers = async (): Promise<
+  ProfilePreviewType[]
+> => {
   try {
-    let recentlySearchedListString = JSON.stringify(recentlySearchedList);
-    await AsyncStorage.setItem(
-      '@recently_searched_users',
-      recentlySearchedListString,
-    );
+    const usersJSON = await AsyncStorage.getItem(recentlySearchedUsersKey);
+    if (usersJSON) return JSON.parse(usersJSON);
   } catch (e) {
     console.log(e);
   }
+  return [];
 };
 
 /*
- * Stores `category` in AsyncStorage as a recently searched category.
+ * AsyncStorage key for list of recently-searched categories.
+ */
+const recentlySearchedCategoriesKey = '@recently_searched_categories';
+
+/*
+ * Stores `category` in AsyncStorage as a recently-searched category.
  */
 export const addCategoryToRecentlySearched = async (
   category: CategoryPreviewType,
 ) => {
-  const recentlySearchedCategoriesKey = '@recently_searched_categories';
   let categories: CategoryPreviewType[];
-  // retrieve recently-searched categories and set new list
+  // retrieve and update recently-searched categories list
   try {
     const categoriesJSON = await AsyncStorage.getItem(
       recentlySearchedCategoriesKey,
     );
     if (categoriesJSON) {
       categories = JSON.parse(categoriesJSON);
-      // TODO: make this more efficient by comparing shorter key
-      if (categories.find((c) => c.name === category.name)) return;
+      // if category already exists, move it to the end
+      for (let i = 0; i < categories.length; i++) {
+        // TODO: speed up comparison by adding some id field to category
+        if (categories[i].name === category.name) {
+          categories.splice(i, 1);
+          break;
+        }
+      }
       categories.push(category);
     } else {
       categories = [category];
@@ -232,3 +263,20 @@ export const addCategoryToRecentlySearched = async (
     console.log(e);
   }
 };
+
+/*
+ * Retrieves and returns user's recently-searched categories from AsyncStorage.
+ */
+export const getRecentlySearchedCategories = async (): Promise<
+  CategoryPreviewType[]
+> => {
+  try {
+    const categoriesJSON = await AsyncStorage.getItem(
+      '@recently_searched_categories',
+    );
+    if (categoriesJSON) return JSON.parse(categoriesJSON);
+  } catch (e) {
+    console.log(e);
+  }
+  return [];
+};
-- 
cgit v1.2.3-70-g09d2


From 603b6e1e7afe464538aa1ab1b6ec9f892266d01b Mon Sep 17 00:00:00 2001
From: Leon Jiang <35908040+leonyjiang@users.noreply.github.com>
Date: Wed, 10 Mar 2021 22:59:36 -0500
Subject: Refactor utils

---
 src/utils/index.ts  |   1 +
 src/utils/search.ts | 132 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/utils/users.ts  | 114 ---------------------------------------------
 3 files changed, 133 insertions(+), 114 deletions(-)
 create mode 100644 src/utils/search.ts

(limited to 'src/utils')

diff --git a/src/utils/index.ts b/src/utils/index.ts
index 82c94100..739e6fb8 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -3,3 +3,4 @@ export * from './moments';
 export * from './common';
 export * from './users';
 export * from './friends';
+export * from './search';
diff --git a/src/utils/search.ts b/src/utils/search.ts
new file mode 100644
index 00000000..4293ff25
--- /dev/null
+++ b/src/utils/search.ts
@@ -0,0 +1,132 @@
+import AsyncStorage from '@react-native-community/async-storage';
+
+import {BADGE_DATA} from '../constants/badges';
+import {ProfilePreviewType, CategoryPreviewType} from '../types';
+
+/*
+ * Gets all possible search suggestions.
+ */
+export const getSearchSuggestions = (): string[] => {
+  const suggestions: string[] = [];
+  for (const category of BADGE_DATA) {
+    for (const interest of category.data) {
+      suggestions.push(interest.badgeName);
+    }
+  }
+  return suggestions;
+};
+
+/*
+ * AsyncStorage key for list of recently-searched users.
+ */
+const recentlySearchedUsersKey = '@recently_searched_users';
+
+/*
+ * Stores `user` in AsyncStorage as a recently-searched user.
+ */
+export const addUserToRecentlySearched = async (user: ProfilePreviewType) => {
+  let users: ProfilePreviewType[];
+  // retrieve and update recently-searched categories list
+  try {
+    const usersJSON = await AsyncStorage.getItem(recentlySearchedUsersKey);
+    if (usersJSON) {
+      users = JSON.parse(usersJSON);
+      // if category already exists, move it to the end
+      for (let i = 0; i < users.length; i++) {
+        // TODO: speed up comparison by adding some id field to category
+        if (users[i].id === user.id) {
+          users.splice(i, 1);
+          break;
+        }
+      }
+      users.push(user);
+    } else {
+      users = [user];
+    }
+    // store updated list of recently-searched categories
+    try {
+      AsyncStorage.setItem(recentlySearchedUsersKey, JSON.stringify(users));
+    } catch (e) {
+      console.log(e);
+    }
+  } catch (e) {
+    console.log(e);
+  }
+};
+
+/*
+ * Retrieves and returns user's recently-searched categories from AsyncStorage.
+ */
+export const getRecentlySearchedUsers = async (): Promise<
+  ProfilePreviewType[]
+> => {
+  try {
+    const usersJSON = await AsyncStorage.getItem(recentlySearchedUsersKey);
+    if (usersJSON) return JSON.parse(usersJSON);
+  } catch (e) {
+    console.log(e);
+  }
+  return [];
+};
+
+/*
+ * AsyncStorage key for list of recently-searched categories.
+ */
+const recentlySearchedCategoriesKey = '@recently_searched_categories';
+
+/*
+ * Stores `category` in AsyncStorage as a recently-searched category.
+ */
+export const addCategoryToRecentlySearched = async (
+  category: CategoryPreviewType,
+) => {
+  let categories: CategoryPreviewType[];
+  // retrieve and update recently-searched categories list
+  try {
+    const categoriesJSON = await AsyncStorage.getItem(
+      recentlySearchedCategoriesKey,
+    );
+    if (categoriesJSON) {
+      categories = JSON.parse(categoriesJSON);
+      // if category already exists, move it to the end
+      for (let i = 0; i < categories.length; i++) {
+        // TODO: speed up comparison by adding some id field to category
+        if (categories[i].name === category.name) {
+          categories.splice(i, 1);
+          break;
+        }
+      }
+      categories.push(category);
+    } else {
+      categories = [category];
+    }
+    // store updated list of recently-searched categories
+    try {
+      AsyncStorage.setItem(
+        recentlySearchedCategoriesKey,
+        JSON.stringify(categories),
+      );
+    } catch (e) {
+      console.log(e);
+    }
+  } catch (e) {
+    console.log(e);
+  }
+};
+
+/*
+ * Retrieves and returns user's recently-searched categories from AsyncStorage.
+ */
+export const getRecentlySearchedCategories = async (): Promise<
+  CategoryPreviewType[]
+> => {
+  try {
+    const categoriesJSON = await AsyncStorage.getItem(
+      '@recently_searched_categories',
+    );
+    if (categoriesJSON) return JSON.parse(categoriesJSON);
+  } catch (e) {
+    console.log(e);
+  }
+  return [];
+};
diff --git a/src/utils/users.ts b/src/utils/users.ts
index 3e0d9eef..af4f3813 100644
--- a/src/utils/users.ts
+++ b/src/utils/users.ts
@@ -166,117 +166,3 @@ export const defaultUserProfile = () => {
   return defaultImage;
 };
 
-/*
- * AsyncStorage key for list of recently-searched users.
- */
-const recentlySearchedUsersKey = '@recently_searched_users';
-
-/*
- * Stores `user` in AsyncStorage as a recently-searched user.
- */
-export const addUserToRecentlySearched = async (user: ProfilePreviewType) => {
-  let users: ProfilePreviewType[];
-  // retrieve and update recently-searched categories list
-  try {
-    const usersJSON = await AsyncStorage.getItem(recentlySearchedUsersKey);
-    if (usersJSON) {
-      users = JSON.parse(usersJSON);
-      // if category already exists, move it to the end
-      for (let i = 0; i < users.length; i++) {
-        // TODO: speed up comparison by adding some id field to category
-        if (users[i].id === user.id) {
-          users.splice(i, 1);
-          break;
-        }
-      }
-      users.push(user);
-    } else {
-      users = [user];
-    }
-    // store updated list of recently-searched categories
-    try {
-      AsyncStorage.setItem(recentlySearchedUsersKey, JSON.stringify(users));
-    } catch (e) {
-      console.log(e);
-    }
-  } catch (e) {
-    console.log(e);
-  }
-};
-
-/*
- * Retrieves and returns user's recently-searched categories from AsyncStorage.
- */
-export const getRecentlySearchedUsers = async (): Promise<
-  ProfilePreviewType[]
-> => {
-  try {
-    const usersJSON = await AsyncStorage.getItem(recentlySearchedUsersKey);
-    if (usersJSON) return JSON.parse(usersJSON);
-  } catch (e) {
-    console.log(e);
-  }
-  return [];
-};
-
-/*
- * AsyncStorage key for list of recently-searched categories.
- */
-const recentlySearchedCategoriesKey = '@recently_searched_categories';
-
-/*
- * Stores `category` in AsyncStorage as a recently-searched category.
- */
-export const addCategoryToRecentlySearched = async (
-  category: CategoryPreviewType,
-) => {
-  let categories: CategoryPreviewType[];
-  // retrieve and update recently-searched categories list
-  try {
-    const categoriesJSON = await AsyncStorage.getItem(
-      recentlySearchedCategoriesKey,
-    );
-    if (categoriesJSON) {
-      categories = JSON.parse(categoriesJSON);
-      // if category already exists, move it to the end
-      for (let i = 0; i < categories.length; i++) {
-        // TODO: speed up comparison by adding some id field to category
-        if (categories[i].name === category.name) {
-          categories.splice(i, 1);
-          break;
-        }
-      }
-      categories.push(category);
-    } else {
-      categories = [category];
-    }
-    // store updated list of recently-searched categories
-    try {
-      AsyncStorage.setItem(
-        recentlySearchedCategoriesKey,
-        JSON.stringify(categories),
-      );
-    } catch (e) {
-      console.log(e);
-    }
-  } catch (e) {
-    console.log(e);
-  }
-};
-
-/*
- * Retrieves and returns user's recently-searched categories from AsyncStorage.
- */
-export const getRecentlySearchedCategories = async (): Promise<
-  CategoryPreviewType[]
-> => {
-  try {
-    const categoriesJSON = await AsyncStorage.getItem(
-      '@recently_searched_categories',
-    );
-    if (categoriesJSON) return JSON.parse(categoriesJSON);
-  } catch (e) {
-    console.log(e);
-  }
-  return [];
-};
-- 
cgit v1.2.3-70-g09d2


From b568f553c4ee2f0452f6bb7ab7b03c84d77c15ab Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@tagg.id>
Date: Thu, 11 Mar 2021 18:22:24 -0500
Subject: new discover users screen

---
 src/assets/images/shuffle-1.png                | Bin 0 -> 157612 bytes
 src/assets/images/shuffle-2.png                | Bin 0 -> 149495 bytes
 src/components/common/GradientBorderButton.tsx |  66 ++++++++++++++
 src/components/common/index.ts                 |   1 +
 src/components/search/SearchCategories.tsx     |  82 +++++++++--------
 src/screens/search/DiscoverUsers.tsx           | 117 ++++++++++++++++++++++---
 src/utils/common.ts                            |  21 +++++
 7 files changed, 233 insertions(+), 54 deletions(-)
 create mode 100644 src/assets/images/shuffle-1.png
 create mode 100644 src/assets/images/shuffle-2.png
 create mode 100644 src/components/common/GradientBorderButton.tsx

(limited to 'src/utils')

diff --git a/src/assets/images/shuffle-1.png b/src/assets/images/shuffle-1.png
new file mode 100644
index 00000000..d28ddc21
Binary files /dev/null and b/src/assets/images/shuffle-1.png differ
diff --git a/src/assets/images/shuffle-2.png b/src/assets/images/shuffle-2.png
new file mode 100644
index 00000000..a6a701b0
Binary files /dev/null and b/src/assets/images/shuffle-2.png differ
diff --git a/src/components/common/GradientBorderButton.tsx b/src/components/common/GradientBorderButton.tsx
new file mode 100644
index 00000000..0402c44b
--- /dev/null
+++ b/src/components/common/GradientBorderButton.tsx
@@ -0,0 +1,66 @@
+import MaskedView from '@react-native-community/masked-view';
+import React from 'react';
+import {StyleSheet, Text, View} from 'react-native';
+import {TouchableOpacity} from 'react-native-gesture-handler';
+import LinearGradient from 'react-native-linear-gradient';
+import {TAGG_LIGHT_BLUE_2, TAGG_PURPLE} from '../../constants';
+import {normalize} from '../../utils';
+
+interface GradientBorderButtonProps {
+  text: string;
+  darkStyle: boolean;
+  onPress: () => void;
+}
+
+const GradientBorderButton: React.FC<GradientBorderButtonProps> = ({
+  text,
+  darkStyle,
+  onPress,
+}) => {
+  const labelColor = darkStyle ? 'white' : '#828282';
+  const borderWidth = darkStyle ? 2 : 1;
+  return (
+    <TouchableOpacity style={styles.container} onPress={onPress}>
+      <MaskedView
+        maskElement={
+          <View
+            style={[styles.gradientContainer, styles.maskBorder, {borderWidth}]}
+          />
+        }>
+        <LinearGradient
+          colors={[TAGG_PURPLE, TAGG_LIGHT_BLUE_2]}
+          start={{x: 0.0, y: 1.0}}
+          end={{x: 1.0, y: 1.0}}
+          style={styles.gradientContainer}
+        />
+      </MaskedView>
+      <View style={styles.textContainer}>
+        <Text style={[styles.label, {color: labelColor}]}>{text}</Text>
+      </View>
+    </TouchableOpacity>
+  );
+};
+const styles = StyleSheet.create({
+  container: {
+    marginVertical: 15,
+  },
+  gradientContainer: {
+    width: 159,
+    height: 38,
+  },
+  label: {
+    fontWeight: '500',
+    fontSize: normalize(15),
+  },
+  maskBorder: {
+    borderRadius: 20,
+  },
+  textContainer: {
+    position: 'absolute',
+    width: 159,
+    height: 38,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
+export default GradientBorderButton;
diff --git a/src/components/common/index.ts b/src/components/common/index.ts
index e1543cd8..8499dbfa 100644
--- a/src/components/common/index.ts
+++ b/src/components/common/index.ts
@@ -22,3 +22,4 @@ export {default as TaggPrompt} from './TaggPrompt';
 export {default as AcceptDeclineButtons} from './AcceptDeclineButtons';
 export {default as FriendsButton} from './FriendsButton';
 export {default as TaggSquareButton} from './TaggSquareButton';
+export {default as GradientBorderButton} from './GradientBorderButton';
diff --git a/src/components/search/SearchCategories.tsx b/src/components/search/SearchCategories.tsx
index c3c4c518..f00debb5 100644
--- a/src/components/search/SearchCategories.tsx
+++ b/src/components/search/SearchCategories.tsx
@@ -1,47 +1,55 @@
 import {useNavigation} from '@react-navigation/native';
 import React, {useEffect, useState} from 'react';
-import {StyleSheet, Text, View} from 'react-native';
-import {TouchableOpacity} from 'react-native-gesture-handler';
-import LinearGradient from 'react-native-linear-gradient';
+import {StyleSheet, View} from 'react-native';
+import {GradientBorderButton} from '..';
 import {getButtons} from '../../services/ExploreService';
 import {SearchCategoryType} from '../../types';
-import {TAGG_LIGHT_BLUE_2, TAGG_PURPLE} from '../../constants';
 import {SCREEN_WIDTH} from '../../utils';
 
-const SearchCategories: React.FC = () => {
-  const [buttons, setButtons] = useState<SearchCategoryType[]>([]);
+interface SearchCategoriesProps {
+  darkStyle?: boolean;
+}
+
+const SearchCategories: React.FC<SearchCategoriesProps> = ({
+  darkStyle = false,
+}) => {
+  const navigation = useNavigation();
+  const mtSearchCategory: (key: number) => SearchCategoryType = (key) => ({
+    id: key,
+    name: '...',
+    category: '...',
+  });
+  const [buttons, setButtons] = useState<SearchCategoryType[]>([
+    mtSearchCategory(1),
+    mtSearchCategory(2),
+    mtSearchCategory(3),
+    mtSearchCategory(4),
+  ]);
   useEffect(() => {
     const loadButtons = async () => {
       const localButtons = await getButtons();
-      console.log('localButtons: ', localButtons);
-      await setButtons(localButtons);
+      setButtons([]);
+      setButtons(localButtons);
     };
     loadButtons();
   }, []);
 
-  const navigation = useNavigation();
   return (
     <View style={styles.container}>
-      {buttons &&
-        buttons.map((searchCategory) => (
-          <LinearGradient
-            key={searchCategory.id}
-            colors={[TAGG_PURPLE, TAGG_LIGHT_BLUE_2]}
-            start={{x: 0.0, y: 1.0}}
-            end={{x: 1.0, y: 1.0}}
-            style={styles.gradientContainer}>
-            <TouchableOpacity
-              style={styles.buttonContainer}
-              key={searchCategory.id}
-              onPress={() => {
-                navigation.navigate('DiscoverUsers', {
-                  searchCategory,
-                });
-              }}>
-              <Text style={styles.buttonText}>{searchCategory.name}</Text>
-            </TouchableOpacity>
-          </LinearGradient>
-        ))}
+      {buttons.map((searchCategory) => (
+        <GradientBorderButton
+          key={searchCategory.id}
+          text={searchCategory.name}
+          darkStyle={darkStyle}
+          onPress={() => {
+            if (searchCategory.name !== '...') {
+              navigation.push('DiscoverUsers', {
+                searchCategory,
+              });
+            }
+          }}
+        />
+      ))}
     </View>
   );
 };
@@ -56,20 +64,8 @@ const styles = StyleSheet.create({
     flexWrap: 'wrap',
     justifyContent: 'space-evenly',
   },
-  gradientContainer: {
-    width: 159,
-    height: 38,
-    alignItems: 'center',
-    justifyContent: 'center',
-    marginVertical: '2.5%',
-    flexDirection: 'row',
-    alignContent: 'center',
-    borderRadius: 20,
-    borderColor: 'transparent',
-    borderWidth: 1,
-  },
   buttonContainer: {
-    backgroundColor: 'white',
+    backgroundColor: 'transparent',
     width: 158,
     height: 37,
     borderRadius: 20,
@@ -84,7 +80,7 @@ const styles = StyleSheet.create({
     fontSize: 15,
     lineHeight: 17.9,
     alignSelf: 'center',
-    color: '#828282',
+    color: 'white',
   },
 });
 export default SearchCategories;
diff --git a/src/screens/search/DiscoverUsers.tsx b/src/screens/search/DiscoverUsers.tsx
index ce7507fc..a9856909 100644
--- a/src/screens/search/DiscoverUsers.tsx
+++ b/src/screens/search/DiscoverUsers.tsx
@@ -1,15 +1,26 @@
+import {RouteProp, useNavigation} from '@react-navigation/native';
 import React, {useEffect, useState} from 'react';
 import {FlatList, StatusBar, StyleSheet} from 'react-native';
-import {Text} from 'react-native-animatable';
+import {Image, Text} from 'react-native-animatable';
+import {TouchableOpacity} from 'react-native-gesture-handler';
 import {SafeAreaView} from 'react-native-safe-area-context';
-import {HeaderHeight, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
-import {SearchBackground, TabsGradient} from '../../components';
-import {RouteProp} from '@react-navigation/native';
-import {MainStackParams} from '../../routes';
-import {normalize} from '../../utils';
-import {ProfilePreviewType} from '../../types';
+import {
+  SearchBackground,
+  SearchCategories,
+  TabsGradient,
+  TaggLoadingIndicator,
+} from '../../components';
 import ExploreSectionUser from '../../components/search/ExploreSectionUser';
+import {headerBarOptions, MainStackParams} from '../../routes';
 import {getDiscoverUsers} from '../../services/ExploreService';
+import {ProfilePreviewType} from '../../types';
+import {
+  HeaderHeight,
+  normalize,
+  SCREEN_HEIGHT,
+  SCREEN_WIDTH,
+  shuffle,
+} from '../../utils';
 
 type DiscoverUsersRouteProps = RouteProp<MainStackParams, 'DiscoverUsers'>;
 
@@ -20,14 +31,74 @@ interface DiscoverUsersProps {
 const DiscoverUsers: React.FC<DiscoverUsersProps> = ({route}) => {
   const {type: category_type} = route.params;
   const {id, name} = route.params.searchCategory;
-  const [users, setUsers] = useState<ProfilePreviewType[]>();
+  const [categoryName, setCategoryName] = useState<string | undefined>();
+  const [users, setUsers] = useState<ProfilePreviewType[]>([]);
+  const [shouldRefresh, setShouldRefresh] = useState(false);
+  const [showIcon1, setShowIcon1] = useState(true);
+  const mtUser = (key: number) => ({
+    id: key,
+    username: '...',
+    first_name: '',
+    last_name: '',
+    thumbnail_url: '',
+  });
+  const dummyUsers = [
+    mtUser(1),
+    mtUser(2),
+    mtUser(3),
+    mtUser(4),
+    mtUser(5),
+    mtUser(6),
+    mtUser(7),
+    mtUser(8),
+    mtUser(9),
+  ];
+  const [loading, setLoading] = useState(true);
+  const navigation = useNavigation();
+
+  navigation.setOptions({
+    ...headerBarOptions('white', name),
+    headerRight: () => (
+      <TouchableOpacity
+        onPress={() => {
+          setShowIcon1(!showIcon1);
+          setShouldRefresh(true);
+        }}>
+        <Image
+          source={
+            showIcon1
+              ? require('../../assets/images/shuffle-1.png')
+              : require('../../assets/images/shuffle-2.png')
+          }
+          style={styles.shuffleIcon}
+        />
+      </TouchableOpacity>
+    ),
+  });
+
+  useEffect(() => {
+    setCategoryName(name);
+  }, []);
+
+  useEffect(() => {
+    if (shouldRefresh) {
+      setLoading(true);
+      setTimeout(() => {
+        setUsers(shuffle(users));
+        setShouldRefresh(false);
+        setLoading(false);
+      }, 500);
+    }
+  }, [shouldRefresh, users]);
 
   useEffect(() => {
     const loadData = async () => {
+      setLoading(true);
       setUsers(await getDiscoverUsers(id, category_type));
+      setLoading(false);
     };
     loadData();
-  }, []);
+  }, [categoryName]);
 
   const _renderItem = ({item: user}: {item: ProfilePreviewType}) => (
     <ExploreSectionUser key={user.id} user={user} style={styles.user} />
@@ -37,16 +108,26 @@ const DiscoverUsers: React.FC<DiscoverUsersProps> = ({route}) => {
     <SearchBackground>
       <StatusBar barStyle="light-content" />
       <SafeAreaView>
-        <Text style={styles.headerText}>{name}</Text>
+        {loading && <TaggLoadingIndicator fullscreen={true} />}
         <FlatList
-          data={users}
+          data={loading ? dummyUsers : users.slice(0, 9)}
           style={styles.scrollView}
+          scrollEnabled={false}
           contentContainerStyle={styles.contentContainerStyle}
           columnWrapperStyle={styles.columnWrapperStyle}
           numColumns={3}
           keyExtractor={(item) => item.id}
           renderItem={_renderItem}
           showsVerticalScrollIndicator={false}
+          ListFooterComponent={() => (
+            <>
+              <Text style={styles.otherGroups}>Other Groups</Text>
+              <SearchCategories
+                darkStyle={true}
+                // callBack={(category) => setCategoryName(category)}
+              />
+            </>
+          )}
         />
         <TabsGradient />
       </SafeAreaView>
@@ -67,6 +148,7 @@ const styles = StyleSheet.create({
   },
   scrollView: {
     top: HeaderHeight,
+    marginTop: '10%',
     width: SCREEN_WIDTH * 0.95,
     height: SCREEN_HEIGHT - HeaderHeight,
     alignSelf: 'center',
@@ -83,6 +165,19 @@ const styles = StyleSheet.create({
     width: SCREEN_WIDTH * 0.95,
     paddingBottom: SCREEN_HEIGHT * 0.2,
   },
+  otherGroups: {
+    color: 'white',
+    fontSize: normalize(18),
+    fontWeight: '600',
+    lineHeight: normalize(35),
+    alignSelf: 'center',
+    marginTop: 20,
+  },
+  shuffleIcon: {
+    width: 40,
+    height: 40,
+    marginRight: 20,
+  },
 });
 
 export default DiscoverUsers;
diff --git a/src/utils/common.ts b/src/utils/common.ts
index 30122e79..c1049c42 100644
--- a/src/utils/common.ts
+++ b/src/utils/common.ts
@@ -94,3 +94,24 @@ export const haveUnreadNotifications = async (
   }
   return false;
 };
+
+// https://stackoverflow.com/a/2450976
+export const shuffle = (array: any[]) => {
+  var currentIndex = array.length,
+    temporaryValue,
+    randomIndex;
+
+  // While there remain elements to shuffle...
+  while (currentIndex !== 0) {
+    // Pick a remaining element...
+    randomIndex = Math.floor(Math.random() * currentIndex);
+    currentIndex -= 1;
+
+    // And swap it with the current element.
+    temporaryValue = array[currentIndex];
+    array[currentIndex] = array[randomIndex];
+    array[randomIndex] = temporaryValue;
+  }
+
+  return array;
+};
-- 
cgit v1.2.3-70-g09d2