Feature/asc 19495 update community

src/components/ChooseCategoryModal/Components/RenderCategories.tsx

@@ -0,0 +1,38 @@
+import { Image, Text, TouchableOpacity } from 'react-native';
+import React from 'react';
+import useImage from '../../../hooks/useImage';
+import { SvgXml } from 'react-native-svg';
+import { categoryIcon } from '../../../svg/svg-xml-list';
+import { useStyle } from '../styles';
+
+const RenderCategories = ({
+  item,
+  onSelectCategory,
+}: {
+  item: Amity.Category;
+  onSelectCategory: (id: string, name: string) => void;
+}) => {
+  const avatarURL = useImage({ fileId: item.avatarFileId });
+  const styles = useStyle();
+  return (
+    <TouchableOpacity
+      onPress={() => onSelectCategory(item.categoryId, item.name)}
+      style={styles.rowContainer}
+    >
+      {item.avatarFileId ? (
+        <Image
+          style={styles.avatar}
+          source={{
+            uri: avatarURL,
+          }}
+        />
+      ) : (
+        <SvgXml xml={categoryIcon} width={40} height={40} />
+      )}
+
+      <Text style={styles.communityText}>{item.name}</Text>
+    </TouchableOpacity>
+  );
+};
+
+export default RenderCategories;

src/components/ChooseCategoryModal/index.tsx

@@ -5,28 +5,32 @@ import {
   View,
   Text,
   Modal,
-  Image,
   FlatList,
   type NativeSyntheticEvent,
   type NativeScrollEvent,
 } from 'react-native';
 import { SvgXml } from 'react-native-svg';
-import { categoryIcon, closeIcon } from '../../svg/svg-xml-list';
-import useAuth from '../../hooks/useAuth';
-import { getStyles } from './styles';
+import { closeIcon } from '../../svg/svg-xml-list';
+import { useStyle } from './styles';
 import { useTheme } from 'react-native-paper';
 import type { MyMD3Theme } from 'src/providers/amity-ui-kit-provider';
+import RenderCategories from './Components/RenderCategories';
 
 interface IModal {
   visible: boolean;
   userId?: string;
   onClose: () => void;
   onSelect: (categoryId: string, categoryName: string) => void;
+  categoryId?: string;
 }
-const ChooseCategoryModal = ({ visible, onClose, onSelect }: IModal) => {
+const ChooseCategoryModal = ({
+  visible,
+  onClose,
+  onSelect,
+  categoryId,
+}: IModal) => {
   const theme = useTheme() as MyMD3Theme;
-  const styles = getStyles();
-  const { apiRegion } = useAuth();
+  const styles = useStyle();
   const [categories, setCategories] =
     useState<Amity.LiveCollection<Amity.Category>>();
   const { data: categoriesList, onNextPage } = categories ?? {};
@@ -40,6 +44,12 @@ const ChooseCategoryModal = ({ visible, onClose, onSelect }: IModal) => {
           (data: Amity.LiveCollection<Amity.Category>) => {
             if (data) {
               setCategories(data);
+              if (categoryId) {
+                const currentCategoryName =
+                  data.data.find((item) => item.categoryId === categoryId)
+                    ?.name ?? '';
+                onSelect(categoryId, currentCategoryName);
+              }
             }
           }
         );
@@ -50,34 +60,13 @@ const ChooseCategoryModal = ({ visible, onClose, onSelect }: IModal) => {
     };
 
     loadCategories();
-  }, []);
+  }, [categoryId, onSelect]);
 
   const onSelectCategory = (categoryId: string, categoryName: string) => {
     onSelect && onSelect(categoryId, categoryName);
     unSubFunc && unSubFunc();
     onClose && onClose();
   };
