diff --git a/src/components/ProgressGuide/FollowDialog.tsx b/src/components/ProgressGuide/FollowDialog.tsx index 24dd36f80d..d97b11a693 100644 --- a/src/components/ProgressGuide/FollowDialog.tsx +++ b/src/components/ProgressGuide/FollowDialog.tsx @@ -57,6 +57,22 @@ export function FollowDialog() { const control = Dialog.useDialogControl() const {gtMobile} = useBreakpoints() const {height: minHeight} = useWindowDimensions() + const interestsDisplayNames = useInterestsDisplayNames() + const {data: preferences} = usePreferencesQuery() + const personalizedInterests = preferences?.interests?.tags + const interests = Object.keys(interestsDisplayNames).sort((a, b) => { + const indexA = personalizedInterests?.indexOf(a) ?? -1 + const indexB = personalizedInterests?.indexOf(b) ?? -1 + const rankA = indexA === -1 ? Infinity : indexA + const rankB = indexB === -1 ? Infinity : indexB + return rankA - rankB + }) + const [selectedInterest, setSelectedInterest] = useState(() => + personalizedInterests && interests.includes(personalizedInterests[0]) + ? personalizedInterests[0] + : interests[0], + ) + const [searchText, setSearchText] = useState('') return ( <> @@ -73,17 +89,36 @@ export function FollowDialog() { - + ) } -function DialogInner() { +function DialogInner({ + interests, + interestsDisplayNames, + selectedInterest, + searchText, + setSearchText, + setSelectedInterest, +}: { + interests: string[] + interestsDisplayNames: Record + searchText: string + selectedInterest: string + setSelectedInterest: (v: string) => void + setSearchText: (v: string) => void +}) { const {_} = useLingui() const t = useTheme() - const interestsDisplayNames = useInterestsDisplayNames() - const {data: preferences} = usePreferencesQuery() const moderationOpts = useModerationOpts() const listRef = useRef(null) const inputRef = useRef(null) @@ -91,21 +126,6 @@ function DialogInner() { const [tabOffsets, setTabOffsets] = useState([]) const [headerHeight, setHeaderHeight] = useState(0) const {currentAccount} = useSession() - const [searchText, setSearchText] = useState('') - - const personalizedInterests = preferences?.interests?.tags - const interests = Object.keys(interestsDisplayNames).sort((a, b) => { - const indexA = personalizedInterests?.indexOf(a) ?? -1 - const indexB = personalizedInterests?.indexOf(b) ?? -1 - const rankA = indexA === -1 ? Infinity : indexA - const rankB = indexB === -1 ? Infinity : indexB - return rankA - rankB - }) - const [selectedInterest, setSelectedInterest] = useState( - personalizedInterests && interests.includes(personalizedInterests[0]) - ? personalizedInterests[0] - : interests[0], - ) const { data: searchResults, @@ -248,6 +268,7 @@ function DialogInner() { { setSearchText(text) listRef.current?.scrollToOffset({offset: 0, animated: false}) @@ -316,6 +337,7 @@ function DialogInner() { interestsDisplayNames, setSelectedInterest, tabOffsets, + setSearchText, ]) const onEndReached = useCallback(async () => { @@ -487,10 +509,12 @@ function SearchInput({ onChangeText, onEscape, inputRef, + defaultValue, }: { onChangeText: (text: string) => void onEscape: () => void inputRef: React.RefObject + defaultValue: string }) { const t = useTheme() const {_} = useLingui() @@ -517,6 +541,7 @@ function SearchInput({