feat(mod): clear form changes with confirm alert popup

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?`
+          }
+        />
+      )}
     </>
   )
 }

src/styles/write.css

@@ -11,5 +11,5 @@
   flex-direction: row;
   justify-content: end;
   align-items: center;
+  gap: 25px;
 }
-