Merge pull request #10 from oslabs-beta/sean

Refactored Mouse-Tracker

Author: Skilzsz

app/src/components/left/RoomsContainer.tsx

@@ -5,7 +5,7 @@ import List from '@mui/material/List';
 import ListItem from '@mui/material/ListItem';
 import ListItemText from '@mui/material/ListItemText';
 import Button from '@mui/material/Button';
-import React from 'react';
+import React, { useState } from 'react';
 import { RootState } from '../../redux/store';
 import TextField from '@mui/material/TextField';
 import {
@@ -32,7 +32,22 @@ import {
   disconnectSocket
 } from '../../helperFunctions/socket';
 
-//Websocket
+// // for websockets
+// // Part  - join room and room code functionality
+let socket;
+
+//function to create HTML elements and update the position of the cursorr.
+// function getCursor(id) {
+//   let elementId = 'cursor-' + id;
+//   let element = document.getElementById(elementId);
+//   if (element == null) {
+//     element = document.createElement('div');
+//     element.id = elementId;
+//     element.className = 'cursor';
+//     document.appendChild(element);
+//   }
+//   return element;
+// }
 
 const RoomsContainer = () => {
   const dispatch = useDispatch();
@@ -81,6 +96,7 @@ const RoomsContainer = () => {
       socket.on('updateUserList', (newUserList) => {
         console.log('user list received from server');
         dispatch(setUserList(newUserList));
+        console.log('userList:', userList);
       });
 
       socket.on('child data from server', (childData: object) => {

app/src/components/main/Canvas.tsx

@@ -7,21 +7,65 @@ import {
   snapShotAction
 } from '../../redux/reducers/slice/appStateSlice';
 import { useDispatch, useSelector } from 'react-redux';
+import { debounce, throttle } from 'lodash';
 
 import Arrow from './Arrow';
 import { ItemTypes } from '../../constants/ItemTypes';
 import { RootState } from '../../redux/store';
 import { combineStyles } from '../../helperFunctions/combineStyles';
 import renderChildren from '../../helperFunctions/renderChildren';
-import { emitEvent } from '../../helperFunctions/socket';
+import { emitEvent, getSocket } from '../../helperFunctions/socket';
 
 function Canvas(props: {}): JSX.Element {
   const state = useSelector((store: RootState) => store.appState);
   const contextParam = useSelector((store: RootState) => store.contextSlice);
-
   const roomCode = useSelector((store: RootState) => store.roomSlice.roomCode);
-  // console.log('roomCode:', roomCode);
-  // console.log('canavs is rendered');
+  const userName = useSelector((store: RootState) => store.roomSlice.userName);
+  const userList = useSelector((store: RootState) => store.roomSlice.userList);
+
+  //-------mouse tracking-------
+  console.log('canvas is rendered');
+
+  //remote cursor data
+  const [remoteCursor, setRemoteCursor] = useState({
+    x: 0,
+    y: 0,
+    remoteUserName: '',
+    isVisible: false
+  });
+
+  const debounceSetPosition = debounce((newX, newY) => {
+    //emit socket event every 500ms when cursor moves
+    if (userList.length > 1)
+      emitEvent('cursorData', roomCode, { x: newX, y: newY, userName });
+  }, 100);
+
+  const handleMouseMove = (e) => {
+    debounceSetPosition(e.clientX, e.clientY);
+  };
+
+  const socket = getSocket();
+  if (socket) {
+    // console.log('setting up socket listener');
+    socket.on('remote cursor data from server', (remoteData) => {
+      setRemoteCursor((prevState) => {
+        // check if the received data is different from the current state
+        if (prevState.x !== remoteData.x || prevState.y !== remoteData.y) {
+          return {
+            ...prevState,
+            x: remoteData.x,
+            y: remoteData.y,
+            remoteUserName: remoteData.userName,
+            isVisible: true
+          };
+        }
+        // if data is the same, return the previous state to prevent re-render
+        return prevState;
+      });
+    });
+  }
+
+  //--------------------------------
 
   // find the current component based on the canvasFocus component ID in the state
   const currentComponent: Component = state.components.find(
@@ -184,8 +228,29 @@ function Canvas(props: {}): JSX.Element {
       data-testid="drop"
       style={canvasStyle}
       onClick={onClickHandler}
+      onMouseMove={handleMouseMove}
     >
       {renderChildren(currentComponent.children)}
+
+      {remoteCursor.isVisible && (
+        <div
+          className="remote-cursor"
+          style={{
+            position: 'absolute',
+            left: remoteCursor.x + 'px',
+            top: remoteCursor.y - 68 + 'px',
+            //style
+            width: '10px',
+            height: '10px',
+            borderRadius: '50%',
+            backgroundColor: 'blue',
+            color: 'red'
+          }}
+        >
+          {' '}
+          {remoteCursor.remoteUserName}
+        </div>
+      )}
     </div>
   );
 }

app/src/index.tsx

@@ -39,42 +39,42 @@ if (isDev) {
 
 const PrivateRoute = ({ component: Component, ...rest }) => {
   const [isLoggedIn, setIsLoggedIn] = useState(null);
-  
-  useEffect(() => {
-
-  const projects = fetch(`${serverURL}/loggedIn`, {
-    method: 'GET',
-    headers: {
-      'content-type': 'application/json'
-    },
-    // need credentials for userid pull from cookie
-    credentials: 'include'
-  })
-    .then((res) => res.json())
-    .then((data) => {
-
-      setIsLoggedIn(data);
 
+  useEffect(() => {
+    const projects = fetch(`${serverURL}/loggedIn`, {
+      method: 'GET',
+      headers: {
+        'content-type': 'application/json'
+      },
+      // need credentials for userid pull from cookie
+      credentials: 'include'
     })
-    .catch((err) => console.log(`Error getting project ${err}`));
+      .then((res) => res.json())
+      .then((data) => {
+        setIsLoggedIn(data);
+      })
+      .catch((err) => console.log(`Error getting project ${err}`));
   }, []);
 
-return (
-  <Route
-    {...rest}
-    render={(props) => {
-     if (isLoggedIn === true || window.localStorage.getItem('ssid') === 'guest') {
-        // User is logged in, render the protected component
-        return <Component {...props} />;
-      } else if(isLoggedIn !== null) {
-        // User is not logged in, redirect to the login page
-        // Ignores the initial render which would have isLoggedIn as null
-        return <Redirect to="/login" />;
-      }
-    }}
-  />
-  )};
-
+  return (
+    <Route
+      {...rest}
+      render={(props) => {
+        if (
+          isLoggedIn === true ||
+          window.localStorage.getItem('ssid') === 'guest'
+        ) {
+          // User is logged in, render the protected component
+          return <Component {...props} />;
+        } else if (isLoggedIn !== null) {
+          // User is not logged in, redirect to the login page
+          // Ignores the initial render which would have isLoggedIn as null
+          return <Redirect to="/login" />;
+        }
+      }}
+    />
+  );
+};
 
 ReactDOM.render(
   <ApolloProvider client={client}>

app/src/interfaces/Interfaces.ts

@@ -169,15 +169,25 @@ export interface Arrow {
   ) => HTMLDivElement;
 }
 
-export interface ColumnTab { //table state props
+export interface ColumnTab {
+  //table state props
   field: string;
   headerName: string;
   width: string | number;
   editable: boolean;
-  align?:string;
+  align?: string;
   valueGetter?: (param: any) => string | undefined;
   renderCell?: (params: any) => React.ReactNode;
   flex?: string | number;
   sortable?: boolean;
   disableColumnMenu?: boolean;
 }
+
+// Exports for Mouse tracking
+
+export interface MouseProps {}
+export interface MouseState {
+  //canvas mouseTracking props.
+  clientX: number;
+  clientY: number;
+}

server/server.ts

@@ -147,6 +147,20 @@ io.on('connection', (client) => {
     }
   });
 
+  //updating mouse movement after joining.
+
+  client.on('mouse connection', (data) => {
+    io.emit('mouseCursor', { line: data.line, id: client.id });
+  });
+
+  //connecting and emitting the mousetracker
+  // client.on('connection', (socket) => {
+  //   socket.emit('news', { hello: 'world' });
+  //   socket.on('other event', (data) => {
+  //     console.log(data);
+  //   });
+  // });
+
   //disconnecting functionality
   client.on('disconnecting', () => {
     // the client.rooms Set contains at least the socket ID
@@ -190,6 +204,10 @@ io.on('connection', (client) => {
         .emit('item position data from server', itemPositionData);
     }
   );
+
+  client.on('cursorData', (roomCode: string, remoteData: object) => {
+    client.to(roomCode).emit('remote cursor data from server', remoteData);
+  });
 });
 
 //--------------------------------

webpack.config.js

@@ -29,7 +29,7 @@ module.exports = {
   plugins: [
     new Dotenv(),
     new webpack.DefinePlugin({
-      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
+      'process.env.NODE_ENV': JSON.stringify('development')
     })
     // new BundleAnalyzerPlugin(),
   ],