From 4b504130d86346554323feb12ba93e91db05b6b1 Mon Sep 17 00:00:00 2001
From: James Morris <moreofmorris@users.noreply.github.com>
Date: Tue, 19 Jul 2022 15:24:55 +0100
Subject: [PATCH] Working progress of the button when sending reporting

refs https://github.com/TryGhost/Team/issues/1685
---
 .../components/modals/NotAuthorContextMenu.js | 32 +++++++++++++++----
 .../src/components/modals/ReportDialog.js     | 30 +++++++++++++++--
 apps/comments-ui/src/images/icons/spinner.svg |  1 +
 apps/comments-ui/src/images/icons/success.svg |  5 +++
 4 files changed, 59 insertions(+), 9 deletions(-)
 create mode 100644 apps/comments-ui/src/images/icons/spinner.svg
 create mode 100644 apps/comments-ui/src/images/icons/success.svg

diff --git a/apps/comments-ui/src/components/modals/NotAuthorContextMenu.js b/apps/comments-ui/src/components/modals/NotAuthorContextMenu.js
index 8374083c6f..0438502e0d 100644
--- a/apps/comments-ui/src/components/modals/NotAuthorContextMenu.js
+++ b/apps/comments-ui/src/components/modals/NotAuthorContextMenu.js
@@ -5,23 +5,41 @@ import ReportDialog from './ReportDialog';
 
 const NotAuthorContextMenu = (props) => {
     // const {dispatchAction} = useContext(AppContext);
-    let [isOpen, setIsOpen] = useState(false);
+    let [isOpen, setOpen] = useState(false);
+    let [reportProgress, setProgress] = useState('default'); // states for button: default, sending, sent
 
-    const reportComment = (event) => {
-        // dispatchAction('reportComment', props.comment);
-        setIsOpen(true);
+    const openModal = () => {
+        setProgress('default');
+        setOpen(true);
     };
 
     const closeModal = () => {
-        setIsOpen(false);
+        setProgress('default');
+        setOpen(false);
+    };
+
+    const reportComment = (event) => {
+        event.stopPropagation();
+
+        setProgress('sending');
+
+        // faked timing of the report being sent for user feedback purposes
+        setTimeout(() => {
+            setProgress('sent');
+            // dispatchAction('reportComment', props.comment);
+
+            setTimeout(() => {
+                setOpen(false);
+            }, 750);
+        }, 1000);
     };
 
     return (
         <div className="flex flex-col">
-            <button className="text-[14px]" onClick={reportComment}>
+            <button className="text-[14px]" onClick={openModal}>
                 Report comment
             </button>
-            <ReportDialog show={isOpen} submit={reportComment} cancel={closeModal} />
+            <ReportDialog show={isOpen} progress={reportProgress} submit={reportComment} cancel={closeModal} />
         </div>
     );
 };
diff --git a/apps/comments-ui/src/components/modals/ReportDialog.js b/apps/comments-ui/src/components/modals/ReportDialog.js
index 7dd09de5e9..0181fcf6d1 100644
--- a/apps/comments-ui/src/components/modals/ReportDialog.js
+++ b/apps/comments-ui/src/components/modals/ReportDialog.js
@@ -1,13 +1,39 @@
 import React from 'react';
 import GenericDialog from './GenericDialog';
+import {ReactComponent as SpinnerIcon} from '../../images/icons/spinner.svg';
+import {ReactComponent as SuccessIcon} from '../../images/icons/success.svg';
 
 const ReportDialog = (props) => {
+    let buttonColor = 'bg-red-600';
+    if (props.progress === 'sent') {
+        buttonColor = 'bg-green-600';
+    }
+
+    let buttonText = 'Yes';
+    if (props.progress === 'sending') {
+        buttonText = 'Sending';
+    } else if (props.progress === 'sent') {
+        buttonText = 'Sent';
+    }
+
+    let buttonIcon = null;
+    if (props.progress === 'sending') {
+        buttonIcon = <SpinnerIcon className="w-[16px] h-[16px] mr-2" />;
+    } else if (props.progress === 'sent') {
+        buttonIcon = <SuccessIcon className="w-[16px] h-[16px] mr-2" />;
+    }
+
     return (
-        <GenericDialog show={props.show} submit={props.submit} cancel={props.cancel}>
+        <GenericDialog show={props.show} cancel={props.cancel}>
             <h1 className="font-sans font-bold tracking-tight text-[24px] mb-3">You sure you want to report?</h1>
             <p className="font-sans text-[1.45rem] text-neutral-500">You request will be sent to the owner of this site.</p>
             <div className="mt-10">
-                <button className="w-full h-[44px] bg-red-600 px-8 flex items-center justify-center rounded-md text-white font-sans font-semibold text-lg" onClick={props.submit}>Yes</button>
+                <button
+                    className={`transition duration-200 ease-linear w-full h-[44px] px-8 flex items-center justify-center rounded-md text-white font-sans font-semibold text-[15px] ${buttonColor}`}
+                    onClick={props.submit}
+                >
+                    {buttonIcon}{buttonText}
+                </button>
                 <p className="font-sans font-medium text-[1.45rem] text-neutral-500 mt-4 -mb-1">No, <button className="font-sans underline" onClick={props.cancel}>I've changed my mind</button></p>
             </div>
         </GenericDialog>
diff --git a/apps/comments-ui/src/images/icons/spinner.svg b/apps/comments-ui/src/images/icons/spinner.svg
new file mode 100644
index 0000000000..a348b523aa
--- /dev/null
+++ b/apps/comments-ui/src/images/icons/spinner.svg
@@ -0,0 +1 @@
+<svg width='24px' height='24px' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="uil-default"><rect  x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#fefefe' transform='rotate(0 50 50) translate(0 -40)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0s' repeatCount='indefinite'/></rect><rect  x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#fefefe' transform='rotate(30 50 50) translate(0 -40)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.08333333333333333s' repeatCount='indefinite'/></rect><rect  x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#fefefe' transform='rotate(60 50 50) translate(0 -40)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.16666666666666666s' repeatCount='indefinite'/></rect><rect  x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#fefefe' transform='rotate(90 50 50) translate(0 -40)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.25s' repeatCount='indefinite'/></rect><rect  x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#fefefe' transform='rotate(120 50 50) translate(0 -40)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.3333333333333333s' repeatCount='indefinite'/></rect><rect  x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#fefefe' transform='rotate(150 50 50) translate(0 -40)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.4166666666666667s' repeatCount='indefinite'/></rect><rect  x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#fefefe' transform='rotate(180 50 50) translate(0 -40)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.5s' repeatCount='indefinite'/></rect><rect  x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#fefefe' transform='rotate(210 50 50) translate(0 -40)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.5833333333333334s' repeatCount='indefinite'/></rect><rect  x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#fefefe' transform='rotate(240 50 50) translate(0 -40)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.6666666666666666s' repeatCount='indefinite'/></rect><rect  x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#fefefe' transform='rotate(270 50 50) translate(0 -40)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.75s' repeatCount='indefinite'/></rect><rect  x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#fefefe' transform='rotate(300 50 50) translate(0 -40)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.8333333333333334s' repeatCount='indefinite'/></rect><rect  x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#fefefe' transform='rotate(330 50 50) translate(0 -40)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.9166666666666666s' repeatCount='indefinite'/></rect></svg>
diff --git a/apps/comments-ui/src/images/icons/success.svg b/apps/comments-ui/src/images/icons/success.svg
new file mode 100644
index 0000000000..8c8d68a370
--- /dev/null
+++ b/apps/comments-ui/src/images/icons/success.svg
@@ -0,0 +1,5 @@
+<svg width="26px" height="26px" viewBox="-1 -1 26 26" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="check-circle" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path class="animated-check-circle" d="M19.6004116,2.71490714 C17.5353801,1.0196018 14.8927356,0 12,0 C5.38938053,0 0,5.38938053 0,12 C0,18.6106195 5.38938053,24 12,24 C18.6106195,24 24,18.6106195 24,12 C24,9.71681416 23.3628319,7.59292035 22.2743363,5.78761062 L11.0442478,17.0442478 L5.49557522,11.4955752" id="Shape" stroke="#FFFFFF" stroke-width="2"></path>
+    </g>
+</svg>