From c80f9cb9db2c8f9e74fbbd055334d24a73ec62c4 Mon Sep 17 00:00:00 2001
From: Kathryn Beaty <kathryn.beaty@voxmedia.com>
Date: Wed, 1 Nov 2023 11:50:10 -0400
Subject: [PATCH] refactor reportmakedecisionmodal into own component

---
 .../Reports/ReportMakeDecisionModal.css       |  11 +
 .../Reports/ReportMakeDecisionModal.tsx       | 197 ++++++++++++++++++
 .../admin/routes/Reports/ReportStatusMenu.css |   1 +
 .../routes/Reports/SingleReportRoute.css      |  18 +-
 .../routes/Reports/SingleReportRoute.tsx      | 163 +--------------
 5 files changed, 224 insertions(+), 166 deletions(-)
 create mode 100644 client/src/core/client/admin/routes/Reports/ReportMakeDecisionModal.css
 create mode 100644 client/src/core/client/admin/routes/Reports/ReportMakeDecisionModal.tsx

diff --git a/client/src/core/client/admin/routes/Reports/ReportMakeDecisionModal.css b/client/src/core/client/admin/routes/Reports/ReportMakeDecisionModal.css
new file mode 100644
index 0000000000..33c48638a2
--- /dev/null
+++ b/client/src/core/client/admin/routes/Reports/ReportMakeDecisionModal.css
@@ -0,0 +1,11 @@
+.decisionModalThisComment {
+  margin-right: var(--spacing-2);
+}
+
+.decisionModalTextArea {
+  flex-grow: 1;
+}
+
+.yesButton {
+  margin-right: var(--spacing-2);
+}
diff --git a/client/src/core/client/admin/routes/Reports/ReportMakeDecisionModal.tsx b/client/src/core/client/admin/routes/Reports/ReportMakeDecisionModal.tsx
new file mode 100644
index 0000000000..586d196212
--- /dev/null
+++ b/client/src/core/client/admin/routes/Reports/ReportMakeDecisionModal.tsx
@@ -0,0 +1,197 @@
+import { FormApi } from "final-form";
+import React, { FunctionComponent, useCallback, useState } from "react";
+import { Field, Form } from "react-final-form";
+import { graphql } from "react-relay";
+
+import ModalHeader from "coral-admin/components/ModalHeader";
+import { useMutation, withFragmentContainer } from "coral-framework/lib/relay";
+import { required } from "coral-framework/lib/validation";
+import {
+  Button,
+  Card,
+  CardCloseButton,
+  Flex,
+  HorizontalGutter,
+  Modal,
+  Textarea,
+} from "coral-ui/components/v2";
+
+import MakeReportDecisionMutation from "./MakeReportDecisionMutation";
+
+import { ReportMakeDecisionModal_dsaReport } from "coral-admin/__generated__/ReportMakeDecisionModal_dsaReport.graphql";
+
+import styles from "./ReportMakeDecisionModal.css";
+
+interface Props {
+  dsaReport: ReportMakeDecisionModal_dsaReport;
+  showDecisionModal: boolean;
+  setShowDecisionModal: (show: boolean) => void;
+  userID?: string;
+}
+
+const ReportMakeDecisionModal: FunctionComponent<Props> = ({
+  dsaReport,
+  showDecisionModal,
+  setShowDecisionModal,
+  userID,
+}) => {
+  const makeReportDecision = useMutation(MakeReportDecisionMutation);
+  const [makeDecisionSelection, setMakeDecisionSelection] = useState<
+    null | string
+  >(null);
+  const onClickMakeDecisionContainsIllegal = useCallback(() => {
+    setMakeDecisionSelection("YES");
+  }, [setMakeDecisionSelection]);
+
+  const onClickMakeDecisionDoesNotContainIllegal = useCallback(() => {
+    setMakeDecisionSelection("NO");
+  }, [setMakeDecisionSelection]);
+
+  const onSubmitDecision = useCallback(
+    async (input: any, form: FormApi) => {
+      if (dsaReport && userID && dsaReport.comment?.revision) {
+        try {
+          await makeReportDecision({
+            userID,
+            reportID: dsaReport.id,
+            legality: makeDecisionSelection === "YES" ? "ILLEGAL" : "LEGAL",
+            legalGrounds:
+              makeDecisionSelection === "YES" ? input.legalGrounds : undefined,
+            detailedExplanation:
+              makeDecisionSelection === "YES" ? input.explanation : undefined,
+            commentID: dsaReport.comment?.id,
+            commentRevisionID: dsaReport.comment.revision.id,
+            storyID: dsaReport.comment.story.id,
+          });
+          setShowDecisionModal(false);
+        } catch (e) {
+          // eslint-disable-next-line no-console
+          console.error(e);
+        }
+      }
+    },
+    [
+      makeReportDecision,
+      userID,
+      dsaReport,
+      makeDecisionSelection,
+      setShowDecisionModal,
+    ]
+  );
+  const onCloseDecisionModal = useCallback(() => {
+    setShowDecisionModal(false);
+  }, [setShowDecisionModal]);
+  return (
+    <Modal open={showDecisionModal}>
+      {({ firstFocusableRef }) => (
+        <Card>
+          <Flex justifyContent="flex-end">
+            <CardCloseButton
+              onClick={onCloseDecisionModal}
+              ref={firstFocusableRef}
+            />
+          </Flex>
+          <ModalHeader>Decision</ModalHeader>
+          {/* TODO: Localize all of this */}
+          <Form
+            onSubmit={onSubmitDecision}
+            initialValues={{ decision: "ILLEGAL" }}
+          >
+            {({ handleSubmit, hasValidationErrors }) => (
+              <form onSubmit={handleSubmit}>
+                <Flex direction="column" padding={2}>
+                  <HorizontalGutter>
+                    <Flex alignItems="center" direction="column">
+                      <div className={styles.decisionModalThisComment}>
+                        Does this comment appear to contain illegal content?
+                      </div>
+                      <Flex margin={2}>
+                        <Button
+                          onClick={onClickMakeDecisionContainsIllegal}
+                          active={makeDecisionSelection === "YES"}
+                          className={styles.yesButton}
+                        >
+                          Yes
+                        </Button>
+                        <Button
+                          onClick={onClickMakeDecisionDoesNotContainIllegal}
+                          active={makeDecisionSelection === "NO"}
+                        >
+                          No
+                        </Button>
+                      </Flex>
+                    </Flex>
+                    {makeDecisionSelection === "YES" && (
+                      <>
+                        <Flex>
+                          <Field
+                            id="reportLegalGrounds"
+                            name="legalGrounds"
+                            validate={required}
+                          >
+                            {({ input }) => (
+                              <Textarea
+                                className={styles.decisionModalTextArea}
+                                placeholder="Legal grounds"
+                                {...input}
+                              />
+                            )}
+                          </Field>
+                        </Flex>
+                        <Flex>
+                          <Field
+                            id="reportExplanation"
+                            name="explanation"
+                            validate={required}
+                          >
+                            {({ input }) => (
+                              <Textarea
+                                className={styles.decisionModalTextArea}
+                                placeholder="Explanation"
+                                {...input}
+                              />
+                            )}
+                          </Field>
+                        </Flex>
+                      </>
+                    )}
+                    {makeDecisionSelection !== null && (
+                      <Flex justifyContent="flex-end">
+                        <Button
+                          type="submit"
+                          iconLeft
+                          disabled={hasValidationErrors}
+                        >
+                          Submit
+                        </Button>
+                      </Flex>
+                    )}
+                  </HorizontalGutter>
+                </Flex>
+              </form>
+            )}
+          </Form>
+        </Card>
+      )}
+    </Modal>
+  );
+};
+
+const enhanced = withFragmentContainer<Props>({
+  dsaReport: graphql`
+    fragment ReportMakeDecisionModal_dsaReport on DSAReport {
+      id
+      comment {
+        id
+        revision {
+          id
+        }
+        story {
+          id
+        }
+      }
+    }
+  `,
+})(ReportMakeDecisionModal);
+
+export default enhanced;
diff --git a/client/src/core/client/admin/routes/Reports/ReportStatusMenu.css b/client/src/core/client/admin/routes/Reports/ReportStatusMenu.css
index b9329a87b7..a19d6f6593 100644
--- a/client/src/core/client/admin/routes/Reports/ReportStatusMenu.css
+++ b/client/src/core/client/admin/routes/Reports/ReportStatusMenu.css
@@ -1,4 +1,5 @@
 .statusLabel {
+  color: var(--palette-text-000);
   font-family: var(--font-family-primary);
   font-size: var(--font-size-2);
   font-weight: var(--font-weight-primary-semi-bold);
diff --git a/client/src/core/client/admin/routes/Reports/SingleReportRoute.css b/client/src/core/client/admin/routes/Reports/SingleReportRoute.css
index 59655309d6..a6ebbd1bec 100644
--- a/client/src/core/client/admin/routes/Reports/SingleReportRoute.css
+++ b/client/src/core/client/admin/routes/Reports/SingleReportRoute.css
@@ -11,9 +11,9 @@
   background-color: var(--palette-primary-900);
   padding: var(--spacing-3) var(--spacing-7);
   font-family: var(--font-family-secondary);
-  color: var(--palette-text-000);
 
   .label {
+    color: var(--palette-text-000);
     font-weight: var(--font-weight-secondary-bold);
   }
 }
