feat: persisted storage

packages/website/src/hooks/use-presisted-storage.ts

@@ -0,0 +1,57 @@
+import { useEffect, useRef } from 'react';
+
+type Getter<T> = () => T;
+interface Options<T> {
+  getter: Getter<T>;
+}
+type PersistedStorage = <T>(
+  id: string,
+  options?: Options<T>,
+) => {
+  /**
+   * 从 storage 中获取的数据，没有则返回 null
+   */
+  data: T | null;
+  /**
+   * 存储数据时，将会调用该函数获取存储的数据
+   *
+   * 为什么需要这个？
+   * 在一些场景，我们需要该 hook 提供的初始数据，来初始化其它 hook
+   * 而 getter 又依赖那些 hook。见 edit_detail 页面
+   */
+  setGetter: (getter: Getter<T>) => void;
+  /**
+   * 调用后，代表数据将不会被保存
+   */
+  finish: () => void;
+};
+export const usePersistedStorage: PersistedStorage = <T>(id: string, options?: Options<T>) => {
+  const _id = `resume:${id}`;
+  const item = sessionStorage.getItem(_id);
+  if (item) {
+    sessionStorage.removeItem(_id);
+  }
+  const getterRef = useRef<null | Getter<T>>(options?.getter ?? null);
+  const finished = useRef(false);
+
+  const setGetter = (getter: Getter<T>) => {
+    getterRef.current = getter;
+  };
+
+  useEffect(() => {
+    return () => {
+      // 组件 unmount 时存储
+      if (!finished.current) {
+        getterRef.current && sessionStorage.setItem(_id, JSON.stringify(getterRef.current()));
+      }
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return {
+    data: item ? (JSON.parse(item) as T) : null,
+    setGetter,
+    finish: () => {
+      finished.current = true;
+    },
+  };
+};

packages/website/src/pages/index/subject/[id]/wiki/edit_detail.tsx

@@ -1,6 +1,6 @@
 import cn from 'classnames';
 import dayjs from 'dayjs';
-import { flow } from 'lodash';
+import { flow, merge } from 'lodash';
 import type { editor } from 'monaco-editor/esm/vs/editor/editor.api';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useForm } from 'react-hook-form';
@@ -21,6 +21,7 @@ import {
 import { withErrorBoundary } from '@bangumi/website/components/ErrorBoundary';
 import Helmet from '@bangumi/website/components/Helmet';
 import WikiEditor from '@bangumi/website/components/WikiEditor/WikiEditor';
+import { usePersistedStorage } from '@bangumi/website/hooks/use-presisted-storage';
 import { getWikiTemplate, WikiEditTabsItemsByKey } from '@bangumi/website/shared/wiki';
 
 import WikiBeginnerEditor from '../components/WikiBeginnerEditor';
@@ -71,23 +72,51 @@ const formatWikiSyntaxErrorMessage = (error: WikiSyntaxError): string => {
 };
 
 function WikiEditDetailDetailPage() {
-  const { register, handleSubmit, setValue, watch } = useForm<FormData>();
+  const { subjectEditHistory, subjectWikiInfo, mutateHistory, subjectId } = useWikiContext();
+
+  const {
+    data: initForm,
+    setGetter,
+    finish,
+  } = usePersistedStorage<FormData>(`wiki-edit-detail/${subjectId}`);
+  // 存储在 storage 中的数据拥有更高的优先级
+  const defaultForm = merge({ subject: subjectWikiInfo }, initForm);
+  const { register, handleSubmit, setValue, watch, getValues } = useForm<FormData>({
+    defaultValues: defaultForm,
+  });
+
+  setGetter(() =>
+    // 1. 从表单中获取数据
+    merge(getValues(), {
+      subject: {
+        // 2. 更新 infobox
+        infobox: stringifyWiki({
+          type: wikiRef.current?.type ?? '',
+          data: fromWikiElement(wikiElement),
+        }),
+      },
+    }),
+  );
+
   const prePlatform = watch('subject.platform');
 
   const [editorType, setEditorType] = useLocalstorageState(
     'chii_wiki_editor_type',
     EditorType.Beginner,
   );
-  const wikiRef = useRef<Wiki>();
-  const [wikiElement, setWikiElement] = useState<WikiElement[]>([]);
+
+  const wikiRef = useRef<Wiki>(
+    defaultForm?.subject?.infobox ? parseWiki(defaultForm.subject.infobox) : null,
+  );
+
+  const [wikiElement, setWikiElement] = useState<WikiElement[]>(
+    wikiRef.current ? toWikiElement(wikiRef.current) : [],
+  );
 
   const monoEditorInstanceRef = useRef<editor.IStandaloneCodeEditor | null>(null);
-  const { subjectEditHistory, subjectWikiInfo, mutateHistory, subjectId } = useWikiContext();
 
   useEffect(() => {
-    wikiRef.current = parseWiki(subjectWikiInfo.infobox);
     monoEditorInstanceRef.current?.setValue(subjectWikiInfo.infobox);
-    setWikiElement(toWikiElement(wikiRef.current));
     // https://github.com/bangumi/frontend/pull/312#discussion_r1086401410
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
@@ -130,14 +159,15 @@ function WikiEditDetailDetailPage() {
           }
         })
         .then(() => {
+          finish();
           // TODO: jump to other path
           console.log('success');
         })
         .catch(() => {
           toast('提交失败，请稍后再试');
         });
     },
-    [wikiElement, editorType, mutateHistory, subjectId],
+    [wikiElement, editorType, mutateHistory, subjectId, finish],
   );
 
   const handleSetEditorType = (type: EditorType) => {
@@ -223,7 +253,6 @@ function WikiEditDetailDetailPage() {
                 <Input
                   type='text'
                   wrapperClass={style.formInput}
-                  defaultValue={subjectWikiInfo.name}
                   {...register('subject.name', { required: true })}
                 />
               </Form.Item>
@@ -293,7 +322,6 @@ function WikiEditDetailDetailPage() {
               <Form.Item label='剧情介绍'>
                 <textarea
                   className={style.formTextArea}
-                  defaultValue={subjectWikiInfo.summary}
                   {...register('subject.summary', { required: true })}
                 />
               </Form.Item>