Skip to content

Commit 3d67f2e

Browse files
su-usu-u
committed
Fix: unixtimeの方も変更
1 parent 33e8c7f commit 3d67f2e

4 files changed

Lines changed: 48 additions & 50 deletions

File tree

‎src/app/datetime_converter/DateTimeConverter.tsx‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -93,17 +93,17 @@ export const DateTimeConverter: FC = () => {
9393
<Col xs={24} md={12}>
9494
<Panel bordered header={<PanelHeader title="出力" />}>
9595
<HorizontalForm>
96-
<LabelInput label="ISO 8601" value={output.ISO8601} />
97-
<LabelInput label="日付時間" value={output.fullDate} />
98-
<LabelInput label="日付時間(ロング)" value={output.enDatetime} />
99-
<LabelInput label="日付" value={output.enDate} />
100-
<LabelInput label="年" value={output.year} />
101-
<LabelInput label="月" value={output.month} />
102-
<LabelInput label="日" value={output.d} />
103-
<LabelInput label="曜日" value={output.week} />
104-
<LabelInput label="unixtime" value={output.unixTime} />
105-
<LabelInput label="カスタム" value={output.customFormat} />
106-
<LabelInput label="TimeZone" value={output.timezone} />
96+
<LabelInput label="ISO 8601" value={output?.ISO8601} />
97+
<LabelInput label="日付時間" value={output?.fullDate} />
98+
<LabelInput label="日付時間(ロング)" value={output?.enDatetime} />
99+
<LabelInput label="日付" value={output?.enDate} />
100+
<LabelInput label="年" value={output?.year} />
101+
<LabelInput label="月" value={output?.month} />
102+
<LabelInput label="日" value={output?.d} />
103+
<LabelInput label="曜日" value={output?.week} />
104+
<LabelInput label="unixtime" value={output?.unixTime} />
105+
<LabelInput label="カスタム" value={output?.customFormat} />
106+
<LabelInput label="TimeZone" value={output?.timezone} />
107107
</HorizontalForm>
108108
</Panel>
109109
</Col>

‎src/app/datetime_converter/useDateTimeConverter.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,14 @@ export const useDateTimeConverter = () => {
5656

5757
useEffect(() => {
5858
const { inputDate, timezone, customFormat } = getValues();
59+
const d = dayjs(inputDate);
60+
61+
if (!d.isValid()) {
62+
setOutput({
63+
...convert(dayjs(), timezone, customFormat),
64+
});
65+
}
66+
5967
setOutput({
6068
...convert(inputDate, timezone, customFormat),
6169
});

‎src/app/unixtime_converter/UnixTimeConverter.tsx‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -98,17 +98,17 @@ export const UnixTimeConverter: FC = () => {
9898
<Col xs={24} md={12}>
9999
<Panel bordered header={<PanelHeader title="出力" />}>
100100
<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} />
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} />
112112
</HorizontalForm>
113113
</Panel>
114114
</Col>

‎src/app/unixtime_converter/useUnixTimeConverter.ts‎

Lines changed: 18 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ type DateConverterForm = {
1414
export const useUnixTimeConverter = () => {
1515
const methods = useCustomForm<DateConverterForm>({
1616
defaultValues: {
17-
inputUnixTime: undefined,
17+
inputUnixTime: '',
1818
timezone: undefined,
1919
customFormat: '',
2020
},
@@ -30,48 +30,41 @@ export const useUnixTimeConverter = () => {
3030
() => TIME_ZONES.map(({ label, tzCode }) => ({ label: label, value: tzCode })),
3131
[],
3232
);
33-
const timezone = watch('timezone') ?? 'UTC';
34-
const [output, setOutput] = useState<any>(() => convert(getValues('inputUnixTime'), timezone));
33+
const [output, setOutput] = useState<ReturnType<typeof convert>>();
3534

3635
const onChangeInputUnixTime = useCallback(
3736
(value: DateConverterForm['inputUnixTime']) => {
3837
const d = dayjs.unix(Number(value));
39-
const { timezone, customFormat } = getValues();
4038
if (!d.isValid()) return;
4139

4240
setValue('inputUnixTime', value);
43-
44-
setOutput({
45-
...convert(d, timezone),
46-
customFormat: customConvert(d, timezone, customFormat),
47-
});
4841
},
49-
[setValue, getValues],
42+
[setValue],
5043
);
5144

5245
const onChangeTimezone = useCallback(
5346
(event: string) => {
54-
console.log(event);
5547
setValue('timezone', event.toString());
56-
const { inputUnixTime } = getValues();
57-
onChangeInputUnixTime(inputUnixTime);
5848
},
59-
[setValue, getValues],
49+
[setValue],
6050
);
6151

6252
const onChangeCustomFormat = useCallback(
6353
(event: ChangeEvent<HTMLInputElement>) => {
6454
const value = event.target.value;
6555
setValue('customFormat', value);
66-
const { inputDate, timezone } = getValues();
67-
setOutput({
68-
...convert(inputDate, timezone),
69-
customFormat: customConvert(inputDate, timezone, value),
70-
});
7156
},
72-
[getValues, setValue],
57+
[setValue],
7358
);
7459

60+
useEffect(() => {
61+
const { inputUnixTime, timezone, customFormat } = getValues();
62+
63+
setOutput({
64+
...convert(inputUnixTime, timezone, customFormat),
65+
});
66+
}, [watch('inputUnixTime'), watch('timezone'), watch('customFormat')]);
67+
7568
return {
7669
control,
7770
output,
@@ -82,8 +75,8 @@ export const useUnixTimeConverter = () => {
8275
};
8376
};
8477

85-
const convert = (date: Dayjs, timezone: string) => {
86-
const dateTimezone = dayjs(date).tz(timezone);
78+
const convert = (unixtime: string, timezone: string, format: string) => {
79+
const dateTimezone = dayjs(unixtime).tz(timezone);
8780
const ISO8601 = dateTimezone.format('YYYY-MM-DDTHH:mm:ssZ[Z]');
8881
const fullDate = dateTimezone.format('YYYY/MM/DD HH:mm:ss');
8982
const enDate = dateTimezone.format('LL');
@@ -92,7 +85,8 @@ const convert = (date: Dayjs, timezone: string) => {
9285
const month = dateTimezone.format('MM');
9386
const d = dateTimezone.format('DD');
9487
const week = dateTimezone.format('dd');
95-
const unixTime = dateTimezone.unix().toString();
88+
const unixTime = unixtime;
89+
const customFormat = dateTimezone.format(format);
9690

9791
return {
9892
ISO8601,
@@ -104,11 +98,7 @@ const convert = (date: Dayjs, timezone: string) => {
10498
week,
10599
unixTime,
106100
fullDate,
101+
customFormat,
107102
timezone,
108103
};
109104
};
110-
111-
const customConvert = (date: Dayjs, timezone: string, format: string) => {
112-
const dateTimezone = dayjs(date).tz(timezone);
113-
return dateTimezone.format(format);
114-
};

0 commit comments

Comments
 (0)