Changeset View
Changeset View
Standalone View
Standalone View
native/chat/sidebar-list-modal.react.js
| Show All 25 Lines | function getItemLayout(data: ?$ReadOnlyArray<SidebarInfo>, index: number) { | ||||
| return { length: 24, offset: 24 * index, index }; | return { length: 24, offset: 24 * index, index }; | ||||
| } | } | ||||
| type Props = { | type Props = { | ||||
| +navigation: RootNavigationProp<'SidebarListModal'>, | +navigation: RootNavigationProp<'SidebarListModal'>, | ||||
| +route: NavigationRoute<'SidebarListModal'>, | +route: NavigationRoute<'SidebarListModal'>, | ||||
| }; | }; | ||||
| function SidebarListModal(props: Props): React.Node { | function SidebarListModal(props: Props): React.Node { | ||||
| const { | const [searchText, setSearchText] = React.useState(''); | ||||
| listData, | const { listData, setSearchState, onChangeSearchText } = useSearchSidebars( | ||||
| searchState, | props.route.params.threadInfo, | ||||
| setSearchState, | searchText, | ||||
| onChangeSearchText, | setSearchText, | ||||
| } = useSearchSidebars(props.route.params.threadInfo); | ); | ||||
| const searchTextInputRef = React.useRef(); | const searchTextInputRef = React.useRef(); | ||||
| const setSearchTextInputRef = React.useCallback( | const setSearchTextInputRef = React.useCallback( | ||||
| async (textInput: ?React.ElementRef<typeof TextInput>) => { | async (textInput: ?React.ElementRef<typeof TextInput>) => { | ||||
| searchTextInputRef.current = textInput; | searchTextInputRef.current = textInput; | ||||
| if (!textInput) { | if (!textInput) { | ||||
| return; | return; | ||||
| } | } | ||||
| await waitForModalInputFocus(); | await waitForModalInputFocus(); | ||||
| if (searchTextInputRef.current) { | if (searchTextInputRef.current) { | ||||
| searchTextInputRef.current.focus(); | searchTextInputRef.current.focus(); | ||||
| } | } | ||||
| }, | }, | ||||
| [], | [], | ||||
| ); | ); | ||||
| const navigateToThread = useNavigateToThread(); | const navigateToThread = useNavigateToThread(); | ||||
| const onPressItem = React.useCallback( | const onPressItem = React.useCallback( | ||||
| (threadInfo: ThreadInfo) => { | (threadInfo: ThreadInfo) => { | ||||
| setSearchState({ | setSearchState(new Set()); | ||||
tomek: I have some doubts about it. Currently, all the clients of the hook can set both `text` and… | |||||
| text: '', | |||||
| results: new Set(), | |||||
| }); | |||||
| if (searchTextInputRef.current) { | if (searchTextInputRef.current) { | ||||
| searchTextInputRef.current.blur(); | searchTextInputRef.current.blur(); | ||||
| } | } | ||||
| navigateToThread({ threadInfo }); | navigateToThread({ threadInfo }); | ||||
| }, | }, | ||||
| [navigateToThread, setSearchState], | [navigateToThread, setSearchState], | ||||
| ); | ); | ||||
| Show All 9 Lines | const renderItem = React.useCallback( | ||||
| }, | }, | ||||
| [onPressItem], | [onPressItem], | ||||
| ); | ); | ||||
| const indicatorStyle = useIndicatorStyle(); | const indicatorStyle = useIndicatorStyle(); | ||||
| return ( | return ( | ||||
| <Modal> | <Modal> | ||||
| <Search | <Search | ||||
| searchText={searchState.text} | searchText={searchText} | ||||
| onChangeText={onChangeSearchText} | onChangeText={onChangeSearchText} | ||||
| containerStyle={styles.search} | containerStyle={styles.search} | ||||
| placeholder="Search sidebars" | placeholder="Search sidebars" | ||||
| ref={setSearchTextInputRef} | ref={setSearchTextInputRef} | ||||
| /> | /> | ||||
| <FlatList | <FlatList | ||||
| data={listData} | data={listData} | ||||
| renderItem={renderItem} | renderItem={renderItem} | ||||
| Show All 22 Lines | |||||
I have some doubts about it. Currently, all the clients of the hook can set both text and search result. It would be a lot easier to reason about the state if only the text could be set and then the result would be updated by the hook. Do you think this can be achieved?