Skip to content

Commit 8b84e33

Browse files
su-usu-u
authored
unixtime変換の分離 (#43)
2 parents 6c9b8e1 + af9a2e0 commit 8b84e33

12 files changed

Lines changed: 288 additions & 88 deletions

File tree

src/app/datetime_converter/DateConverter.tsx renamed to src/app/datetime_converter/DateTimeConverter.tsx

Lines changed: 15 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { Controller } from 'react-hook-form';
44
import { Col, Grid, Panel, PanelGroup, Row, Form } from 'rsuite';
55
import { QuestionCircleOutlined } from '@ant-design/icons';
66
import { AppLayout } from '@/Layout/App';
7-
import { useDateConverter } from '@/app/datetime_converter/useDateConverter';
7+
import { useDateTimeConverter } from '@/app/datetime_converter/useDateTimeConverter';
88
import { DatePicker } from '@/components/common/Form/DatePicker';
99
import { FormRow } from '@/components/common/Form/FormRow';
1010
import { HorizontalForm } from '@/components/common/Form/HorizontalForm';
@@ -18,17 +18,8 @@ const width = 300;
1818

1919
export const DateTimeConverter: FC = () => {
2020
const title = '日時->日時変換';
21-
const {
22-
methods,
23-
control,
24-
output,
25-
timezones,
26-
onChangeInputDate,
27-
onChangeInputUnixTime,
28-
onChangeTimezone,
29-
onChangeCustomFormat,
30-
} = useDateConverter();
31-
const { inputUnixTime, timezone } = methods.getValues();
21+
const { control, output, timezones, onChangeInputDate, onChangeTimezone, onChangeCustomFormat } =
22+
useDateTimeConverter();
3223

3324
return (
3425
<AppLayout>
@@ -41,21 +32,10 @@ export const DateTimeConverter: FC = () => {
4132
<Form fluid layout="horizontal">
4233
<FormRow label="日時">
4334
<Controller
44-
render={() => <DatePicker style={{ width }} onChange={onChangeInputDate} />}
45-
name="inputDate"
46-
control={control}
47-
/>
48-
</FormRow>
49-
<FormRow label="unixtime">
50-
<Controller
51-
render={() => (
52-
<Input
53-
style={{ width }}
54-
onChange={onChangeInputUnixTime}
55-
value={inputUnixTime}
56-
/>
35+
render={({ field }) => (
36+
<DatePicker {...field} style={{ width }} onChange={onChangeInputDate} />
5737
)}
58-
name="inputUnixTime"
38+
name="inputDate"
5939
control={control}
6040
/>
6141
</FormRow>
@@ -65,12 +45,12 @@ export const DateTimeConverter: FC = () => {
6545
<Form fluid layout="horizontal">
6646
<FormRow label="TimeZone">
6747
<Controller
68-
render={() => (
48+
render={({ field }) => (
6949
<Select
50+
{...field}
7051
style={{ width }}
7152
options={timezones}
7253
onChange={onChangeTimezone}
73-
value={timezone}
7454
showSearch
7555
/>
7656
)}
@@ -94,8 +74,13 @@ export const DateTimeConverter: FC = () => {
9474
}
9575
>
9676
<Controller
97-
render={() => (
98-
<Input style={{ width }} noResize="none" onChange={onChangeCustomFormat} />
77+
render={({ field }) => (
78+
<Input
79+
{...field}
80+
style={{ width }}
81+
noResize="none"
82+
onChange={onChangeCustomFormat}
83+
/>
9984
)}
10085
name="customFormat"
10186
control={control}

‎src/app/datetime_converter/page.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
import React, { FC } from 'react';
2-
import { DateTimeConverter } from '@/app/datetime_converter/DateConverter';
2+
import { DateTimeConverter } from '@/app/datetime_converter/DateTimeConverter';
33

44
export const metadata = {
55
title: 'Dev Toolkit - 日時の変換',
66
};
77

8-
const DateConverterPage: FC = () => {
8+
const DateTimeConverterPage: FC = () => {
99
return <DateTimeConverter />;
1010
};
1111

12-
export default DateConverterPage;
12+
export default DateTimeConverterPage;

‎src/app/datetime_converter/useDateTimeConverter.ts‎

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
import { Dayjs } from 'dayjs';
2+
import { useMemo, useEffect, useCallback, useState, ChangeEvent } from 'react';
3+
import TIME_ZONES from 'timezones-list';
4+
import { useCustomForm } from '@/components/common/Form/useCustomForm';
5+
import { dayjs } from '@/lib/dayjs';
6+
import { useFormPersistence } from '@/hooks/useFormPersistence';
7+
8+
type DateConverterForm = {
9+
inputDate: Dayjs | undefined;
10+
timezone: string | undefined;
11+
customFormat: string;
12+
};
13+
14+
export const useDateTimeConverter = () => {
15+
const methods = useCustomForm<DateConverterForm>({
16+
defaultValues: {
17+
inputDate: undefined,
18+
timezone: undefined,
19+
customFormat: '',
20+
},
21+
});
22+
const { watch, control, setValue, getValues } = methods;
23+
useFormPersistence('datetime_converter', methods, (values) => {
24+
setValue('inputDate', dayjs(values?.inputDate));
25+
setValue('timezone', values?.timezone);
26+
setValue('customFormat', values?.customFormat);
27+
});
28+
29+
const timezones = useMemo(
30+
() => TIME_ZONES.map(({ label, tzCode }) => ({ label: label, value: tzCode })),
31+
[],
32+
);
33+
const [output, setOutput] = useState<ReturnType<typeof convert>>();
34+
35+
const onChangeInputDate = useCallback(
36+
(date: Dayjs) => {
37+
setValue('inputDate', date);
38+
},
39+
[setValue],
40+
);
41+
42+
const onChangeTimezone = useCallback(
43+
(event: string) => {
44+
setValue('timezone', event.toString());
45+
},
46+
[setValue, onChangeInputDate],
47+
);
48+
49+
const onChangeCustomFormat = useCallback(
50+
(event: ChangeEvent<HTMLInputElement>) => {
51+
const value = event.target.value;
52+
setValue('customFormat', value);
53+
},
54+
[setValue],
55+
);
56+
57+
useEffect(() => {
58+
const { inputDate, timezone, customFormat } = getValues();
59+
setOutput({
60+
...convert(inputDate, timezone, customFormat),
61+
});
62+
}, [watch('inputDate'), watch('timezone'), watch('customFormat')]);
63+
64+
return {
65+
methods,
66+
control,
67+
output,
68+
timezones,
69+
onChangeInputDate,
70+
onChangeTimezone,
71+
onChangeCustomFormat,
72+
};
73+
};
74+
75+
const convert = (date: Dayjs, timezone: string, format: string) => {
76+
const dateTimezone = dayjs(date).tz(timezone);
77+
const ISO8601 = dateTimezone.format('YYYY-MM-DDTHH:mm:ssZ[Z]');
78+
const fullDate = dateTimezone.format('YYYY/MM/DD HH:mm:ss');
79+
const enDate = dateTimezone.format('LL');
80+
const enDatetime = dateTimezone.format('LLLL');
81+
const year = dateTimezone.format('YYYY');
82+
const month = dateTimezone.format('MM');
83+
const d = dateTimezone.format('DD');
84+
const week = dateTimezone.format('dd');
85+
const unixTime = dateTimezone.unix().toString();
86+
const customFormat = dateTimezone.format(format);
87+
88+
return {
89+
ISO8601,
90+
enDate,
91+
enDatetime,
92+
year,
93+
month,
94+
d,
95+
week,
96+
unixTime,
97+
fullDate,
98+
customFormat,
99+
timezone,
100+
};
101+
};

‎src/app/unixtime_converter/UnixTimeConverter.tsx‎

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
'use client';
2+
import React, { FC } from 'react';
3+
import { Controller } from 'react-hook-form';
4+
import { Col, Grid, Panel, PanelGroup, Row, Form } from 'rsuite';
5+
import { QuestionCircleOutlined } from '@ant-design/icons';
6+
import { AppLayout } from '@/Layout/App';
7+
import { useUnixTimeConverter } from '@/app/unixtime_converter/useUnixTimeConverter';
8+
import { FormRow } from '@/components/common/Form/FormRow';
9+
import { HorizontalForm } from '@/components/common/Form/HorizontalForm';
10+
import { Input } from '@/components/common/Form/Input';
11+
import { LabelInput } from '@/components/common/Form/LabelInput';
12+
import { Select } from '@/components/common/Form/Select';
13+
import { PageTitle } from '@/components/common/PageTitle';
14+
import { PanelHeader } from '@/components/common/PanelHeader';
15+
16+
const width = 300;
17+
18+
export const UnixTimeConverter: FC = () => {
19+
const title = 'UnixTime->日時変換';
20+
const {
21+
control,
22+
output,
23+
timezones,
24+
onChangeInputUnixTime,
25+
onChangeTimezone,
26+
onChangeCustomFormat,
27+
} = useUnixTimeConverter();
28+
29+
return (
30+
<AppLayout>
31+
<Grid fluid>
32+
<PageTitle title={title} />
33+
<Row gutter={5}>
34+
<Col xs={24} md={12}>
35+
<PanelGroup bordered>
36+
<Panel bordered header={<PanelHeader title="入力" />}>
37+
<Form fluid layout="horizontal">
38+
<FormRow label="UnixTime">
39+
<Controller
40+
render={({ field }) => (
41+
<Input style={{ width }} onChange={onChangeInputUnixTime} {...field} />
42+
)}
43+
name="inputUnixTime"
44+
control={control}
45+
/>
46+
</FormRow>
47+
</Form>
48+
</Panel>
49+
<Panel bordered header={<PanelHeader title="共通設定" />}>
50+
<Form fluid layout="horizontal">
51+
<FormRow label="TimeZone">
52+
<Controller
53+
render={({ field }) => (
54+
<Select
55+
style={{ width }}
56+
options={timezones}
57+
onChange={onChangeTimezone}
58+
showSearch
59+
{...field}
60+
/>
61+
)}
62+
name="timezone"
63+
control={control}
64+
/>
65+
</FormRow>
66+
<FormRow
67+
label={
68+
<>
69+
カスタム出力
70+
<a
71+
href="https://day.js.org/docs/en/display/format"
72+
target="_blank"
73+
rel="noopener noreferrer"
74+
style={{ marginLeft: '4px' }}
75+
>
76+
<QuestionCircleOutlined />
77+
</a>
78+
</>
79+
}
80+
>
81+
<Controller
82+
render={({ field }) => (
83+
<Input
84+
style={{ width }}
85+
noResize="none"
86+
onChange={onChangeCustomFormat}
87+
{...field}
88+
/>
89+
)}
90+
name="customFormat"
91+
control={control}
92+
/>
93+
</FormRow>
94+
</Form>
95+
</Panel>
96+
</PanelGroup>
97+
</Col>
98+
<Col xs={24} md={12}>
99+
<Panel bordered header={<PanelHeader title="出力" />}>
100+
<HorizontalForm>
101+
<LabelInput label="ISO 8601" value={output.ISO8601} />
102+
<LabelInput label="日付時間" value={output.fullDate} />
103+
<LabelInput label="日付時間(ロング)" value={output.enDatetime} />
104+
<LabelInput label="日付" value={output.enDate} />
105+
<LabelInput label="年" value={output.year} />
106+
<LabelInput label="月" value={output.month} />
107+
<LabelInput label="日" value={output.d} />
108+
<LabelInput label="曜日" value={output.week} />
109+
<LabelInput label="unixtime" value={output.unixTime} />
110+
<LabelInput label="カスタム" value={output.customFormat} />
111+
<LabelInput label="TimeZone" value={output.timezone} />
112+
</HorizontalForm>
113+
</Panel>
114+
</Col>
115+
</Row>
116+
</Grid>
117+
</AppLayout>
118+
);
119+
};

‎src/app/unixtime_converter/page.tsx‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import React, { FC } from 'react';
2+
import { UnixTimeConverter } from '@/app/unixtime_converter/UnixTimeConverter';
3+
4+
export const metadata = {
5+
title: 'Dev Toolkit - 日時の変換',
6+
};
7+
8+
const UnixTimeConverterPage: FC = () => {
9+
return <UnixTimeConverter />;
10+
};
11+
12+
export default UnixTimeConverterPage;

0 commit comments

Comments
 (0)