✨ Show blob divert event (#33)

* ✨ Show blob divert event * 🧹 Cleanup label related changes * 🐛 Add useEffect dep to re-render the action list
bluesky-social · Mar 12, 2024 · f0ae6cf · f0ae6cf
1 parent 3c23d9b
commit f0ae6cf
Show file tree

Hide file tree

Showing 11 changed files with 120 additions and 188 deletions.
diff --git a/app/actions/ModActionPanel/BlobList.tsx b/app/actions/ModActionPanel/BlobList.tsx
@@ -23,7 +23,7 @@ export function BlobList(props: {
         const displayActionType = subjectStatus?.takendown ? 'Taken down' : ''
         return (
           <div key={blob.cid} className="relative flex items-start">
-            <div className="flex h-5 items-center">
+            <div className="flex h-5 items-center ml-1">
               <input
                 id={`blob-${blob.cid}`}
                 name={name}
@@ -37,7 +37,7 @@ export function BlobList(props: {
             <div className="ml-3 text-sm min-w-0 text-ellipsis overflow-hidden whitespace-nowrap">
               <label
                 htmlFor={`blob-${blob.cid}`}
-                className="font-medium text-gray-700"
+                className="font-medium text-gray-700 dark:text-gray-100"
               >
                 {subjectStatus && (
                   <>

diff --git a/app/actions/ModActionPanel/QuickAction.tsx b/app/actions/ModActionPanel/QuickAction.tsx
@@ -19,9 +19,9 @@ import {
   LabelListEmpty,
   diffLabels,
   displayLabel,
-  getLabelGroupInfo,
   getLabelsForSubject,
   toLabelVal,
+  getLabelGroupInfo,
   unFlagSelfLabel,
   isSelfLabel,
 } from '@/common/labels'
@@ -46,6 +46,7 @@ import { getProfileUriForDid } from '@/reports/helpers/subject'
 import { Dialog } from '@headlessui/react'
 import { SubjectSwitchButton } from '@/common/SubjectSwitchButton'
 import { diffTags } from 'components/tags/utils'
+import { ActionError } from '@/reports/ModerationForm/ActionError'
 
 const FORM_ID = 'mod-action-panel'
 const useBreakpoint = createBreakpoint({ xs: 340, sm: 640 })
@@ -153,7 +154,10 @@ function Form(
     replaceFormWithEvents,
     ...others
   } = props
-  const [submitting, setSubmitting] = useState(false)
+  const [submission, setSubmission] = useState<{
+    isSubmitting: boolean
+    error: string
+  }>({ isSubmitting: false, error: '' })
   const { data: subjectStatus, refetch: refetchSubjectStatus } = useQuery({
     // subject of the report
     queryKey: ['modSubjectStatus', { subject }],
@@ -179,6 +183,7 @@ function Form(
   )
   const isTagEvent = modEventType === MOD_EVENTS.TAG
   const isLabelEvent = modEventType === MOD_EVENTS.LABEL
+  const isDivertEvent = modEventType === MOD_EVENTS.DIVERT
   const isMuteEvent = modEventType === MOD_EVENTS.MUTE
   const isCommentEvent = modEventType === MOD_EVENTS.COMMENT
   const shouldShowDurationInHoursField =
@@ -234,7 +239,7 @@ function Form(
   ) => {
     ev.preventDefault()
     try {
-      setSubmitting(true)
+      setSubmission({ isSubmitting: true, error: '' })
       const formData = new FormData(ev.currentTarget)
       const nextLabels = String(formData.get('labels'))!.split(',')
       const coreEvent: Parameters<typeof onSubmit>[0]['event'] = {
@@ -266,6 +271,14 @@ function Form(
       const { subject: subjectInfo, record: recordInfo } =
         await createSubjectFromId(subject)
 
+      const subjectBlobCids = formData
+        .getAll('subjectBlobCids')
+        .map((cid) => String(cid))
+
+      if (isDivertEvent && !subjectBlobCids.length) {
+        throw new Error('blob-selection-required')
+      }
+
       // This block handles an edge case where a label may be applied to profile record and then the profile record is updated by the user.
       // In that state, if the moderator reverts the label, the event is emitted for the latest CID of the profile entry which does NOT revert
       // the label applied to the old CID.
@@ -351,9 +364,7 @@ function Form(
         await onSubmit({
           subject: subjectInfo,
           createdBy: client.session.did,
-          subjectBlobCids: formData
-            .getAll('subjectBlobCids')
-            .map((cid) => String(cid)),
+          subjectBlobCids,
           event: coreEvent,
         })
       }
@@ -379,10 +390,9 @@ function Form(
       // This state is not kept in the form and driven by state so we need to reset it manually after submission
       setModEventType(MOD_EVENTS.ACKNOWLEDGE)
       shouldMoveToNextSubject && navigateQueue(1)
+      setSubmission({ error: '', isSubmitting: false })
     } catch (err) {
-      throw err
-    } finally {
-      setSubmitting(false)
+      setSubmission({ error: (err as Error).message, isSubmitting: false })
     }
   }
   // Keyboard shortcuts for action types
@@ -526,7 +536,6 @@ function Form(
                   {!currentLabels.length && <LabelListEmpty className="ml-1" />}
                   {currentLabels.map((label) => {
                     const labelGroup = getLabelGroupInfo(unFlagSelfLabel(label))
-
                     return (
                       <LabelChip
                         key={label}
@@ -561,6 +570,7 @@ function Form(
                   <ModEventSelectorButton
                     subjectStatus={subjectStatus}
                     selectedAction={modEventType}
+                    hasBlobs={!!record?.blobs?.length}
                     setSelectedAction={(action) => setModEventType(action)}
                   />
                 </div>
@@ -654,6 +664,12 @@ function Form(
                   />
                 )}
 
+                {submission.error && (
+                  <div className="my-2">
+                    <ActionError error={submission.error} />
+                  </div>
+                )}
+
                 <div className="mt-auto flex flex-row justify-between">
                   <div>
                     <input
@@ -664,7 +680,7 @@ function Form(
                     />
                     <ButtonSecondary
                       className="px-2 sm:px-4 sm:mr-2"
-                      disabled={submitting}
+                      disabled={submission.isSubmitting}
                       onClick={onCancel}
                     >
                       <span className="text-sm sm:text-base">(C)ancel</span>
@@ -674,14 +690,14 @@ function Form(
                     <ButtonPrimary
                       ref={submitButton}
                       type="submit"
-                      disabled={submitting}
+                      disabled={submission.isSubmitting}
                       className="mx-1 px-2 sm:px-4"
                     >
                       <span className="text-sm sm:text-base">(S)ubmit</span>
                     </ButtonPrimary>
                     <ButtonPrimary
                       type="button"
-                      disabled={submitting}
+                      disabled={submission.isSubmitting}
                       onClick={submitAndGoNext}
                       className="px-2 sm:px-4"
                     >
@@ -705,14 +721,14 @@ function Form(
         <div className="flex justify-between mt-auto">
           <ButtonSecondary
             onClick={() => navigateQueue(-1)}
-            disabled={submitting}
+            disabled={submission.isSubmitting}
           >
             <ArrowLeftIcon className="h-4 w-4 inline-block align-text-bottom" />
           </ButtonSecondary>
 
           <ButtonSecondary
             onClick={() => navigateQueue(1)}
-            disabled={submitting}
+            disabled={submission.isSubmitting}
           >
             <ArrowRightIcon className="h-4 w-4 inline-block align-text-bottom" />
           </ButtonSecondary>

diff --git a/components/common/Card.tsx b/components/common/Card.tsx
@@ -0,0 +1,19 @@
+import React from 'react'
+
+export type Variation = 'default' | 'error'
+
+export const Card = ({
+  children,
+  variation = 'default',
+}: {
+  children: React.ReactNode
+  variation?: Variation
+}) => {
+  let className = 'shadow rounded-sm p-2'
+  if (variation === 'error') {
+    className += ' bg-red-100 dark:bg-red-600 border-red-400 text-red-700 dark:text-red-100'
+  } else {
+    className += ' dark:shadow-slate-700 bg-white dark:bg-slate-800'
+  }
+  return <div className={className}>{children}</div>
+}
diff --git a/components/common/labels/Grid.tsx b/components/common/labels/Grid.tsx
@@ -2,7 +2,6 @@ import { useState } from 'react'
 import Select from 'react-tailwindcss-select'
 import {
   labelOptions,
-  displayLabel,
   groupLabelList,
   getLabelGroupInfo,
   buildAllLabelOptions,

diff --git a/components/common/labels/Input.tsx b/components/common/labels/Input.tsx
diff --git a/components/common/labels/index.ts b/components/common/labels/index.ts
@@ -1,3 +1,2 @@
-export * from './Input'
 export * from './List'
 export * from './util'
diff --git a/components/common/posts/PostsFeed.tsx b/components/common/posts/PostsFeed.tsx
@@ -23,9 +23,10 @@ import { RichText } from '../RichText'
 import {
   LabelChip,
   LabelList,
-  getLabelGroupInfo,
   doesLabelNeedBlur,
   toLabelVal,
+  LabelGroupInfo,
+  getLabelGroupInfo,
 } from '../labels'
 import { CollectionId } from '@/reports/helpers/subject'
 import { ProfileAvatar } from '@/repositories/ProfileAvatar'
@@ -354,7 +355,10 @@ function PostEmbeds({ item }: { item: AppBskyFeedDefs.FeedViewPost }) {
         <div className="flex gap-2 pb-2 pl-14 flex-col border-2 border-gray-400 border-dashed my-2 rounded pt-2">
           <p className="text-sm font-medium text-gray-600 dark:text-gray-100">
             The author of the original post blocked the author.{' '}
-            <Link className=" text-gray-900 dark:text-gray-200 underline" href={repoLink}>
+            <Link
+              className=" text-gray-900 dark:text-gray-200 underline"
+              href={repoLink}
+            >
               See quoted post
             </Link>
             {' · '}
@@ -415,10 +419,11 @@ function PostLabels({
       {labels?.map((label, i) => {
         const { val, src } = label
         const labelGroup = getLabelGroupInfo(val)
-
         return (
           <LabelChip
-            className={`${i === 0 ? 'ml-0' : ''} text-[${labelGroup.color}]`}
+            className={`${i === 0 ? 'ml-0' : ''} text-[${
+              labelGroup.color
+            }]`}
             // TODO: Ideally, we should just use inline class name but it only works when the class names are static
             // so trying to work around that with style prop for now
             style={{ color: labelGroup.color }}