From c7716463fc3720b2683be121829812cc5d4a9fc0 Mon Sep 17 00:00:00 2001
From: anoop narang <anoop.narang@navi.com>
Date: Thu, 23 Jul 2020 11:15:29 +0530
Subject: [PATCH] [INFRA-421] | Anoop | Use confirmation button when submitting
 manifest

---
 src/components/common/ConfirmationButton.tsx | 21 ++++++++++++++
 src/components/manifest/Form.tsx             | 30 ++++----------------
 2 files changed, 27 insertions(+), 24 deletions(-)
 create mode 100644 src/components/common/ConfirmationButton.tsx

diff --git a/src/components/common/ConfirmationButton.tsx b/src/components/common/ConfirmationButton.tsx
new file mode 100644
index 0000000..8498189
--- /dev/null
+++ b/src/components/common/ConfirmationButton.tsx
@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { ButtonProps } from '@material-ui/core';
+import Button from '@material-ui/core/Button';
+
+const ConfirmationButton = (props: ButtonProps) => {
+  const [isAskingForConfirmation, toggleConfirmation] = React.useState(false);
+  const { className, onClick, ...buttonProps } = props;
+  const askForConfirmation = () => {
+    toggleConfirmation(true);
+    setTimeout(() => toggleConfirmation(false), 3000);
+  };
+  const onConfirmation = (e: any) => {
+    toggleConfirmation(false);
+    onClick!(e);
+  };
+  if (isAskingForConfirmation) {
+    return <Button {...buttonProps} onClick={onConfirmation} className={`secondary-confirmation-button ${className}`} color="secondary" variant="contained">Click to confirm</Button>;
+  }
+  return <Button {...buttonProps} color="secondary" className={className} onClick={askForConfirmation} />;
+};
+export default ConfirmationButton;
diff --git a/src/components/manifest/Form.tsx b/src/components/manifest/Form.tsx
index 378c0ea..8270446 100644
--- a/src/components/manifest/Form.tsx
+++ b/src/components/manifest/Form.tsx
@@ -4,12 +4,12 @@ import withStyles from "@material-ui/core/styles/withStyles";
 import { createStyles } from "@material-ui/core";
 import MenuAppBar from "../layout/Header";
 import Grid from "@material-ui/core/Grid";
-// import "./../components.css";
 import Button from "@material-ui/core/Button";
 import { store } from "../../store/store";
 import { withCookies } from "react-cookie";
 import SchemaForm from "./SchemaForm";
 import { toast } from 'react-toastify';
+import ConfirmationButton from "../common/ConfirmationButton";
 
 const styles = createStyles({
   container: {
@@ -137,7 +137,7 @@ const Form = (props: any) => {
               <SchemaForm name="extraResources" />
             </SchemaForm>
 
-          <Button
+          <ConfirmationButton
             type="submit"
             color="primary"
             variant="contained"
@@ -145,9 +145,9 @@ const Form = (props: any) => {
             onClick={() => {
               const toastId = toast.info("In Progress ...", { autoClose: 20000 })
               handleSubmit(standaloneData)
-              .then((r) => {
-                r.json().then(resJson => {
-                  if(r.ok) {
+              .then((res) => {
+                res.json().then(resJson => {
+                  if(res.ok) {
                     toast.update(toastId, {render: 'Updated', type: 'success'})
                     setFormInitData(resJson.manifest);
                   } else {
@@ -158,26 +158,8 @@ const Form = (props: any) => {
             }}
           >
             Submit
-          </Button>
+          </ConfirmationButton>
         </Grid>
-        {/* <Grid item xs className="flex-col-scroll">
-          <div
-            style={{
-              display: "flex",
-              flexDirection: "column",
-              justifyContent: "center",
-              alignItems: "center",
-              marginTop: "1rem",
-              borderRadius: "0.75em",
-              backgroundColor: "#cecece",
-              fontFamily: "verdana",
-              fontSize: 18,
-            }}
-          >
-            <h3>Manifest Data</h3>
-            <pre>{formatDisplayData(standaloneData)}</pre>
-          </div>
-        </Grid> */}
       </Grid>
     </div>
   );