Wire up interstitial and Explore page

src/components/TrendingTopics.tsx

@@ -5,37 +5,16 @@ import {useLingui} from '@lingui/react'
 import {AtUri} from '@atproto/api'
 import {hasMutedWord} from '@atproto/api/dist/moderation/mutewords'
 
-import {atoms as a, useGutters, useTheme, ViewStyleProp} from '#/alf'
+import {atoms as a, useTheme, ViewStyleProp} from '#/alf'
 import {Link as InternalLink, LinkProps} from '#/components/Link'
 import {Text} from '#/components/Typography'
-import {BSKY_APP_HOST, feedUriToHref} from '#/lib/strings/url-helpers'
+import {feedUriToHref} from '#/lib/strings/url-helpers'
-import {makeProfileLink, makeSearchLink} from '#/lib/routes/links'
+import {makeProfileLink} from '#/lib/routes/links'
 import {Hashtag_Stroke2_Corner0_Rounded as Hashtag} from '#/components/icons/Hashtag'
 import {MagnifyingGlass_Filled_Stroke2_Corner0_Rounded as Search} from '#/components/icons/MagnifyingGlass'
 import {UserAvatar} from '#/view/com/util/UserAvatar'
 import {usePreferencesQuery} from '#/state/queries/preferences'
-
+import type {TrendingTopic} from '#/state/queries/trending/useTrendingTopics'
-export function TopicLarge({topic, style}: {topic: string} & ViewStyleProp) {
-  const t = useTheme()
-  return (
-    <View
-      style={[
-        a.p_sm,
-        a.px_md,
-        a.rounded_md,
-        a.border,
-        t.atoms.border_contrast_medium,
-        t.atoms.bg,
-        style,
-      ]}>
-      <Text
-        style={[a.flex_1, a.text_md, a.font_bold, a.leading_tight]}
-        numberOfLines={1}>
-        {topic}
-      </Text>
-    </View>
-  )
-}
 
 export function TopicSmall({topic, style}: {topic: string} & ViewStyleProp) {
   const t = useTheme()
@@ -59,11 +38,11 @@ export function TopicSmall({topic, style}: {topic: string} & ViewStyleProp) {
   )
 }
 
