feat(cache): add mod cache

src/components/ModForm.tsx

@@ -31,6 +31,7 @@ import { Editor, EditorRef } from './Markdown/Editor'
 import { MEDIA_OPTIONS } from 'controllers'
 import { InputError } from './Inputs/Error'
 import { ImageUpload } from './Inputs/ImageUpload'
+import { useLocalCache } from 'hooks/useLocalCache'
 
 interface GameOption {
   value: string
@@ -45,9 +46,18 @@ export const ModForm = () => {
   const submit = useSubmit()
   const games = useGames()
   const [gameOptions, setGameOptions] = useState<GameOption[]>([])
+
+  // Enable cache for the new mod
+  const isEditing = typeof mod !== 'undefined'
+  const [cache, setCache, clearCache] = useLocalCache<ModFormState>('draft-mod')
   const [formState, setFormState] = useState<ModFormState>(
-    initializeFormState(mod)
+    isEditing ? initializeFormState(mod) : cache ? cache : initializeFormState()
   )
+
+  useEffect(() => {
+    !isEditing && setCache(formState)
+  }, [formState, isEditing, setCache])
+
   const editorRef = useRef<EditorRef>(null)
 
   useEffect(() => {
@@ -145,37 +155,42 @@ export const ModForm = () => {
   )
 
   const [showConfirmPopup, setShowConfirmPopup] = useState<boolean>(false)
-  const handleReset = () => {
+  const handleReset = useCallback(() => {
     setShowConfirmPopup(true)
-  }
+  }, [])
-  const handleResetConfirm = (confirm: boolean) => {
+  const handleResetConfirm = useCallback(
-    setShowConfirmPopup(false)
+    (confirm: boolean) => {
+      setShowConfirmPopup(false)
 
-    // Cancel if not confirmed
+      // Cancel if not confirmed
-    if (!confirm) return
+      if (!confirm) return
 
-    // Reset fields to the initial or original existing data
+      // Reset fields to the initial or original existing data
-    const newState = initializeFormState(mod)
+      const initialState = initializeFormState(mod)
 
-    // Reset editor
+      // Reset editor
-    editorRef.current?.setMarkdown(newState.body)
+      editorRef.current?.setMarkdown(initialState.body)
-    setFormState(newState)
+      setFormState(initialState)
-  }
+
-  const handlePublish = () => {
+      // Clear cache
-    submit(JSON.stringify(formState), {
+      !isEditing && clearCache()
-      method: mod ? 'put' : 'post',
+    },
-      encType: 'application/json'
+    [clearCache, isEditing, mod]
-    })
+  )
-  }
+
+  const handlePublish = useCallback(
+    (e: React.FormEvent<HTMLFormElement>) => {
+      e.preventDefault()
+      submit(JSON.stringify(formState), {
+        method: isEditing ? 'put' : 'post',
+        encType: 'application/json'
+      })
+    },
+    [formState, isEditing, submit]
+  )
 
   return (
-    <form
+    <form className='IBMSMSMBS_Write' onSubmit={handlePublish}>
-      className='IBMSMSMBS_Write'
-      onSubmit={(e) => {
-        e.preventDefault()
-        handlePublish()
-      }}
-    >
       <GameDropdown
         options={gameOptions}
         selected={formState?.game}
@@ -398,7 +413,7 @@ export const ModForm = () => {
             navigation.state === 'loading' || navigation.state === 'submitting'
           }
         >
-          {mod ? 'Reset' : 'Clear fields'}
+          {isEditing ? 'Reset' : 'Clear fields'}
         </button>
         <button
           className='btn btnMain'