Merge pull request #4710 from h3poteto/iss-4653/report

refs #4653 Add report modal

locales/en/translation.json

@@ -15,7 +15,8 @@
       },
       "show_more": "Show more",
       "show_less": "Show less",
-      "cw": "Media hidden"
+      "cw": "Media hidden",
+      "report": "Report {user}"
     }
   },
   "accounts": {
@@ -115,5 +116,10 @@
     "title": "Settings",
     "language": "Language",
     "font_size": "Font size"
+  },
+  "report": {
+    "title": "Report {user}",
+    "detail": "Detail",
+    "submit": "Submit"
   }
 }

renderer/components/report/Report.tsx

@@ -0,0 +1,43 @@
+import { Button, Label, Modal, Textarea } from 'flowbite-react'
+import { Entity, MegalodonInterface } from 'megalodon'
+import { FormattedMessage } from 'react-intl'
+
+type Props = {
+  open: boolean
+  close: () => void
+  status: Entity.Status
+  client: MegalodonInterface
+}
+
+export default function Report(props: Props) {
+  const submit = async () => {
+    const comment = document.getElementById('comment') as HTMLTextAreaElement
+    await props.client.report(props.status.account.id, {
+      status_ids: [props.status.id],
+      comment: comment.value,
+      forward: true
+    })
+    props.close()
+  }
+
+  return (
+    <Modal show={props.open} onClose={props.close} size="xl">
+      <Modal.Header>
+        <FormattedMessage id="report.title" values={{ user: `@${props.status.account.username}` }} />
+      </Modal.Header>
+      <Modal.Body className="max-h-full max-w-full">
+        <form>
+          <div className="block">
+            <Label htmlFor="comment">
+              <FormattedMessage id="report.detail" />
+            </Label>
+            <Textarea id="comment" rows={4} />
+          </div>
+          <Button className="mt-2" onClick={submit}>
+            <FormattedMessage id="report.submit" />
+          </Button>
+        </form>
+      </Modal.Body>
+    </Modal>
+  )
+}

renderer/components/timelines/status/Actions.tsx

@@ -5,6 +5,7 @@ import { FaBookmark, FaEllipsis, FaFaceLaughBeam, FaReply, FaRetweet, FaStar } f
 import Picker from '@emoji-mart/react'
 import { data } from '@/utils/emojiData'
 import { Account } from '@/db'
+import { FormattedMessage } from 'react-intl'
 
 type Props = {
   status: Entity.Status
@@ -65,6 +66,10 @@ export default function Actions(props: Props) {
     props.onRefresh()
   }
 
+  const report = () => {
+    router.push({ query: { id: router.query.id, timeline: router.query.timeline, report_target_id: props.status.id, modal: true } })
+  }
+
   return (
     <div className="flex gap-6">
       <FaReply className={`w-4 text-gray-400 cursor-pointer hover:text-gray-600`} onClick={reply} />
@@ -74,7 +79,6 @@ export default function Actions(props: Props) {
       {props.account.sns !== 'mastodon' && (
         <Flowbite theme={{ theme: customTheme }}>
           <Dropdown
-            disabled
             label=""
             dismissOnClick
             renderTrigger={() => (
@@ -91,7 +95,19 @@ export default function Actions(props: Props) {
         </Flowbite>
       )}
 
-      <FaEllipsis className="w-4 text-gray-400 cursor-pointer hover:text-gray-600" />
+      <Dropdown
+        label=""
+        dismissOnClick
+        renderTrigger={() => (
+          <span className="text-gray-400 hover:text-gray-600 cursor-pointer">
+            <FaEllipsis className="w-4" />
+          </span>
+        )}
+      >
+        <Dropdown.Item onClick={report}>
+          <FormattedMessage id="timeline.status.report" values={{ user: `@${props.status.account.acct}` }} />
+        </Dropdown.Item>
+      </Dropdown>
     </div>
   )
 }

renderer/pages/accounts/[id]/[timeline].tsx

@@ -5,12 +5,14 @@ import { Account, db } from '@/db'
 import generator, { Entity, MegalodonInterface } from 'megalodon'
 import Notifications from '@/components/timelines/Notifications'
 import Media from '@/components/Media'
+import Report from '@/components/report/Report'
 
 export default function Page() {
   const router = useRouter()
   const [account, setAccount] = useState<Account | null>(null)
   const [client, setClient] = useState<MegalodonInterface>(null)
   const [attachment, setAttachment] = useState<Entity.Attachment | null>(null)
+  const [report, setReport] = useState<Entity.Status | null>(null)
 
   useEffect(() => {
     if (router.query.id) {
@@ -35,6 +37,16 @@ export default function Page() {
     }
   }, [router.query.id, router.query.timeline])
 
+  useEffect(() => {
+    if (router.query.modal && router.query.report_target_id) {
+      const f = async () => {
+        const res = await client.getStatus(router.query.report_target_id as string)
+        setReport(res.data)
+      }
+      f()
+    }
+  }, [router.query.modal, router.query.report_target_id])
+
   if (!account || !client) return null
   switch (router.query.timeline as string) {
     case 'notifications': {
@@ -45,6 +57,7 @@ export default function Page() {
         <>
           <Timeline timeline={router.query.timeline as string} account={account} client={client} setAttachment={setAttachment} />
           <Media open={attachment !== null} close={() => setAttachment(null)} attachment={attachment} />
+          {report && <Report open={report !== null} close={() => setReport(null)} status={report} client={client} />}
         </>
       )
     }