From f7ed1dae99761eb4647d3b6cb68f009fd467ad8a Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@tagg.id>
Date: Tue, 26 Jan 2021 18:10:12 -0500
Subject: thumbnail for explore

---
 src/components/search/ExploreSection.tsx     | 15 +++++++++------
 src/components/search/ExploreSectionUser.tsx | 18 ++++++------------
 2 files changed, 15 insertions(+), 18 deletions(-)

(limited to 'src')

diff --git a/src/components/search/ExploreSection.tsx b/src/components/search/ExploreSection.tsx
index 17079e77..025c8c3c 100644
--- a/src/components/search/ExploreSection.tsx
+++ b/src/components/search/ExploreSection.tsx
@@ -1,5 +1,5 @@
 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';
@@ -17,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 />
diff --git a/src/components/search/ExploreSectionUser.tsx b/src/components/search/ExploreSectionUser.tsx
index 68e077e3..b0cfe5c6 100644
--- a/src/components/search/ExploreSectionUser.tsx
+++ b/src/components/search/ExploreSectionUser.tsx
@@ -9,7 +9,7 @@ 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, normalize, userXInStore} from '../../utils';
@@ -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
-- 
cgit v1.2.3-70-g09d2