✨ Repurpose report post modal and re-use for list reporting (#1070)

* ✨ Repupose report post modal and re-use for list reporting

* ✨ Allow reporting a feed generator

* ✨ ♻️ Refactor report modal into one shared component for reporting different collections

* ✅ Adjust report option selector in tests

* ✅ Add test for list reporting

* ♻️ ✨ Refactor reason options and add options for list and feedgen

* 🧹 Cleanup remaining todo

* Fix to mutelist react keys

* Fix regression from rebase

* Improve customfeed mobile header

---------

Co-authored-by: Paul Frazee <pfrazee@gmail.com>

src/view/screens/CustomFeed.tsx

@@ -188,6 +188,15 @@ export const CustomFeedScreenInner = observer(
       track('CustomFeed:Share')
     }, [handleOrDid, rkey, track])
 
+    const onPressReport = React.useCallback(() => {
+      if (!currentFeed) return
+      store.shell.openModal({
+        name: 'report',
+        uri: currentFeed.uri,
+        cid: currentFeed.data.cid,
+      })
+    }, [store, currentFeed])
+
     const onScrollToTop = React.useCallback(() => {
       scrollElRef.current?.scrollToOffset({offset: 0, animated: true})
       resetMainScroll()
@@ -200,15 +209,37 @@ export const CustomFeedScreenInner = observer(
     const dropdownItems: DropdownItem[] = React.useMemo(() => {
       let items: DropdownItem[] = [
         {
-          testID: 'feedHeaderDropdownRemoveBtn',
-          label: 'Remove from my feeds',
+          testID: 'feedHeaderDropdownToggleSavedBtn',
+          label: currentFeed?.isSaved
+            ? 'Remove from my feeds'
+            : 'Add to my feeds',
           onPress: onToggleSaved,
+          icon: currentFeed?.isSaved
+            ? {
+                ios: {
+                  name: 'trash',
+                },
+                android: 'ic_delete',
+                web: 'trash',
+              }
+            : {
+                ios: {
+                  name: 'plus',
+                },
+                android: '',
+                web: 'plus',
+              },
+        },
+        {
+          testID: 'feedHeaderDropdownReportBtn',
+          label: 'Report feed',
+          onPress: onPressReport,
           icon: {
             ios: {
-              name: 'trash',
+              name: 'exclamationmark.triangle',
             },
-            android: 'ic_delete',
-            web: 'trash',
+            android: 'ic_menu_report_image',
+            web: 'circle-exclamation',
           },
         },
         {
@@ -225,7 +256,7 @@ export const CustomFeedScreenInner = observer(
         },
       ]
       return items
-    }, [onToggleSaved, onPressShare])
+    }, [currentFeed?.isSaved, onToggleSaved, onPressReport, onPressShare])
 
     const renderHeaderBtns = React.useCallback(() => {
       return (
@@ -258,12 +289,7 @@ export const CustomFeedScreenInner = observer(
               />
             </Button>
           ) : undefined}
-          {currentFeed?.isSaved ? (
-            <NativeDropdown
-              testID="feedHeaderDropdownBtn"
-              items={dropdownItems}
-            />
-          ) : (
+          {!currentFeed?.isSaved ? (
             <Button
               type="default-light"
               onPress={onToggleSaved}
@@ -275,7 +301,21 @@ export const CustomFeedScreenInner = observer(
                 Add to My Feeds
               </Text>
             </Button>
-          )}
+          ) : null}
+          <NativeDropdown testID="feedHeaderDropdownBtn" items={dropdownItems}>
+            <View
+              style={{
+                paddingLeft: currentFeed?.isSaved ? 12 : 6,
+                paddingRight: 12,
+                paddingVertical: 8,
+              }}>
+              <FontAwesomeIcon
+                icon="ellipsis"
+                size={20}
+                color={pal.colors.textLight}
+              />
+            </View>
+          </NativeDropdown>
         </View>
       )
     }, [
@@ -370,6 +410,17 @@ export const CustomFeedScreenInner = observer(
                       color={pal.colors.icon}
                     />
                   </Button>
+                  <Button
+                    type="default"
+                    accessibilityLabel="Report this feed"
+                    accessibilityHint=""
+                    onPress={onPressReport}>
+                    <FontAwesomeIcon
+                      icon="circle-exclamation"
+                      size={18}
+                      color={pal.colors.icon}
+                    />
+                  </Button>
                 </View>
               )}
             </View>
@@ -419,6 +470,7 @@ export const CustomFeedScreenInner = observer(
       onToggleLiked,
       onPressShare,
       handleOrDid,
+      onPressReport,
       rkey,
       isPinned,
       onTogglePinned,

src/view/screens/ProfileList.tsx

@@ -86,6 +86,15 @@ export const ProfileListScreen = withAuthRequired(
       })
     }, [store, list, navigation])
 
+    const onPressReportList = React.useCallback(() => {
+      if (!list.list) return
+      store.shell.openModal({
+        name: 'report',
+        uri: list.uri,
+        cid: list.list.cid,
+      })
+    }, [store, list])
+
     const onPressShareList = React.useCallback(() => {
       const url = toShareUrl(`/profile/${name}/lists/${rkey}`)
       shareUrl(url)
@@ -104,6 +113,7 @@ export const ProfileListScreen = withAuthRequired(
           onPressEditList={onPressEditList}
           onToggleSubscribed={onToggleSubscribed}
           onPressShareList={onPressShareList}
+          onPressReportList={onPressReportList}
           reversed={true}
         />
       )
@@ -114,6 +124,7 @@ export const ProfileListScreen = withAuthRequired(
       onPressEditList,
       onPressShareList,
       onToggleSubscribed,
+      onPressReportList,
     ])
 
     return (
@@ -132,6 +143,7 @@ export const ProfileListScreen = withAuthRequired(
           onToggleSubscribed={onToggleSubscribed}
           onPressEditList={onPressEditList}
           onPressDeleteList={onPressDeleteList}
+          onPressReportList={onPressReportList}
           onPressShareList={onPressShareList}
           style={[s.flex1]}
         />