From a1d2f670fb416bb1d43d2bf43e6fc01a6da32eb0 Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Tue, 20 Aug 2024 08:57:44 -0700
Subject: [PATCH] tweak rendering

---
 src/components/moderation/Hider.tsx |  69 +++++++----------
 src/view/screens/ProfileList.tsx    | 112 ++++++++++++++--------------
 2 files changed, 81 insertions(+), 100 deletions(-)

diff --git a/src/components/moderation/Hider.tsx b/src/components/moderation/Hider.tsx
index caf76d51c6..7acc7bb949 100644
--- a/src/components/moderation/Hider.tsx
+++ b/src/components/moderation/Hider.tsx
@@ -33,6 +33,8 @@ const Context = React.createContext<Context>({
   },
 })
 
+export const useScreenHider = () => React.useContext(Context)
+
 export function Outer({
   modui,
   children,
@@ -44,40 +46,33 @@ export function Outer({
   const [isContentVisible, setIsContentVisible] = React.useState(!blur)
   const info = useModerationCauseDescription(blur)
 
-  const meta = React.useMemo(
-    () => ({
-      isNoPwi: !!modui.blurs.find(
+  const meta = {
+    isNoPwi: Boolean(
+      modui.blurs.find(
         cause =>
           cause.type === 'label' &&
           cause.labelDef.identifier === '!no-unauthenticated',
       ),
-      noOverride: modui.noOverride,
-    }),
-    [modui],
-  )
+    ),
+    noOverride: modui.noOverride,
+  }
 
-  const showInfoDialog = React.useCallback(() => {
+  const showInfoDialog = () => {
     control.open()
-  }, [control])
+  }
 
-  const onSetContentVisible = React.useCallback(
-    (show: boolean) => {
-      if (meta.noOverride) return
-      setIsContentVisible(show)
-    },
-    [setIsContentVisible, meta],
-  )
+  const onSetContentVisible = (show: boolean) => {
+    if (meta.noOverride) return
+    setIsContentVisible(show)
+  }
 
-  const ctx = React.useMemo(
-    () => ({
-      isContentVisible,
-      setIsContentVisible: onSetContentVisible,
-      showInfoDialog,
-      info,
-      meta,
-    }),
-    [isContentVisible, onSetContentVisible, info, meta, showInfoDialog],
-  )
+  const ctx = {
+    isContentVisible,
+    setIsContentVisible: onSetContentVisible,
+    showInfoDialog,
+    info,
+    meta,
+  }
 
   return (
     <Context.Provider value={ctx}>
@@ -87,22 +82,12 @@ export function Outer({
   )
 }
 
-export function Content({
-  children,
-}: {
-  children: (context: Context) => React.ReactNode
-}) {
-  const ctx = React.useContext(Context)
-  const child = React.useMemo(() => children(ctx), [ctx, children])
-  return ctx.isContentVisible ? child : null
+export function Content({children}: {children: React.ReactNode}) {
+  const ctx = useScreenHider()
+  return ctx.isContentVisible ? children : null
 }
 
-export function Mask({
-  children,
-}: {
-  children: (context: Context) => React.ReactNode
-}) {
-  const ctx = React.useContext(Context)
-  const child = React.useMemo(() => children(ctx), [ctx, children])
-  return !ctx.isContentVisible ? child : 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 3b3d2ec5c6..727ab4b6dd 100644
--- a/src/view/screens/ProfileList.tsx
+++ b/src/view/screens/ProfileList.tsx
@@ -193,71 +193,29 @@ function ProfileListScreenLoaded({
     return (
       <Hider.Outer modui={moderation.ui('contentView')}>
         <Hider.Mask>
-          {() => <ListHiddenScreen list={list} preferences={preferences} />}
+          <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_MOD}
+              items={SECTION_TITLES_CURATE}
               isHeaderReady={true}
-              renderHeader={renderHeader}>
+              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
-                  list={list}
+                  ref={aboutSectionRef}
                   scrollElRef={scrollElRef as ListRef}
+                  list={list}
                   onPressAddUser={onPressAddUser}
                   headerHeight={headerHeight}
                 />
@@ -278,7 +236,45 @@ function ProfileListScreenLoaded({
               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_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>
       </Hider.Content>
     </Hider.Outer>
   )