Skip to content

Commit 7f44868

Browse files
julioflimajulioflima
committed
Finished
1 parent 4ce8bd4 commit 7f44868

File tree

5 files changed

+43
-41
lines changed

5 files changed

+43
-41
lines changed

‎src/components/Calendar/index.tsx

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -234,10 +234,6 @@ const Calendar: React.FC<Props> = ({
234234
setYear(date.year());
235235
}, [date]);
236236

237-
useEffect(() => {
238-
console.log({ hour, minute, periodDay, period });
239-
}, [hour, minute, periodDay, period]);
240-
241237
// Variables
242238
const calendarData = useMemo(() => {
243239
return {

‎src/components/Datepicker.tsx

Lines changed: 3 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -100,18 +100,11 @@ const Datepicker: React.FC<DatepickerType> = ({
100100
}, []);
101101

102102
/* Start Time */
103-
const changeHour = useCallback((hour: string) => {
104-
setHour(hour);
105-
}, []);
106-
107-
const changeMinute = useCallback((minute: string) => {
108-
setMinute(minute);
109-
}, []);
103+
const changeHour = useCallback((hour: string) => setHour(hour), []);
110104

111-
const changePeriodDay = useCallback((periodDay: PeriodDay) => {
112-
setPeriodDay(periodDay);
113-
}, []);
105+
const changeMinute = useCallback((minute: string) => setMinute(minute), []);
114106

107+
const changePeriodDay = useCallback((periodDay: PeriodDay) => setPeriodDay(periodDay), []);
115108
/* End Time */
116109

117110
/* Start First */

‎src/components/Footer.tsx

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import { PrimaryButton, SecondaryButton } from "./utils";
88

99
const Footer: React.FC = () => {
1010
// Contexts
11-
const { hideDatepicker, period, changeDatepickerValue, configs, classNames } =
11+
const { asTimePicker, period, configs, classNames, changeDatepickerValue, hideDatepicker } =
1212
useContext(DatepickerContext);
1313

1414
// Functions
@@ -34,8 +34,12 @@ const Footer: React.FC = () => {
3434
onClick={() => {
3535
if (period.start && period.end) {
3636
changeDatepickerValue({
37-
startDate: dayjs(period.start).format(DATE_FORMAT),
38-
endDate: dayjs(period.end).format(DATE_FORMAT)
37+
startDate: asTimePicker
38+
? dayjs(period.start).toISOString()
39+
: dayjs(period.start).format(DATE_FORMAT),
40+
endDate: asTimePicker
41+
? dayjs(period.end).toISOString()
42+
: dayjs(period.start).format(DATE_FORMAT)
3943
});
4044
hideDatepicker();
4145
}

‎src/components/Time.tsx

Lines changed: 20 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
1+
import dayjs from "dayjs";
12
import React, { ChangeEvent, useContext } from "react";
23

3-
import { RING_COLOR } from "../constants";
4+
import { DATE_FORMAT, RING_COLOR } from "../constants";
45
import DatepickerContext from "../contexts/DatepickerContext";
56
import { classNames as cn, formatDateTimeToISO } from "../helpers";
67
import { PeriodDay } from "../types";
@@ -55,34 +56,36 @@ const Time: React.FC = () => {
5556
const handleChangeHour = (e: ChangeEvent<HTMLSelectElement>) => {
5657
changeHour(e.target.value);
5758

58-
if (period.start && period.end) {
59+
if (period.start && period.end)
5960
changeDatepickerValue({
6061
startDate: formatDateTimeToISO(period.start, e.target.value, minute, periodDay),
6162
endDate: formatDateTimeToISO(period.end, e.target.value, minute, periodDay)
6263
});
63-
}
6464
};
6565

6666
const handleChangeMinute = (e: ChangeEvent<HTMLSelectElement>) => {
6767
changeMinute(e.target.value);
6868

69-
if (period.start && period.end) {
69+
if (period.start && period.end)
7070
changeDatepickerValue({
7171
startDate: formatDateTimeToISO(period.start, hour, e.target.value, periodDay),
7272
endDate: formatDateTimeToISO(period.end, hour, e.target.value, periodDay)
7373
});
74-
}
7574
};
7675

7776
const handleChangePeriodDay = (e: ChangeEvent<HTMLSelectElement>) => {
7877
changePeriodDay(e.target.value as PeriodDay);
7978

80-
if (period.start && period.end) {
79+
if (period.start && period.end)
8180
changeDatepickerValue({
82-
startDate: formatDateTimeToISO(period.start, hour, minute, e.target.value),
83-
endDate: formatDateTimeToISO(period.end, hour, minute, e.target.value)
81+
startDate: formatDateTimeToISO(
82+
period.start,
83+
hour,
84+
minute,
85+
e.target.value as PeriodDay
86+
),
87+
endDate: formatDateTimeToISO(period.end, hour, minute, e.target.value as PeriodDay)
8488
});
85-
}
8689
};
8790

8891
return (
@@ -97,10 +100,10 @@ const Time: React.FC = () => {
97100
}}
98101
>
99102
{HOURS.map((_, index) => {
100-
const hour = index + 1;
103+
const hr = index + 1;
101104
return (
102-
<option key={hour} value={hour}>
103-
{hour}
105+
<option key={hr} value={hr}>
106+
{hr}
104107
</option>
105108
);
106109
})}
@@ -110,17 +113,18 @@ const Time: React.FC = () => {
110113
name="minute"
111114
className={cn(selectClassname, "mr-4")}
112115
onChange={handleChangeMinute}
116+
value={minute}
113117
style={{
114118
backgroundImage: "url(" + dataUri + ")"
115119
}}
116120
>
117121
{MINUTES.map((_, index) => {
118-
const minute = index * 5;
122+
const min = index * 5;
119123
return (
120-
<option key={minute} value={minute}>
124+
<option key={min} value={min}>
121125
{new Intl.NumberFormat("en-US", {
122126
minimumIntegerDigits: 2
123-
}).format(minute)}
127+
}).format(min)}
124128
</option>
125129
);
126130
})}
@@ -129,6 +133,7 @@ const Time: React.FC = () => {
129133
name="ampm"
130134
className={selectClassname}
131135
onChange={handleChangePeriodDay}
136+
value={periodDay}
132137
style={{
133138
backgroundImage: "url(" + dataUri + ")"
134139
}}

‎src/helpers/index.ts

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,12 @@ import dayjs from "dayjs";
22
import customParseFormat from "dayjs/plugin/customParseFormat";
33
import weekday from "dayjs/plugin/weekday";
44

5+
import { DATE_FORMAT, LANGUAGE } from "../constants";
6+
57
dayjs.extend(weekday);
68
dayjs.extend(customParseFormat);
79

8-
import { DATE_FORMAT, LANGUAGE } from "../constants";
10+
import { PeriodDay } from "types";
911

1012
export function classNames(...classes: (false | null | undefined | string)[]) {
1113
return classes.filter(Boolean).join(" ");
@@ -631,23 +633,25 @@ export function formatDateTimeToISO(
631633
dateIncoming: Date | string,
632634
hourIncoming: string,
633635
minute: string,
634-
period: string
636+
periodDay: PeriodDay
635637
): string {
636638
// Adjust hour based on period (AM/PM)
637-
const hour = (() => {
638-
if (period === "PM" && hourIncoming !== String(12)) return hourIncoming + 12;
639+
const calculateHour = (hourIncoming: string, periodDay: PeriodDay): string => {
640+
if (periodDay === "PM" && hourIncoming !== String(12))
641+
return String(Number(hourIncoming) + 12);
639642

640-
if (period === "AM" && hourIncoming === String(12)) return 0;
643+
if (periodDay === "AM" && hourIncoming === String(12)) return "0";
641644

642645
return hourIncoming;
643-
})();
646+
};
647+
648+
const hour = calculateHour(hourIncoming, periodDay);
644649

645650
// Create a new Date object and set the components
646-
const date = new Date(dateIncoming);
647-
date.setHours(Number(hour));
648-
date.setMinutes(Number(minute));
651+
const date = dayjs(dateIncoming).add(Number(hour), "hours").add(Number(minute), "minutes");
649652

650653
// Format date to ISO 8601
651654
const isoString = date.toISOString();
655+
652656
return isoString;
653657
}

0 commit comments

Comments
 (0)