Page MenuHomePhabricator
Differential D14427

[native] Fix types in navigate call inside ThreadSettingsMediaGallery
ClosedPublic
Actions

Authored by ashoat on Mar 1 2025, 11:58 PM.
Tags
None
Referenced Files
Unknown Object (File)
Mon, Apr 7, 5:55 AM
Unknown Object (File)
Mon, Apr 7, 5:54 AM
Unknown Object (File)
Mon, Apr 7, 5:39 AM
Unknown Object (File)
Sun, Apr 6, 12:44 AM
Unknown Object (File)
Tue, Apr 1, 8:10 PM
Unknown Object (File)
Tue, Apr 1, 4:19 PM
Unknown Object (File)
Thu, Mar 27, 4:51 AM
Unknown Object (File)
Mon, Mar 17, 8:58 PM
View All 24 Files
Subscribers
tomek

Details

Reviewers
angelika
bartek
Commits
rCOMM6db6c235fe6d: [native] Fix types in navigate call inside ThreadSettingsMediaGallery
Summary

While investigating ENG-10293, I discovered that Flow was failing to typecheck the params in the navigate call here.

Two things had to be fixed:

  1. verticalBounds isn't always set at the time of this call. ENG-10293 happens when it's not set, and we can improve the error message in that case with an invariant here.
  2. The item being passed here is of the wrong type, and in fact we don't have the right item to pass in here. The prior diff made it possible to skip that param, and in this diff we simply remove it.

Depends on D14426

Test Plan

Flow

Diff Detail

Repository
rCOMM Comm
Branch
ashoat/imagemodaltypes
Lint
No Lint Coverage
Unit
No Test Coverage

Revision Contents
Changeset List

PathSize
native/
chat/
settings/
23 lines

Diff 47327

View Options

native/chat/settings/thread-settings-media-gallery.react.js

// @flow // @flow
import { useNavigation, useRoute } from '@react-navigation/native'; import { useNavigation, useRoute } from '@react-navigation/native';
import invariant from 'invariant';
import * as React from 'react'; import * as React from 'react';
import { View, useWindowDimensions } from 'react-native'; import { View, useWindowDimensions } from 'react-native';
import type { ViewStyleProp } from 'react-native/Libraries/StyleSheet/StyleSheet'; import type { ViewStyleProp } from 'react-native/Libraries/StyleSheet/StyleSheet';
import { FlatList } from 'react-native-gesture-handler'; import { FlatList } from 'react-native-gesture-handler';
import { useFetchThreadMedia } from 'lib/actions/thread-actions.js'; import { useFetchThreadMedia } from 'lib/actions/thread-actions.js';
import type { MediaInfo, Media } from 'lib/types/media-types'; import type { MediaInfo, Media } from 'lib/types/media-types';
import { import {
ThreadSettingsCategoryActionHeader, ThreadSettingsCategoryActionHeader,
ThreadSettingsCategoryFooter, ThreadSettingsCategoryFooter,
} from './thread-settings-category.react.js'; } from './thread-settings-category.react.js';
import GestureTouchableOpacity from '../../components/gesture-touchable-opacity.react.js'; import GestureTouchableOpacity from '../../components/gesture-touchable-opacity.react.js';
import type { ImageModalParams } from '../../media/image-modal.react.js';
import Multimedia from '../../media/multimedia.react.js'; import Multimedia from '../../media/multimedia.react.js';
import type { VideoPlaybackModalParams } from '../../media/video-playback-modal.react.js';
import { import {
ImageModalRouteName, ImageModalRouteName,
VideoPlaybackModalRouteName, VideoPlaybackModalRouteName,
} from '../../navigation/route-names.js'; } from '../../navigation/route-names.js';
import { useStyles } from '../../themes/colors.js'; import { useStyles } from '../../themes/colors.js';
import type { import type {
LayoutCoordinates, LayoutCoordinates,
VerticalBounds, VerticalBounds,
▲ Show 20 Lines • Show All 196 Lines • ▼ Show 20 Lines const navigateToMedia = React.useCallback(() => {
ref.current?.measure((x, y, width, height, pageX, pageY) => { ref.current?.measure((x, y, width, height, pageX, pageY) => {
const initialCoordinates: LayoutCoordinates = { const initialCoordinates: LayoutCoordinates = {
x: pageX, x: pageX,
y: pageY, y: pageY,
width, width,
height, height,
}; };
invariant(
verticalBounds,
'verticalBounds should be set in navigateToMedia',
);
const params: ImageModalParams | VideoPlaybackModalParams = {
presentedFrom: route.key,
mediaInfo,
initialCoordinates,
verticalBounds,
};
navigation.navigate<'VideoPlaybackModal' | 'ImageModal'>({ navigation.navigate<'VideoPlaybackModal' | 'ImageModal'>({
name: name:
mediaInfo.type === 'video' || mediaInfo.type === 'encrypted_video' mediaInfo.type === 'video' || mediaInfo.type === 'encrypted_video'
? VideoPlaybackModalRouteName ? VideoPlaybackModalRouteName
: ImageModalRouteName, : ImageModalRouteName,
key: `multimedia|${threadID}|${mediaInfo.id}`, key: `multimedia|${threadID}|${mediaInfo.id}`,
params: { params,
presentedFrom: route.key,
mediaInfo,
item,
initialCoordinates,
verticalBounds,
},
}); });
}); });
}, [navigation, route, threadID, mediaInfo, item, verticalBounds]); }, [navigation, route, threadID, mediaInfo, verticalBounds]);
const containerStyle = const containerStyle =
index % numColumns === 0 index % numColumns === 0
? memoizedStyles.mediaContainer ? memoizedStyles.mediaContainer
: memoizedStyles.mediaContainerWithMargin; : memoizedStyles.mediaContainerWithMargin;
return ( return (
<View key={item.id} style={containerStyle} onLayout={onLayout} ref={ref}> <View key={item.id} style={containerStyle} onLayout={onLayout} ref={ref}>
Show All 25 Lines