From 66f3ccd34fa8c06da8dd35b5277e093b318109aa Mon Sep 17 00:00:00 2001
From: RohitR311 <rohit.rajan031101@gmail.com>
Date: Thu, 19 Dec 2024 16:26:23 +0530
Subject: [PATCH] trigger socket event to display time picker

---
 src/components/atoms/canvas.tsx | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/src/components/atoms/canvas.tsx b/src/components/atoms/canvas.tsx
index fc778963..77128a65 100644
--- a/src/components/atoms/canvas.tsx
+++ b/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>
     );