[TMA-531] New Explore Page (#179)

* redux done

* done

* added refresh control

* added profile navigation

* minor spacing change

3 files changed, 101 insertions, 41 deletions

diff --git a/src/components/search/Explore.tsx b/src/components/search/Explore.tsx
index a02205a4..c07c66b8 100644
--- a/src/components/search/Explore.tsx
+++ b/src/components/search/Explore.tsx
@@ -1,27 +1,18 @@
 import React from 'react';
-import {View, StyleSheet} from 'react-native';
+import {StyleSheet, Text, View} from 'react-native';
+import {useSelector} from 'react-redux';
+import {EXPLORE_SECTION_TITLES} from '../../constants';
+import {RootState} from '../../store/rootReducer';
+import {ExploreSectionType} from '../../types';
 import ExploreSection from './ExploreSection';
 
 const Explore: React.FC = () => {
-  const sections: Array<string> = [
-    'People you follow',
-    'People you may know',
-    'Trending in sports',
-    'Trending on Tagg',
-    'Trending in music',
-  ];
-  const users: Array<string> = [
-    'Sam Davis',
-    'Becca Smith',
-    'Ann Taylor',
-    'Clara Johnson',
-    'Sarah Jung',
-    'Lila Hernandez',
-  ];
+  const {explores} = useSelector((state: RootState) => state.taggUsers);
   return (
     <View style={styles.container}>
-      {sections.map((title) => (
-        <ExploreSection key={title} title={title} users={users} />
+      <Text style={styles.header}>Search Profiles</Text>
+      {EXPLORE_SECTION_TITLES.map((title: ExploreSectionType) => (
+        <ExploreSection key={title} title={title} users={explores[title]} />
       ))}
     </View>
   );
@@ -30,6 +21,14 @@ const Explore: React.FC = () => {
 const styles = StyleSheet.create({
   container: {
     zIndex: 0,
+    // margin: '5%',
+  },
+  header: {
+    fontWeight: '700',
+    fontSize: 22,
+    color: '#fff',
+    marginBottom: '2%',
+    margin: '5%',
   },
 });
 export default Explore;
diff --git a/src/components/search/ExploreSection.tsx b/src/components/search/ExploreSection.tsx
index 8e826bd9..8e8b4988 100644
--- a/src/components/search/ExploreSection.tsx
+++ b/src/components/search/ExploreSection.tsx
@@ -1,5 +1,6 @@
-import React from 'react';
-import {View, Text, ScrollView, StyleSheet} from 'react-native';
+import React, {Fragment} from 'react';
+import {ScrollView, StyleSheet, Text, View} from 'react-native';
+import {ProfilePreviewType} from '../../types';
 import ExploreSectionUser from './ExploreSectionUser';
 
 /**
@@ -9,33 +10,40 @@ import ExploreSectionUser from './ExploreSectionUser';
 
 interface ExploreSectionProps {
   title: string;
-  users: Array<string>;
+  users: ProfilePreviewType[];
 }
 const ExploreSection: React.FC<ExploreSectionProps> = ({title, users}) => {
-  return (
+  return users.length !== 0 ? (
     <View style={styles.container}>
       <Text style={styles.header}>{title}</Text>
       <ScrollView horizontal showsHorizontalScrollIndicator={false}>
-        {users.map((name, key) => (
-          <ExploreSectionUser {...{name, key}} style={styles.user} />
+        <View style={styles.padding} />
+        {users.map((user) => (
+          <ExploreSectionUser key={user.id} user={user} style={styles.user} />
         ))}
       </ScrollView>
     </View>
+  ) : (
+    <Fragment />
   );
 };
 
 const styles = StyleSheet.create({
   container: {
-    marginBottom: 30,
+    marginVertical: '5%',
   },
   header: {
     fontWeight: '600',
     fontSize: 20,
     color: '#fff',
-    marginBottom: 20,
+    marginLeft: '5%',
+    marginBottom: '5%',
   },
   user: {
-    marginHorizontal: 15,
+    marginHorizontal: 5,
+  },
+  padding: {
+    width: 10,
   },
 });
 
diff --git a/src/components/search/ExploreSectionUser.tsx b/src/components/search/ExploreSectionUser.tsx
index a9fce063..0bf68a20 100644
--- a/src/components/search/ExploreSectionUser.tsx
+++ b/src/components/search/ExploreSectionUser.tsx
@@ -1,12 +1,18 @@
-import React from 'react';
+import {useNavigation} from '@react-navigation/native';
+import React, {useEffect, useState} from 'react';
 import {
+  Image,
   StyleSheet,
   Text,
-  ViewProps,
-  Image,
   TouchableOpacity,
+  ViewProps,
 } from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
+import {useDispatch, useSelector, useStore} from 'react-redux';
+import {loadAvatar} from '../../services';
+import {RootState} from '../../store/rootReducer';
+import {ProfilePreviewType, ScreenType} from '../../types';
+import {fetchUserX, userXInStore} from '../../utils';
 
 /**
  * Search Screen for user recommendations and a search
@@ -14,14 +20,52 @@ import LinearGradient from 'react-native-linear-gradient';
  */
 
 interface ExploreSectionUserProps extends ViewProps {
-  name: string;
+  user: ProfilePreviewType;
 }
 const ExploreSectionUser: React.FC<ExploreSectionUserProps> = ({
-  name,
+  user,
   style,
 }) => {
+  const {id, username, first_name, last_name} = user;
+  const [avatar, setAvatar] = useState<string | null>(null);
+  const navigation = useNavigation();
+  const {user: loggedInUser} = useSelector((state: RootState) => state.user);
+  const state: RootState = useStore().getState();
+  const screenType = ScreenType.Search;
+
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    let mounted = true;
+    const loadAvatarImage = async () => {
+      const response = await loadAvatar(id, true);
+      if (mounted) {
+        setAvatar(response);
+      }
+    };
+    loadAvatarImage();
+    return () => {
+      mounted = false;
+    };
+  }, [user]);
+
+  const handlePress = async () => {
+    if (!userXInStore(state, screenType, user.id)) {
+      await fetchUserX(
+        dispatch,
+        {userId: user.id, username: user.username},
+        screenType,
+      );
+    }
+    const userXId = loggedInUser.username === user.username ? undefined : id;
+    navigation.push('Profile', {
+      userXId,
+      screenType,
+    });
+  };
+
   return (
-    <TouchableOpacity style={[styles.container, style]}>
+    <TouchableOpacity style={[styles.container, style]} onPress={handlePress}>
       <LinearGradient
         colors={['#9F00FF', '#27EAE9']}
         useAngle
@@ -29,12 +73,18 @@ const ExploreSectionUser: React.FC<ExploreSectionUserProps> = ({
         angleCenter={{x: 0.5, y: 0.5}}
         style={styles.gradient}>
         <Image
-          source={require('../../assets/images/avatar-placeholder.png')}
+          source={
+            avatar
+              ? {uri: avatar}
+              : require('../../assets/images/avatar-placeholder.png')
+          }
           style={styles.profile}
         />
       </LinearGradient>
-      <Text style={styles.name}>{name}</Text>
-      <Text style={styles.username}>{`@${name.split(' ').join('')}`}</Text>
+      <Text style={styles.name} numberOfLines={2}>
+        {first_name} {last_name}
+      </Text>
+      <Text style={styles.username} numberOfLines={1}>{`@${username}`}</Text>
     </TouchableOpacity>
   );
 };
@@ -42,27 +92,30 @@ const ExploreSectionUser: React.FC<ExploreSectionUserProps> = ({
 const styles = StyleSheet.create({
   container: {
     alignItems: 'center',
+    width: 100,
   },
   gradient: {
-    height: 80,
-    width: 80,
+    height: 60,
+    aspectRatio: 1,
     borderRadius: 40,
     justifyContent: 'center',
     alignItems: 'center',
     marginBottom: 10,
   },
   profile: {
-    height: 76,
-    width: 76,
+    height: 55,
+    aspectRatio: 1,
     borderRadius: 38,
   },
   name: {
     fontWeight: '600',
+    flexWrap: 'wrap',
     fontSize: 16,
     color: '#fff',
+    textAlign: 'center',
   },
   username: {
-    fontWeight: '600',
+    fontWeight: '400',
     fontSize: 14,
     color: '#fff',
   },