From 5877912cead64ca287e1b98e00cf32e374af6ae6 Mon Sep 17 00:00:00 2001
From: enes <enes@nostrdev.com>
Date: Thu, 12 Dec 2024 16:19:08 +0100
Subject: [PATCH] feat(mod): clear form changes with confirm alert popup

---
 src/components/ModForm.tsx | 42 ++++++++++++++++++++++++++++++++++++++
 src/styles/write.css       |  2 +-
 2 files changed, 43 insertions(+), 1 deletion(-)

diff --git a/src/components/ModForm.tsx b/src/components/ModForm.tsx
index 22e750d..1db8b96 100644
--- a/src/components/ModForm.tsx
+++ b/src/components/ModForm.tsx
@@ -31,6 +31,7 @@ import { LoadingSpinner } from './LoadingSpinner'
 import { NDKEvent } from '@nostr-dev-kit/ndk'
 import { OriginalAuthor } from './OriginalAuthor'
 import { CategoryAutocomplete } from './CategoryAutocomplete'
+import { AlertPopup } from './AlertPopup'
 
 interface FormErrors {
   game?: string
@@ -176,6 +177,27 @@ export const ModForm = ({ existingModData }: ModFormProps) => {
     []
   )
 
+  const [showConfirmPopup, setShowConfirmPopup] = useState<boolean>(false)
+  const handleReset = () => {
+    setShowConfirmPopup(true)
+  }
+  const handleResetConfirm = (confirm: boolean) => {
+    setShowConfirmPopup(false)
+
+    // Cancel if not confirmed
+    if (!confirm) return
+
+    // Editing
+    if (existingModData) {
+      // Reset fields to the original existing data
+      setFormState(initializeFormState(existingModData))
+      return
+    }
+
+    // New - set form state to the initial (clear form state)
+    setFormState(initializeFormState())
+  }
+
   const handlePublish = async () => {
     setIsPublishing(true)
 
@@ -563,6 +585,14 @@ export const ModForm = ({ existingModData }: ModFormProps) => {
           )}
       </div>
       <div className='IBMSMSMBS_WriteAction'>
+        <button
+          className='btn btnMain'
+          type='button'
+          onClick={handleReset}
+          disabled={isPublishing}
+        >
+          {existingModData ? 'Reset' : 'Clear fields'}
+        </button>
         <button
           className='btn btnMain'
           type='button'
@@ -572,6 +602,18 @@ export const ModForm = ({ existingModData }: ModFormProps) => {
           Publish
         </button>
       </div>
+      {showConfirmPopup && (
+        <AlertPopup
+          handleConfirm={handleResetConfirm}
+          handleClose={() => setShowConfirmPopup(false)}
+          header={'Are you sure?'}
+          label={
+            existingModData
+              ? `Are you sure you want to clear all changes?`
+              : `Are you sure you want to clear all field data?`
+          }
+        />
+      )}
     </>
   )
 }
diff --git a/src/styles/write.css b/src/styles/write.css
index 7ac363d..412bcec 100644
--- a/src/styles/write.css
+++ b/src/styles/write.css
@@ -11,5 +11,5 @@
   flex-direction: row;
   justify-content: end;
   align-items: center;
+  gap: 25px;
 }
-