From 14e308d06a5db7130d67be525777dcaa4669d292 Mon Sep 17 00:00:00 2001
From: Eric Bailey <git@esb.lol>
Date: Tue, 20 Aug 2024 11:08:27 -0500
Subject: [PATCH] Add Hider component (#4960)

Co-authored-by: Hailey <me@haileyok.com>
---
 src/components/moderation/Hider.tsx |  83 +++++++++++++++++++
 src/view/screens/ProfileList.tsx    | 120 ++++++++++++++--------------
 2 files changed, 144 insertions(+), 59 deletions(-)
 create mode 100644 src/components/moderation/Hider.tsx

diff --git a/src/components/moderation/Hider.tsx b/src/components/moderation/Hider.tsx
new file mode 100644
index 0000000000..f4dafcf065
--- /dev/null
+++ b/src/components/moderation/Hider.tsx
@@ -0,0 +1,83 @@
+import React from 'react'
+import {ModerationUI} from '@atproto/api'
+
+import {
+  ModerationCauseDescription,
+  useModerationCauseDescription,
+} from '#/lib/moderation/useModerationCauseDescription'
+import {
+  ModerationDetailsDialog,
+  useModerationDetailsDialogControl,
+} from '#/components/moderation/ModerationDetailsDialog'
+
+type Context = {
+  isContentVisible: boolean
+  setIsContentVisible: (show: boolean) => void
+  info: ModerationCauseDescription
+  showInfoDialog: () => void
+  meta: {
+    isNoPwi: boolean
+    noOverride: boolean
+  }
+}
+
+const Context = React.createContext<Context>({} as Context)
+
+export const useScreenHider = () => React.useContext(Context)
+
+export function Outer({
+  modui,
+  children,
+}: React.PropsWithChildren<{
+  modui: ModerationUI
+}>) {
+  const control = useModerationDetailsDialogControl()
+  const blur = modui.blurs[0]
+  const [isContentVisible, setIsContentVisible] = React.useState(!blur)
+  const info = useModerationCauseDescription(blur)
+
+  const meta = {
+    isNoPwi: Boolean(
+      modui.blurs.find(
+        cause =>
+          cause.type === 'label' &&
+          cause.labelDef.identifier === '!no-unauthenticated',
+      ),
+    ),
+    noOverride: modui.noOverride,
+  }
+
+  const showInfoDialog = () => {
+    control.open()
+  }
+
+  const onSetContentVisible = (show: boolean) => {
+    if (meta.noOverride) return
+    setIsContentVisible(show)
+  }
+
+  const ctx = {
+    isContentVisible,
+    setIsContentVisible: onSetContentVisible,
+    showInfoDialog,
+    info,
+    meta,
+  }
+
+  return (
+    <Context.Provider value={ctx}>
+      {children}
+      <ModerationDetailsDialog control={control} modcause={blur} />
+    </Context.Provider>
+  )
+}
+
+export function Content({children}: {children: React.ReactNode}) {
+  const ctx = useScreenHider()
+  return ctx.isContentVisible ? children : null
+}
+
+export function Mask({children}: {children: React.ReactNode}) {
+  const ctx = useScreenHider()
+  return ctx.isContentVisible ? null : children
+}
diff --git a/src/view/screens/ProfileList.tsx b/src/view/screens/ProfileList.tsx
index c3a59095ae..727ab4b6dd 100644
--- a/src/view/screens/ProfileList.tsx
+++ b/src/view/screens/ProfileList.tsx
@@ -71,7 +71,7 @@ import {CenteredView} from 'view/com/util/Views'
 import {ListHiddenScreen} from '#/screens/List/ListHiddenScreen'
 import {atoms as a, useTheme} from '#/alf'
 import {useDialogControl} from '#/components/Dialog'
-import {ScreenHider} from '#/components/moderation/ScreenHider'
+import * as Hider from '#/components/moderation/Hider'
 import * as Prompt from '#/components/Prompt'
 import {ReportDialog, useReportDialogControl} from '#/components/ReportDialog'
 import {RichText} from '#/components/RichText'
@@ -189,35 +189,72 @@ function ProfileListScreenLoaded({
     return <Header rkey={rkey} list={list} preferences={preferences} />
   }, [rkey, list, preferences])
 
-  if (isHidden) {
-    return <ListHiddenScreen list={list} preferences={preferences} />
-  }
-
   if (isCurateList) {
     return (
-      <ScreenHider
-        screenDescription={'list'}
-        modui={moderation.ui('contentView')}>
+      <Hider.Outer modui={moderation.ui('contentView')}>
+        <Hider.Mask>
+          <ListHiddenScreen list={list} preferences={preferences} />
+        </Hider.Mask>
+        <Hider.Content>
+          <View style={s.hContentRegion}>
+            <PagerWithHeader
+              items={SECTION_TITLES_CURATE}
+              isHeaderReady={true}
+              renderHeader={renderHeader}
+              onCurrentPageSelected={onCurrentPageSelected}>
+              {({headerHeight, scrollElRef, isFocused}) => (
+                <FeedSection
+                  ref={feedSectionRef}
+                  feed={`list|${uri}`}
+                  scrollElRef={scrollElRef as ListRef}
+                  headerHeight={headerHeight}
+                  isFocused={isScreenFocused && isFocused}
+                />
+              )}
+              {({headerHeight, scrollElRef}) => (
+                <AboutSection
+                  ref={aboutSectionRef}
+                  scrollElRef={scrollElRef as ListRef}
+                  list={list}
+                  onPressAddUser={onPressAddUser}
+                  headerHeight={headerHeight}
+                />
+              )}
+            </PagerWithHeader>
+            <FAB
+              testID="composeFAB"
+              onPress={() => openComposer({})}
+              icon={
+                <ComposeIcon2
+                  strokeWidth={1.5}
+                  size={29}
+                  style={{color: 'white'}}
+                />
+              }
+              accessibilityRole="button"
+              accessibilityLabel={_(msg`New post`)}
+              accessibilityHint=""
+            />
+          </View>
+        </Hider.Content>
+      </Hider.Outer>
+    )
+  }
+  return (
+    <Hider.Outer modui={moderation.ui('contentView')}>
+      <Hider.Mask>
+        <ListHiddenScreen list={list} preferences={preferences} />
+      </Hider.Mask>
+      <Hider.Content>
         <View style={s.hContentRegion}>
           <PagerWithHeader
-            items={SECTION_TITLES_CURATE}
+            items={SECTION_TITLES_MOD}
             isHeaderReady={true}
-            renderHeader={renderHeader}
-            onCurrentPageSelected={onCurrentPageSelected}>
-            {({headerHeight, scrollElRef, isFocused}) => (
-              <FeedSection
-                ref={feedSectionRef}
-                feed={`list|${uri}`}
-                scrollElRef={scrollElRef as ListRef}
-                headerHeight={headerHeight}
-                isFocused={isScreenFocused && isFocused}
-              />
-            )}
+            renderHeader={renderHeader}>
             {({headerHeight, scrollElRef}) => (
               <AboutSection
-                ref={aboutSectionRef}
-                scrollElRef={scrollElRef as ListRef}
                 list={list}
+                scrollElRef={scrollElRef as ListRef}
                 onPressAddUser={onPressAddUser}
                 headerHeight={headerHeight}
               />
@@ -238,43 +275,8 @@ function ProfileListScreenLoaded({
             accessibilityHint=""
           />
         </View>
-      </ScreenHider>
-    )
-  }
-  return (
-    <ScreenHider
-      screenDescription={_(msg`list`)}
-      modui={moderation.ui('contentView')}>
-      <View style={s.hContentRegion}>
-        <PagerWithHeader
-          items={SECTION_TITLES_MOD}
-          isHeaderReady={true}
-          renderHeader={renderHeader}>
-          {({headerHeight, scrollElRef}) => (
-            <AboutSection
-              list={list}
-              scrollElRef={scrollElRef as ListRef}
-              onPressAddUser={onPressAddUser}
-              headerHeight={headerHeight}
-            />
-          )}
-        </PagerWithHeader>
-        <FAB
-          testID="composeFAB"
-          onPress={() => openComposer({})}
-          icon={
-            <ComposeIcon2
-              strokeWidth={1.5}
-              size={29}
-              style={{color: 'white'}}
-            />
-          }
-          accessibilityRole="button"
-          accessibilityLabel={_(msg`New post`)}
-          accessibilityHint=""
-        />
-      </View>
-    </ScreenHider>
+      </Hider.Content>
+    </Hider.Outer>
   )
 }