2 files changed, 127 insertions, 19 deletions
diff --git a/src/screens/search/DiscoverUsers.tsx b/src/screens/search/DiscoverUsers.tsx
index ce7507fc..b87bfc37 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'>;
 
@@ -18,16 +29,81 @@ 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 {name} = route.params.searchCategory;
+  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 () => {
-      setUsers(await getDiscoverUsers(id, category_type));
+      setLoading(true);
+      if (!categoryName) {
+        return;
+      }
+      const fetched_users = await getDiscoverUsers(categoryName);
+      if (fetched_users) {
+        setUsers(fetched_users);
+      }
+      setLoading(false);
     };
     loadData();
-  }, []);
+  }, [categoryName]);
 
   const _renderItem = ({item: user}: {item: ProfilePreviewType}) => (
     <ExploreSectionUser key={user.id} user={user} style={styles.user} />
@@ -37,9 +113,9 @@ 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}
           contentContainerStyle={styles.contentContainerStyle}
           columnWrapperStyle={styles.columnWrapperStyle}
@@ -47,6 +123,12 @@ const DiscoverUsers: React.FC<DiscoverUsersProps> = ({route}) => {
           keyExtractor={(item) => item.id}
           renderItem={_renderItem}
           showsVerticalScrollIndicator={false}
+          ListFooterComponent={() => (
+            <>
+              <Text style={styles.otherGroups}>Other Groups</Text>
+              <SearchCategories darkStyle={true} />
+            </>
+          )}
         />
         <TabsGradient />
       </SafeAreaView>
@@ -67,6 +149,7 @@ const styles = StyleSheet.create({
   },
   scrollView: {
     top: HeaderHeight,
+    marginTop: '10%',
     width: SCREEN_WIDTH * 0.95,
     height: SCREEN_HEIGHT - HeaderHeight,
     alignSelf: 'center',
@@ -83,6 +166,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/screens/search/SearchScreen.tsx b/src/screens/search/SearchScreen.tsx
index 59b17f57..65ec3934 100644
--- a/src/screens/search/SearchScreen.tsx
+++ b/src/screens/search/SearchScreen.tsx
@@ -17,13 +17,18 @@ import {SEARCH_ENDPOINT, TAGG_LIGHT_BLUE} from '../../constants';
 import {loadSearchResults} from '../../services';
 import {resetScreenType} from '../../store/actions';
 import {RootState} from '../../store/rootReducer';
-import {ProfilePreviewType, ScreenType, CategoryPreviewType} from '../../types';
 import {
+  CategoryPreviewType,
+  ProfilePreviewType,
+  ScreenType,
+  SearchCategoryType,
+} from '../../types';
+import {
+  getRecentlySearchedCategories,
+  getRecentlySearchedUsers,
   normalize,
   SCREEN_HEIGHT,
   SCREEN_WIDTH,
-  getRecentlySearchedCategories,
-  getRecentlySearchedUsers,
 } from '../../utils';
 
 /**
@@ -43,6 +48,11 @@ const SearchScreen: React.FC = () => {
   >([]);
   const [searching, setSearching] = useState(false);
   const top = Animated.useValue(-SCREEN_HEIGHT);
+  const defaultButtons: SearchCategoryType[] = [21, 22, 23, 24].map((year) => ({
+    id: -1,
+    name: `Brown '${year}`,
+    category: 'Brown',
+  }));
   const [keyboardVisible, setKeyboardVisible] = React.useState(
     'keyboardVisible',
   );
@@ -63,7 +73,9 @@ const SearchScreen: React.FC = () => {
    * Main handler for changes in query.
    */
   useEffect(() => {
-    if (!searching) return;
+    if (!searching) {
+      return;
+    }
     if (query.length < 3) {
       loadRecentlySearched().then(() => setResults(undefined));
       return;
@@ -175,7 +187,7 @@ const SearchScreen: React.FC = () => {
         stickyHeaderIndices={[4]}
         contentContainerStyle={styles.contentContainer}
         showsVerticalScrollIndicator={false}>
-        <SearchCategories />
+        <SearchCategories defaultButtons={defaultButtons} />
         <SearchResultsBackground {...{top}}>
           {results === undefined &&
           recents.length + recentCategories.length !== 0 ? (