From 90b4d95dfb7a8f5a926d6a4f1ca1ed4b15e1b5c3 Mon Sep 17 00:00:00 2001
From: wlren <weilinwork99@gmail.com>
Date: Sat, 8 Oct 2022 16:28:08 +0800
Subject: [PATCH] [questions][ui] Add DiscardDraftModal

---
 .../questions/ContributeQuestionModal.tsx     | 153 ++++++++++--------
 .../questions/DisacrdDraftModal.tsx           |  82 ++++++++++
 2 files changed, 167 insertions(+), 68 deletions(-)
 create mode 100644 apps/portal/src/components/questions/DisacrdDraftModal.tsx

diff --git a/apps/portal/src/components/questions/ContributeQuestionModal.tsx b/apps/portal/src/components/questions/ContributeQuestionModal.tsx
index 1da146e8..c878e0a9 100644
--- a/apps/portal/src/components/questions/ContributeQuestionModal.tsx
+++ b/apps/portal/src/components/questions/ContributeQuestionModal.tsx
@@ -2,6 +2,7 @@ import type { Dispatch, SetStateAction } from 'react';
 import { Fragment, useState } from 'react';
 import { Dialog, Transition } from '@headlessui/react';
 
+import DiscardDraftModal from './DisacrdDraftModal';
 import Checkbox from './ui-patch/Checkbox';
 
 export type ContributeQuestionModalProps = {
@@ -14,83 +15,99 @@ export default function ContributeQuestionModal({
   setContributeState,
 }: ContributeQuestionModalProps) {
   const [canSubmit, setCanSubmit] = useState<boolean>(false);
-
+  const [isDiscardOpen, setIsDiscardOpen] = useState<boolean>(false);
   const handleCheckSimilarQuestions = (checked: boolean) => {
     setCanSubmit(checked);
   };
 
-  return (
-    <Transition.Root as={Fragment} show={contributeState}>
-      <Dialog
-        as="div"
-        className="relative z-10"
-        onClose={() => setContributeState(false)}>
-        <Transition.Child
-          as={Fragment}
-          enter="ease-out duration-300"
-          enterFrom="opacity-0"
-          enterTo="opacity-100"
-          leave="ease-in duration-200"
-          leaveFrom="opacity-100"
-          leaveTo="opacity-0">
-          <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
-        </Transition.Child>
+  const handleDiscardDraft = () => {
+    // eslint-disable-next-line no-console
+    console.log('discarded draft');
+    setContributeState(false);
+    setIsDiscardOpen(false);
+  };
+
+  const handleCancelDiscard = () => {
+    setIsDiscardOpen(false);
+  };
 
-        <div className="fixed inset-0 z-10 overflow-y-auto">
-          <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
-            <Transition.Child
-              as={Fragment}
-              enter="ease-out duration-300"
-              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-              enterTo="opacity-100 translate-y-0 sm:scale-100"
-              leave="ease-in duration-200"
-              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95">
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl">
-                <div className="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
-                  <div className="sm:flex sm:items-start">
-                    <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
-                      <Dialog.Title
-                        as="h3"
-                        className="text-lg font-medium leading-6 text-gray-900">
-                        Question Draft
-                      </Dialog.Title>
-                      <div className="mt-2">
-                        <p className="text-sm text-gray-500">
-                          Question Contribution form
-                        </p>
+  return (
+    <div>
+      <Transition.Root as={Fragment} show={contributeState}>
+        <Dialog
+          as="div"
+          className="relative z-10"
+          onClose={() => setContributeState(false)}>
+          <Transition.Child
+            as={Fragment}
+            enter="ease-out duration-300"
+            enterFrom="opacity-0"
+            enterTo="opacity-100"
+            leave="ease-in duration-200"
+            leaveFrom="opacity-100"
+            leaveTo="opacity-0">
+            <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
+          </Transition.Child>
+          <div className="fixed inset-0 z-10 overflow-y-auto">
+            <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
+              <Transition.Child
+                as={Fragment}
+                enter="ease-out duration-300"
+                enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+                enterTo="opacity-100 translate-y-0 sm:scale-100"
+                leave="ease-in duration-200"
+                leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+                leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95">
+                <Dialog.Panel className="relative max-w-5xl transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full">
+                  <div className="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+                    <div className="sm:flex sm:items-start">
+                      <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+                        <Dialog.Title
+                          as="h3"
+                          className="text-lg font-medium leading-6 text-gray-900">
+                          Question Draft
+                        </Dialog.Title>
+                        <div className="mt-2">
+                          <p className="text-sm text-gray-500">
+                            Question Contribution form
+                          </p>
+                        </div>
                       </div>
                     </div>
                   </div>
-                </div>
-                <div className="bg-primary-50 px-4 py-3 sm:flex sm:flex-row sm:justify-between sm:px-6">
-                  <div className="mb-1 flex">
-                    <Checkbox
-                      checked={canSubmit}
-                      label="I have checked that my question is new"
-                      onChange={handleCheckSimilarQuestions}></Checkbox>
-                  </div>
-                  <div className=" flex gap-x-2">
-                    <button
-                      className="inline-flex w-full justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-base font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
-                      type="button"
-                      onClick={() => setContributeState(false)}>
-                      Discard
-                    </button>
-                    <button
-                      className="bg-primary-600 hover:bg-primary-700 focus:ring-primary-500 inline-flex w-full justify-center rounded-md border border-transparent px-4 py-2 text-base font-medium text-white shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:bg-gray-400 sm:ml-3 sm:w-auto sm:text-sm"
-                      disabled={!canSubmit}
-                      type="button"
-                      onClick={() => setContributeState(false)}>
-                      Contribute
-                    </button>
+                  <div className="bg-primary-50 px-4 py-3 sm:flex sm:flex-row sm:justify-between sm:px-6">
+                    <div className="mb-1 flex">
+                      <Checkbox
+                        checked={canSubmit}
+                        label="I have checked that my question is new"
+                        onChange={handleCheckSimilarQuestions}></Checkbox>
+                    </div>
+                    <div className=" flex gap-x-2">
+                      <button
+                        className="inline-flex w-full justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-base font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
+                        type="button"
+                        onClick={() => setIsDiscardOpen(true)}>
+                        Discard
+                      </button>
+                      <button
+                        className="bg-primary-600 hover:bg-primary-700 focus:ring-primary-500 inline-flex w-full justify-center rounded-md border border-transparent px-4 py-2 text-base font-medium text-white shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:bg-gray-400 sm:ml-3 sm:w-auto sm:text-sm"
+                        disabled={!canSubmit}
+                        type="button"
+                        onClick={() => setContributeState(false)}>
+                        Contribute
+                      </button>
+                    </div>
                   </div>
-                </div>
-              </Dialog.Panel>
-            </Transition.Child>
+                </Dialog.Panel>
+              </Transition.Child>
+            </div>
           </div>
-        </div>
-      </Dialog>
-    </Transition.Root>
+        </Dialog>
+      </Transition.Root>
+      <DiscardDraftModal
+        handleCancelDiscard={handleCancelDiscard}
+        handleDiscardDraft={handleDiscardDraft}
+        isDiscardOpen={isDiscardOpen}></DiscardDraftModal>
+    </div>
   );
 }
diff --git a/apps/portal/src/components/questions/DisacrdDraftModal.tsx b/apps/portal/src/components/questions/DisacrdDraftModal.tsx
new file mode 100644
index 00000000..053c7986
--- /dev/null
+++ b/apps/portal/src/components/questions/DisacrdDraftModal.tsx
@@ -0,0 +1,82 @@
+import { Fragment } from 'react';
+import { Dialog, Transition } from '@headlessui/react';
+import { ExclamationTriangleIcon } from '@heroicons/react/24/outline';
+
+export type DiscardDraftModalProps = {
+  handleCancelDiscard: () => void;
+  handleDiscardDraft: () => void;
+  isDiscardOpen: boolean;
+};
+export default function DiscardDraftModal({
+  isDiscardOpen,
+  handleCancelDiscard,
+  handleDiscardDraft,
+}: DiscardDraftModalProps) {
+  return (
+    <Transition.Root as={Fragment} show={isDiscardOpen}>
+      <Dialog as="div" className="relative z-10" onClose={handleCancelDiscard}>
+        <Transition.Child
+          as={Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0">
+          <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
+        </Transition.Child>
+
+        <div className="fixed inset-0 z-10 overflow-y-auto">
+          <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
+            <Transition.Child
+              as={Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+              enterTo="opacity-100 translate-y-0 sm:scale-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white px-4 pt-5 pb-4 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6">
+                <div className="sm:flex sm:items-start">
+                  <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
+                    <ExclamationTriangleIcon
+                      aria-hidden="true"
+                      className="h-6 w-6 text-red-600"
+                    />
+                  </div>
+                  <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+                    <Dialog.Title
+                      as="h3"
+                      className="text-lg font-medium leading-6 text-gray-900">
+                      Discard Question Draft
+                    </Dialog.Title>
+                    <div className="mt-2">
+                      <p className="text-sm text-gray-500">
+                        Are you sure you want to discard the current draft? This
+                        action cannot be undone.
+                      </p>
+                    </div>
+                  </div>
+                </div>
+                <div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
+                  <button
+                    className="inline-flex w-full justify-center rounded-md border border-transparent bg-red-600 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 sm:ml-3 sm:w-auto sm:text-sm"
+                    type="button"
+                    onClick={handleDiscardDraft}>
+                    Discard
+                  </button>
+                  <button
+                    className="mt-3 inline-flex w-full justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-base font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:mt-0 sm:w-auto sm:text-sm"
+                    type="button"
+                    onClick={handleCancelDiscard}>
+                    Cancel
+                  </button>
+                </div>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+}