1 files changed, 106 insertions, 11 deletions

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;