Merge pull request #26 from oslabs-beta/Yoheze/websockets

Yoheze/websockets

Author: mdunnmon

app/src/Dashboard/NavbarDash.tsx

@@ -46,7 +46,7 @@ const sortMethods = ['RATING', 'DATE', 'USER'];
 // Drop down menu button for SORT PROJECTS
 const StyledMenu = withStyles({
   paper: {
-    border: '1px solid #d3d4d5'
+    border: '1px solid #d3d4d5',
   }
 })(props => (
   <Menu

app/src/components/main/Canvas.tsx

@@ -131,7 +131,6 @@ function Canvas(props): JSX.Element {
 
   const canvasStyle = combineStyles(defaultCanvasStyle, currentComponent.style);
   const darkCombinedCanvasStyle = combineStyles(darkCanvasStyle, currentComponent.style);
-  console.log('canvas comp', currentComponent)
   return (
     <div className={'componentContainer'} ref={drop} style={!isDarkMode ? canvasStyle : darkCombinedCanvasStyle} onClick={onClickHandler}>
        {renderChildren(currentComponent.children)}

app/src/components/right/DeleteProjects.tsx

@@ -109,6 +109,7 @@ export default function ProjectsFolder() {
         color="primary"
         onClick={handleClickOpen}
         endIcon={<DeleteRoundedIcon />}
+        sx={{fontSize: '9px'}}
       >
         Delete Project
       </Button>

app/src/components/right/OpenProjects.tsx

@@ -99,6 +99,7 @@ export default function ProjectsFolder(props) {
         id="openProject"
         onClick={handleClickOpen}
         endIcon={<FolderOpenIcon />}
+        sx={{fontSize: '9px'}}
       >
         Open Project
       </Button>

app/src/components/right/SaveProjectButton.tsx

@@ -64,7 +64,7 @@ const dispatch = useDispatch();
       <Button
         color="primary"
         onClick={handleClickOpen}
-        endIcon={<SaveOutlinedIcon />}
+        endIcon={<SaveOutlinedIcon />} sx={{fontSize: '9px'}}
       >
         SAVE PROJECT AS
       </Button>

app/src/components/top/NavBar.tsx

@@ -21,7 +21,7 @@ const NavBar = (props) => {
       onMouseOver={()=>setDropMenu(true)}>
         <path d="M7.068.727c.243-.97 1.62-.97 1.864 0l.071.286a.96.96 0 0 0 1.622.434l.205-.211c.695-.719 1.888-.03 1.613.931l-.08.284a.96.96 0 0 0 1.187 1.187l.283-.081c.96-.275 1.65.918.931 1.613l-.211.205a.96.96 0 0 0 .434 1.622l.286.071c.97.243.97 1.62 0 1.864l-.286.071a.96.96 0 0 0-.434 1.622l.211.205c.719.695.03 1.888-.931 1.613l-.284-.08a.96.96 0 0 0-1.187 1.187l.081.283c.275.96-.918 1.65-1.613.931l-.205-.211a.96.96 0 0 0-1.622.434l-.071.286c-.243.97-1.62.97-1.864 0l-.071-.286a.96.96 0 0 0-1.622-.434l-.205.211c-.695.719-1.888.03-1.613-.931l.08-.284a.96.96 0 0 0-1.186-1.187l-.284.081c-.96.275-1.65-.918-.931-1.613l.211-.205a.96.96 0 0 0-.434-1.622l-.286-.071c-.97-.243-.97-1.62 0-1.864l.286-.071a.96.96 0 0 0 .434-1.622l-.211-.205c-.719-.695-.03-1.888.931-1.613l.284.08a.96.96 0 0 0 1.187-1.186l-.081-.284c-.275-.96.918-1.65 1.613-.931l.205.211a.96.96 0 0 0 1.622-.434l.071-.286zM12.973 8.5H8.25l-2.834 3.779A4.998 4.998 0 0 0 12.973 8.5zm0-1a4.998 4.998 0 0 0-7.557-3.779l2.834 3.78h4.723zM5.048 3.967c-.03.021-.058.043-.087.065l.087-.065zm-.431.355A4.984 4.984 0 0 0 3.002 8c0 1.455.622 2.765 1.615 3.678L7.375 8 4.617 4.322zm.344 7.646.087.065-.087-.065z"/>
       </svg>
-      {dropMenu && <NavbarDropDown></NavbarDropDown>}
+      <NavbarDropDown dropMenu={dropMenu}></NavbarDropDown>
     </div>
   </nav>
   )

app/src/components/top/NavBarButtons.js

@@ -18,6 +18,8 @@ import SaveProjectButton from '../right/SaveProjectButton.tsx';
 import ProjectsFolder from '../right/OpenProjects.tsx';
 import DeleteProjects from '../right/DeleteProjects.tsx';
 import Menu from '@mui/material/Menu';
+import { io } from 'socket.io-client'
+import { changeRoom } from '../../redux/reducers/slice/roomCodeSlice';
 
 const useStyles = makeStyles((theme) =>
   createStyles({
@@ -35,14 +37,16 @@ const useStyles = makeStyles((theme) =>
     },
     manageProject: {
       display: 'flex',
-      justifyContent: 'center'
+      justifyContent: 'center',
+      width: '100px',
+      overflow: 'none',
     }
   })
 );
 
 const StyledMenu = withStyles({
     paper: {
-      border: '1px solid #d3d4d5'
+      border: '1px solid #d3d4d5',
     }
   })(props => (
     <Menu
@@ -70,16 +74,21 @@ const StyledMenu = withStyles({
     }
   }))(MenuItem);
 
-function navbarDropDown () {
+
+// where the main function starts //
+function navbarDropDown (props) {
 
     const dispatch = useDispatch();
     const [modal, setModal] = React.useState(null);
     const [anchorEl, setAnchorEl] = React.useState(null);
+    const [roomCode, setRoomCode] = React.useState('');
+    const [confirmRoom, setConfirmRoom] = React.useState('')
     const classes = useStyles();
 
-    const { isDarkMode, state } = useSelector(store=>({
+    const { isDarkMode, state, joinedRoom } = useSelector(store=>({
         isDarkMode: store.darkMode.isDarkMode,
         state: store.appState,
+        joinedRoom: store.roomCodeSlice.roomCode
         }
         ))
     const closeModal = () => setModal('');
@@ -132,13 +141,22 @@ function navbarDropDown () {
         dispatch(toggleDarkMode());
         // Add your logic to update the style and theme based on darkMode
         isDarkMode ? dispatch(setStyle(null)) : dispatch(setStyle({ backgroundColor: '#21262c' }));
-        props.setTheme(isDarkMode);
       };
 
       const handleClose = () => {
         setAnchorEl(null);
       };
 
+      React.useEffect(()=>{
+        console.log('joinedRoom: ', joinedRoom)
+      }, [joinedRoom])
+
+      function joinRoom () {
+        console.log(roomCode)
+        dispatch(changeRoom(roomCode))
+        setConfirmRoom(confirmRoom=>roomCode)
+      }
+
       const switchDark = isDarkMode ? 
         <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" className="bi bi-lightbulb" viewBox="0 0 16 16">
             <path d="M2 6a6 6 0 1 1 10.174 4.31c-.203.196-.359.4-.453.619l-.762 1.769A.5.5 0 0 1 10.5 13a.5.5 0 0 1 0 1 .5.5 0 0 1 0 1l-.224.447a1 1 0 0 1-.894.553H6.618a1 1 0 0 1-.894-.553L5.5 15a.5.5 0 0 1 0-1 .5.5 0 0 1 0-1 .5.5 0 0 1-.46-.302l-.761-1.77a1.964 1.964 0 0 0-.453-.618A5.984 5.984 0 0 1 2 6zm6-5a5 5 0 0 0-3.479 8.592c.263.254.514.564.676.941L5.83 12h4.342l.632-1.467c.162-.377.413-.687.676-.941A5 5 0 0 0 8 1z"/>
@@ -148,8 +166,10 @@ function navbarDropDown () {
             <path d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278zM4.858 1.311A7.269 7.269 0 0 0 1.025 7.71c0 4.02 3.279 7.276 7.319 7.276a7.316 7.316 0 0 0 5.205-2.162c-.337.042-.68.063-1.029.063-4.61 0-8.343-3.714-8.343-8.29 0-1.167.242-2.278.681-3.286z"/>
         </svg>
 
+    const showMenu = props.dropMenu ? 'navDropDown' : 'hideNavDropDown'
+
     return (
-        <div className="navDropDown">
+        <div className={showMenu}>
             <Link to="/tutorial" style={{ textDecoration: 'none' }} target='_blank'>
                 <button>Tutorial
                     <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" className="bi bi-book" viewBox="0 0 16 16">
@@ -169,6 +189,10 @@ function navbarDropDown () {
                     <path d="M4.318 2.687C5.234 2.271 6.536 2 8 2s2.766.27 3.682.687C12.644 3.125 13 3.627 13 4c0 .374-.356.875-1.318 1.313C10.766 5.729 9.464 6 8 6s-2.766-.27-3.682-.687C3.356 4.875 3 4.373 3 4c0-.374.356-.875 1.318-1.313ZM13 5.698V7c0 .374-.356.875-1.318 1.313C10.766 8.729 9.464 9 8 9s-2.766-.27-3.682-.687C3.356 7.875 3 7.373 3 7V5.698c.271.202.58.378.904.525C4.978 6.711 6.427 7 8 7s3.022-.289 4.096-.777A4.92 4.92 0 0 0 13 5.698ZM14 4c0-1.007-.875-1.755-1.904-2.223C11.022 1.289 9.573 1 8 1s-3.022.289-4.096.777C2.875 2.245 2 2.993 2 4v9c0 1.007.875 1.755 1.904 2.223C4.978 15.71 6.427 16 8 16s3.022-.289 4.096-.777C13.125 14.755 14 14.007 14 13V4Zm-1 4.698V10c0 .374-.356.875-1.318 1.313C10.766 11.729 9.464 12 8 12s-2.766-.27-3.682-.687C3.356 10.875 3 10.373 3 10V8.698c.271.202.58.378.904.525C4.978 9.71 6.427 10 8 10s3.022-.289 4.096-.777A4.92 4.92 0 0 0 13 8.698Zm0 3V13c0 .374-.356.875-1.318 1.313C10.766 14.729 9.464 15 8 15s-2.766-.27-3.682-.687C3.356 13.875 3 13.373 3 13v-1.302c.271.202.58.378.904.525C4.978 12.71 6.427 13 8 13s3.022-.289 4.096-.777c.324-.147.633-.323.904-.525Z"/>
                 </svg>
             </button>}
+            <input type="text" style={{ margin: '3px 5%', borderRadius: '5px', padding: '3px', width: '90%' }}
+            placeholder="Room Code" onChange={(e)=>setRoomCode(e.target.value)}></input>
+            <button onClick={()=>joinRoom()}>Join Room</button>
+            <p>In Room: {joinedRoom}</p>
             <LoginButton style={{marginLeft: '10%'}}/>
             <StyledMenu // Dropdown menu connected to Manage Project Button
               id="customized-menu"

app/src/index.js

@@ -65,9 +65,12 @@ let previousState = store.getState();
 // sending info to backend whenever the redux store changes
 const handleStoreChange = debounce(() => {
   const newState = store.getState();
+  if (store.getState().roomCodeSlice.roomCode!==''){
+    socket.emit('room-code', store.getState().roomCodeSlice.roomCode)
+  }
   if (newState !== previousState){
     console.log('before sending to server: ', newState)
-    socket.emit('custom-event', 'sent from front-end', JSON.stringify(newState))
+    socket.emit('custom-event', 'sent from front-end', JSON.stringify(newState), store.getState().roomCodeSlice.roomCode)
     previousState = newState;
   }
 }, 100);

app/src/public/styles/style.css

@@ -566,6 +566,11 @@ NAVBAR
   top: 45px;
   padding-top: 5px;
   padding-bottom: 5px;
+  display: hidden;
+}
+
+.hideNavDropDown{
+  display: none;
 }
 
 .navDropDown button{
@@ -580,6 +585,10 @@ NAVBAR
   align-items: center;
 }
 
+.navDropDown p{
+  margin: 3px 5%;
+}
+
 .navDropDown button:hover{
   cursor: pointer;
   background-color: #007ab8

app/src/redux/reducers/rootReducer.js

@@ -6,6 +6,7 @@ import codePreviewReducer from './slice/codePreviewSlice';
 import contextReducer from './slice/contextReducer';
 import appStateReducer from './slice/appStateSlice.ts';
 import styleReducer from './slice/styleSlice';
+import roomCodeReducer from './slice/roomCodeSlice'
 
 const rootReducer = combineReducers({
   // Add desired slices here
@@ -14,7 +15,7 @@ const rootReducer = combineReducers({
   contextSlice: contextReducer,
   appState: appStateReducer,
   styleSlice: styleReducer,
-  
+  roomCodeSlice: roomCodeReducer,
 });
 
 export default rootReducer;

app/src/redux/reducers/slice/roomCodeSlice.js

@@ -0,0 +1,22 @@
+// With redux toolkit you can combine all the actions, action types, and reducers into one 'slice'
+import { createSlice } from '@reduxjs/toolkit';
+// Sets initial state to false
+const initialState = {
+  roomCode: ''
+};
+
+// Creates new slice with the name darkMode, initial state, and reducer function which toggles dark mode state between true and false
+const roomCodeSlice = createSlice({
+  name: 'roomCode',
+  initialState,
+  reducers: {
+    changeRoom: (state, action) => {
+      state.roomCode = action.payload
+    }
+  }
+});
+
+// Exports the action creator function to be used with useDispatch
+export const { changeRoom } = roomCodeSlice.actions;
+// Exports so we can combine in rootReducer
+export default roomCodeSlice.reducer;

server/server.mjs

@@ -86,10 +86,17 @@ const io = new Server(httpServer, {
 
 io.on('connection', socket => {
   console.log(socket.id)
-  socket.on('custom-event', (string, redux_store) => {
-    // console.log(string)
-    // console.log(redux_store)
-    socket.broadcast.emit('receive message', redux_store)
+  socket.on('custom-event', (string, redux_store, room) => {
+    console.log(room)
+    if (room){
+      socket.to(room).emit('receive message', redux_store)
+    } else {
+      socket.broadcast.emit('receive message', redux_store)
+    }
+  })
+  socket.on('room-code', (roomCode)=>{
+    console.log('joined room: ', roomCode)
+    socket.join(roomCode)
   })
 })