Handle service config, enablement, load states, update lex contract

src/state/queries/service-config.ts

@@ -0,0 +1,35 @@
+import {useQuery} from '@tanstack/react-query'
+
+import {useAgent} from '#/state/session'
+
+type ServiceConfig = {
+  checkEmailConfirmed: boolean
+  trendingTopicsEnabled: boolean
+  trendingTopicsLangs: string[]
+}
+
+export function useServiceConfigQuery() {
+  const agent = useAgent()
+  return useQuery<ServiceConfig>({
+    queryKey: ['service-config'],
+    queryFn: async () => {
+      try {
+        const {data} = await agent.api.app.bsky.unspecced.getConfig()
+        return {
+          checkEmailConfirmed: Boolean(data.checkEmailConfirmed),
+          // TODO
+          trendingTopicsEnabled: true, // Boolean(data.trendingTopicsEnabled),
+          // TODO
+          trendingTopicsLangs: ['en'], // data.trendingTopicsLangs ?? [],
+        }
+      } catch (e) {
+        return {
+          checkEmailConfirmed: false,
+          trendingTopicsEnabled: false,
+          trendingTopicsLangs: [],
+        }
+      }
+    },
+    staleTime: 5 * 60 * 1000,
+  })
+}

src/state/queries/trending/useTrendingTopics.ts

@@ -10,14 +10,38 @@ export type TrendingTopic = {
   link: string
 }
 
-export const trendingTopicsQueryKey = ['trending-topics']
+export const DEFAULT_LIMIT = 12
 
-// TODO ideally handle down-state faster
+export const trendingTopicsQueryKey = ['trending-topics']
 
 export function useTrendingTopics() {
   return useQuery({
     queryKey: trendingTopicsQueryKey,
     async queryFn() {
+      /*
+      try {
+        const params = new URLSearchParams()
+        params.set('viewer', agent.session?.did || '')
+        const res = await fetch(
+          ``,
+          {
+            headers: {
+              Authorization:
+                'Bearer ',
+            },
+          },
+        )
+
+        if (!res.ok) {
+          throw new Error('Failed to fetch trending topics')
+        }
+
+        const data = await res.json()
+        return data.topics
+      } catch (e) {
+        console.error(e)
+      }
+      */
       const topics: TrendingTopic[] = [
         {
           topic: '#atproto',
@@ -50,7 +74,10 @@ export function useTrendingTopics() {
           link: 'at://did:plc:vpkhqolt662uhesyj6nxm7ys/app.bsky.feed.generator/infreq',
         },
       ]
-      return topics
+      return {
+        topics,
+        recommended: [],
+      }
     },
   })
 }

src/state/shell/trending-config.tsx

@@ -0,0 +1,31 @@
+import React from 'react'
+
+import {useLanguagePrefs} from '#/state/preferences/languages'
+import {useServiceConfigQuery} from '#/state/queries/service-config'
+
+type Context = {
+  enabled: boolean
+}
+
+const Context = React.createContext<Context>({
+  enabled: false,
+})
+
+export function Provider({children}: React.PropsWithChildren<{}>) {
+  const langPrefs = useLanguagePrefs()
+  const {data: config} = useServiceConfigQuery()
+  const ctx = React.useMemo<Context>(() => {
+    const serviceEnabled = Boolean(config?.trendingTopicsEnabled)
+    const languageIsSupported = langPrefs.contentLanguages.some(lang => {
+      return (config?.trendingTopicsLangs ?? []).includes(lang)
+    })
+    return {
+      enabled: serviceEnabled && languageIsSupported,
+    }
+  }, [config, langPrefs])
+  return <Context.Provider value={ctx}>{children}</Context.Provider>
+}
+
+export function useTrendingConfig() {
+  return React.useContext(Context)
+}

src/state/trending-config.tsx

@@ -0,0 +1,32 @@
+import React from 'react'
+
+import {useLanguagePrefs} from '#/state/preferences/languages'
+import {useServiceConfigQuery} from '#/state/queries/service-config'
+
+type Context = {
+  enabled: boolean
+}
+
+const Context = React.createContext<Context>({
+  enabled: false,
+})
+
+export function Provider({children}: React.PropsWithChildren<{}>) {
+  const langPrefs = useLanguagePrefs()
+  const {data: config} = useServiceConfigQuery()
+  const ctx = React.useMemo<Context>(() => {
+    // TODO maybe default to true
+    const serviceEnabled = Boolean(config?.trendingTopicsEnabled)
+    const languageIsSupported = langPrefs.contentLanguages.some(lang => {
+      return (config?.trendingTopicsLangs ?? []).includes(lang)
+    })
+    return {
+      enabled: serviceEnabled && languageIsSupported,
+    }
+  }, [config, langPrefs])
+  return <Context.Provider value={ctx}>{children}</Context.Provider>
+}
+
+export function useTrendingConfig() {
+  return React.useContext(Context)
+}