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({