diff --git a/lib/types/media-types.js b/lib/types/media-types.js --- a/lib/types/media-types.js +++ b/lib/types/media-types.js @@ -50,12 +50,10 @@ export type MediaInfo = | { ...Image, - +corners: Corners, +index: number, } | { ...Video, - +corners: Corners, +index: number, }; diff --git a/native/chat/inner-multimedia-message.react.js b/native/chat/inner-multimedia-message.react.js --- a/native/chat/inner-multimedia-message.react.js +++ b/native/chat/inner-multimedia-message.react.js @@ -119,7 +119,6 @@ const { pendingUploads } = this.props.item; const mediaInfo = { ...media, - corners: filteredCorners, index, }; const pendingUpload = pendingUploads && pendingUploads[media.id]; 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 @@ -1,20 +1,28 @@ // @flow import * as React from 'react'; -import { - View, - TouchableOpacity, - Image, - useWindowDimensions, -} from 'react-native'; +import { View, useWindowDimensions } from 'react-native'; import { FlatList } from 'react-native-gesture-handler'; +import { fetchThreadMedia } from 'lib/actions/thread-actions.js'; +import type { MediaInfo } from 'lib/types/media-types'; +import { useServerCall } from 'lib/utils/action-utils.js'; + +import GestureTouchableOpacity from '../../components/gesture-touchable-opacity.react.js'; +import Multimedia from '../../media/multimedia.react.js'; import { useStyles } from '../../themes/colors.js'; const galleryItemGap = 8; const numColumns = 3; -function ThreadSettingsMediaGallery(): React.Node { +type ThreadSettingsMediaGalleryProps = { + +threadID: string, + +limit: number, +}; + +function ThreadSettingsMediaGallery( + props: ThreadSettingsMediaGalleryProps, +): React.Node { const styles = useStyles(unboundStyles); const { width } = useWindowDimensions(); @@ -27,7 +35,22 @@ // E.g. 16px, media, galleryItemGap, media, galleryItemGap, media, 16px const galleryItemWidth = (width - 32 - (numColumns - 1) * galleryItemGap) / numColumns; - 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 { @@ -56,11 +79,16 @@ ? memoizedStyles.mediaContainer : memoizedStyles.mediaContainerWithMargin; + const mediaInfoItem: MediaInfo = { + ...item, + index, + }; + 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({ @@ -928,7 +931,12 @@ } else if (item.itemType === 'addMember') { return ; } else if (item.itemType === 'mediaGallery') { - return ; + return ( + + ); } else if (item.itemType === 'leaveThread') { return (