-export function Topic({
+export function TrendingTopic({
   topic: raw,
   size,
   style,
-}: {topic: RawTopic; size?: 'large' | 'small'} & ViewStyleProp) {
+}: {topic: TrendingTopic; size?: 'large' | 'small'} & ViewStyleProp) {
   const t = useTheme()
   const topic = useTopic(raw)
 
@@ -111,6 +90,29 @@ export function Topic({
   )
 }
 
+export function TrendingTopicLink({
+  topic: raw,
+  children,
+  style,
+  ...rest
+}: {
+  topic: TrendingTopic
+} & Omit<LinkProps, 'to' | 'label'>) {
+  const topic = useTopic(raw)
+
+  if (!topic) return null
+
+  return (
+    <InternalLink
+      label={topic.label}
+      to={topic.url}
+      style={[a.flex_col, style]}
+      {...rest}>
+      {children}
+    </InternalLink>
+  )
+}
+
 export function Link({
   topic,
   children,
@@ -134,30 +136,6 @@ export function Link({
   )
 }
 
-export function Grid({topics}: {topics: string[]}) {
-  const t = useTheme()
-  const gutters = useGutters([0, 'compact'])
-  return (
-    <View style={[a.flex_row, a.flex_wrap, a.gap_sm, gutters]}>
-      {topics.map(topic => (
-        <Link key={topic} topic={topic}>
-          {({hovered}) => (
-            <TopicLarge
-              topic={topic}
-              style={[
-                hovered && [
-                  t.atoms.border_contrast_high,
-                  t.atoms.bg_contrast_25,
-                ],
-              ]}
-            />
-          )}
-        </Link>
-      ))}
-    </View>
-  )
-}
-
 // temp
 export const TOPICS = [
   '#atproto',
@@ -172,43 +150,17 @@ export const TOPICS = [
   'Open Web',
 ]
 
-export const TOP = [
+type ParsedTrendingTopic =
-  {
-    name: '#atproto',
-    uri: 'https://bsky.app/hashtag/atproto',
-  },
-  {
-    name: 'South Korea',
-    uri: BSKY_APP_HOST + makeSearchLink({query: 'South Korea'}),
-  },
-  {
-    name: 'Paul Frazee',
-    uri: 'at://did:plc:ragtjsm2j2vknwkz3zp4oxrd/app.bsky.actor.profile/self'
-  },
-  {
-    name: 'Wired',
-    uri: BSKY_APP_HOST + makeSearchLink({query: 'Wired'}),
-  },
-  {
-    name: 'Quiet Posters',
-    uri: 'at://did:plc:vpkhqolt662uhesyj6nxm7ys/app.bsky.feed.generator/infreq',
-  },
-]
-
-type RawTopic = {
-  name: string
-  uri: string
-}
-
-type Topic =
   | {
       type: 'topic' | 'tag'
+      label: string
       name: string
       url: string
       uri: undefined
     }
   | {
       type: 'profile' | 'feed'
+      label: string
       name: string
       url: string
       uri: AtUri
@@ -221,32 +173,34 @@ export function useMutedWords() {
   }, [preferences?.moderationPrefs?.mutedWords])
 }
 
-export function useTopic(topic: RawTopic): Topic | undefined {
+export function useTopic(raw: TrendingTopic): ParsedTrendingTopic | undefined {
+  const {_} = useLingui()
   const mutedWords = useMutedWords()
+
   return React.useMemo(() => {
-    const {name, uri} = topic
+    const {topic: name, link: uri} = raw
 
     if (hasMutedWord({
       mutedWords,
       text: name
     })) return
 
-    if (uri.startsWith('https')) {
+    if (!uri.startsWith('at://')) {
-      const url = new URL(uri)
+      if (uri.startsWith('/search')) {
-      if (url.origin !== BSKY_APP_HOST) return
-      if (url.pathname.startsWith('/search')) {
         return {
           type: 'topic',
+          label: _(msg`Browse posts about ${name}`),
           name,
-          url: url.pathname,
           uri: undefined,
+          url: uri,
         }
-      } else if (url.pathname.startsWith('/hashtag')) {
+      } else if (uri.startsWith('/hashtag')) {
         return {
           type: 'tag',
+          label: _(msg`Browse posts tagged with ${name}`),
           name: name.replace(/^#/, ''),
-          url: url.pathname,
           uri: undefined,
+          url: uri,
         }
       }
     } else {
@@ -255,6 +209,7 @@ export function useTopic(topic: RawTopic): Topic | undefined {
         case 'app.bsky.actor.profile': {
           return {
             type: 'profile',
+            label: _(msg`View ${name}'s profile`),
             name,
             uri: urip,
             url: makeProfileLink({did: urip.host, handle: urip.host}),
@@ -263,6 +218,7 @@ export function useTopic(topic: RawTopic): Topic | undefined {
         case 'app.bsky.feed.generator': {
           return {
             type: 'feed',
+            label: _(msg`Browse the ${name} feed`),
             name,
             uri: urip,
             url: feedUriToHref(uri),
@@ -270,5 +226,5 @@ export function useTopic(topic: RawTopic): Topic | undefined {
         }
       }
     }
-  }, [topic, mutedWords])
+  }, [raw, mutedWords])
 }

src/components/interstitials/Trending.tsx

@@ -9,15 +9,16 @@ import {GradientFill} from '#/components/GradientFill'
 import {TimesLarge_Stroke2_Corner0_Rounded as X} from '#/components/icons/Times'
 import {Trending2_Stroke2_Corner2_Rounded as Graph} from '#/components/icons/Trending2'
 import * as Prompt from '#/components/Prompt'
-import * as Trending from '#/components/TrendingTopics'
+import {TrendingTopic, TrendingTopicLink} from '#/components/TrendingTopics'
 import {Text} from '#/components/Typography'
+import {useTrendingTopics} from '#/state/queries/trending/useTrendingTopics'
 
 export function TrendingInterstitial() {
   const t = useTheme()
   const {_} = useLingui()
   const gutters = useGutters(['base'])
   const trendingPrompt = Prompt.usePromptControl()
-
+  const {data: topics, error, isLoading} = useTrendingTopics()
   const {setTrendingDiscoverHidden} = useTrendingSettingsApi()
 
   return (
@@ -53,26 +54,25 @@ export function TrendingInterstitial() {
       </View>
 
       <View style={[a.flex_row, a.flex_wrap, a.gap_sm]}>
-        {Trending.TOP.slice(0, 8).map(topic => (
+        {isLoading ? null : error || !topics ? null : (
-          <Trending.Topic
+          <>
-            topic={topic}
+            {topics.map(topic => (
-          />
+              <TrendingTopicLink key={topic.link} topic={topic}>
-        ))}
+                {({hovered}) => (
-        {/*Trending.TOPICS.slice(0, 8).map(topic => (
+                  <TrendingTopic
-          <Trending.Link key={topic} topic={topic}>
+                    topic={topic}
-            {({hovered}) => (
+                    style={[
-              <Trending.TopicLarge
+                      hovered && [
-                topic={topic}
+                        t.atoms.border_contrast_high,
-                style={[
+                        t.atoms.bg_contrast_25,
-                  hovered && [
+                      ],
-                    t.atoms.border_contrast_high,
+                    ]}
-                    t.atoms.bg_contrast_25,
+                  />
-                  ],
+                )}
-                ]}
+              </TrendingTopicLink>
-              />
+            ))}
-            )}
+          </>
-          </Trending.Link>
+        )}
-        ))*/}
       </View>
 
       <Prompt.Basic

src/screens/Search/components/ExploreTrendingTopics.tsx

@@ -0,0 +1,35 @@
+import {View} from 'react-native'
+
+import {useTrendingTopics} from '#/state/queries/trending/useTrendingTopics'
+import {atoms as a, useTheme, useGutters} from '#/alf'
+import {TrendingTopic, TrendingTopicLink} from '#/components/TrendingTopics'
+
+export function ExploreTrendingTopics() {
+  const t = useTheme()
+  const gutters = useGutters([0, 'compact'])
+  const {data: topics, error, isLoading} = useTrendingTopics()
+
+  return (
+    <View style={[a.flex_row, a.flex_wrap, a.gap_sm, gutters]}>
+      {isLoading ? null : error || !topics ? null : (
+        <>
+          {topics.map(topic => (
+            <TrendingTopicLink key={topic.link} topic={topic}>
+              {({hovered}) => (
+                <TrendingTopic
+                  topic={topic}
+                  style={[
+                    hovered && [
+                      t.atoms.border_contrast_high,
+                      t.atoms.bg_contrast_25,
+                    ],
+                  ]}
+                />
+              )}
+            </TrendingTopicLink>
+          ))}
+        </>
+      )}
+    </View>
+  )
+}

src/state/queries/trending/useTrendingTopics.ts

@@ -0,0 +1,56 @@
+import {useQuery} from '@tanstack/react-query'
+
+// TEMP
+import {makeSearchLink} from '#/lib/routes/links'
+
+export type TrendingTopic = {
+  topic: string
+  displayName: string
+  description: string
+  link: string
+}
+
+export const trendingTopicsQueryKey = ['trending-topics']
+
+// TODO ideally handle down-state faster
+
+export function useTrendingTopics() {
+  return useQuery({
+    queryKey: trendingTopicsQueryKey,
+    async queryFn() {
+      const topics: TrendingTopic[] = [
+        {
+          topic: '#atproto',
+          displayName: '#atproto',
+          description: '',
+          link: '/hashtag/atproto',
+        },
+        {
+          topic: 'South Korea',
+          displayName: 'South Korea',
+          description: '',
+          link: makeSearchLink({query: 'South Korea'}),
+        },
+        {
+          topic: 'Paul Frazee',
+          displayName: 'Paul Frazee',
+          description: '',
+          link: 'at://did:plc:ragtjsm2j2vknwkz3zp4oxrd/app.bsky.actor.profile/self',
+        },
+        {
+          topic: 'Wired',
+          displayName: 'Wired',
+          description: '',
+          link: makeSearchLink({query: 'Wired'}),
+        },
+        {
+          topic: 'Quiet Posters',
+          displayName: 'Quiet Posters',
+          description: '',
+          link: 'at://did:plc:vpkhqolt662uhesyj6nxm7ys/app.bsky.feed.generator/infreq',
+        },
+      ]
+      return topics
+    },
+  })
+}

src/view/screens/Search/Explore.tsx

@@ -39,6 +39,7 @@ import {Loader} from '#/components/Loader'
 import * as StarterPackSuggestions from '#/components/StarterPack/Suggestions'
 import * as TrendingTopics from '#/components/TrendingTopics'
 import {Text} from '#/components/Typography'
+import {ExploreTrendingTopics} from "#/screens/Search/components/ExploreTrendingTopics"
 
 function SuggestedItemsHeader({
   title,
@@ -610,7 +611,7 @@ export function Explore() {
                 }
               />
               <View style={[a.pt_md, a.pb_lg]}>
-                <TrendingTopics.Grid topics={item.topics} />
+                <ExploreTrendingTopics />
               </View>
             </>
           )