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

src/screens/Search/components/ExploreTrendingTopics.tsx

@@ -1,35 +1,94 @@
 import {View} from 'react-native'
+import {Trans} from '@lingui/macro'
 
-import {useTrendingTopics} from '#/state/queries/trending/useTrendingTopics'
-import {atoms as a, useTheme, useGutters} from '#/alf'
-import {TrendingTopic, TrendingTopicLink} from '#/components/TrendingTopics'
+import {isWeb} from '#/platform/detection'
+import {
+  DEFAULT_LIMIT as TRENDING_TOPICS_COUNT,
+  useTrendingTopics,
+} from '#/state/queries/trending/useTrendingTopics'
+import {useTrendingConfig} from '#/state/trending-config'
+import {atoms as a, tokens, useGutters, useTheme} from '#/alf'
+import {GradientFill} from '#/components/GradientFill'
+import {Trending2_Stroke2_Corner2_Rounded as Trending} from '#/components/icons/Trending2'
+import {
+  TrendingTopic,
+  TrendingTopicLink,
+  TrendingTopicSkeleton,
+} from '#/components/TrendingTopics'
+import {Text} from '#/components/Typography'
 
 export function ExploreTrendingTopics() {
+  const {enabled} = useTrendingConfig()
+  return enabled ? <Inner /> : null
+}
+
+function Inner() {
   const t = useTheme()
   const gutters = useGutters([0, 'compact'])
-  const {data: topics, error, isLoading} = useTrendingTopics()
+  const {data: trending, error, isLoading} = useTrendingTopics()
+  const noTopics = !isLoading && !error && !trending?.topics
 
-  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>
+  return error || noTopics ? null : (
+    <>
+      <View
+        style={[
+          isWeb
+            ? [a.flex_row, a.px_lg, a.py_lg, a.pt_2xl, a.gap_md]
+            : [{flexDirection: 'row-reverse'}, a.p_lg, a.pt_2xl, a.gap_md],
+          a.border_b,
+          t.atoms.border_contrast_low,
+        ]}>
+        <View style={[a.flex_1, a.gap_sm]}>
+          <View style={[a.flex_row, a.align_center, a.gap_sm]}>
+            <Trending
+              size="lg"
+              fill={t.palette.primary_500}
+              style={{marginLeft: -2}}
+            />
+            <Text style={[a.text_2xl, a.font_heavy, t.atoms.text]}>
+              <Trans>Trending</Trans>
+            </Text>
+            <View style={[a.py_xs, a.px_sm, a.rounded_sm, a.overflow_hidden]}>
+              <GradientFill gradient={tokens.gradients.primary} />
+              <Text style={[a.text_sm, a.font_heavy, {color: 'white'}]}>
+                <Trans>BETA</Trans>
+              </Text>
+            </View>
+          </View>
+          <Text style={[t.atoms.text_contrast_high, a.leading_snug]}>
+            <Trans>What people are posting about now</Trans>
+          </Text>
+        </View>
+      </View>
+
+      <View style={[a.pt_md, a.pb_lg]}>
+        <View
+          style={[a.flex_row, a.justify_start, a.flex_wrap, a.gap_sm, gutters]}>
+          {isLoading ? (
+            Array(TRENDING_TOPICS_COUNT)
+              .fill(0)
+              .map((_, i) => <TrendingTopicSkeleton key={i} index={i} />)
+          ) : !trending?.topics ? null : (
+            <>
+              {trending.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>
+      </View>
+    </>
   )
 }