Merge branch 'master' into TMA-546-Onboarding-Page

4 files changed, 28 insertions, 29 deletions

diff --git a/src/components/search/Explore.tsx b/src/components/search/Explore.tsx
index c07c66b8..2a3bc749 100644
--- a/src/components/search/Explore.tsx
+++ b/src/components/search/Explore.tsx
@@ -4,6 +4,7 @@ import {useSelector} from 'react-redux';
 import {EXPLORE_SECTION_TITLES} from '../../constants';
 import {RootState} from '../../store/rootReducer';
 import {ExploreSectionType} from '../../types';
+import {normalize} from '../../utils';
 import ExploreSection from './ExploreSection';
 
 const Explore: React.FC = () => {
@@ -11,9 +12,10 @@ const Explore: React.FC = () => {
   return (
     <View style={styles.container}>
       <Text style={styles.header}>Search Profiles</Text>
-      {EXPLORE_SECTION_TITLES.map((title: ExploreSectionType) => (
-        <ExploreSection key={title} title={title} users={explores[title]} />
-      ))}
+      {explores &&
+        EXPLORE_SECTION_TITLES.map((title: ExploreSectionType) => (
+          <ExploreSection key={title} title={title} users={explores[title]} />
+        ))}
     </View>
   );
 };
@@ -21,11 +23,10 @@ const Explore: React.FC = () => {
 const styles = StyleSheet.create({
   container: {
     zIndex: 0,
-    // margin: '5%',
   },
   header: {
     fontWeight: '700',
-    fontSize: 22,
+    fontSize: normalize(22),
     color: '#fff',
     marginBottom: '2%',
     margin: '5%',
diff --git a/src/components/search/ExploreSection.tsx b/src/components/search/ExploreSection.tsx
index 8e8b4988..025c8c3c 100644
--- a/src/components/search/ExploreSection.tsx
+++ b/src/components/search/ExploreSection.tsx
@@ -1,6 +1,7 @@
 import React, {Fragment} from 'react';
-import {ScrollView, StyleSheet, Text, View} from 'react-native';
+import {FlatList, StyleSheet, Text, View} from 'react-native';
 import {ProfilePreviewType} from '../../types';
+import {normalize} from '../../utils';
 import ExploreSectionUser from './ExploreSectionUser';
 
 /**
@@ -16,12 +17,15 @@ const ExploreSection: React.FC<ExploreSectionProps> = ({title, users}) => {
   return users.length !== 0 ? (
     <View style={styles.container}>
       <Text style={styles.header}>{title}</Text>
-      <ScrollView horizontal showsHorizontalScrollIndicator={false}>
-        <View style={styles.padding} />
-        {users.map((user) => (
+      <FlatList
+        data={users}
+        ListHeaderComponent={<View style={styles.padding} />}
+        renderItem={({item: user}: {item: ProfilePreviewType}) => (
           <ExploreSectionUser key={user.id} user={user} style={styles.user} />
-        ))}
-      </ScrollView>
+        )}
+        showsHorizontalScrollIndicator={false}
+        horizontal
+      />
     </View>
   ) : (
     <Fragment />
@@ -34,7 +38,7 @@ const styles = StyleSheet.create({
   },
   header: {
     fontWeight: '600',
-    fontSize: 20,
+    fontSize: normalize(18),
     color: '#fff',
     marginLeft: '5%',
     marginBottom: '5%',
diff --git a/src/components/search/ExploreSectionUser.tsx b/src/components/search/ExploreSectionUser.tsx
index 0bf68a20..b0cfe5c6 100644
--- a/src/components/search/ExploreSectionUser.tsx
+++ b/src/components/search/ExploreSectionUser.tsx
@@ -9,10 +9,10 @@ import {
 } from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
 import {useDispatch, useSelector, useStore} from 'react-redux';
-import {loadAvatar} from '../../services';
+import {loadImageFromURL} from '../../services';
 import {RootState} from '../../store/rootReducer';
 import {ProfilePreviewType, ScreenType} from '../../types';
-import {fetchUserX, userXInStore} from '../../utils';
+import {fetchUserX, normalize, userXInStore} from '../../utils';
 
 /**
  * Search Screen for user recommendations and a search
@@ -36,18 +36,13 @@ const ExploreSectionUser: React.FC<ExploreSectionUserProps> = ({
   const dispatch = useDispatch();
 
   useEffect(() => {
-    let mounted = true;
-    const loadAvatarImage = async () => {
-      const response = await loadAvatar(id, true);
-      if (mounted) {
+    (async () => {
+      const response = await loadImageFromURL(user.thumbnail_url);
+      if (response) {
         setAvatar(response);
       }
-    };
-    loadAvatarImage();
-    return () => {
-      mounted = false;
-    };
-  }, [user]);
+    })();
+  }, []);
 
   const handlePress = async () => {
     if (!userXInStore(state, screenType, user.id)) {
@@ -63,7 +58,6 @@ const ExploreSectionUser: React.FC<ExploreSectionUserProps> = ({
       screenType,
     });
   };
-
   return (
     <TouchableOpacity style={[styles.container, style]} onPress={handlePress}>
       <LinearGradient
@@ -110,13 +104,13 @@ const styles = StyleSheet.create({
   name: {
     fontWeight: '600',
     flexWrap: 'wrap',
-    fontSize: 16,
+    fontSize: normalize(16),
     color: '#fff',
     textAlign: 'center',
   },
   username: {
     fontWeight: '400',
-    fontSize: 14,
+    fontSize: normalize(14),
     color: '#fff',
   },
 });
diff --git a/src/components/search/RecentSearches.tsx b/src/components/search/RecentSearches.tsx
index 8a06017c..bdbd5773 100644
--- a/src/components/search/RecentSearches.tsx
+++ b/src/components/search/RecentSearches.tsx
@@ -7,7 +7,7 @@ import {
   TouchableOpacityProps,
 } from 'react-native';
 import {PreviewType, ProfilePreviewType, ScreenType} from 'src/types';
-import {TAGG_TEXT_LIGHT_BLUE} from '../../constants';
+import {TAGG_LIGHT_BLUE} from '../../constants';
 import SearchResults from './SearchResults';
 
 interface RecentSearchesProps extends TouchableOpacityProps {
@@ -55,7 +55,7 @@ const styles = StyleSheet.create({
   clear: {
     fontSize: 18,
     fontWeight: 'bold',
-    color: TAGG_TEXT_LIGHT_BLUE,
+    color: TAGG_LIGHT_BLUE,
   },
 });