@@ -23,6 +23,10 @@
   text-transform: uppercase;
 }
 
+.refID {
+  color: var(--palette-text-000);
+}
+
 .reportMain {
   background-color: var(--palette-grey-100);
   padding: var(--spacing-5) var(--spacing-7);
@@ -44,10 +48,6 @@
   margin-left: var(--spacing-2);
 }
 
-.yesButton {
-  margin-right: var(--spacing-2);
-}
-
 .autoMarginLeft {
   margin-left: auto;
 }
@@ -107,11 +107,3 @@
   font-weight: var(--font-weight-primary-regular);
   white-space: pre-wrap;
 }
-
-.decisionModalThisComment {
-  margin-right: var(--spacing-2);
-}
-
-.decisionModalTextArea {
-  flex-grow: 1;
-}
diff --git a/client/src/core/client/admin/routes/Reports/SingleReportRoute.tsx b/client/src/core/client/admin/routes/Reports/SingleReportRoute.tsx
index 629f0faf81..1bfccf3fb6 100644
--- a/client/src/core/client/admin/routes/Reports/SingleReportRoute.tsx
+++ b/client/src/core/client/admin/routes/Reports/SingleReportRoute.tsx
@@ -1,8 +1,7 @@
 import { Localized } from "@fluent/react/compat";
