From b87c94e6d95169df2f14ce489a248506a755139f Mon Sep 17 00:00:00 2001
From: dan <dan.abramov@gmail.com>
Date: Mon, 18 Nov 2024 21:51:23 +0000
Subject: Extract RepostButton inner dialog (#6498)

* Extract RepostButton inner dialog

* use `useDialogContext` instead of passing prop

---------

Co-authored-by: Samuel Newman <mozzius@protonmail.com>
---
 src/view/com/util/post-ctrls/RepostButton.tsx | 188 +++++++++++++++-----------
 1 file changed, 109 insertions(+), 79 deletions(-)

(limited to 'src/view/com/util/post-ctrls/RepostButton.tsx')

diff --git a/src/view/com/util/post-ctrls/RepostButton.tsx b/src/view/com/util/post-ctrls/RepostButton.tsx
index 28889429f..eb7505d2e 100644
--- a/src/view/com/util/post-ctrls/RepostButton.tsx
+++ b/src/view/com/util/post-ctrls/RepostButton.tsx
@@ -36,16 +36,12 @@ let RepostButton = ({
   const requireAuth = useRequireAuth()
   const dialogControl = Dialog.useDialogControl()
   const playHaptic = useHaptics()
-
   const color = React.useMemo(
     () => ({
       color: isReposted ? t.palette.positive_600 : t.palette.contrast_500,
     }),
     [t, isReposted],
   )
-
-  const close = useCallback(() => dialogControl.close(), [dialogControl])
-
   return (
     <>
       <Button
@@ -92,84 +88,118 @@ let RepostButton = ({
         control={dialogControl}
         nativeOptions={{preventExpansion: true}}>
         <Dialog.Handle />
-        <Dialog.ScrollableInner label={_(msg`Repost or quote post`)}>
-          <View style={a.gap_xl}>
-            <View style={a.gap_xs}>
-              <Button
-                style={[a.justify_start, a.px_md]}
-                label={
-                  isReposted
-                    ? _(msg`Remove repost`)
-                    : _(msg({message: `Repost`, context: 'action'}))
-                }
-                onPress={() => {
-                  if (!isReposted) playHaptic()
-
-                  dialogControl.close(() => {
-                    onRepost()
-                  })
-                }}
-                size="large"
-                variant="ghost"
-                color="primary">
-                <Repost size="lg" fill={t.palette.primary_500} />
-                <Text style={[a.font_bold, a.text_xl]}>
-                  {isReposted
-                    ? _(msg`Remove repost`)
-                    : _(msg({message: `Repost`, context: 'action'}))}
-                </Text>
-              </Button>
-              <Button
-                disabled={embeddingDisabled}
-                testID="quoteBtn"
-                style={[a.justify_start, a.px_md]}
-                label={
-                  embeddingDisabled
-                    ? _(msg`Quote posts disabled`)
-                    : _(msg`Quote post`)
-                }
-                onPress={() => {
-                  playHaptic()
-                  dialogControl.close(() => {
-                    onQuote()
-                  })
-                }}
-                size="large"
-                variant="ghost"
-                color="primary">
-                <Quote
-                  size="lg"
-                  fill={
-                    embeddingDisabled
-                      ? t.atoms.text_contrast_low.color
-                      : t.palette.primary_500
-                  }
-                />
-                <Text
-                  style={[
-                    a.font_bold,
-                    a.text_xl,
-                    embeddingDisabled && t.atoms.text_contrast_low,
-                  ]}>
-                  {embeddingDisabled
-                    ? _(msg`Quote posts disabled`)
-                    : _(msg`Quote post`)}
-                </Text>
-              </Button>
-            </View>
-            <Button
-              label={_(msg`Cancel quote post`)}
-              onPress={close}
-              size="large"
-              variant="solid"
-              color="primary">
-              <ButtonText>{_(msg`Cancel`)}</ButtonText>
-            </Button>
-          </View>
-        </Dialog.ScrollableInner>
+        <RepostButtonDialogInner
+          isReposted={isReposted}
+          onRepost={onRepost}
+          onQuote={onQuote}
+          embeddingDisabled={embeddingDisabled}
+        />
       </Dialog.Outer>
     </>
   )
 }
 RepostButton = memo(RepostButton)
 export {RepostButton}
+
+let RepostButtonDialogInner = ({
+  isReposted,
+  onRepost,
+  onQuote,
+  embeddingDisabled,
+}: {
+  isReposted: boolean
+  onRepost: () => void
+  onQuote: () => void
+  embeddingDisabled: boolean
+}): React.ReactNode => {
+  const t = useTheme()
+  const {_} = useLingui()
+  const playHaptic = useHaptics()
+  const control = Dialog.useDialogContext()
+
+  const onPressRepost = useCallback(() => {
+    if (!isReposted) playHaptic()
+
+    control.close(() => {
+      onRepost()
+    })
+  }, [control, isReposted, onRepost, playHaptic])
+
+  const onPressQuote = useCallback(() => {
+    playHaptic()
+    control.close(() => {
+      onQuote()
+    })
+  }, [control, onQuote, playHaptic])
+
+  const onPressClose = useCallback(() => control.close(), [control])
+
+  return (
+    <Dialog.ScrollableInner label={_(msg`Repost or quote post`)}>
+      <View style={a.gap_xl}>
+        <View style={a.gap_xs}>
+          <Button
+            style={[a.justify_start, a.px_md]}
+            label={
+              isReposted
+                ? _(msg`Remove repost`)
+                : _(msg({message: `Repost`, context: 'action'}))
+            }
+            onPress={onPressRepost}
+            size="large"
+            variant="ghost"
+            color="primary">
+            <Repost size="lg" fill={t.palette.primary_500} />
+            <Text style={[a.font_bold, a.text_xl]}>
+              {isReposted
+                ? _(msg`Remove repost`)
+                : _(msg({message: `Repost`, context: 'action'}))}
+            </Text>
+          </Button>
+          <Button
+            disabled={embeddingDisabled}
+            testID="quoteBtn"
+            style={[a.justify_start, a.px_md]}
+            label={
+              embeddingDisabled
+                ? _(msg`Quote posts disabled`)
+                : _(msg`Quote post`)
+            }
+            onPress={onPressQuote}
+            size="large"
+            variant="ghost"
+            color="primary">
+            <Quote
+              size="lg"
+              fill={
+                embeddingDisabled
+                  ? t.atoms.text_contrast_low.color
+                  : t.palette.primary_500
+              }
+            />
+            <Text
+              style={[
+                a.font_bold,
+                a.text_xl,
+                embeddingDisabled && t.atoms.text_contrast_low,
+              ]}>
+              {embeddingDisabled
+                ? _(msg`Quote posts disabled`)
+                : _(msg`Quote post`)}
+            </Text>
+          </Button>
+        </View>
+        <Button
+          label={_(msg`Cancel quote post`)}
+          onPress={onPressClose}
+          size="large"
+          variant="solid"
+          color="primary">
+          <ButtonText>{_(msg`Cancel`)}</ButtonText>
+        </Button>
+      </View>
+    </Dialog.ScrollableInner>
+  )
+}
+RepostButtonDialogInner = memo(RepostButtonDialogInner)
+export {RepostButtonDialogInner}
-- 
cgit 1.4.1


From a5dbb35237d014a07c0f3f82e9dffce67129e542 Mon Sep 17 00:00:00 2001
From: Samuel Newman <mozzius@protonmail.com>
Date: Fri, 22 Nov 2024 13:41:24 +0000
Subject: Use outline style for repost cancel button (#6509)

* use outline style for repost cancel button

* use trans macro in JSX
---
 src/view/com/util/post-ctrls/RepostButton.tsx | 24 +++++++++++++++---------
 1 file changed, 15 insertions(+), 9 deletions(-)

(limited to 'src/view/com/util/post-ctrls/RepostButton.tsx')

diff --git a/src/view/com/util/post-ctrls/RepostButton.tsx b/src/view/com/util/post-ctrls/RepostButton.tsx
index eb7505d2e..06b1fcaf6 100644
--- a/src/view/com/util/post-ctrls/RepostButton.tsx
+++ b/src/view/com/util/post-ctrls/RepostButton.tsx
@@ -1,6 +1,6 @@
 import React, {memo, useCallback} from 'react'
 import {View} from 'react-native'
-import {msg, plural} from '@lingui/macro'
+import {msg, plural, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
 import {POST_CTRL_HITSLOP} from '#/lib/constants'
@@ -151,9 +151,11 @@ let RepostButtonDialogInner = ({
             color="primary">
             <Repost size="lg" fill={t.palette.primary_500} />
             <Text style={[a.font_bold, a.text_xl]}>
-              {isReposted
-                ? _(msg`Remove repost`)
-                : _(msg({message: `Repost`, context: 'action'}))}
+              {isReposted ? (
+                <Trans>Remove repost</Trans>
+              ) : (
+                <Trans context="action">Repost</Trans>
+              )}
             </Text>
           </Button>
           <Button
@@ -183,9 +185,11 @@ let RepostButtonDialogInner = ({
                 a.text_xl,
                 embeddingDisabled && t.atoms.text_contrast_low,
               ]}>
-              {embeddingDisabled
-                ? _(msg`Quote posts disabled`)
-                : _(msg`Quote post`)}
+              {embeddingDisabled ? (
+                <Trans>Quote posts disabled</Trans>
+              ) : (
+                <Trans>Quote post</Trans>
+              )}
             </Text>
           </Button>
         </View>
@@ -193,9 +197,11 @@ let RepostButtonDialogInner = ({
           label={_(msg`Cancel quote post`)}
           onPress={onPressClose}
           size="large"
-          variant="solid"
+          variant="outline"
           color="primary">
-          <ButtonText>{_(msg`Cancel`)}</ButtonText>
+          <ButtonText>
+            <Trans>Cancel</Trans>
+          </ButtonText>
         </Button>
       </View>
     </Dialog.ScrollableInner>
-- 
cgit 1.4.1