-  const renderCategories = ({ item }: { item: Amity.Category }) => {
-    return (
-      <TouchableOpacity
-        onPress={() => onSelectCategory(item.categoryId, item.name)}
-        style={styles.rowContainer}
-      >
-        {item.avatarFileId ? (
-          <Image
-            style={styles.avatar}
-            source={{
-              uri: `https://api.${apiRegion}.amity.co/api/v3/files/${item.avatarFileId}/download`,
-            }}
-          />
-        ) : (
-          <SvgXml xml={categoryIcon} width={40} height={40} />
-        )}
-
-        <Text style={styles.communityText}>{item.name}</Text>
-      </TouchableOpacity>
-    );
-  };
 
   const handleScroll = (event: NativeSyntheticEvent<NativeScrollEvent>) => {
     const scrollPosition = event.nativeEvent.contentOffset.y;
@@ -112,7 +101,9 @@ const ChooseCategoryModal = ({ visible, onClose, onSelect }: IModal) => {
         </View>
         <FlatList
           data={categoriesList}
-          renderItem={renderCategories}
+          renderItem={({ item }) => (
+            <RenderCategories item={item} onSelectCategory={onSelectCategory} />
+          )}
           keyExtractor={(item) => item.categoryId}
           onScroll={handleScroll}
         />

src/components/ChooseCategoryModal/styles.ts

@@ -2,7 +2,7 @@ import { Platform, StyleSheet } from 'react-native';
 import { useTheme } from 'react-native-paper';
 import type { MyMD3Theme } from 'src/providers/amity-ui-kit-provider';
 
-export const getStyles = () => {
+export const useStyle = () => {
   const theme = useTheme() as MyMD3Theme;
 
   const styles = StyleSheet.create({

src/components/MyCommunity/Components/CommunityList.tsx

@@ -0,0 +1,81 @@
+import { Image, Text, TouchableOpacity, View } from 'react-native';
+import React from 'react';
+import { SvgXml } from 'react-native-svg';
+import {
+  communityIcon,
+  officialIcon,
+  privateIcon,
+} from '../../../svg/svg-xml-list';
+import { useStyle } from '../styles';
+import useImage from '../../../hooks/useImage';
+import type { MyMD3Theme } from '../../../providers/amity-ui-kit-provider';
+import { useTheme } from 'react-native-paper';
+
+interface ICommunityItems {
+  communityId: string;
+  avatarFileId: string;
+  displayName: string;
+  isPublic: boolean;
+  isOfficial: boolean;
+}
+
+const CommunityList = ({
+  item,
+  onClickItem,
+}: {
+  item: ICommunityItems;
+  onClickItem: (id: string, name: string) => void;
+}) => {
+  const MAX_LENGTH = 6;
+  const theme = useTheme() as MyMD3Theme;
+  const styles = useStyle();
+  const avatarUrl = useImage({ fileId: item.avatarFileId });
+  const getDisplayName = (text: string, type: string) => {
+    if (text) {
+      const reduceLetter = type === 'private' ? 3 : 0;
+      if (text!.length > MAX_LENGTH - reduceLetter) {
+        return text!.substring(0, MAX_LENGTH) + '...';
+      }
+      return text;
+    }
+    return 'Display name';
+  };
+  return (
+    <TouchableOpacity
+      onPress={() => onClickItem(item.communityId, item.displayName)}
+      key={item.communityId}
+      style={styles.itemContainer}
+    >
+      {item.avatarFileId ? (
+        <Image source={{ uri: avatarUrl }} style={styles.avatar} />
+      ) : (
+        <SvgXml
+          style={styles.avatar}
+          width={40}
+          height={40}
+          xml={communityIcon}
+        />
+      )}
+      <View style={styles.textRow}>
+        {!item.isPublic && (
+          <SvgXml width={17} height={17} xml={privateIcon(theme.colors.base)} />
+        )}
+        <Text style={styles.itemText}>
+          {getDisplayName(
+            item.displayName,
+            !item.isPublic ? 'private' : 'public'
+          )}
+        </Text>
+        {item.isOfficial && (
+          <SvgXml
+            width={20}
+            height={20}
+            xml={officialIcon(theme.colors.primary)}
+          />
+        )}
+      </View>
+    </TouchableOpacity>
+  );
+};
+
+export default CommunityList;

src/components/MyCommunity/index.tsx

@@ -1,19 +1,14 @@
-import React, { useEffect, useState } from 'react';
-import { View, Text, ScrollView, Image, TouchableOpacity } from 'react-native';
-import { getStyles } from './styles';
+import React, { useCallback, useState } from 'react';
+import { View, Text, ScrollView, TouchableOpacity } from 'react-native';
+import { useStyle } from './styles';
 import { CommunityRepository } from '@amityco/ts-sdk-react-native';
-import {
-  arrowOutlined,
-  communityIcon,
-  officialIcon,
-  privateIcon,
-} from '../../svg/svg-xml-list';
+import { arrowOutlined } from '../../svg/svg-xml-list';
 import { SvgXml } from 'react-native-svg';
-import { useNavigation } from '@react-navigation/native';
+import { useFocusEffect, useNavigation } from '@react-navigation/native';
 import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
-import useAuth from '../../hooks/useAuth';
 import type { MyMD3Theme } from '../../providers/amity-ui-kit-provider';
 import { useTheme } from 'react-native-paper';
+import CommunityList from './Components/CommunityList';
 
 interface ICommunityItems {
   communityId: string;
@@ -24,14 +19,9 @@ interface ICommunityItems {
 }
 export default function MyCommunity() {
   const theme = useTheme() as MyMD3Theme;
-  const styles = getStyles();
-  const { apiRegion } = useAuth();
-  const maxLength = 6;
+  const styles = useStyle();
   const [communityItems, setCommunityItems] = useState<ICommunityItems[]>([]);
   const navigation = useNavigation<NativeStackNavigationProp<any>>();
-  const avatarFileURL = (fileId: string) => {
-    return `https://api.${apiRegion}.amity.co/api/v3/files/${fileId}/download?size=medium`;
-  };
   const queryCommunities = () => {
     const unsubscribe = CommunityRepository.getCommunities(
       { membership: 'member', limit: 8 },
@@ -52,19 +42,12 @@ export default function MyCommunity() {
     );
     unsubscribe();
   };
-  const getDisplayName = (text: string, type: string) => {
-    if (text) {
-      const reduceLetter = type === 'private' ? 3 : 0;
-      if (text!.length > maxLength - reduceLetter) {
-        return text!.substring(0, maxLength) + '...';
-      }
-      return text;
-    }
-    return 'Display name';
-  };
-  useEffect(() => {
-    queryCommunities();
-  }, []);
+
+  useFocusEffect(
+    useCallback(() => {
+      queryCommunities();
+    }, [])
+  );
 
   const onClickItem = (communityId: string, displayName: string) => {
     navigation.navigate('CommunityHome', {
@@ -95,47 +78,11 @@ export default function MyCommunity() {
         contentContainerStyle={styles.scrollView}
       >
         {communityItems.map((item) => (
-          <TouchableOpacity
-            onPress={() => onClickItem(item.communityId, item.displayName)}
+          <CommunityList
             key={item.communityId}
-            style={styles.itemContainer}
-          >
-            {item.avatarFileId ? (
-              <Image
-                source={{ uri: avatarFileURL(item.avatarFileId) }}
-                style={styles.avatar}
-              />
-            ) : (
-              <SvgXml
-                style={styles.avatar}
-                width={40}
-                height={40}
-                xml={communityIcon}
-              />
-            )}
-            <View style={styles.textRow}>
-              {!item.isPublic && (
-                <SvgXml
-                  width={17}
-                  height={17}
-                  xml={privateIcon(theme.colors.base)}
-                />
-              )}
-              <Text style={styles.itemText}>
-                {getDisplayName(
-                  item.displayName,
-                  !item.isPublic ? 'private' : 'public'
-                )}
-              </Text>
-              {item.isOfficial && (
-                <SvgXml
-                  width={20}
-                  height={20}
-                  xml={officialIcon(theme.colors.primary)}
-                />
-              )}
-            </View>
-          </TouchableOpacity>
+            item={item}
+            onClickItem={onClickItem}
+          />
         ))}
         <TouchableOpacity onPress={onClickSeeAll} style={styles.seeAllBtn}>
           <View style={styles.seeAllIcon}>

src/components/MyCommunity/styles.ts

@@ -1,7 +1,7 @@
 import { StyleSheet } from 'react-native';
 import { useTheme } from 'react-native-paper';
 import type { MyMD3Theme } from 'src/providers/amity-ui-kit-provider';
-export const getStyles = () => {
+export const useStyle = () => {
   const theme = useTheme() as MyMD3Theme;
 
   const styles = StyleSheet.create({

src/hooks/useImage.ts

@@ -0,0 +1,31 @@
+import { useEffect, useState } from 'react';
+import { FileRepository } from '@amityco/ts-sdk-react-native';
+
+interface UseImageProps {
+  fileId: string;
+  imageSize?: 'small' | 'medium' | 'large' | 'full';
+}
+
+const useImage = ({ fileId, imageSize = 'medium' }: UseImageProps) => {
+  const [imageUrl, setImageUrl] = useState<string | undefined>(undefined);
+
+  useEffect(() => {
+    if (fileId == null) {
+      setImageUrl(undefined);
+      return;
+    }
+
+    async function run() {
+      const file = await FileRepository.getFile(fileId);
+      const newImageUrl = !file
+        ? undefined
+        : await FileRepository.fileUrlWithSize(file.data.fileUrl, imageSize);
+      setImageUrl(newImageUrl);
+    }
+    run();
+  }, [fileId, imageSize]);
+
+  return imageUrl;
+};
+
+export default useImage;