trigger socket event to display time picker

src/components/atoms/canvas.tsx

@@ -5,6 +5,7 @@ import { useGlobalInfoStore } from "../../context/globalInfo";
 import { useActionContext } from '../../context/browserActions';
 import DatePicker from './DatePicker';
 import Dropdown from './Dropdown';
+import TimePicker from './TimePicker';
 
 interface CreateRefCallback {
     (ref: React.RefObject<HTMLCanvasElement>): void;
@@ -49,6 +50,11 @@ const Canvas = ({ width, height, onCreateRef }: CanvasProps) => {
         }>;
     } | null>(null);
 
+    const [timePickerInfo, setTimePickerInfo] = React.useState<{
+        coordinates: Coordinates;
+        selector: string;
+    } | null>(null);
+
     const notifyLastAction = (action: string) => {
         if (lastAction !== action) {
             setLastAction(action);
@@ -81,6 +87,10 @@ const Canvas = ({ width, height, onCreateRef }: CanvasProps) => {
                 setDropdownInfo(info);
             });
 
+            socket.on('showTimePicker', (info: {coordinates: Coordinates, selector: string}) => {
+                setTimePickerInfo(info);
+            });
+
             return () => {
                 socket.off('showDatePicker');
                 socket.off('showDropdown');
@@ -205,6 +215,13 @@ const Canvas = ({ width, height, onCreateRef }: CanvasProps) => {
                     onClose={() => setDropdownInfo(null)}
                 />
             )}
+            {timePickerInfo && (
+                <TimePicker
+                    coordinates={timePickerInfo.coordinates}
+                    selector={timePickerInfo.selector}
+                    onClose={() => setTimePickerInfo(null)}
+                />
+            )}
         </div>
     );