From d729ae3990267686a3cdfbebe8d8521c0b60f88a Mon Sep 17 00:00:00 2001
From: Adam Sunderland <adam@kittycad.io>
Date: Wed, 8 Mar 2023 14:07:40 -0500
Subject: [PATCH] Add socket send for mouse events (#50)

Add socket send
---
 src/components/Stream.tsx | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/src/components/Stream.tsx b/src/components/Stream.tsx
index bab706bc7..ad2bfc33a 100644
--- a/src/components/Stream.tsx
+++ b/src/components/Stream.tsx
@@ -77,17 +77,15 @@ export const Stream = () => {
       }
     })
 
-    // TODO instead of logging, send use `socket` to send to server, maybe something like?:
-    // const debounceLog = throttle((xy) => {
-    //   socket.send(JSON.stringify({ type: 'mouse', xy }))
-    // }, 100)
-    const debounceLog = throttle(console.log, 100)
+    const debounceSocketSend = throttle((message) => {
+      socket.send(JSON.stringify(message))
+    }, 100)
     const handleMouseMove = ({ clientX, clientY }: MouseEvent) => {
       if (!videoRef.current) return
       const { left, top } = videoRef.current.getBoundingClientRect()
       const x = clientX - left
       const y = clientY - top
-      debounceLog([x, y])
+      debounceSocketSend({ type: 'MouseMove', x: x, y: y })
     }
     if (videoRef.current) {
       videoRef.current.addEventListener('mousemove', handleMouseMove)