More prefs cleanup (#1882)

* Update useHomeTabs

* Use queryClient to fetch

* Replace useHomeTabs and useDesktopRightNavItems

* Fix type error

* Some cleanup

src/view/com/modals/ContentFilteringSettings.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import {BskyPreferences, LabelPreference} from '@atproto/api'
+import {LabelPreference} from '@atproto/api'
 import {StyleSheet, Pressable, View} from 'react-native'
 import LinearGradient from 'react-native-linear-gradient'
 import {observer} from 'mobx-react-lite'
@@ -23,6 +23,7 @@ import {
   usePreferencesSetAdultContentMutation,
   ConfigurableLabelGroup,
   CONFIGURABLE_LABEL_GROUPS,
+  UsePreferencesQueryResponse,
 } from '#/state/queries/preferences'
 
 export const snapPoints = ['90%']
@@ -175,7 +176,7 @@ const ContentLabelPref = observer(function ContentLabelPrefImpl({
   labelGroup,
   disabled,
 }: {
-  preferences?: BskyPreferences
+  preferences?: UsePreferencesQueryResponse
   labelGroup: ConfigurableLabelGroup
   disabled?: boolean
 }) {

src/view/com/pager/FeedsTabBar.web.tsx

@@ -4,13 +4,12 @@ import Animated from 'react-native-reanimated'
 import {observer} from 'mobx-react-lite'
 import {TabBar} from 'view/com/pager/TabBar'
 import {RenderTabBarFnProps} from 'view/com/pager/Pager'
-import {useStores} from 'state/index'
-import {useHomeTabs} from 'lib/hooks/useHomeTabs'
 import {usePalette} from 'lib/hooks/usePalette'
 import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
 import {FeedsTabBar as FeedsTabBarMobile} from './FeedsTabBarMobile'
 import {useMinimalShellMode} from 'lib/hooks/useMinimalShellMode'
 import {useShellLayout} from '#/state/shell/shell-layout'
+import {usePinnedFeedsInfos} from '#/state/queries/feed'
 
 export const FeedsTabBar = observer(function FeedsTabBarImpl(
   props: RenderTabBarFnProps & {testID?: string; onPressSelected: () => void},
@@ -28,11 +27,11 @@ export const FeedsTabBar = observer(function FeedsTabBarImpl(
 const FeedsTabBarTablet = observer(function FeedsTabBarTabletImpl(
   props: RenderTabBarFnProps & {testID?: string; onPressSelected: () => void},
 ) {
-  const store = useStores()
-  const items = useHomeTabs(store.preferences.pinnedFeeds)
+  const feeds = usePinnedFeedsInfos()
   const pal = usePalette('default')
   const {headerMinimalShellTransform} = useMinimalShellMode()
   const {headerHeight} = useShellLayout()
+  const items = feeds.map(f => f.displayName)
 
   return (
     // @ts-ignore the type signature for transform wrong here, translateX and translateY need to be in separate objects -prf

src/view/com/pager/FeedsTabBarMobile.tsx

@@ -3,8 +3,6 @@ import {StyleSheet, TouchableOpacity, View} from 'react-native'
 import {observer} from 'mobx-react-lite'
 import {TabBar} from 'view/com/pager/TabBar'
 import {RenderTabBarFnProps} from 'view/com/pager/Pager'
-import {useStores} from 'state/index'
-import {useHomeTabs} from 'lib/hooks/useHomeTabs'
 import {usePalette} from 'lib/hooks/usePalette'
 import {useColorSchemeStyle} from 'lib/hooks/useColorSchemeStyle'
 import {Link} from '../util/Link'
@@ -20,19 +18,20 @@ import {useMinimalShellMode} from 'lib/hooks/useMinimalShellMode'
 import {useSetDrawerOpen} from '#/state/shell/drawer-open'
 import {useShellLayout} from '#/state/shell/shell-layout'
 import {useSession} from '#/state/session'
+import {usePinnedFeedsInfos} from '#/state/queries/feed'
 
 export const FeedsTabBar = observer(function FeedsTabBarImpl(
   props: RenderTabBarFnProps & {testID?: string; onPressSelected: () => void},
 ) {
   const pal = usePalette('default')
-  const store = useStores()
   const {isSandbox} = useSession()
   const {_} = useLingui()
   const setDrawerOpen = useSetDrawerOpen()
-  const items = useHomeTabs(store.preferences.pinnedFeeds)
+  const feeds = usePinnedFeedsInfos()
   const brandBlue = useColorSchemeStyle(s.brandBlue, s.blue3)
   const {headerHeight} = useShellLayout()
   const {headerMinimalShellTransform} = useMinimalShellMode()
+  const items = feeds.map(f => f.displayName)
 
   const onPressAvi = React.useCallback(() => {
     setDrawerOpen(true)

src/view/screens/Feeds.tsx

@@ -508,7 +508,7 @@ function SavedFeed({feedUri}: {feedUri: string}) {
   return (
     <Link
       testID={`saved-feed-${info.displayName}`}
-      href={info.href}
+      href={info.route.href}
       style={[pal.border, styles.savedFeed, isMobile && styles.savedFeedMobile]}
       hoverStyle={pal.viewLight}
       accessibilityLabel={info.displayName}

src/view/screens/Home.tsx

@@ -1,7 +1,6 @@
 import React from 'react'
 import {useFocusEffect} from '@react-navigation/native'
 import {observer} from 'mobx-react-lite'
-import isEqual from 'lodash.isequal'
 import {NativeStackScreenProps, HomeTabNavigatorParams} from 'lib/routes/types'
 import {FeedDescriptor, FeedParams} from '#/state/queries/post-feed'
 import {withAuthRequired} from 'view/com/auth/withAuthRequired'
@@ -13,6 +12,7 @@ import {Pager, PagerRef, RenderTabBarFnProps} from 'view/com/pager/Pager'
 import {useStores} from 'state/index'
 import {FeedPage} from 'view/com/feeds/FeedPage'
 import {useSetMinimalShellMode, useSetDrawerSwipeDisabled} from '#/state/shell'
+import {usePreferencesQuery} from '#/state/queries/preferences'
 
 type Props = NativeStackScreenProps<HomeTabNavigatorParams, 'Home'>
 export const HomeScreen = withAuthRequired(
@@ -23,19 +23,15 @@ export const HomeScreen = withAuthRequired(
     const pagerRef = React.useRef<PagerRef>(null)
     const [selectedPage, setSelectedPage] = React.useState(0)
     const [customFeeds, setCustomFeeds] = React.useState<FeedDescriptor[]>([])
-    const [requestedCustomFeeds, setRequestedCustomFeeds] = React.useState<
-      string[]
-    >([])
+    const {data: preferences} = usePreferencesQuery()
 
     React.useEffect(() => {
-      const pinned = store.preferences.pinnedFeeds
+      if (!preferences?.feeds?.pinned) return
 
-      if (isEqual(pinned, requestedCustomFeeds)) {
-        // no changes
-        return
-      }
+      const pinned = preferences.feeds.pinned
 
       const feeds: FeedDescriptor[] = []
+
       for (const uri of pinned) {
         if (uri.includes('app.bsky.feed.generator')) {
           feeds.push(`feedgen|${uri}`)
@@ -43,31 +39,20 @@ export const HomeScreen = withAuthRequired(
           feeds.push(`list|${uri}`)
         }
       }
-      pagerRef.current?.setPage(0)
+
       setCustomFeeds(feeds)
-      setRequestedCustomFeeds(pinned)
-    }, [
-      store,
-      store.preferences.pinnedFeeds,
-      customFeeds,
-      setCustomFeeds,
-      pagerRef,
-      requestedCustomFeeds,
-      setRequestedCustomFeeds,
-    ])
+
+      pagerRef.current?.setPage(0)
+    }, [preferences?.feeds?.pinned, setCustomFeeds, pagerRef])
 
     const homeFeedParams = React.useMemo<FeedParams>(() => {
-      if (!store.preferences.homeFeed.lab_mergeFeedEnabled) {
-        return {}
-      }
+      if (!preferences) return {}
+
       return {
-        mergeFeedEnabled: true,
-        mergeFeedSources: store.preferences.savedFeeds,
+        mergeFeedEnabled: preferences.feedViewPrefs.lab_mergeFeedEnabled,
+        mergeFeedSources: preferences.feeds.saved,
       }
-    }, [
-      store.preferences.homeFeed.lab_mergeFeedEnabled,
-      store.preferences.savedFeeds,
-    ])
+    }, [preferences])
 
     useFocusEffect(
       React.useCallback(() => {

src/view/shell/desktop/Feeds.tsx

@@ -2,16 +2,14 @@ import React from 'react'
 import {View, StyleSheet} from 'react-native'
 import {useNavigationState} from '@react-navigation/native'
 import {observer} from 'mobx-react-lite'
-import {useStores} from 'state/index'
 import {usePalette} from 'lib/hooks/usePalette'
-import {useDesktopRightNavItems} from 'lib/hooks/useDesktopRightNavItems'
 import {TextLink} from 'view/com/util/Link'
 import {getCurrentRoute} from 'lib/routes/helpers'
+import {usePinnedFeedsInfos} from '#/state/queries/feed'
 
 export const DesktopFeeds = observer(function DesktopFeeds() {
-  const store = useStores()
   const pal = usePalette('default')
-  const items = useDesktopRightNavItems(store.preferences.pinnedFeeds)
+  const feeds = usePinnedFeedsInfos()
 
   const route = useNavigationState(state => {
     if (!state) {
@@ -23,29 +21,29 @@ export const DesktopFeeds = observer(function DesktopFeeds() {
   return (
     <View style={[styles.container, pal.view, pal.border]}>
       <FeedItem href="/" title="Following" current={route.name === 'Home'} />
-      {items.map(item => {
-        try {
-          const params = route.params as Record<string, string>
-          const routeName =
-            item.collection === 'app.bsky.feed.generator'
-              ? 'ProfileFeed'
-              : 'ProfileList'
-          return (
-            <FeedItem
-              key={item.uri}
-              href={item.href}
-              title={item.displayName}
-              current={
-                route.name === routeName &&
-                params.name === item.hostname &&
-                params.rkey === item.rkey
-              }
-            />
-          )
-        } catch {
-          return null
-        }
-      })}
+      {feeds
+        .filter(f => f.displayName !== 'Following')
+        .map(feed => {
+          try {
+            const params = route.params as Record<string, string>
+            const routeName =
+              feed.type === 'feed' ? 'ProfileFeed' : 'ProfileList'
+            return (
+              <FeedItem
+                key={feed.uri}
+                href={feed.route.href}
+                title={feed.displayName}
+                current={
+                  route.name === routeName &&
+                  params.name === feed.route.params.name &&
+                  params.rkey === feed.route.params.rkey
+                }
+              />
+            )
+          } catch {
+            return null
+          }
+        })}
       <View style={{paddingTop: 8, paddingBottom: 6}}>
         <TextLink
           type="lg"