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

src/pages/write/index.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { useRef, useState } from 'react'
 import {
   Form,
   useActionData,
@@ -24,6 +24,7 @@ import { EditorContent, useEditor } from '@tiptap/react'
 import StarterKit from '@tiptap/starter-kit'
 import Link from '@tiptap/extension-link'
 import Image from '@tiptap/extension-image'
+import { AlertPopup } from 'components/AlertPopup'
 
 export const WritePage = () => {
   const userState = useAppSelector((state) => state.user)
@@ -53,6 +54,20 @@ export const WritePage = () => {
     }
   })
 
+  const formRef = useRef<HTMLFormElement>(null)
+  const [showConfirmPopup, setShowConfirmPopup] = useState<boolean>(false)
+  const handleReset = () => {
+    setShowConfirmPopup(true)
+  }
+  const handleResetConfirm = (confirm: boolean) => {
+    setShowConfirmPopup(false)
+
+    // Cancel if not confirmed
+    if (!confirm) return
+
+    formRef.current?.reset()
+  }
+
   return (
     <div className='InnerBodyMain'>
       <div className='ContainerMain'>
@@ -68,7 +83,11 @@ export const WritePage = () => {
               {navigation.state === 'submitting' && (
                 <LoadingSpinner desc='Publishing blog to relays' />
               )}
-              <Form className='IBMSMSMBS_Write' method={blog ? 'put' : 'post'}>
+              <Form
+                ref={formRef}
+                className='IBMSMSMBS_Write'
+                method={blog ? 'put' : 'post'}
+              >
                 <InputFieldUncontrolled
                   label='Title'
                   name='title'
@@ -130,6 +149,17 @@ export const WritePage = () => {
                   />
                 )}
                 <div className='IBMSMSMBS_WriteAction'>
+                  <button
+                    className='btn btnMain'
+                    type='button'
+                    onClick={handleReset}
+                    disabled={
+                      navigation.state === 'loading' ||
+                      navigation.state === 'submitting'
+                    }
+                  >
+                    {blog ? 'Reset' : 'Clear fields'}
+                  </button>
                   <button
                     className='btn btnMain'
                     type='submit'
@@ -143,6 +173,18 @@ export const WritePage = () => {
                       : 'Publish'}
                   </button>
                 </div>
+                {showConfirmPopup && (
+                  <AlertPopup
+                    handleConfirm={handleResetConfirm}
+                    handleClose={() => setShowConfirmPopup(false)}
+                    header={'Are you sure?'}
+                    label={
+                      blog
+                        ? `Are you sure you want to clear all changes?`
+                        : `Are you sure you want to clear all field data?`
+                    }
+                  />
+                )}
               </Form>
             </div>
             {userState.auth && userState.user?.pubkey && (