Merge pull request #21 from oslabs-beta/sean

Toggle Switch

Author: lauraafor

app/src/components/left/RoomsContainer.tsx

@@ -38,6 +38,7 @@ import {
   getSocket,
   disconnectSocket
 } from '../../helperFunctions/socket';
+import Canvas from '../components/main/Canvas';
 
 // // for websockets
 // // Part  - join room and room code functionality
@@ -180,6 +181,7 @@ const RoomsContainer = () => {
     return userName.length === 0 || roomCode.length === 0;
   }
 
+  // Turning off the cursor live tracking on canvas with the press of a button.
   const handleKeyDown = (e) => {
     if (e.key === 'Enter' && e.target.id === 'filled-hidden-label-small') {
       e.preventDefault();

app/src/components/left/Sidebar.tsx

@@ -20,25 +20,26 @@ const Sidebar: React.FC<SidebarProps> = ({
 }) => {
   const handleTabChange = (event: React.ChangeEvent<{}>, newValue: number) => {
     setActiveTab(newValue);
-    toggleVisibility(true);// Show the left-container when a different tab is clicked 
-    oldValue = newValue;//setting the oldvalue to match the new tab
+    toggleVisibility(true); // Show the left-container when a different tab is clicked
+    oldValue = newValue; //setting the oldvalue to match the new tab
   };
 
   const handleTabClick = (event: React.MouseEvent, oldValue: number) => {
-    if (activeTab === oldValue) { //if the person is clicking the same tab, oldValue should match activeTab since it did not trigger an onChange
+    if (activeTab === oldValue) {
+      //if the person is clicking the same tab, oldValue should match activeTab since it did not trigger an onChange
       setActiveTab(null);
       toggleVisibility(false); // Hide the left-container when the same tab is clicked again
     }
-  }
+  };
 
   return (
     <Tabs
       key={activeTab}
       orientation="vertical"
       variant="scrollable"
       value={activeTab}
-      onChange = {handleTabChange}
-      onClick = {(e: React.MouseEvent) => handleTabClick(e, oldValue)}
+      onChange={handleTabChange}
+      onClick={(e: React.MouseEvent) => handleTabClick(e, oldValue)}
       TabIndicatorProps={{
         style: {
           backgroundColor: '#4A4A4A'
@@ -53,10 +54,10 @@ const Sidebar: React.FC<SidebarProps> = ({
         gap: '50px',
         width: 67,
         background: '#151515',
-        height: '100vh',
+        height: '100vh'
       }}
     >
-      <Tab sx={{position: 'absolute', visibility: "hidden"}} value={null}/>
+      <Tab sx={{ position: 'absolute', visibility: 'hidden' }} value={null} />
       <Tab
         sx={{
           color: activeTab === 0 ? '#a5ead6' : '#4A4A4A',

app/src/components/main/Canvas.tsx

@@ -16,6 +16,7 @@ import { combineStyles } from '../../helperFunctions/combineStyles';
 import renderChildren from '../../helperFunctions/renderChildren';
 import { emitEvent, getSocket } from '../../helperFunctions/socket';
 import { GiBoba } from 'react-icons/gi';
+import { Console } from 'console';
 
 function Canvas(props: {}): JSX.Element {
   const state = useSelector((store: RootState) => store.appState);
@@ -27,9 +28,20 @@ function Canvas(props: {}): JSX.Element {
   //-------cursors tracking-------
   console.log('canvas is rendered');
 
+  //remote cursor data
+
   const [remoteCursors, setRemoteCursors] = useState([]);
+
+  //toggle switch
   const [toggleSwitch, setToggleSwitch] = useState(true);
 
+  // toggle text
+  const [toggleText, setToggleText] = useState('off');
+
+  const toggleButton = () => {
+    setToggleText(toggleText === 'on' ? 'off' : 'on');
+  };
+
   const debounceSetPosition = debounce((newX, newY) => {
     //emit socket event every 300ms when cursor moves
     if (userList.length > 1)
@@ -111,6 +123,12 @@ function Canvas(props: {}): JSX.Element {
 
   console.log('Toggle Switch:', toggleSwitch);
 
+  //Function to handle the click events.
+  const multipleClicks = () => {
+    handleToggleSwitch();
+    toggleButton();
+  };
+
   const socket = getSocket();
   //wrap the socket event listener in useEffect with dependency array as [socket], so the the effect will run only when: 1. After the initial rendering of the component 2. Every time the socket instance changes(connect, disconnect)
   useEffect(() => {
@@ -328,19 +346,29 @@ function Canvas(props: {}): JSX.Element {
             </div>
           )
       )}
-
-      <label
-        className="switch"
-        style={{
-          position: 'relative',
-          display: 'inline-block',
-          width: '60px',
-          height: '34px'
-        }}
-      >
-        <button className="btn-toggle" onClick={handleToggleSwitch}>
-          On/Off
-        </button>
+      <label className="switch">
+        {userList.length > 1 && (
+          <button
+            className="btn-toggle"
+            onClick={multipleClicks}
+            style={{
+              position: 'fixed',
+              width: 'max-content',
+              height: 'max-content',
+              bottom: '100px',
+              left: '51vw',
+              textAlign: 'center',
+              color: '#ffffff',
+              backgroundColor: '#151515',
+              zIndex: 0,
+              padding: '5px',
+              borderColor: '#46C0A5',
+              borderRadius: '5px'
+            }}
+          >
+            {toggleText === 'on' ? 'View Cursors' : 'Hide Cursors'}
+          </button>
+        )}
       </label>
     </div>
   );

app/src/public/styles/style.css

@@ -8,7 +8,7 @@
 @import url('https://fonts.googleapis.com/css2?family=Raleway&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0');
-@import url("https: //fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500;600;700&display=swap");
+@import url('https: //fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500;600;700&display=swap');
 
 html {
   box-sizing: border-box;
@@ -143,14 +143,13 @@ span.material-symbols-outlined {
   border: solid gray 1px;
 }
 
-
 .column.left::-webkit-scrollbar {
-  width: .5rem;
-  height: .5rem;
+  width: 0.5rem;
+  height: 0.5rem;
 }
 
 .column.left::-webkit-scrollbar-thumb {
-  transition: .3s ease all;
+  transition: 0.3s ease all;
   border-color: transparent;
   background-color: #1e83714b;
   z-index: 40;
@@ -177,7 +176,7 @@ span.material-symbols-outlined {
   flex-wrap: wrap;
   width: 100%;
   flex-grow: 1;
-  border: 1px solid #C6C6C6;
+  border: 1px solid #c6c6c6;
   /* border-radius: 10px; */
 }
 
@@ -202,7 +201,7 @@ span.material-symbols-outlined {
   border: 3px solid white;
 }
 
-#HTMLItemsTopHalf {
+#Half {
   display: flex;
   flex-direction: column;
   justify-content: top;
@@ -213,12 +212,12 @@ span.material-symbols-outlined {
 }
 
 #HTMLItemsTopHalf::-webkit-scrollbar {
-  width: .8rem;
-  height: .5rem;
+  width: 0.8rem;
+  height: 0.5rem;
 }
 
 #HTMLItemsTopHalf::-webkit-scrollbar-thumb {
-  transition: .3s ease all;
+  transition: 0.3s ease all;
   border-color: transparent;
   background-color: #1e83714b;
   border-radius: 8px;
@@ -390,11 +389,11 @@ h1 {
 }
 
 .export-preference div span {
-  transition: .5s
+  transition: 0.5s;
 }
 
 #export-modal {
-  transition: .5s
+  transition: 0.5s;
 }
 
 #export-modal:hover {
@@ -403,7 +402,7 @@ h1 {
 }
 
 #export-modal:hover span {
-  color: white
+  color: white;
 }
 
 .info {
@@ -457,7 +456,7 @@ RIGHT COLUMN
 }
 
 #addComponentButton {
-  border: 2px solid #46C0A5;
+  border: 2px solid #46c0a5;
   border-radius: 4px;
 }
 
@@ -485,7 +484,7 @@ RIGHT COLUMN
   display: flex;
   justify-content: center;
   align-content: center;
-  border-color: #46C0A5; 
+  border-color: #46c0a5;
 }
 
 .compPanelItem h3 {
@@ -533,18 +532,16 @@ BOTTOM PANEL
   background-color: #191919;
 }
 
-.MuiDataGrid-menuList, .MuiDataGrid-columnsPanel, .MuiDataGrid-filterForm {
-
-  background-color: #333333
+.MuiDataGrid-menuList,
+.MuiDataGrid-columnsPanel,
+.MuiDataGrid-filterForm {
+  background-color: #333333;
 }
-.MuiDataGrid-panelHeader, .MuiDataGrid-panelFooter {
-
-  background-color: #252525
-
+.MuiDataGrid-panelHeader,
+.MuiDataGrid-panelFooter {
+  background-color: #252525;
 }
 
-
-
 #resize-drag {
   cursor: row-resize;
   height: 25px;
@@ -568,7 +565,6 @@ BOTTOM PANEL
   height: 100%;
   display: flex;
   flex-direction: column;
-
 }
 
 .htmlattr {
@@ -652,7 +648,6 @@ NAVBAR
   cursor: pointer;
 }
 
-
 .navDropDown {
   position: absolute;
   border: 1px solid #555;
@@ -685,12 +680,12 @@ NAVBAR
 
 .navDropDown p {
   margin: 3px 5%;
-  color: whitesmoke
+  color: whitesmoke;
 }
 
 .navDropDown button:hover {
   cursor: pointer;
-  background-color: #555
+  background-color: #555;
 }
 
 .navDropDown button svg {
@@ -709,8 +704,6 @@ NAVBAR
   width: 16%;
 }
 
-
-
 /*
 /////////////////////////////////////////////////
 CANVAS WINDOW
@@ -724,7 +717,8 @@ CANVAS WINDOW
   border: none;
   font-size: 15px;
   color: white;
-  box-shadow: 0px 3px 1px -2px rgb(0 0 0 / 20%), 0px 2px 2px 0px rgb(0 0 0 / 14%), 0px 1px 5px 0px rgb(0 0 0 / 12%)
+  box-shadow: 0px 3px 1px -2px rgb(0 0 0 / 20%),
+    0px 2px 2px 0px rgb(0 0 0 / 14%), 0px 1px 5px 0px rgb(0 0 0 / 12%);
 }
 
 .delete-button-empty:hover {
@@ -757,7 +751,7 @@ div.rst__rowContents {
 .rst__rowContentsDragDisabled {
   background-color: #333333;
   background-color: rgba(37, 37, 38, 0.4);
-} 
+}
 
 .rst__moveHandle,
 .rst__loadingHandle {
@@ -816,7 +810,7 @@ a.nav_link:hover {
 .useState-btn {
   color: rgb(241, 240, 240);
   background-color: rgba(0, 0, 0, 0.54);
-  border: 1px solid #46C0A5;
+  border: 1px solid #46c0a5;
   border-radius: 3px;
   box-shadow: '2px 2px 2px #1a1a1a';
   font-family: Arial, Helvetica, sans-serif;
@@ -868,4 +862,4 @@ a.nav_link:hover {
 
 li {
   color: black;
-}
+}

package.json

@@ -53,12 +53,16 @@
     "Katrina Henderson",
     "Kevin Park",
     "Khuong Nguyen",
+    "Laura Forden",
+    "Lauren Leer",
     "Linh Tran",
     "Luke Madden",
     "Michael Ng",
     "Mitchel Severe",
     "Natalie Vick",
     "Ron Fu",
+    "Rose Jiang",
+    "Sean Kil",
     "Sean Sadykoff",
     "Shana Hoehn",
     "Shlomo Porges",