Merge pull request #225 from RaenonX-DL/dev

v2.11.1 Release
RaenonX-DL · Jul 29, 2021 · fb4ecb8 · fb4ecb8
2 parents b6fcf82 + 7781335
commit fb4ecb8
Show file tree

Hide file tree

Showing 17 changed files with 138 additions and 68 deletions.
diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
   "name": "dragalia-site-front",
   "description": "Frontend of DL info website by OM.",
   "repository": "https://github.com/RaenonX-DL/dragalia-site-front",
-  "version": "2.11.0",
+  "version": "2.11.1",
   "engines": {
     "node": "14.x",
     "npm": "^7.12.0"

diff --git a/src/components/elements/posts/analysis/form/chara/body.tsx b/src/components/elements/posts/analysis/form/chara/body.tsx
@@ -52,7 +52,7 @@ export const CharaAnalysisForm = <P extends CharaAnalysisPayload>({
         minLength={2}
         getArray={(payload) => payload.skills}
         setArray={setSkills}
-        updateElementValue={(element, key, value) => element[key] = value}
+        getUpdatedElement={(element, key, value) => ({...element, [key]: value})}
         generateNewElement={generateNewCharaSkill}
         renderEntries={(skill, onChange) => (
           <div className="mt-2">

diff --git a/src/components/elements/posts/analysis/form/chara/new.test.tsx b/src/components/elements/posts/analysis/form/chara/new.test.tsx
@@ -172,7 +172,6 @@ describe('New character analysis form', () => {
           backup: {
             analysis: {
               chara: {
-                uid: 'uid',
                 unitId: 10950101,
                 type: UnitType.CHARACTER,
                 lang: SupportedLanguages.CHT,
@@ -204,4 +203,34 @@ describe('New character analysis form', () => {
 
     await waitFor(() => expect(fnClear).toHaveBeenCalled());
   });
+
+  it('should not backup UID', async () => {
+    const fnBackup = jest.spyOn(backupDispatchers, BackupDispatcherName.BACKUP_CHARA_ANALYSIS);
+
+    const {rerender} = renderReact(
+      () => <AnalysisFormCharaNew/>,
+      {
+        user: {isAdmin: true},
+        preloadState: {
+          backup: {
+            analysis: {
+              chara: {
+                ...generatePayload(SupportedLanguages.EN, 'admin'),
+                summary: 'sum',
+              },
+              dragon: null,
+            },
+            quest: null,
+          },
+        },
+      },
+    );
+
+    const summary = screen.getByText('sum');
+    typeInput(summary, 'summary', {rerender});
+
+    // @ts-ignore
+    const {uid} = fnBackup.mock.calls[0][0];
+    expect(uid).toBeUndefined();
+  });
 });
diff --git a/src/components/elements/posts/analysis/form/chara/new.tsx b/src/components/elements/posts/analysis/form/chara/new.tsx
@@ -29,12 +29,13 @@ export const AnalysisFormCharaNew = () => {
   return (
     <AnalysisFormChara
       formState={formState}
-      setFormState={(newState) => {
-        dispatch(backupDispatchers.backupCharaAnalysis(newState.payload));
-        setFormState(newState);
-      }}
+      setFormState={setFormState}
       fnSendRequest={ApiRequestSender.analysisPublishChara}
       onSubmitSuccess={() => dispatch(backupDispatchers.clearCharaAnalysis())}
+      onUpdated={(payload) => {
+        const {uid, ...rest} = payload;
+        dispatch(backupDispatchers.backupCharaAnalysis(rest));
+      }}
     />
   );
 };
diff --git a/src/components/elements/posts/analysis/form/dragon/new.test.tsx b/src/components/elements/posts/analysis/form/dragon/new.test.tsx
@@ -173,7 +173,6 @@ describe('New dragon analysis form', () => {
             analysis: {
               chara: null,
               dragon: {
-                uid: '',
                 unitId: 20950101,
                 lang: SupportedLanguages.EN,
                 type: UnitType.DRAGON,
@@ -204,4 +203,34 @@ describe('New dragon analysis form', () => {
 
     await waitFor(() => expect(fnClear).toHaveBeenCalled());
   });
+
+  it('should not backup UID', async () => {
+    const fnBackup = jest.spyOn(backupDispatchers, BackupDispatcherName.BACKUP_DRAGON_ANALYSIS);
+
+    const {rerender} = renderReact(
+      () => <AnalysisFormDragonNew/>,
+      {
+        user: {isAdmin: true},
+        preloadState: {
+          backup: {
+            analysis: {
+              chara: null,
+              dragon: {
+                ...generatePayload(SupportedLanguages.EN, 'admin'),
+                summary: 'sum',
+              },
+            },
+            quest: null,
+          },
+        },
+      },
+    );
+
+    const summary = screen.getByText('sum');
+    typeInput(summary, 'summary', {rerender});
+
+    // @ts-ignore
+    const {uid} = fnBackup.mock.calls[0][0];
+    expect(uid).toBeUndefined();
+  });
 });
diff --git a/src/components/elements/posts/analysis/form/dragon/new.tsx b/src/components/elements/posts/analysis/form/dragon/new.tsx
@@ -29,12 +29,13 @@ export const AnalysisFormDragonNew = () => {
   return (
     <AnalysisFormDragon
       formState={formState}
-      setFormState={(newState) => {
-        dispatch(backupDispatchers.backupDragonAnalysis(newState.payload));
-        setFormState(newState);
-      }}
+      setFormState={setFormState}
       fnSendRequest={ApiRequestSender.analysisPublishDragon}
       onSubmitSuccess={() => dispatch(backupDispatchers.clearDragonAnalysis())}
+      onUpdated={(payload) => {
+        const {uid, ...rest} = payload;
+        dispatch(backupDispatchers.backupDragonAnalysis(rest));
+      }}
     />
   );
 };
diff --git a/src/components/elements/posts/quest/form/main.tsx b/src/components/elements/posts/quest/form/main.tsx
@@ -59,7 +59,7 @@ export const QuestPostForm = <P extends QuestPostPublishPayload, R extends Quest
           <hr/>
           <FormGeneralInfo formState={formState} setPayload={setPayload}/>
           <hr/>
-          <FormPositional formState={formState} setState={setFormState}/>
+          <FormPositional formState={formState} setPayload={setPayload}/>
           <hr/>
           <FormAddendum formState={formState} setPayload={setPayload}/>
         </>

diff --git a/src/components/elements/posts/quest/form/new.test.tsx b/src/components/elements/posts/quest/form/new.test.tsx
@@ -173,7 +173,6 @@ describe('New quest post form', () => {
             analysis: {chara: null, dragon: null},
             quest: {
               seqId: 7,
-              uid: 'googleUid',
               lang: SupportedLanguages.CHT,
               title: 'ttl',
               general: 'gen',
@@ -201,4 +200,28 @@ describe('New quest post form', () => {
 
     await waitFor(() => expect(fnClear).toHaveBeenCalled());
   });
+
+  it('should not backup UID', async () => {
+    const fnBackup = jest.spyOn(backupDispatchers, BackupDispatcherName.BACKUP_QUEST_GUIDE);
+
+    const {rerender} = renderReact(
+      () => <QuestNewForm/>,
+      {
+        user: {isAdmin: true},
+        preloadState: {
+          backup: {
+            analysis: {chara: null, dragon: null},
+            quest: {...generatePayload(SupportedLanguages.EN, 'admin'), addendum: 'add'},
+          },
+        },
+      },
+    );
+
+    const addendum = screen.getByText('add');
+    typeInput(addendum, 'addendum', {rerender});
+
+    // @ts-ignore
+    const {uid} = fnBackup.mock.calls[0][0];
+    expect(uid).toBeUndefined();
+  });
 });
diff --git a/src/components/elements/posts/quest/form/new.tsx b/src/components/elements/posts/quest/form/new.tsx
@@ -29,12 +29,13 @@ export const QuestNewForm = () => {
   return (
     <QuestPostForm
       formState={formState}
-      setFormState={(newState) => {
-        dispatch(backupDispatchers.backupQuestGuide(newState.payload));
-        setFormState(newState);
-      }}
+      setFormState={setFormState}
       fnSendRequest={ApiRequestSender.questPublish}
       onSubmitSuccess={() => dispatch(backupDispatchers.clearQuestGuide())}
+      onUpdated={(payload) => {
+        const {uid, ...rest} = payload;
+        dispatch(backupDispatchers.backupQuestGuide(rest));
+      }}
     />
   );
 };
diff --git a/src/components/elements/posts/quest/form/position.tsx b/src/components/elements/posts/quest/form/position.tsx
@@ -1,43 +1,27 @@
 import React from 'react';
 
-import {PositionalInfo, QuestPostPublishPayload} from '../../../../../api-def/api';
+import {QuestPostPublishPayload} from '../../../../../api-def/api';
 import {useI18n} from '../../../../../i18n/hook';
 import {generateNewPositionInfo} from '../../../../../utils/services/api/utils';
 import {ArrayDataForm} from '../../shared/form/array';
-import {PostFormDataProps, PostFormState} from '../../shared/form/types';
+import {PostFormDataProps} from '../../shared/form/types';
 import {QuestPositionUnit} from './positionUnit';
 
-type FormPositionalProps<P extends QuestPostPublishPayload> = Pick<PostFormDataProps<P>, 'formState'> & {
-  setState: (newState: PostFormState<P>) => void,
-}
 
-export const FormPositional = <P extends QuestPostPublishPayload>({
-  formState,
-  setState,
-}: FormPositionalProps<P>) => {
+export const FormPositional = <P extends QuestPostPublishPayload>({formState, setPayload}: PostFormDataProps<P>) => {
   const {t} = useI18n();
 
   const {payload} = formState;
 
-  const setSkills = (positional: Array<PositionalInfo>) => {
-    setState({
-      ...formState,
-      payload: {
-        ...payload,
-        positional,
-      },
-    });
-  };
-
   return (
     <>
       <h5>{t((t) => t.posts.quest.positional)}</h5>
       <ArrayDataForm
         payload={payload}
         minLength={1}
         getArray={(payload) => payload.positional}
-        setArray={setSkills}
-        updateElementValue={(element, key, value) => element[key] = value}
+        setArray={(positional) => setPayload('positional', positional)}
+        getUpdatedElement={(element, key, value) => ({...element, [key]: value})}
         generateNewElement={generateNewPositionInfo}
         renderEntries={(posInfo, onChange) => (
           <div className="mt-2">

diff --git a/src/components/elements/posts/shared/form/array.test.tsx b/src/components/elements/posts/shared/form/array.test.tsx
@@ -20,14 +20,14 @@ describe('Array data form', () => {
   let payload: Payload;
   let getArrayFunc: jest.Mock<Array<Enum>, [Payload]>;
   let setArrayFunc: jest.Mock<void, [Array<Enum>]>;
-  let updateElemValueFunc: jest.Mock<void, [Enum, 'code', string]>;
+  let getUpdatedElemFunc: jest.Mock<Enum, [Enum, 'code', string]>;
   let generateNewElemFunc: jest.Mock<Enum, []>;
   let renderEntriesFunc: jest.Mock;
 
   beforeEach(() => {
     getArrayFunc = jest.fn().mockImplementation((payload) => payload.enums);
     setArrayFunc = jest.fn().mockImplementation((array) => payload.enums = array);
-    updateElemValueFunc = jest.fn().mockImplementation((elem, key, value) => elem[key] = value);
+    getUpdatedElemFunc = jest.fn().mockImplementation((element, key, value) => ({...element, [key]: value}));
     generateNewElemFunc = jest.fn().mockImplementation(() => ({code: 7}));
     renderEntriesFunc = jest.fn();
   });
@@ -51,7 +51,7 @@ describe('Array data form', () => {
         minLength={2}
         getArray={getArrayFunc}
         setArray={setArrayFunc}
-        updateElementValue={updateElemValueFunc}
+        getUpdatedElement={getUpdatedElemFunc}
         generateNewElement={generateNewElemFunc}
         renderEntries={renderEntriesFunc}
       />
@@ -85,7 +85,7 @@ describe('Array data form', () => {
         minLength={2}
         getArray={getArrayFunc}
         setArray={setArrayFunc}
-        updateElementValue={updateElemValueFunc}
+        getUpdatedElement={getUpdatedElemFunc}
         generateNewElement={generateNewElemFunc}
         renderEntries={renderEntriesFunc}
       />
@@ -116,7 +116,7 @@ describe('Array data form', () => {
         minLength={2}
         getArray={getArrayFunc}
         setArray={setArrayFunc}
-        updateElementValue={updateElemValueFunc}
+        getUpdatedElement={getUpdatedElemFunc}
         generateNewElement={generateNewElemFunc}
         renderEntries={renderEntriesFunc}
       />

diff --git a/src/components/elements/posts/shared/form/array.tsx b/src/components/elements/posts/shared/form/array.tsx
@@ -8,7 +8,7 @@ type CharaAnalysisFormProps<P extends PostMeta, E> = {
   minLength: number,
   getArray: (payload: P) => Array<E>,
   setArray: (newArray: Array<E>) => void,
-  updateElementValue: (element: E, key: keyof E, value: string) => void,
+  getUpdatedElement: (element: E, key: keyof E, value: string) => E,
   generateNewElement: () => E,
   renderEntries: (
     element: E,
@@ -17,12 +17,12 @@ type CharaAnalysisFormProps<P extends PostMeta, E> = {
 }
 
 
-export const ArrayDataForm = <P extends PostMeta, E>({
+export const ArrayDataForm = <P extends PostMeta, E extends object>({
   payload,
   minLength,
   getArray,
   setArray,
-  updateElementValue,
+  getUpdatedElement,
   generateNewElement,
   renderEntries,
 }: CharaAnalysisFormProps<P, E>) => {
@@ -41,9 +41,7 @@ export const ArrayDataForm = <P extends PostMeta, E>({
         return elem;
       }
 
-      // Update the data
-      updateElementValue(elem, key, newValue);
-      return elem;
+      return getUpdatedElement(elem, key, newValue);
     }));
   };
   const onAdded = () => {

diff --git a/src/components/elements/posts/shared/form/base.tsx b/src/components/elements/posts/shared/form/base.tsx
@@ -27,6 +27,7 @@ export const PostFormBase = <P extends PostMeta, R extends PostEditResponse>({
   fnGetRedirectId,
   fnProcessPayload,
   onSubmitSuccess,
+  onUpdated,
 }: PostFormBaseInternalProps<P, R>) => {
   const {t} = useI18n();
   const dispatch = useDispatch();
@@ -49,10 +50,13 @@ export const PostFormBase = <P extends PostMeta, R extends PostEditResponse>({
     };
   });
 
-  const setPayload = <K extends keyof P>(key: K, newValue: P[K]) => setFormState({
-    ...formState,
-    payload: {...formState.payload, [key]: newValue},
-  });
+  const setPayload = <K extends keyof P>(key: K, newValue: P[K]) => {
+    const payload: P = {...formState.payload, [key]: newValue};
+    if (onUpdated) {
+      onUpdated(payload);
+    }
+    setFormState({...formState, payload});
+  };
 
   const setAvailability = (availability: boolean) => setFormState({
     ...formState,

diff --git a/src/components/elements/posts/shared/form/types.ts b/src/components/elements/posts/shared/form/types.ts
@@ -42,7 +42,7 @@ export type PostFormFetchProps<P extends PostMeta, R extends PostEditResponse> =
  */
 export type PostFormBaseProps<P extends PostMeta, R extends PostEditResponse> = PostFormFetchProps<P, R> & {
   formState: PostFormState<P>,
-  setFormState: (newState: PostFormState<P>) => void,
+  setFormState: React.Dispatch<React.SetStateAction<PostFormState<P>>>,
   renderMain: (
     setPayload: PostFormSetPayloadFunc<P>,
     setAvailability: (availability: boolean) => void,
@@ -51,13 +51,15 @@ export type PostFormBaseProps<P extends PostMeta, R extends PostEditResponse> =
     setPayload: PostFormSetPayloadFunc<P>,
   ) => React.ReactElement,
   onSubmitSuccess?: () => void,
+  onUpdated?: (payload: P) => void,
 }
 
 /**
  * Props of the main post form.
  */
 export type PostFormProps<P extends PostMeta, R extends PostEditResponse> = Pick<PostFormBaseProps<P, R>,
-  'formState' | 'setFormState' | 'fnSendRequest' | 'fnProcessPayload' | 'renderOnPreloaded' | 'onSubmitSuccess'>;
+  'formState' | 'setFormState' | 'fnSendRequest' | 'fnProcessPayload' | 'renderOnPreloaded' | 'onSubmitSuccess' |
+  'onUpdated'>;
 
 export const isFormStateValid = <P extends PostMeta>({isIdAvailable, isPreloaded}: PostFormState<P>) => {
   return isIdAvailable || isPreloaded;