From 02dbcc134ef9f9870c4f6eab2da93773b8310d67 Mon Sep 17 00:00:00 2001
From: dan <dan.abramov@gmail.com>
Date: Fri, 10 Jan 2025 00:32:08 +0000
Subject: Fix trending swipe gesture (#7417)

---
 src/components/interstitials/Trending.tsx | 164 ++++++++++++++++--------------
 1 file changed, 87 insertions(+), 77 deletions(-)

(limited to 'src/components/interstitials/Trending.tsx')

diff --git a/src/components/interstitials/Trending.tsx b/src/components/interstitials/Trending.tsx
index 9a5feb2b6..3e0308e43 100644
--- a/src/components/interstitials/Trending.tsx
+++ b/src/components/interstitials/Trending.tsx
@@ -1,6 +1,6 @@
-import React from 'react'
-import {View} from 'react-native'
-import {ScrollView} from 'react-native-gesture-handler'
+import React, {useContext} from 'react'
+import {ScrollView, View} from 'react-native'
+import {GestureDetector} from 'react-native-gesture-handler'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
@@ -12,6 +12,7 @@ import {
 import {useTrendingTopics} from '#/state/queries/trending/useTrendingTopics'
 import {useTrendingConfig} from '#/state/trending-config'
 import {LoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder'
+import {TrendingGestureContext} from '#/view/shell/TrendingGestureContext'
 import {atoms as a, useGutters, useTheme} from '#/alf'
 import {Button, ButtonIcon} from '#/components/Button'
 import {TimesLarge_Stroke2_Corner0_Rounded as X} from '#/components/icons/Times'
@@ -40,83 +41,92 @@ export function Inner() {
     setTrendingDisabled(true)
   }, [setTrendingDisabled])
 
+  // This is coordinated to take precedence over the drawer pan gesture.
+  const trendingScrollGesture = useContext(TrendingGestureContext)
+
   return error || noTopics ? null : (
     <View style={[t.atoms.border_contrast_low, a.border_t]}>
-      <ScrollView
-        horizontal
-        showsHorizontalScrollIndicator={false}
-        decelerationRate="fast">
-        <View style={[gutters, a.flex_row, a.align_center, a.gap_lg]}>
-          <View style={{paddingLeft: 4, paddingRight: 2}}>
-            <Graph size="sm" />
-          </View>
-          {isLoading ? (
-            <View style={[a.py_lg, a.flex_row, a.gap_lg, a.align_center]}>
-              <LoadingPlaceholder
-                width={80}
-                height={undefined}
-                style={{alignSelf: 'stretch'}}
-              />
-              <LoadingPlaceholder
-                width={50}
-                height={undefined}
-                style={{alignSelf: 'stretch'}}
-              />
-              <LoadingPlaceholder
-                width={120}
-                height={undefined}
-                style={{alignSelf: 'stretch'}}
-              />
-              <LoadingPlaceholder
-                width={30}
-                height={undefined}
-                style={{alignSelf: 'stretch'}}
-              />
-              <LoadingPlaceholder
-                width={180}
-                height={undefined}
-                style={{alignSelf: 'stretch'}}
-              />
-              <Text
-                style={[t.atoms.text_contrast_medium, a.text_sm, a.font_bold]}>
-                {' '}
-              </Text>
+      <GestureDetector gesture={trendingScrollGesture}>
+        <ScrollView
+          horizontal
+          showsHorizontalScrollIndicator={false}
+          decelerationRate="fast">
+          <View style={[gutters, a.flex_row, a.align_center, a.gap_lg]}>
+            <View style={{paddingLeft: 4, paddingRight: 2}}>
+              <Graph size="sm" />
             </View>
-          ) : !trending?.topics ? null : (
-            <>
-              {trending.topics.map(topic => (
-                <TrendingTopicLink
-                  key={topic.link}
-                  topic={topic}
-                  onPress={() => {
-                    logEvent('trendingTopic:click', {context: 'interstitial'})
-                  }}>
-                  <View style={[a.py_lg]}>
-                    <Text
-                      style={[
-                        t.atoms.text,
-                        a.text_sm,
-                        a.font_bold,
-                        {opacity: 0.7}, // NOTE: we use opacity 0.7 instead of a color to match the color of the home pager tab bar
-                      ]}>
-                      {topic.topic}
-                    </Text>
-                  </View>
-                </TrendingTopicLink>
-              ))}
-              <Button
-                label={_(msg`Hide trending topics`)}
-                size="tiny"
-                variant="ghost"
-                color="secondary"
-                shape="round"
-                onPress={() => trendingPrompt.open()}>
-                <ButtonIcon icon={X} />
-              </Button>
-            </>
-          )}
-        </View>
-      </ScrollView>
+            {isLoading ? (
+              <View style={[a.py_lg, a.flex_row, a.gap_lg, a.align_center]}>
+                <LoadingPlaceholder
+                  width={80}
+                  height={undefined}
+                  style={{alignSelf: 'stretch'}}
+                />
+                <LoadingPlaceholder
+                  width={50}
+                  height={undefined}
+                  style={{alignSelf: 'stretch'}}
+                />
+                <LoadingPlaceholder
+                  width={120}
+                  height={undefined}
+                  style={{alignSelf: 'stretch'}}
+                />
+                <LoadingPlaceholder
+                  width={30}
+                  height={undefined}
+                  style={{alignSelf: 'stretch'}}
+                />
+                <LoadingPlaceholder
+                  width={180}
+                  height={undefined}
+                  style={{alignSelf: 'stretch'}}
+                />
+                <Text
+                  style={[
+                    t.atoms.text_contrast_medium,
+                    a.text_sm,
+                    a.font_bold,
+                  ]}>
+                  {' '}
+                </Text>
+              </View>
+            ) : !trending?.topics ? null : (
+              <>
+                {trending.topics.map(topic => (
+                  <TrendingTopicLink
+                    key={topic.link}
+                    topic={topic}
+                    onPress={() => {
+                      logEvent('trendingTopic:click', {context: 'interstitial'})
+                    }}>
+                    <View style={[a.py_lg]}>
+                      <Text
+                        style={[
+                          t.atoms.text,
+                          a.text_sm,
+                          a.font_bold,
+                          {opacity: 0.7}, // NOTE: we use opacity 0.7 instead of a color to match the color of the home pager tab bar
+                        ]}>
+                        {topic.topic}
+                      </Text>
+                    </View>
+                  </TrendingTopicLink>
+                ))}
+                <Button
+                  label={_(msg`Hide trending topics`)}
+                  size="tiny"
+                  variant="ghost"
+                  color="secondary"
+                  shape="round"
+                  onPress={() => trendingPrompt.open()}>
+                  <ButtonIcon icon={X} />
+                </Button>
+              </>
+            )}
+          </View>
+        </ScrollView>
+      </GestureDetector>
 
       <Prompt.Basic
         control={trendingPrompt}
-- 
cgit 1.4.1