Fix: 永続保存に対応する (#41)

su-u · web-flow · commit 50242eb84d0a · 2024-09-07T16:57:04.000+09:00
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -1,4 +1,9 @@
 module.exports = {
+  eslint: {
+    // Warning: This allows production builds to successfully complete even if
+    // your project has ESLint errors.
+    ignoreDuringBuilds: true,
+  },
   "extends": [
     "next/core-web-vitals",
     "plugin:import/recommended",
diff --git a/src/app/base64/useBase64.ts b/src/app/base64/useBase64.ts
@@ -1,5 +1,6 @@
 import { useEffect, useState } from 'react';
 import { useCustomForm } from '@/components/common/Form/useCustomForm';
+import { useFormPersistence } from '@/hooks/useFormPersistence';
 
 type Base64Form = {
   input: string;
@@ -13,10 +14,14 @@ export const useBase64 = () => {
   const methods = useCustomForm<Base64Form>({
     defaultValues: DEFAULT_VALUES,
   });
-  const { watch } = methods;
+  const { watch, setValue } = methods;
   const [output, setOutput] = useState('');
   const input = watch('input', DEFAULT_VALUES.input);
 
+  useFormPersistence('base64', methods, (defaultValues) => {
+    setValue('input', defaultValues?.input);
+  });
+
   useEffect(() => {
     if (typeof window === 'undefined' || input.trim() === '') {
       setOutput('');
diff --git a/src/app/character_count/CharacterCount.tsx b/src/app/character_count/CharacterCount.tsx
@@ -18,6 +18,7 @@ import { LabelInput } from '@/components/common/Form/LabelInput';
 import { useCustomForm } from '@/components/common/Form/useCustomForm';
 import { PageTitle } from '@/components/common/PageTitle';
 import { PanelHeader } from '@/components/common/PanelHeader';
+import { useFormPersistence } from '@/hooks/useFormPersistence';
 
 type characterCountForm = {
   input: string;
@@ -29,7 +30,10 @@ export const CharacterCount: FC = () => {
       input: '',
     },
   });
-  const { control, watch } = methods;
+  const { control, watch, setValue } = methods;
+  useFormPersistence('character_count', methods, (defaultValues) => {
+    setValue('input', defaultValues?.input);
+  });
 
   const title = '文字数カウント';
   const input = watch('input', '');
diff --git a/src/app/character_replace/useCharacterReplace.ts b/src/app/character_replace/useCharacterReplace.ts
@@ -1,5 +1,6 @@
 import { useCallback, useState } from 'react';
 import { useCustomForm } from '@/components/common/Form/useCustomForm';
+import { useFormPersistence } from '@/hooks/useFormPersistence';
 
 type CharacterReplaceForm = {
   input: string;
@@ -18,9 +19,13 @@ export const useCharacterReplace = () => {
   const methods = useCustomForm<CharacterReplaceForm>({
     defaultValues: DEFAULT_VALUES,
   });
-  const { watch } = methods;
+  const { watch, setValue } = methods;
   const [inputCount, setInputCount] = useState(3);
 
+  useFormPersistence('character_replace', methods, (defaultValues) => {
+    setValue('input', defaultValues?.input);
+  });
+
   // @ts-ignore
   const numberArray = [...Array(inputCount).keys()].map((i) => ++i);
 
diff --git a/src/app/date_converter/useDateConverter.ts b/src/app/date_converter/useDateConverter.ts
@@ -3,6 +3,7 @@ import { useMemo, useEffect, useCallback, useState, ChangeEventHandler, ChangeEv
 import TIME_ZONES from 'timezones-list';
 import { useCustomForm } from '@/components/common/Form/useCustomForm';
 import { dayjs } from '@/lib/dayjs';
+import { useFormPersistence } from '@/hooks/useFormPersistence';
 
 type dateConverterForm = {
   inputDate: Dayjs | undefined;
@@ -21,6 +22,13 @@ export const useDateConverter = () => {
     },
   });
   const { watch, control, setValue, getValues } = methods;
+  useFormPersistence('date_converter', methods, (defaultValues) => {
+    setValue('inputDate', defaultValues?.inputDate);
+    setValue('inputUnixTime', defaultValues?.inputUnixTime);
+    setValue('timezone', defaultValues?.timezone);
+    setValue('customFormat', defaultValues?.customFormat);
+  });
+
   const timezones = useMemo(
     () => TIME_ZONES.map(({ label, tzCode }) => ({ label: label, value: tzCode })),
     [],
diff --git a/src/app/date_diff/useDateDiff.ts b/src/app/date_diff/useDateDiff.ts
@@ -2,6 +2,7 @@ import { Dayjs } from 'dayjs';
 import { useCallback } from 'react';
 import { useCustomForm } from '@/components/common/Form/useCustomForm';
 import { dayjs } from '@/lib/dayjs';
+import { useFormPersistence } from '@/hooks/useFormPersistence';
 
 type DateDiffForm = {
   inputDate1: Dayjs | undefined;
@@ -19,6 +20,12 @@ export const useDateDiff = () => {
     defaultValues: DEFAULT_VALUES,
   });
   const { watch, control, setValue, getValues } = methods;
+  useFormPersistence('date_diff', methods, (defaultValues) => {
+    setValue('inputDate1', defaultValues?.inputDate1);
+    setValue('inputDate2', defaultValues?.inputDate2);
+    setValue('isFormatFloat', defaultValues?.isFormatFloat);
+  });
+
   const date1 = watch('inputDate1');
   const date2 = watch('inputDate2');
   const isFormatInt = watch('isFormatFloat');
diff --git a/src/app/diff/useDiff.ts b/src/app/diff/useDiff.ts
@@ -1,5 +1,6 @@
 import React from 'react';
 import { useCustomForm } from '@/components/common/Form/useCustomForm';
+import { useFormPersistence } from '@/hooks/useFormPersistence';
 
 type DiffForm = {
   original: string;
@@ -16,6 +17,10 @@ export const useDiff = () => {
     defaultValues: DEFAULT_VALUES,
   });
   const { watch, resetField, setValue } = methods;
+  useFormPersistence('diff', methods, (defaultValues) => {
+    setValue('original', defaultValues?.original);
+    setValue('modified', defaultValues?.modified);
+  });
 
   const original = watch('original', DEFAULT_VALUES.original);
   const modified = watch('modified', DEFAULT_VALUES.modified);
diff --git a/src/app/hash/useHash.ts b/src/app/hash/useHash.ts
@@ -2,6 +2,7 @@ import { createHash as cryptoCreateHash } from 'crypto';
 import { useCallback } from 'react';
 import { useCustomForm } from '@/components/common/Form/useCustomForm';
 import { HASH_ALGORITHMS } from '@/lib/hashAlgorithms';
+import { useFormPersistence } from '@/hooks/useFormPersistence';
 
 type Base64Form = {
   input: string;
@@ -17,7 +18,11 @@ export const useHash = () => {
   const methods = useCustomForm<Base64Form>({
     defaultValues: DEFAULT_VALUES,
   });
-  const { watch } = methods;
+  const { watch, setValue } = methods;
+  useFormPersistence('hash', methods, (defaultValues) => {
+    setValue('input', defaultValues?.input);
+    setValue('isUppercase', defaultValues?.isUppercase);
+  });
 
   const input = watch('input', DEFAULT_VALUES.input);
   const isUppercase = watch('isUppercase', DEFAULT_VALUES.isUppercase);
diff --git a/src/app/image_generator/useImageGenerator.ts b/src/app/image_generator/useImageGenerator.ts
@@ -3,6 +3,7 @@ import { AggregationColor } from 'antd/es/color-picker/color';
 import { useCallback, useState } from 'react';
 import { getPresetSize } from '@/app/image_generator/presetSize';
 import { useCustomForm } from '@/components/common/Form/useCustomForm';
+import { useFormPersistence } from '@/hooks/useFormPersistence';
 
 type ImageGeneratorForm = {
   wight: number;
@@ -65,6 +66,16 @@ export const useImageGenerator = () => {
   const { getValues, setValue } = methods;
   const [src, setSrc] = useState('');
 
+  useFormPersistence('image_generator', methods, (defaultValues) => {
+    setValue('wight', defaultValues?.wight);
+    setValue('height', defaultValues?.height);
+    setValue('type', defaultValues?.type);
+    setValue('bgColor', defaultValues?.bgColor);
+    setValue('textColor', defaultValues?.textColor);
+    setValue('tab', defaultValues?.tab);
+    setValue('text', defaultValues?.text);
+    setValue('textSize', defaultValues?.textSize);
+  });
   const onClickGenerate = useCallback(() => {
     const values = getValues();
     switch (values.tab) {
diff --git a/src/app/json_formatter/useJsonFormatter.ts b/src/app/json_formatter/useJsonFormatter.ts
@@ -1,6 +1,7 @@
 import { useState } from 'react';
 import { format } from '@/app/json_formatter/jsonFormatterLib';
 import { useCustomForm } from '@/components/common/Form/useCustomForm';
+import { useFormPersistence } from '@/hooks/useFormPersistence';
 
 type JsonFormatForm = {
   input: string;
@@ -18,7 +19,13 @@ export const useJsonFormatter = () => {
   const methods = useCustomForm<JsonFormatForm>({
     defaultValues: DEFAULT_VALUES,
   });
-  const { watch } = methods;
+  const { watch, setValue } = methods;
+
+  useFormPersistence('json_formatter', methods, (defaultValues) => {
+    setValue('input', defaultValues?.input);
+    setValue('output', defaultValues?.output);
+    setValue('indentSpace', defaultValues?.indentSpace);
+  });
 
   const input = watch('input', DEFAULT_VALUES.input);
   const output = format(input, watch('indentSpace'));
diff --git a/src/app/number_comma/useNumberComma.ts b/src/app/number_comma/useNumberComma.ts
@@ -1,4 +1,5 @@
 import { useCustomForm } from '@/components/common/Form/useCustomForm';
+import { useFormPersistence } from '@/hooks/useFormPersistence';
 
 type NumberCommaForm = {
   input: string;
@@ -25,7 +26,11 @@ export const useNumberComma = () => {
   const methods = useCustomForm<NumberCommaForm>({
     defaultValues: DEFAULT_VALUES,
   });
-  const { control, watch } = methods;
+  const { watch, setValue } = methods;
+  useFormPersistence('number_comma', methods, (defaultValues) => {
+    setValue('input', defaultValues?.input);
+    setValue('separator', defaultValues?.separator);
+  });
 
   const input = watch('input', DEFAULT_VALUES.input);
   const separator = watch('separator', DEFAULT_VALUES.separator);
diff --git a/src/app/punycode/usePunycode.ts b/src/app/punycode/usePunycode.ts
@@ -1,5 +1,6 @@
 import { toASCII, encode } from 'punycode/';
 import { useCustomForm } from '@/components/common/Form/useCustomForm';
+import { useFormPersistence } from '@/hooks/useFormPersistence';
 
 type PunycodeForm = {
   input: string;
@@ -11,7 +12,10 @@ export const usePunycode = () => {
       input: '',
     },
   });
-  const { watch } = methods;
+  const { watch, setValue } = methods;
+  useFormPersistence('punycode', methods, (defaultValues) => {
+    setValue('input', defaultValues?.input);
+  });
 
   const converted_ascii = toASCII(watch('input', ''));
   const converted_punycode = encode(watch('input', ''));
diff --git a/src/app/urlencode/useUrlEncode.ts b/src/app/urlencode/useUrlEncode.ts
@@ -2,6 +2,7 @@ import conv from 'iconv-urlencode';
 import { useEffect, useState } from 'react';
 import { useCustomForm } from '@/components/common/Form/useCustomForm';
 import { ENCODING_LIST } from '@/lib/encoding';
+import { useFormPersistence } from '@/hooks/useFormPersistence';
 
 type UrlEncodeForm = {
   input: string;
@@ -17,7 +18,12 @@ export const useUrlEncode = () => {
       encoding: ENCODING_LIST[0].options[0].value,
     },
   });
-  const { watch } = methods;
+  const { watch, setValue } = methods;
+  useFormPersistence('urlencode', methods, (defaultValues) => {
+    setValue('input', defaultValues?.input);
+    setValue('encode', defaultValues?.encode);
+    setValue('encoding', defaultValues?.encoding);
+  });
 
   const [output, setOutput] = useState('');
   const input = watch('input', '');
diff --git a/src/app/uuid/useUuid.tsx b/src/app/uuid/useUuid.tsx
@@ -3,6 +3,7 @@ import React, { useState, useCallback } from 'react';
 import { useToaster, Message } from 'rsuite';
 import { generateUUIDs } from '@/app/uuid/uuidLib';
 import { useCustomForm } from '@/components/common/Form/useCustomForm';
+import { useFormPersistence } from '@/hooks/useFormPersistence';
 
 type UuidForm = {
   version: number;
@@ -47,7 +48,15 @@ export const useUuid = () => {
   const methods = useCustomForm<UuidForm>({
     defaultValues: DEFAULT_VALUES,
   });
-  const { control, watch } = methods;
+  const { control, watch, setValue } = methods;
+  useFormPersistence('uuid', methods, (defaultValues) => {
+    setValue('version', defaultValues?.version);
+    setValue('isUppercase', defaultValues?.isUppercase);
+    setValue('isHyphen', defaultValues?.isHyphen);
+    setValue('generateCount', defaultValues?.generateCount);
+    setValue('UUIDName', defaultValues?.UUIDName);
+    setValue('UUIDNamespace', defaultValues?.UUIDNamespace);
+  });
 
   const { version, isUppercase, isHyphen, generateCount, UUIDName, UUIDNamespace } = watch();
 
diff --git a/src/components/common/Form/ClearButton.tsx b/src/components/common/Form/ClearButton.tsx
@@ -10,7 +10,7 @@ type Props = {
 };
 
 export const ClearButton: FC<Props> = ({ name, title = 'クリア', onClick = null }) => {
-  const { resetField, watch, setValue } = useFormContext();
+  const { resetField } = useFormContext();
 
   const onClickInputClear = useCallback(() => {
     resetField(name);
diff --git a/src/components/common/Form/useCustomForm.ts b/src/components/common/Form/useCustomForm.ts
@@ -1,7 +1,7 @@
 import { useForm } from 'react-hook-form';
 import type { UseFormProps } from 'react-hook-form/dist/types';
 
-export const useCustomForm = <T>(options: UseFormProps<T> = {}) => {
+export const useCustomForm = <T>(options: UseFormProps<T> = undefined) => {
   return useForm<T>({
     mode: 'onChange',
     reValidateMode: 'onChange',
diff --git a/src/hooks/useFormPersistence.ts b/src/hooks/useFormPersistence.ts
@@ -1,29 +1,38 @@
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import type { UseFormReturn } from 'react-hook-form';
 
 // フォームの情報をlocalStorageに保存して永続化する
 export const useFormPersistence = <T>(
-  name: string,
+  featureName: string,
   methods: UseFormReturn<T>,
   setCallback: (defaultValues: T) => void,
 ) => {
+  const name = `devtools.formData.${featureName}`;
   const {
     watch,
     formState: { isDirty },
   } = methods;
   const formData = watch();
+  const [isDefault, setIsDefault] = useState(true);
 
   useEffect(() => {
-    const defaultValues = JSON.parse(localStorage.getItem(name));
-    if (!isDirty) {
-      setCallback(defaultValues);
+    try {
+      const defaultValues = JSON.parse(localStorage.getItem(name));
+      if (!isDirty && isDefault) {
+        setCallback(defaultValues);
+        // console.log('get', { name, defaultValues });
+        setIsDefault(false);
+      }
+    } catch (e) {
+      console.error(e);
     }
-  }, [isDirty]);
+  }, [isDirty, isDefault]);
 
   useEffect(() => {
-    if (isDirty) {
+    // console.log('set1', { name, isDirty, isDefault, formData });
+    if (isDirty || (!isDirty && !isDefault)) {
       localStorage.setItem(name, JSON.stringify(formData));
-      console.log('set', isDirty, formData);
+      // console.log('set2', { name, isDirty, isDefault, formData });
     }
-  }, [formData, isDirty]);
+  }, [formData, isDirty, isDefault]);
 };
