Merge pull request #9 from oslabs-beta/Rick/backend

Rick/backend

Author: sonyahu15

app/src/Dashboard/ProjectContainer.tsx

@@ -13,7 +13,6 @@ import { theme1, theme2 } from '../public/styles/theme';
 
 
 declare module '@mui/styles/defaultTheme' {
-  // eslint-disable-next-line @typescript-eslint/no-empty-interface
   interface DefaultTheme extends Theme {}
 }
 

app/src/components/App.tsx

@@ -5,7 +5,6 @@ import {
   setInitialState,
   toggleLoggedIn
 } from '../redux/reducers/slice/appStateSlice';
-//redux toolkit addition
 import { useDispatch, useSelector } from 'react-redux';
 
 import AppContainer from '../containers/AppContainer';
@@ -20,16 +19,16 @@ import { saveProject } from '../helperFunctions/projectGetSaveDel';
 export const App = (): JSX.Element => {
   const state = useSelector((store: RootState) => store.appState);
 
-  const [toggleAttempt, setToggleAttempt] = useState(false);
   const dispatch = useDispatch();
   // checks if user is signed in as guest or actual user and changes loggedIn boolean accordingly
   useEffect(() => {
     if (window.localStorage.getItem('ssid') !== 'guest') {
       dispatch(toggleLoggedIn(true));
     }
-    //setToggleAttempt(!toggleAttempt);
   }, []);
 
+  // FOR LOCAL FORAGE: still trying to get this to work
+
   // following useEffect runs on first mount
   // useEffect(() => {
   //   // console.log('cookies.get in App', Cookies.get())
@@ -95,7 +94,7 @@ export const App = (): JSX.Element => {
   //     }, 15000);
   //   }
   // }, [state]);
-  // uncomment below to log state
+
 
   return (
     <div className="app">

app/src/components/ContextAPIManager/AssignTab/components/ContextDropDown.tsx

@@ -2,8 +2,7 @@ import React, { Fragment, useState, useEffect } from 'react';
 import TextField from '@mui/material/TextField';
 import Autocomplete, { createFilterOptions } from '@mui/material/Autocomplete';
 import Box from '@mui/material/Box';
-import { useSelector } from 'react-redux';
-import { RootState } from '../../../../redux/store';
+
 
 const filter = createFilterOptions();
 

app/src/components/left/RoomsContainer.tsx

@@ -6,7 +6,7 @@ import React, { useState } from 'react';
 import { RootState } from '../../redux/store';
 import TextField from '@mui/material/TextField';
 import { allCooperativeState } from '../../redux/reducers/slice/appStateSlice';
-import { changeRoom } from '../../redux/reducers/slice/roomCodeSlice';
+import { setRoomCode, setUserName, setUserJoined, setUserList } from '../../redux/reducers/slice/roomSlice';
 import { codePreviewCooperative } from '../../redux/reducers/slice/codePreviewSlice';
 import config from '../../../../config';
 import { cooperativeStyle } from '../../redux/reducers/slice/styleSlice';
@@ -21,21 +21,18 @@ import debounce from '../../../../node_modules/lodash/debounce.js';
 let socket;
 const { API_BASE_URL } = config;
 const RoomsContainer = () => {
-  const [roomCode, setRoomCode] = useState('');
-  const [userName, setUserName] = useState('');
-  const [userList, setUserList] = useState(new Map());
-  // const [confirmRoom, setConfirmRoom] = useState('');
-  const [userJoined, setUserJoined] = useState(false); //setting up state for joinning a room
-  const [emptyInput, setEmptyInput] = useState(false);
-
+ 
   const dispatch = useDispatch();
-  const { state, joinedRoom } = useSelector((store: RootState) => ({
+  const { state, roomCode, userName, userList, userJoined } = useSelector((store: RootState) => ({
     state: store.appState,
-    joinedRoom: store.roomCodeSlice.roomCode
+    roomCode: store.roomSlice.roomCode,
+    userName: store.roomSlice.userName,
+    userList: store.roomSlice.userList,
+    userJoined: store.roomSlice.userJoined,
   }));
   React.useEffect(() => {
-    console.log('You Joined Room: ', joinedRoom);
-  }, [joinedRoom]);
+    console.log('You Joined Room---front end:', roomCode);
+  }, [roomCode]);
 
   function initSocketConnection(roomCode) {
     if (socket) {
@@ -88,23 +85,20 @@ const RoomsContainer = () => {
   }
 
   let previousState = store.getState();
-  // console.log('Store States: ', store.getState);
   // sending info to backend whenever the redux store changes
-  //working!
   const handleStoreChange = debounce(() => {
     const newState = store.getState();
-    const roomCode = newState.roomCodeSlice.roomCode;
+    const roomCode = newState.roomSlice.roomCode;
 
-    if (roomCode !== '') {
-      //why emitting room code every 100 milisecond
-      // Emit the current room code
-      socket.emit('room-code', roomCode);
-    }
+    //why emitting room code every 100 milisecond?
+    // if (roomCode !== '') {
+    //   // Emit the current room code
+    //   socket.emit('room-code', roomCode);
+    // }
     if (newState !== previousState) {
       // Send the current state to the server
       socket.emit(
         'custom-event',
-        'sent from front-end',
         JSON.stringify(newState),
         roomCode
       );
@@ -121,17 +115,15 @@ const RoomsContainer = () => {
   function joinRoom() {
     // Call handleUserEnteredRoom when joining a room
     handleUserEnteredRoom(roomCode);
-    dispatch(changeRoom(roomCode));
-    // setConfirmRoom((confirmRoom) => roomCode);
-    setUserJoined(true); //setting joined room to true for rendering leave room button
+    dispatch(setRoomCode(roomCode));
+    dispatch(setUserJoined(true)); //setting joined room to true for rendering leave room button
   }
 
   function leaveRoom() {
     if (socket) socket.disconnect(); //disconnecting socket
-    dispatch(changeRoom(''));
-    setRoomCode('');
-    setUserName('');
-    setUserJoined(false); //setting joined to false so join button appear
+    dispatch(setRoomCode(''));
+    dispatch(setUserName(''));
+    dispatch(setUserJoined(false)); //setting joined to false so join button appear
   }
 
   //checking if both text field have any input (not including spaces)
@@ -159,7 +151,7 @@ const RoomsContainer = () => {
         {' '}
         {/* live room display */}
         <Typography variant="h6" color={'white'}>
-          Live Room: {joinedRoom}
+          Live Room: {roomCode}
         </Typography>
         {/*  Set up condition rendering depends on if user joined a room then render leave button if not render join button */}
         {userJoined ? (
@@ -187,7 +179,7 @@ const RoomsContainer = () => {
               size="small"
               value={userName}
               placeholder="Input nickname"
-              onChange={(e) => setUserName(e.target.value)}
+              onChange={(e) => dispatch(setUserName(e.target.value))}
             />
             <TextField
               hiddenLabel={true}
@@ -196,7 +188,7 @@ const RoomsContainer = () => {
               size="small"
               value={roomCode}
               placeholder="Input Room Number"
-              onChange={(e) => setRoomCode(e.target.value)}
+              onChange={(e) => dispatch(setRoomCode(e.target.value))}
             />
 
             <Button

app/src/components/main/Canvas.tsx

@@ -5,7 +5,6 @@ import {
   addChild,
   changeFocus,
   snapShotAction
-  // toggleCodePreview
 } from '../../redux/reducers/slice/appStateSlice';
 import { useDispatch, useSelector } from 'react-redux';
 

app/src/components/right/ContextMenu.tsx

@@ -47,7 +47,6 @@ function ProjectsDialog(props: ProjectDialogProps) {
       deleteProject(selectedProject);
       // localforage.removeItem(window.localStorage.getItem('ssid'));
       dispatch(setInitialState(initialState))
-      // handleAlertOpen()
       deleteAlert()
       onClose()
   };

app/src/components/right/DeleteProjects.tsx

@@ -1,6 +1,5 @@
 import React, { Ref, useEffect, useRef } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-
 import { Button } from '@mui/material';
 import DeleteProjects from '../right/DeleteProjects';
 import ExportButton from '../right/ExportButton';
@@ -14,17 +13,9 @@ import MenuItem from '@mui/material/MenuItem';
 import ProjectsFolder from '../right/OpenProjects';
 import { RootState } from '../../redux/store';
 import SaveProjectButton from '../right/SaveProjectButton';
-import { allCooperativeState } from '../../redux/reducers/slice/appStateSlice';
-import { changeRoom } from '../../redux/reducers/slice/roomCodeSlice';
-import { codePreviewCooperative } from '../../redux/reducers/slice/codePreviewSlice';
 import config from '../../../../config';
-import { cooperativeStyle } from '../../redux/reducers/slice/styleSlice';
 import createModal from '../right/createModal';
 import createStyles from '@mui/styles/createStyles';
-// for websockets
-import debounce from 'lodash/debounce';
-// websocket front end starts here
-import { io } from 'socket.io-client';
 import makeStyles from '@mui/styles/makeStyles';
 import { resetAllState } from '../../redux/reducers/slice/appStateSlice';
 import { setStyle } from '../../redux/reducers/slice/styleSlice';
@@ -33,90 +24,6 @@ import withStyles from '@mui/styles/withStyles';
 
 const { API_BASE_URL } = config;
 
-// Part  - join room and room code functionality
-// let socket;
-
-// function initSocketConnection(roomCode) {
-//   if (socket) {
-//     socket.disconnect();
-//   }
-
-//   socket = io(API_BASE_URL, {
-//     transports: ['websocket']
-//   });
-
-//   socket.on('connect', () => {
-//     console.log(`You connected with id: ${socket.id}`);
-//     socket.emit('join-room', roomCode); // Join the room when connected
-//   });
-
-//   // Receiving the room state from the backend
-//   socket.on('room-state-update', (stateFromServer) => {
-//     const newState = JSON.parse(stateFromServer);
-//     // Dispatch actions to update your Redux store with the received state
-//     store.dispatch(allCooperativeState(newState.appState));
-//     store.dispatch(codePreviewCooperative(newState.codePreviewCooperative));
-//     store.dispatch(cooperativeStyle(newState.styleSlice));
-//   });
-
-//   // receiving the message from the back end
-//   socket.on('receive message', (event) => {
-//     // console.log('message from server: ', event);
-//     let currentStore: any = JSON.stringify(store.getState());
-//     if (currentStore !== event) {
-//       currentStore = JSON.parse(currentStore);
-//       event = JSON.parse(event);
-//       if (currentStore.darkMode.isDarkMode !== event.darkMode.isDarkMode) {
-//         store.dispatch(toggleDarkMode());
-//       } else if (currentStore.appState !== event.appState) {
-//         store.dispatch(allCooperativeState(event.appState));
-//       } else if (
-//         currentStore.codePreviewSlice !== event.codePreviewCooperative
-//       ) {
-//         store.dispatch(codePreviewCooperative(event.codePreviewCooperative));
-//       } else if (currentStore.styleSlice !== event.styleSlice) {
-//         store.dispatch(cooperativeStyle(event.styleSlice));
-//       }
-//     }
-//     console.log('updated user Store from another user: ', store.getState());
-//   });
-// }
-
-// function handleUserEnteredRoom(roomCode) {
-//   initSocketConnection(roomCode);
-// }
-
-// console.log(store.getState());
-// let previousState = store.getState();
-
-// // sending info to backend whenever the redux store changes
-// const handleStoreChange = debounce(() => {
-//   const newState = store.getState();
-//   const roomCode = newState.roomCodeSlice.roomCode;
-
-//   if (roomCode !== '') {
-//     // Emit the current room code
-//     socket.emit('room-code', roomCode);
-//   }
-
-//   if (newState !== previousState) {
-//     // Send the current state to the server
-//     socket.emit(
-//       'custom-event',
-//       'sent from front-end',
-//       JSON.stringify(newState),
-//       roomCode
-//     );
-//     previousState = newState;
-//   }
-// }, 100);
-
-// store.subscribe(() => {
-//   if (socket) {
-//     handleStoreChange();
-//   }
-// });
-
 const useStyles = makeStyles((theme) =>
   createStyles({
     root: {
@@ -184,13 +91,10 @@ function navbarDropDown(props) {
 
   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 { state } = useSelector((store: RootState) => ({
     state: store.appState,
-    // joinedRoom: store.roomCodeSlice.roomCode
   }));
   const closeModal = () => setModal('');
   const handleClick = (event) => {
@@ -243,18 +147,6 @@ function navbarDropDown(props) {
     props.setDropMenu(false);
   };
 
-  // React.useEffect(() => {
-  //   console.log('joinedRoom: ', joinedRoom);
-  // }, [joinedRoom]);
-
-  // function joinRoom() {
-  //   dispatch(changeRoom(roomCode));
-  //   setConfirmRoom((confirmRoom) => roomCode);
-
-  //   // Call handleUserEnteredRoom when joining a room
-  //   handleUserEnteredRoom(roomCode);
-  // }
-
   let showMenu = props.dropMenu ? 'navDropDown' : 'hideNavDropDown';
 
   //for closing the menu on clicks outside of it.

app/src/components/top/NavBarButtons.tsx

@@ -5,7 +5,6 @@ import {
   ThemeProvider
 } from '@mui/material/styles';
 import { theme1, theme2 } from '../public/styles/theme';
-// Imports for redux toolkit usage
 import { useDispatch, useSelector } from 'react-redux';
 
 import LeftContainer from './LeftContainer';
@@ -18,7 +17,6 @@ import { RootState } from '../redux/store';
 import { setStyle } from '../redux/reducers/slice/styleSlice';
 import { useHistory } from 'react-router-dom';
 declare module '@mui/styles/defaultTheme' {
-  // eslint-disable-next-line @typescript-eslint/no-empty-interface
   interface DefaultTheme extends Theme {}
 }
 

app/src/containers/AppContainer.tsx

@@ -1,5 +1,4 @@
 import React, { useState, useEffect } from 'react';
-
 import ContentArea from '../components/left/ContentArea';
 import Sidebar from '../components/left/Sidebar';