Updated commented lines and removed unnessary console logs of Canvas

Author: Skilzsz

app/src/components/main/Canvas.tsx

@@ -31,15 +31,16 @@ function Canvas(props: {}): JSX.Element {
   //remote cursor data
   const [remoteCursors, setRemoteCursors] = useState([]);
 
-  // toggle switch
+  // Toggle switch for live cursor tracking
   const [toggleSwitch, setToggleSwitch] = useState(true);
 
-  // toggle text
+  // Toggle button text for live cursor tracking button - on/off
   const [toggleText, setToggleText] = useState('off');
   const toggleButton = () => {
     setToggleText(toggleText === 'on' ? 'off' : 'on');
   };
 
+  // Prevents lagging and provides smoother user experience got live cursor tracking (milliseconds can be adjusted but 300ms is most optimal)
   const debounceSetPosition = debounce((newX, newY) => {
     //emit socket event every 300ms when cursor moves
     if (userList.length > 1)
@@ -91,10 +92,11 @@ function Canvas(props: {}): JSX.Element {
     });
   };
 
-  console.log('userList:', userList);
+  // console.log('userList:', userList);
   //[{x,y,remoteUserName, isVisible}, {...}, {...}]
-  console.log('remoteCursors:', remoteCursors);
+  // console.log('remoteCursors:', remoteCursors);
 
+  // Removes the mouse cursor of the user that leaves the collaboration room.
   const handleCursorDeleteFromServer = () => {
     setRemoteCursors((prevRemoteCursors) =>
       prevRemoteCursors.map((cursor) => ({
@@ -104,6 +106,7 @@ function Canvas(props: {}): JSX.Element {
     );
   };
 
+  // Function that will turn on/off socket depending on toggle Switch.
   const handleToggleSwitch = () => {
     setToggleSwitch(!toggleSwitch);
     //checks the state before it's updated so need to check the opposite condition
@@ -133,9 +136,7 @@ function Canvas(props: {}): JSX.Element {
     }
   };
 
-  console.log('Toggle Switch:', toggleSwitch);
-
-  //Function to handle the click events.
+  //Function to handle the multiple click events of the toggle button.
   const multipleClicks = () => {
     handleToggleSwitch();
     toggleButton();
@@ -192,7 +193,6 @@ function Canvas(props: {}): JSX.Element {
         childId: childId
       });
     }
-    // console.log('emit changeFocusAction event is triggered in canvas');
   };
 
   // onClickHandler is responsible for changing the focused component and child component
@@ -325,6 +325,7 @@ function Canvas(props: {}): JSX.Element {
     currentComponent.style
   );
 
+  // Array of colors that color code users as they join the room (In a set order)
   const userColors = [
     '#FC00BD',
     '#D0FC00',
@@ -365,7 +366,6 @@ function Canvas(props: {}): JSX.Element {
             </div>
           )
       )}
-
       <label className="switch">
         {userList.length > 1 && (
           <button