Remove unused icon, and found that nothing is working...

Author: julioflima

src/components/Time.tsx

@@ -2,16 +2,23 @@ import React, { ChangeEvent, useCallback, useContext } from "react";
 
 import { RING_COLOR } from "../constants";
 import DatepickerContext from "../contexts/DatepickerContext";
-import { classNames as cn } from "../helpers";
-
-import { DoubleVerticalChevronRightIcon } from "./utils";
+import { classNames as cn, formatDateTimeToISO } from "../helpers";
 
 import { PeriodDay } from "types";
 
 const Time: React.FC = () => {
     // Contexts
-    const { primaryColor, changeHour, changeMinute, changePeriodDay } =
-        useContext(DatepickerContext);
+    const {
+        hour,
+        minute,
+        periodDay,
+        period,
+        primaryColor,
+        changeDatepickerValue,
+        changeHour,
+        changeMinute,
+        changePeriodDay
+    } = useContext(DatepickerContext);
 
     const ringFocusColor = RING_COLOR.focus[primaryColor as keyof typeof RING_COLOR.focus];
 
@@ -35,13 +42,39 @@ const Time: React.FC = () => {
     const HOURS = Array.from({ length: 12 });
     const MINUTES = Array.from({ length: 12 });
 
-    const handleChangeHour = (e: ChangeEvent<HTMLSelectElement>) => changeHour(e.target.value);
+    const handleChangeHour = (e: ChangeEvent<HTMLSelectElement>) => {
+        changeHour(e.target.value);
+
+        if (period.start && period.end) {
+            changeDatepickerValue({
+                startDate: formatDateTimeToISO(period.start, e.target.value, minute, periodDay),
+                endDate: formatDateTimeToISO(period.end, e.target.value, minute, periodDay)
+            });
+        }
+    };
 
-    const handleChangeMinute = (e: ChangeEvent<HTMLSelectElement>) => changeMinute(e.target.value);
+    const handleChangeMinute = (e: ChangeEvent<HTMLSelectElement>) => {
+        changeMinute(e.target.value);
 
-    const handleChangePeriodDay = (e: ChangeEvent<HTMLSelectElement>) =>
+        if (period.start && period.end) {
+            changeDatepickerValue({
+                startDate: formatDateTimeToISO(period.start, hour, e.target.value, periodDay),
+                endDate: formatDateTimeToISO(period.end, hour, e.target.value, periodDay)
+            });
+        }
+    };
+
+    const handleChangePeriodDay = (e: ChangeEvent<HTMLSelectElement>) => {
         changePeriodDay(e.target.value as PeriodDay);
 
+        if (period.start && period.end) {
+            changeDatepickerValue({
+                startDate: formatDateTimeToISO(period.start, hour, minute, e.target.value),
+                endDate: formatDateTimeToISO(period.end, hour, minute, e.target.value)
+            });
+        }
+    };
+
     return (
         <div className="w-full md:w-auto flex items-center justify-center space-x-3">
             <div className="pb-6">

src/components/utils.tsx

@@ -118,32 +118,6 @@ export const DoubleChevronRightIcon: React.FC<IconProps> = ({ className = "w-6 h
     );
 };
 
-export const DoubleVerticalChevronRightIcon: React.FC<IconProps> = ({ className = "w-6 h-6" }) => {
-    return (
-        <svg
-            className={className}
-            xmlns="http://www.w3.org/2000/svg"
-            width="16"
-            height="16"
-            viewBox="0 0 16 16"
-            fill="none"
-        >
-            <path
-                fill-rule="evenodd"
-                clip-rule="evenodd"
-                d="M8.35355 4.06066C8.15829 3.8654 7.84171 3.8654 7.64645 4.06066L5.35355 6.35355C5.15829 6.54882 4.84171 6.54882 4.64645 6.35355C4.45118 6.15829 4.45118 5.84171 4.64645 5.64645L6.93934 3.35356C7.52513 2.76777 8.47487 2.76777 9.06066 3.35355L11.3536 5.64645C11.5488 5.84171 11.5488 6.15829 11.3536 6.35355C11.1583 6.54882 10.8417 6.54882 10.6464 6.35355L8.35355 4.06066Z"
-                fill="#6b7280"
-            />
-            <path
-                fill-rule="evenodd"
-                clip-rule="evenodd"
-                d="M8.35355 11.9393C8.15829 12.1346 7.84171 12.1346 7.64645 11.9393L5.35355 9.64645C5.15829 9.45119 4.84171 9.45119 4.64645 9.64645C4.45118 9.84171 4.45118 10.1583 4.64645 10.3536L6.93934 12.6464C7.52513 13.2322 8.47487 13.2322 9.06066 12.6464L11.3536 10.3536C11.5488 10.1583 11.5488 9.84171 11.3536 9.64645C11.1583 9.45119 10.8417 9.45119 10.6464 9.64645L8.35355 11.9393Z"
-                fill="#6b7280"
-            />
-        </svg>
-    );
-};
-
 // eslint-disable-next-line react/display-name,@typescript-eslint/ban-types
 export const Arrow = React.forwardRef<HTMLDivElement, {}>((props, ref) => {
     return (