Merge branch 'main' of https://github.com/su-u/devtools

src/app/datetime_converter/DateConverter.tsx → src/app/datetime_converter/DateTimeConverter.tsx

@@ -4,7 +4,7 @@ import { Controller } from 'react-hook-form';
 import { Col, Grid, Panel, PanelGroup, Row, Form } from 'rsuite';
 import { QuestionCircleOutlined } from '@ant-design/icons';
 import { AppLayout } from '@/Layout/App';
-import { useDateConverter } from '@/app/datetime_converter/useDateConverter';
+import { useDateTimeConverter } from '@/app/datetime_converter/useDateTimeConverter';
 import { DatePicker } from '@/components/common/Form/DatePicker';
 import { FormRow } from '@/components/common/Form/FormRow';
 import { HorizontalForm } from '@/components/common/Form/HorizontalForm';
@@ -18,17 +18,8 @@ const width = 300;
 
 export const DateTimeConverter: FC = () => {
   const title = '日時->日時変換';
-  const {
-    methods,
-    control,
-    output,
-    timezones,
-    onChangeInputDate,
-    onChangeInputUnixTime,
-    onChangeTimezone,
-    onChangeCustomFormat,
-  } = useDateConverter();
-  const { inputUnixTime, timezone } = methods.getValues();
+  const { control, output, timezones, onChangeInputDate, onChangeTimezone, onChangeCustomFormat } =
+    useDateTimeConverter();
 
   return (
     <AppLayout>
@@ -41,21 +32,10 @@ export const DateTimeConverter: FC = () => {
                 <Form fluid layout="horizontal">
                   <FormRow label="日時">
                     <Controller
-                      render={() => <DatePicker style={{ width }} onChange={onChangeInputDate} />}
-                      name="inputDate"
-                      control={control}
-                    />
-                  </FormRow>
-                  <FormRow label="unixtime">
-                    <Controller
-                      render={() => (
-                        <Input
-                          style={{ width }}
-                          onChange={onChangeInputUnixTime}
-                          value={inputUnixTime}
-                        />
+                      render={({ field }) => (
+                        <DatePicker {...field} style={{ width }} onChange={onChangeInputDate} />
                       )}
-                      name="inputUnixTime"
+                      name="inputDate"
                       control={control}
                     />
                   </FormRow>
@@ -65,12 +45,12 @@ export const DateTimeConverter: FC = () => {
                 <Form fluid layout="horizontal">
                   <FormRow label="TimeZone">
                     <Controller
-                      render={() => (
+                      render={({ field }) => (
                         <Select
+                          {...field}
                           style={{ width }}
                           options={timezones}
                           onChange={onChangeTimezone}
-                          value={timezone}
                           showSearch
                         />
                       )}
@@ -94,8 +74,13 @@ export const DateTimeConverter: FC = () => {
                     }
                   >
                     <Controller
-                      render={() => (
-                        <Input style={{ width }} noResize="none" onChange={onChangeCustomFormat} />
+                      render={({ field }) => (
+                        <Input
+                          {...field}
+                          style={{ width }}
+                          noResize="none"
+                          onChange={onChangeCustomFormat}
+                        />
                       )}
                       name="customFormat"
                       control={control}

src/app/datetime_converter/page.tsx

@@ -1,12 +1,12 @@
 import React, { FC } from 'react';
-import { DateTimeConverter } from '@/app/datetime_converter/DateConverter';
+import { DateTimeConverter } from '@/app/datetime_converter/DateTimeConverter';
 
 export const metadata = {
   title: 'Dev Toolkit - 日時の変換',
 };
 
-const DateConverterPage: FC = () => {
+const DateTimeConverterPage: FC = () => {
   return <DateTimeConverter />;
 };
 
-export default DateConverterPage;
+export default DateTimeConverterPage;

src/app/datetime_converter/useDateTimeConverter.ts

@@ -0,0 +1,101 @@
+import { Dayjs } from 'dayjs';
+import { useMemo, useEffect, useCallback, useState, ChangeEvent } from 'react';
+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;
+  timezone: string | undefined;
+  customFormat: string;
+};
+
+export const useDateTimeConverter = () => {
+  const methods = useCustomForm<DateConverterForm>({
+    defaultValues: {
+      inputDate: undefined,
+      timezone: undefined,
+      customFormat: '',
+    },
+  });
+  const { watch, control, setValue, getValues } = methods;
+  useFormPersistence('datetime_converter', methods, (values) => {
+    setValue('inputDate', dayjs(values?.inputDate));
+    setValue('timezone', values?.timezone);
+    setValue('customFormat', values?.customFormat);
+  });
+
+  const timezones = useMemo(
+    () => TIME_ZONES.map(({ label, tzCode }) => ({ label: label, value: tzCode })),
+    [],
+  );
+  const [output, setOutput] = useState<ReturnType<typeof convert>>();
+
+  const onChangeInputDate = useCallback(
+    (date: Dayjs) => {
+      setValue('inputDate', date);
+    },
+    [setValue],
+  );
+
+  const onChangeTimezone = useCallback(
+    (event: string) => {
+      setValue('timezone', event.toString());
+    },
+    [setValue, onChangeInputDate],
+  );
+
+  const onChangeCustomFormat = useCallback(
+    (event: ChangeEvent<HTMLInputElement>) => {
+      const value = event.target.value;
+      setValue('customFormat', value);
+    },
+    [setValue],
+  );
+
+  useEffect(() => {
+    const { inputDate, timezone, customFormat } = getValues();
+    setOutput({
+      ...convert(inputDate, timezone, customFormat),
+    });
+  }, [watch('inputDate'), watch('timezone'), watch('customFormat')]);
+
+  return {
+    methods,
+    control,
+    output,
+    timezones,
+    onChangeInputDate,
+    onChangeTimezone,
+    onChangeCustomFormat,
+  };
+};
+
+const convert = (date: Dayjs, timezone: string, format: string) => {
+  const dateTimezone = dayjs(date).tz(timezone);
+  const ISO8601 = dateTimezone.format('YYYY-MM-DDTHH:mm:ssZ[Z]');
+  const fullDate = dateTimezone.format('YYYY/MM/DD HH:mm:ss');
+  const enDate = dateTimezone.format('LL');
+  const enDatetime = dateTimezone.format('LLLL');
+  const year = dateTimezone.format('YYYY');
+  const month = dateTimezone.format('MM');
+  const d = dateTimezone.format('DD');
+  const week = dateTimezone.format('dd');
+  const unixTime = dateTimezone.unix().toString();
+  const customFormat = dateTimezone.format(format);
+
+  return {
+    ISO8601,
+    enDate,
+    enDatetime,
+    year,
+    month,
+    d,
+    week,
+    unixTime,
+    fullDate,
+    customFormat,
+    timezone,
+  };
+};

src/app/unixtime_converter/UnixTimeConverter.tsx

@@ -0,0 +1,119 @@
+'use client';
+import React, { FC } from 'react';
+import { Controller } from 'react-hook-form';
+import { Col, Grid, Panel, PanelGroup, Row, Form } from 'rsuite';
+import { QuestionCircleOutlined } from '@ant-design/icons';
+import { AppLayout } from '@/Layout/App';
+import { useUnixTimeConverter } from '@/app/unixtime_converter/useUnixTimeConverter';
+import { FormRow } from '@/components/common/Form/FormRow';
+import { HorizontalForm } from '@/components/common/Form/HorizontalForm';
+import { Input } from '@/components/common/Form/Input';
+import { LabelInput } from '@/components/common/Form/LabelInput';
+import { Select } from '@/components/common/Form/Select';
+import { PageTitle } from '@/components/common/PageTitle';
+import { PanelHeader } from '@/components/common/PanelHeader';
+
+const width = 300;
+
+export const UnixTimeConverter: FC = () => {
+  const title = 'UnixTime->日時変換';
+  const {
+    control,
+    output,
+    timezones,
+    onChangeInputUnixTime,
+    onChangeTimezone,
+    onChangeCustomFormat,
+  } = useUnixTimeConverter();
+
+  return (
+    <AppLayout>
+      <Grid fluid>
+        <PageTitle title={title} />
+        <Row gutter={5}>
+          <Col xs={24} md={12}>
+            <PanelGroup bordered>
+              <Panel bordered header={<PanelHeader title="入力" />}>
+                <Form fluid layout="horizontal">
+                  <FormRow label="UnixTime">
+                    <Controller
+                      render={({ field }) => (
+                        <Input style={{ width }} onChange={onChangeInputUnixTime} {...field} />
+                      )}
+                      name="inputUnixTime"
+                      control={control}
+                    />
+                  </FormRow>
+                </Form>
+              </Panel>
+              <Panel bordered header={<PanelHeader title="共通設定" />}>
+                <Form fluid layout="horizontal">
+                  <FormRow label="TimeZone">
+                    <Controller
+                      render={({ field }) => (
+                        <Select
+                          style={{ width }}
+                          options={timezones}
+                          onChange={onChangeTimezone}
+                          showSearch
+                          {...field}
+                        />
+                      )}
+                      name="timezone"
+                      control={control}
+                    />
+                  </FormRow>
+                  <FormRow
+                    label={
+                      <>
+                        カスタム出力
+                        <a
+                          href="https://day.js.org/docs/en/display/format"
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          style={{ marginLeft: '4px' }}
+                        >
+                          <QuestionCircleOutlined />
+                        </a>
+                      </>
+                    }
+                  >
+                    <Controller
+                      render={({ field }) => (
+                        <Input
+                          style={{ width }}
+                          noResize="none"
+                          onChange={onChangeCustomFormat}
+                          {...field}
+                        />
+                      )}
+                      name="customFormat"
+                      control={control}
+                    />
+                  </FormRow>
+                </Form>
+              </Panel>
+            </PanelGroup>
+          </Col>
+          <Col xs={24} md={12}>
+            <Panel bordered header={<PanelHeader title="出力" />}>
+              <HorizontalForm>
+                <LabelInput label="ISO 8601" value={output.ISO8601} />
+                <LabelInput label="日付時間" value={output.fullDate} />
+                <LabelInput label="日付時間(ロング)" value={output.enDatetime} />
+                <LabelInput label="日付" value={output.enDate} />
+                <LabelInput label="年" value={output.year} />
+                <LabelInput label="月" value={output.month} />
+                <LabelInput label="日" value={output.d} />
+                <LabelInput label="曜日" value={output.week} />
+                <LabelInput label="unixtime" value={output.unixTime} />
+                <LabelInput label="カスタム" value={output.customFormat} />
+                <LabelInput label="TimeZone" value={output.timezone} />
+              </HorizontalForm>
+            </Panel>
+          </Col>
+        </Row>
+      </Grid>
+    </AppLayout>
+  );
+};

src/app/unixtime_converter/page.tsx

@@ -0,0 +1,12 @@
+import React, { FC } from 'react';
+import { UnixTimeConverter } from '@/app/unixtime_converter/UnixTimeConverter';
+
+export const metadata = {
+  title: 'Dev Toolkit - 日時の変換',
+};
+
+const UnixTimeConverterPage: FC = () => {
+  return <UnixTimeConverter />;
+};
+
+export default UnixTimeConverterPage;