diff --git a/src/assets/categories/categories.json b/src/assets/categories/categories.json index 15f8314..9166cb5 100644 --- a/src/assets/categories/categories.json +++ b/src/assets/categories/categories.json @@ -1,13 +1,19 @@ [ - { "name": "gameplay ", "sub": ["difficulty"]}, - { "name": "input", "sub": ["key mapping", "macro"]}, - { "name": "visual", "sub": ["textures", "lighting", "character models", "environment models"] }, + { "name": "gameplay ", "sub": ["difficulty"] }, + { "name": "input", "sub": ["key mapping", "macro"] }, + { + "name": "visual", + "sub": ["textures", "lighting", "character models", "environment models"] + }, { "name": "audio", "sub": ["sfx", "music", "voice"] }, { "name": "user interface", "sub": ["hud", "menu"] }, - { "name": "quality of life", "sub": ["bug fixes", "performance", "accessibility"] }, + { + "name": "quality of life", + "sub": ["bug fixes", "performance", "accessibility"] + }, "total conversions", "translation", "multiplayer", "clothing", - "Mod Manager" -] \ No newline at end of file + "mod manager" +] diff --git a/src/components/ModForm.tsx b/src/components/ModForm.tsx index 914db43..a7c3699 100644 --- a/src/components/ModForm.tsx +++ b/src/components/ModForm.tsx @@ -22,7 +22,7 @@ import { ModFormState, ModPageLoaderResult } from '../types' -import { initializeFormState } from '../utils' +import { initializeFormState, MOD_DRAFT_CACHE_KEY } from '../utils' import { CheckboxField, InputField, InputFieldWithImageUpload } from './Inputs' import { OriginalAuthor } from './OriginalAuthor' import { CategoryAutocomplete } from './CategoryAutocomplete' @@ -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,19 @@ export const ModForm = () => { const submit = useSubmit() const games = useGames() const [gameOptions, setGameOptions] = useState([]) + + // Enable cache for the new mod + const isEditing = typeof mod !== 'undefined' + const [cache, setCache, clearCache] = + useLocalCache(MOD_DRAFT_CACHE_KEY) const [formState, setFormState] = useState( - initializeFormState(mod) + isEditing ? initializeFormState(mod) : cache ? cache : initializeFormState() ) + + useEffect(() => { + !isEditing && setCache(formState) + }, [formState, isEditing, setCache]) + const editorRef = useRef(null) useEffect(() => { @@ -145,45 +156,42 @@ export const ModForm = () => { ) const [showConfirmPopup, setShowConfirmPopup] = useState(false) - const handleReset = () => { + const handleReset = useCallback(() => { setShowConfirmPopup(true) - } - const handleResetConfirm = (confirm: boolean) => { - setShowConfirmPopup(false) + }, []) + const handleResetConfirm = useCallback( + (confirm: boolean) => { + setShowConfirmPopup(false) - // Cancel if not confirmed - if (!confirm) return + // Cancel if not confirmed + if (!confirm) return - // Editing - if (mod) { - const initial = initializeFormState(mod) + // Reset fields to the initial or original existing data + const initialState = initializeFormState(mod) // Reset editor - editorRef.current?.setMarkdown(initial.body) + editorRef.current?.setMarkdown(initialState.body) + setFormState(initialState) - // Reset fields to the original existing data - setFormState(initial) - return - } + // Clear cache + !isEditing && clearCache() + }, + [clearCache, isEditing, mod] + ) - // New - set form state to the initial (clear form state) - setFormState(initializeFormState()) - } - const handlePublish = () => { - submit(JSON.stringify(formState), { - method: mod ? 'put' : 'post', - encType: 'application/json' - }) - } + const handlePublish = useCallback( + (e: React.FormEvent) => { + e.preventDefault() + submit(JSON.stringify(formState), { + method: isEditing ? 'put' : 'post', + encType: 'application/json' + }) + }, + [formState, isEditing, submit] + ) return ( -
{ - e.preventDefault() - handlePublish() - }} - > + { navigation.state === 'loading' || navigation.state === 'submitting' } > - {mod ? 'Reset' : 'Clear fields'} + {isEditing ? 'Reset' : 'Clear fields'}