67 lines
1.8 KiB
TypeScript
67 lines
1.8 KiB
TypeScript
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
|