Form prototype

src/Form/components/SuperFormPersist.tsx

@@ -0,0 +1,66 @@
+import { useEffect, useState } from 'react'
+import { useFormContext, useFormState } from 'react-hook-form'
+import { useDebouncedCallback } from '@mantine/hooks'
+import useSubscribe from '../hooks/use-subscribe'
+import { useSuperFormStore } from '../store/SuperForm.store'
+import { openConfirmModal } from '../utils/openConfirmModal'
+
+const SuperFormPersist = ({ storageKey }: { storageKey?: string | null }) => {
+  // Component store State
+  const [persistKey, setPersistKey] = useState<string>('')
+  const { isDirty, isReady, isSubmitted } = useFormState()
+
+  const { remote, request } = useSuperFormStore((state) => ({
+    request: state.request,
+    remote: state.remote,
+  }))
+
+  // Component Hooks
+  const { reset, setValue } = useFormContext()
+
+  const handleFormChange = useDebouncedCallback(({ values }) => {
+    setPersistKey(() => {
+      const key = `superform-persist-${storageKey?.length > 0 ? storageKey : `${remote?.tableName || 'local'}-${request}-${values[remote?.primaryKey] ?? ''}`}`
+
+      if (!isDirty) {
+        return key
+      }
+
+      window.localStorage.setItem(key, JSON.stringify(values))
+
+      return key
+    })
+  }, 250)
+
+  useSubscribe('', handleFormChange)
+
+  // Component use Effects
+  useEffect(() => {
+    if (isReady && persistKey) {
+      const data = window.localStorage.getItem(persistKey)
+      if (!data) {
+        return
+      }
+
+      if (isSubmitted) {
+        window.localStorage.removeItem(persistKey)
+        return
+      }
+
+      openConfirmModal(
+        () => {
+          reset(JSON.parse(data))
+          setValue('_dirty', true, { shouldDirty: true })
+        },
+        () => {
+          window.localStorage.removeItem(persistKey)
+        },
+        'Do you want to restore the previous data that was not submitted?'
+      )
+    }
+  }, [isReady, isSubmitted, persistKey])
+
+  return null
+}
+
+export default SuperFormPersist