全体的なリファクタ

su-u · Dec 3, 2023 · 7a95c1a · 7a95c1a
1 parent 3131637
commit 7a95c1a
Show file tree

Hide file tree

Showing 12 changed files with 81 additions and 58 deletions.
diff --git a/src/app/base64/useBase64.ts b/src/app/base64/useBase64.ts
@@ -5,15 +5,17 @@ type Base64Form = {
   input: string;
 };
 
+const DEFAULT_VALUES: Base64Form = {
+  input: '',
+};
+
 export const useBase64 = () => {
   const methods = useCustomForm<Base64Form>({
-    defaultValues: {
-      input: '',
-    },
+    defaultValues: DEFAULT_VALUES,
   });
   const { watch } = methods;
   const [output, setOutput] = useState('');
-  const input = watch('input', '');
+  const input = watch('input', DEFAULT_VALUES.input);
 
   useEffect(() => {
     if (typeof window === 'undefined' || input.trim() === '') {

diff --git a/src/app/character_replace/useCharacterReplace.ts b/src/app/character_replace/useCharacterReplace.ts
@@ -6,19 +6,25 @@ type CharacterReplaceForm = {
   [key: string]: string;
 };
 
+const DEFAULT_VALUES: CharacterReplaceForm = {
+  input: '',
+};
+const INPUT_LIMIT = {
+  MIN: 1,
+  MAX: 10,
+};
+
 export const useCharacterReplace = () => {
   const methods = useCustomForm<CharacterReplaceForm>({
-    defaultValues: {
-      input: '',
-    },
+    defaultValues: DEFAULT_VALUES,
   });
   const { watch } = methods;
   const [inputCount, setInputCount] = useState(3);
 
   // @ts-ignore
   const numberArray = [...Array(inputCount).keys()].map((i) => ++i);
 
-  const input = watch('input') ?? '';
+  const input = watch('input', DEFAULT_VALUES.input);
   const output = numberArray.reduce((a, b) => {
     const targetRegex = watch(`target_${b}`)?.replace(/[\\^$.*+?()[\]{}|]/g, '\\$&') ?? '';
     const replace = watch(`replace_${b}`)?.replace('\\n', '\n') ?? '';
@@ -35,8 +41,8 @@ export const useCharacterReplace = () => {
     setInputCount((prev) => prev - 1);
   }, [setInputCount]);
 
-  const countDownDisabled = inputCount <= 1;
-  const countUpDisabled = inputCount >= 50;
+  const countDownDisabled = inputCount <= INPUT_LIMIT.MIN;
+  const countUpDisabled = inputCount >= INPUT_LIMIT.MAX;
 
   return {
     methods,

diff --git a/src/app/date/page.tsx → src/app/date_converter/page.tsx b/src/app/date/page.tsx → src/app/date_converter/page.tsx
@@ -3,17 +3,17 @@ import React from 'react';
 import { Controller } from 'react-hook-form';
 import { Col, Grid, Panel, PanelGroup, Row, Form, DatePicker, InputPicker } from 'rsuite';
 import { AppLayout } from '@/Layout/App';
-import { useConvertDate } from '@/app/date/useConvertDate';
+import { useDateConverter } from '@/app/date_converter/useDateConverter';
 import { FormRow } from '@/components/common/Form/FormRow';
 import { HorizontalForm } from '@/components/common/Form/HorizontalForm';
 import { LabelInput } from '@/components/common/Form/LabelInput';
 import { PageTitle } from '@/components/common/PageTitle';
 import { PanelHeader } from '@/components/common/PanelHeader';
 import { dayjs } from '@/lib/dayjs';
 
-const ConvertDatePage: React.FC = () => {
+const DateConverterePage: React.FC = () => {
   const title = '日付の変換';
-  const { control, output, timezones, inputDate } = useConvertDate();
+  const { control, output, timezones, inputDate } = useDateConverter();
 
   return (
     <AppLayout title={title}>
@@ -80,4 +80,4 @@ const ConvertDatePage: React.FC = () => {
   );
 };
 
-export default ConvertDatePage;
+export default DateConverterePage;
diff --git a/src/app/date/useConvertDate.ts → src/app/date_converter/useDateConverter.ts b/src/app/date/useConvertDate.ts → src/app/date_converter/useDateConverter.ts
@@ -4,14 +4,14 @@ import TIME_ZONES from 'timezones-list';
 import { useCustomForm } from '@/components/common/Form/useCustomForm';
 import { dayjs } from '@/lib/dayjs';
 
-type characterCountForm = {
+type dateConverterForm = {
   inputDate: Dayjs;
   inputUnixTime: string;
   timezone: string;
 };
 
-export const useConvertDate = () => {
-  const methods = useCustomForm<characterCountForm>({
+export const useDateConverter = () => {
+  const methods = useCustomForm<dateConverterForm>({
     defaultValues: {
       inputDate: dayjs(),
       timezone: dayjs.tz.guess(),

diff --git a/src/app/diff/useDiff.ts b/src/app/diff/useDiff.ts
@@ -6,22 +6,22 @@ type DiffForm = {
   modified: string;
 };
 
+const DEFAULT_VALUES: DiffForm = {
+  original: '',
+  modified: '',
+};
+
 export const useDiff = () => {
   const methods = useCustomForm<DiffForm>({
-    defaultValues: {
-      original: '',
-      modified: '',
-    },
+    defaultValues: DEFAULT_VALUES,
   });
   const { watch, resetField, setValue } = methods;
 
-  const original = watch('original', '');
-  const modified = watch('modified', '');
+  const original = watch('original', DEFAULT_VALUES.original);
+  const modified = watch('modified', DEFAULT_VALUES.modified);
 
   const onClickOriginalReset = React.useCallback(() => {
     resetField('original');
-    // console.log('original', watch('original'));
-    // setValue('original', '');
   }, [resetField]);
 
   return {

diff --git a/src/app/hash/useHash.ts b/src/app/hash/useHash.ts
@@ -8,12 +8,19 @@ type Base64Form = {
   isUppercase: boolean;
 };
 
+const DEFAULT_VALUES: Base64Form = {
+  input: '',
+  isUppercase: false,
+};
+
 export const useHash = () => {
-  const methods = useCustomForm<Base64Form>();
+  const methods = useCustomForm<Base64Form>({
+    defaultValues: DEFAULT_VALUES,
+  });
   const { watch } = methods;
 
-  const input = watch('input', '');
-  const isUppercase = watch('isUppercase', false);
+  const input = watch('input', DEFAULT_VALUES.input);
+  const isUppercase = watch('isUppercase', DEFAULT_VALUES.isUppercase);
 
   const createHash = useCallback(
     (algorithm: string, input: string) => {

diff --git a/src/app/number_comma/page.tsx b/src/app/number_comma/page.tsx
@@ -13,7 +13,7 @@ import { useCopy } from '@/hooks/useCopy';
 
 const Page: React.FC = () => {
   const title = '数値区切り';
-  const { control, output, selectData } = useNumberComma();
+  const { control, output, SEPARATOR_LIST, DEFAULT_VALUES } = useNumberComma();
   const { copy } = useCopy();
 
   return (
@@ -28,7 +28,7 @@ const Page: React.FC = () => {
                   render={({ field }) => <Input noResize="none" size="sm" {...field} />}
                   name="input"
                   control={control}
-                  defaultValue=""
+                  defaultValue={DEFAULT_VALUES.input}
                 />
               </Panel>
               <Panel bordered header={<PanelHeader title="設定" />}>
@@ -37,9 +37,9 @@ const Page: React.FC = () => {
                     <Controller
                       render={({ field }) => (
                         <InputPicker
-                          data={selectData}
+                          data={SEPARATOR_LIST}
                           size="sm"
-                          defaultValue=","
+                          defaultValue={DEFAULT_VALUES.separator}
                           cleanable={false}
                           {...field}
                         />

diff --git a/src/app/number_comma/useNumberComma.ts b/src/app/number_comma/useNumberComma.ts
@@ -5,36 +5,44 @@ type NumberCommaForm = {
   separator: string;
 };
 
-export const comma = (num: string, separator: string = ',') => {
-  const [integer, decimal] = num.split('.');
-  let ret = integer.replace(/(\d)(?=(\d\d\d)+(?!\d))/g, `$1${separator}`);
-  if (decimal) {
-    ret += '.' + decimal;
-  }
-  return ret;
+const SEPARATOR_LIST = [
+  {
+    label: ',',
+    value: ',',
+  },
+  {
+    label: '_',
+    value: '_',
+  },
+];
+
+const DEFAULT_VALUES: NumberCommaForm = {
+  input: '',
+  separator: SEPARATOR_LIST[0].value,
 };
 
 export const useNumberComma = () => {
-  const { control, watch } = useCustomForm<NumberCommaForm>();
+  const { control, watch } = useCustomForm<NumberCommaForm>({
+    defaultValues: DEFAULT_VALUES,
+  });
 
-  const input = watch('input', '');
-  const separator = watch('separator', '');
+  const input = watch('input', DEFAULT_VALUES.input);
+  const separator = watch('separator', DEFAULT_VALUES.separator);
   const output = comma(input, separator);
 
-  const selectData = [
-    {
-      label: ',',
-      value: ',',
-    },
-    {
-      label: '_',
-      value: '_',
-    },
-  ];
-
   return {
     control,
     output,
-    selectData,
+    SEPARATOR_LIST,
+    DEFAULT_VALUES,
   };
 };
+
+export const comma = (num: string, separator: string = ',') => {
+  const [integer, decimal] = num.split('.');
+  let ret = integer.replace(/(\d)(?=(\d\d\d)+(?!\d))/g, `$1${separator}`);
+  if (decimal) {
+    ret += '.' + decimal;
+  }
+  return ret;
+};
diff --git a/src/app/punycode/Punycode.tsx → src/app/punycode/page.tsx b/src/app/punycode/Punycode.tsx → src/app/punycode/page.tsx
diff --git a/src/app/urlencode/page.tsx b/src/app/urlencode/page.tsx
@@ -22,7 +22,7 @@ import { PageTitle } from '@/components/common/PageTitle';
 import { PanelHeader } from '@/components/common/PanelHeader';
 import { useCopy } from '@/hooks/useCopy';
 
-export const UrlEncodePage: React.FC = () => {
+const UrlEncodePage: React.FC = () => {
   const title = 'URLエンコード';
   const { methods, output, encodingList } = useUrlEncode();
   const { copy } = useCopy();

diff --git a/src/app/uuid/page.tsx b/src/app/uuid/page.tsx
@@ -24,7 +24,7 @@ import { PageTitle } from '@/components/common/PageTitle';
 import { PanelHeader } from '@/components/common/PanelHeader';
 import { useCopy } from '@/hooks/useCopy';
 
-export const UuidPage: React.FC = () => {
+const UuidPage: React.FC = () => {
   const title = 'UUIDの生成';
   const {
     methods,

diff --git a/src/components/SideNavBar.tsx b/src/components/SideNavBar.tsx
@@ -81,9 +81,9 @@ const navList: NavGroupType[] = [
         path: '/number_comma',
       },
       {
-        key: 'date',
+        key: 'date_converter',
         title: '日付の変換',
-        path: '/date',
+        path: '/date_converter',
       },
     ],
   },