-import { FormApi } from "final-form";
 import { RouteProps } from "found";
 import React, { FunctionComponent, useCallback, useState } from "react";
-import { Field, Form } from "react-final-form";
+import { Form } from "react-final-form";
 import { graphql } from "react-relay";
 
 import {
@@ -22,7 +21,6 @@ import {
 import { useDateTimeFormatter } from "coral-framework/hooks";
 import { useMutation } from "coral-framework/lib/relay";
 import { createRouteConfig } from "coral-framework/lib/router";
-import { required } from "coral-framework/lib/validation";
 import { ArrowsLeftIcon, ButtonSvgIcon } from "coral-ui/components/icons";
 import {
   Button,
@@ -32,7 +30,6 @@ import {
   HorizontalGutter,
   Modal,
   Spinner,
-  Textarea,
   Timestamp,
 } from "coral-ui/components/v2";
 import { StarRating } from "coral-ui/components/v3";
@@ -43,8 +40,8 @@ import styles from "./SingleReportRoute.css";
 
 import NotFound from "../NotFound";
 import ChangeReportStatusMutation from "./ChangeReportStatusMutation";
-import MakeReportDecisionMutation from "./MakeReportDecisionMutation";
 import ReportHistory from "./ReportHistory";
+import ReportMakeDecisionModal from "./ReportMakeDecisionModal";
 import ReportShareButton from "./ReportShareButton";
 import ReportStatusMenu from "./ReportStatusMenu";
 
@@ -55,7 +52,6 @@ const SingleReportRoute: FunctionComponent<Props> & {
 } = ({ dsaReport, viewer }) => {
   const comment = dsaReport?.comment;
 
-  const makeReportDecision = useMutation(MakeReportDecisionMutation);
   const changeReportStatus = useMutation(ChangeReportStatusMutation);
 
   const [showChangeStatusModal, setShowChangeStatusModal] = useState(false);
@@ -90,10 +86,6 @@ const SingleReportRoute: FunctionComponent<Props> & {
   );
   const [userDrawerVisible, setUserDrawerVisible] = useState(false);
 
-  const [makeDecisionSelection, setMakeDecisionSelection] = useState<
-    null | string
-  >(null);
-
   const onShowUserDrawer = useCallback(
     (userID: string | null | undefined) => {
       if (userID) {
@@ -118,35 +110,6 @@ const SingleReportRoute: FunctionComponent<Props> & {
 
   const [showDecisionModal, setShowDecisionModal] = useState(false);
 
-  const onSubmitDecision = useCallback(
-    async (input: any, form: FormApi) => {
-      if (dsaReport && viewer?.id && dsaReport.comment?.revision) {
-        try {
-          await makeReportDecision({
-            userID: viewer.id,
-            reportID: dsaReport.id,
-            legality: makeDecisionSelection === "YES" ? "ILLEGAL" : "LEGAL",
-            legalGrounds:
-              makeDecisionSelection === "YES" ? input.legalGrounds : undefined,
-            detailedExplanation:
-              makeDecisionSelection === "YES" ? input.explanation : undefined,
-            commentID: dsaReport.comment?.id,
-            commentRevisionID: dsaReport.comment.revision.id,
-            storyID: dsaReport.comment.story.id,
-          });
-          setShowDecisionModal(false);
-        } catch (e) {
-          // eslint-disable-next-line no-console
-          console.error(e);
-        }
-      }
-    },
-    [makeReportDecision, viewer, dsaReport, makeDecisionSelection]
-  );
-  const onCloseDecisionModal = useCallback(() => {
-    setShowDecisionModal(false);
-  }, [setShowDecisionModal]);
-
   const onChangeReportStatusCompleted = useCallback(() => {
     setShowDecisionModal(true);
   }, [setShowDecisionModal]);
@@ -155,14 +118,6 @@ const SingleReportRoute: FunctionComponent<Props> & {
     setShowDecisionModal(true);
   }, [setShowDecisionModal]);
 
-  const onClickMakeDecisionContainsIllegal = useCallback(() => {
-    setMakeDecisionSelection("YES");
-  }, [setMakeDecisionSelection]);
-
-  const onClickMakeDecisionDoesNotContainIllegal = useCallback(() => {
-    setMakeDecisionSelection("NO");
-  }, [setMakeDecisionSelection]);
-
   if (!dsaReport) {
     return <NotFound />;
   }
@@ -191,7 +146,7 @@ const SingleReportRoute: FunctionComponent<Props> & {
           <Localized id="reports-singleReport-reportID">
             <div className={styles.label}>Report ID</div>
           </Localized>
-          <div>{dsaReport.referenceID}</div>
+          <div className={styles.refID}>{dsaReport.referenceID}</div>
         </Flex>
         <Flex alignItems="center" className={styles.autoMarginLeft}>
           <ReportStatusMenu
@@ -441,107 +396,6 @@ const SingleReportRoute: FunctionComponent<Props> & {
                   </HorizontalGutter>
                 </Flex>
               )}
-              <Modal open={showDecisionModal}>
-                {({ firstFocusableRef }) => (
-                  <Card>
-                    <Flex justifyContent="flex-end">
-                      <CardCloseButton
-                        onClick={onCloseDecisionModal}
-                        ref={firstFocusableRef}
-                      />
-                    </Flex>
-                    <ModalHeader>Decision</ModalHeader>
-                    {/* TODO: Localize all of this */}
-                    <Form
-                      onSubmit={onSubmitDecision}
-                      initialValues={{ decision: "ILLEGAL" }}
-                    >
-                      {({ handleSubmit, hasValidationErrors }) => (
-                        <form onSubmit={handleSubmit}>
-                          <Flex direction="column" padding={2}>
-                            <HorizontalGutter>
-                              <Flex alignItems="center" direction="column">
-                                <div
-                                  className={styles.decisionModalThisComment}
-                                >
-                                  Does this comment appear to contain illegal
-                                  content?
-                                </div>
-                                <Flex margin={2}>
-                                  <Button
-                                    onClick={onClickMakeDecisionContainsIllegal}
-                                    active={makeDecisionSelection === "YES"}
-                                    className={styles.yesButton}
-                                  >
-                                    Yes
-                                  </Button>
-                                  <Button
-                                    onClick={
-                                      onClickMakeDecisionDoesNotContainIllegal
-                                    }
-                                    active={makeDecisionSelection === "NO"}
-                                  >
-                                    No
-                                  </Button>
-                                </Flex>
-                              </Flex>
-                              {makeDecisionSelection === "YES" && (
-                                <>
-                                  <Flex>
-                                    <Field
-                                      id="reportLegalGrounds"
-                                      name="legalGrounds"
-                                      validate={required}
-                                    >
-                                      {({ input }) => (
-                                        <Textarea
-                                          className={
-                                            styles.decisionModalTextArea
-                                          }
-                                          placeholder="Legal grounds"
-                                          {...input}
-                                        />
-                                      )}
-                                    </Field>
-                                  </Flex>
-                                  <Flex>
-                                    <Field
-                                      id="reportExplanation"
-                                      name="explanation"
-                                      validate={required}
-                                    >
-                                      {({ input }) => (
-                                        <Textarea
-                                          className={
-                                            styles.decisionModalTextArea
-                                          }
-                                          placeholder="Explanation"
-                                          {...input}
-                                        />
-                                      )}
-                                    </Field>
-                                  </Flex>
-                                </>
-                              )}
-                              {makeDecisionSelection !== null && (
-                                <Flex justifyContent="flex-end">
-                                  <Button
-                                    type="submit"
-                                    iconLeft
-                                    disabled={hasValidationErrors}
-                                  >
-                                    Submit
-                                  </Button>
-                                </Flex>
-                              )}
-                            </HorizontalGutter>
-                          </Flex>
-                        </form>
-                      )}
-                    </Form>
-                  </Card>
-                )}
-              </Modal>
             </HorizontalGutter>
           </Flex>
         </Flex>
@@ -557,6 +411,12 @@ const SingleReportRoute: FunctionComponent<Props> & {
         onClose={onHideUserDrawer}
         setUserID={onSetUserID}
       />
+      <ReportMakeDecisionModal
+        userID={viewer?.id}
+        dsaReport={dsaReport}
+        setShowDecisionModal={setShowDecisionModal}
+        showDecisionModal={showDecisionModal}
+      />
       <Modal open={showChangeStatusModal}>
         {({ firstFocusableRef }) => (
           <Card>
@@ -628,15 +488,11 @@ SingleReportRoute.routeConfig = createRouteConfig<
           deleted
           body
           story {
-            id
             url
             metadata {
               title
             }
           }
-          revision {
-            id
-          }
           rating
           parent {
             author {
@@ -658,6 +514,7 @@ SingleReportRoute.routeConfig = createRouteConfig<
         }
         ...ReportHistory_dsaReport
         ...ReportShareButton_dsaReport
+        ...ReportMakeDecisionModal_dsaReport
       }
     }
   `,