diff --git a/native/chat/settings/thread-settings-media-gallery.react.js b/native/chat/settings/thread-settings-media-gallery.react.js --- a/native/chat/settings/thread-settings-media-gallery.react.js +++ b/native/chat/settings/thread-settings-media-gallery.react.js @@ -4,20 +4,41 @@ import { View, TouchableOpacity, - Image, FlatList, useWindowDimensions, } from 'react-native'; +import FastImage from 'react-native-fast-image'; +import Video from 'react-native-video'; + +import { fetchThreadMedia } from 'lib/actions/thread-actions'; +import { useServerCall } from 'lib/utils/action-utils'; import { useStyles } from '../../themes/colors'; -function ThreadSettingsMediaGallery(): React.Node { +type ThreadSettingsMediaGalleryProps = { + +threadID: string, + +limit: number, +}; + +function ThreadSettingsMediaGallery( + props: ThreadSettingsMediaGalleryProps, +): React.Node { const styles = useStyles(unboundStyles); const galleryItemGap = 8; const { width } = useWindowDimensions(); const galleryItemWidth = (width - galleryItemGap * 3) / 3; - const mediaInfos = React.useMemo(() => [], []); + const { threadID, limit } = props; + const [mediaInfos, setMediaInfos] = React.useState([]); + const callFetchThreadMedia = useServerCall(fetchThreadMedia); + + React.useEffect(() => { + const fetchData = async () => { + const result = await callFetchThreadMedia({ threadID, limit, offset: 0 }); + setMediaInfos(result.media); + }; + fetchData(); + }, [callFetchThreadMedia, threadID, limit]); const memoizedStyles = React.useMemo(() => { return { @@ -36,10 +57,29 @@ const renderItem = React.useCallback( ({ item }) => { + if (item.type === 'photo') { + return ( + + + + + + ); + } return ( - + ); diff --git a/native/chat/settings/thread-settings.react.js b/native/chat/settings/thread-settings.react.js --- a/native/chat/settings/thread-settings.react.js +++ b/native/chat/settings/thread-settings.react.js @@ -198,6 +198,7 @@ +itemType: 'mediaGallery', +key: string, +threadInfo: ThreadInfo, + +limit: number, } | { +itemType: 'promoteSidebar' | 'leaveThread' | 'deleteThread', @@ -627,6 +628,7 @@ (propsAndState: PropsAndState) => propsAndState.threadInfo, (threadInfo: ThreadInfo) => { const listData: ChatSettingsItem[] = []; + const limit = 6; listData.push({ itemType: 'header', @@ -639,6 +641,7 @@ itemType: 'mediaGallery', key: 'mediaGallery', threadInfo, + limit, }); listData.push({ @@ -929,7 +932,12 @@ } else if (item.itemType === 'addMember') { return ; } else if (item.itemType === 'mediaGallery') { - return ; + return ( + + ); } else if (item.itemType === 'leaveThread') { return (