merge with most recent dev

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

@@ -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/index.js

@@ -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/public/styles/style.css

@@ -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/rootReducer.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;

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

@@ -4,7 +4,7 @@ import { ApolloServer } from '@apollo/server';
 import { expressMiddleware } from '@apollo/server/express4';
 import cors from 'cors';
 import bodyParser from 'body-parser';
-const {json, urlencoded} = bodyParser;
+const { json, urlencoded } = bodyParser;
 
 //possibly redundant
 import { makeExecutableSchema } from '@graphql-tools/schema';
@@ -17,7 +17,6 @@ import DEV_PORT from '../config.js';
 // const path = require('path');
 import path from 'path';
 
-
 import userController from './controllers/userController.js';
 import cookieController from './controllers/cookieController.js';
 import sessionController from './controllers/sessionController.js';
@@ -27,7 +26,6 @@ import projectController from './controllers/projectController.js';
 import { fileURLToPath } from 'url';
 import { dirname } from 'path';
 
-
 // env file
 import dotenv from 'dotenv';
 dotenv.config();
@@ -68,51 +66,52 @@ app.use(
 // V.15 Team: Github Oauth and Google Oauth works! (starts here)
 // const passport = require('passport');
 import passport from 'passport';
-import passportSetup from './routers/passport-setup.js'
-import session from 'express-session'
-import authRoutes from './routers/auth.js'
+import passportSetup from './routers/passport-setup.js';
+import session from 'express-session';
+import authRoutes from './routers/auth.js';
 
-app.use(session({
-  secret: process.env.SESSION_SECRET,
-  resave: false,
-  saveUninitialized: true,
-  cookie: { maxAge: 24*60*60*1000 }
-}))
+app.use(
+  session({
+    secret: process.env.SESSION_SECRET,
+    resave: false,
+    saveUninitialized: true,
+    cookie: { maxAge: 24 * 60 * 60 * 1000 }
+  })
+);
 
 app.use(passport.initialize());
 app.use(passport.session());
 
 // go to other files
 // 8080 only for the container
-app.use('/auth', authRoutes)
+app.use('/auth', authRoutes);
 
-import { createServer } from 'http'
-import { Server } from 'socket.io'
+import { createServer } from 'http';
+import { Server } from 'socket.io';
 
-const httpServer = createServer(app)
+const httpServer = createServer(app);
 const io = new Server(httpServer, {
   transports: ['websocket'],
   cors: {
     origin: ['http://localhost:5656', 'http://localhost:8080']
   }
-})
-
-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('error', (error) => {
-    console.error(`Socket error: ${error}`);
+io.on('connection', (socket) => {
+  console.log(socket.id);
+  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);
+  });
+});
 
 /*
 GraphQl Router
@@ -131,33 +130,29 @@ const resolvers = {
   Mutation
 };
 
-
-
 // Re-direct to route handlers:
 app.use('/user-styles', stylesRouter);
 
 // schemas used for graphQL
 
 import typeDefs from './graphQL/schema/typeDefs.js';
 
-
 // instantiate Apollo server and attach to Express server, mounted at 'http://localhost:PORT/graphql'
 
 //use make exacutable schema to allow schema to be passed to new server
-const schema = makeExecutableSchema({typeDefs, resolvers});
-
-const server = new ApolloServer({schema});
+const schema = makeExecutableSchema({ typeDefs, resolvers });
 
+const server = new ApolloServer({ schema });
 
 //v4 syntax
-await server.start()
+await server.start();
 app.use(
   '/graphql',
   cors(),
   json(),
   expressMiddleware(server, {
-    context: async ({ req }) => ({ token: req.headers.token }),
-  }),
+    context: async ({ req }) => ({ token: req.headers.token })
+  })
 );
 
 /** ****************************************************************** */
@@ -201,11 +196,11 @@ app.delete(
 );
 // serve index.html on the route '/'
 const isDocker = process.env.IS_DOCKER === 'true';
-console.log('this is running on docker: ', isDocker)
+console.log('this is running on docker: ', isDocker);
 
 //if in production mode, statically serve everything in the build folder on the route '/dist'
-if (process.env.NODE_ENV == 'production'){
-  app.use('/dist', express.static(path.join(__dirname, '/app/dist')))
+if (process.env.NODE_ENV == 'production') {
+  app.use('/dist', express.static(path.join(__dirname, '/app/dist')));
 }
 
 app.get('/', (req, res) => {
@@ -217,26 +212,26 @@ app.get('/', (req, res) => {
 
 app.get('/bundle.js', (req, res) => {
   return res.status(200).sendFile(path.join(process.cwd(), 'bundle.js'));
-})
+});
 
-if (isDocker){
+if (isDocker) {
   app.get('/main.css', (req, res) => {
     return res.status(200).sendFile(path.join(process.cwd(), 'main.css'));
-  })
+  });
 }
 
 app.get('/test', (req, res) => {
   res.send('test request is working');
-})
+});
 
 // only for testing purposes in the dev environment
 // app.get('/', function(req, res) {
 //   res.send('Houston, Caret is in orbit!');
 // });
 
 app.use('http://localhost:8080/*', (req, res) => {
-  res.status(404).send('not a valid page (404 page)')
-})
+  res.status(404).send('not a valid page (404 page)');
+});
 // catch-all route handler
 app.use('/*', (req, res) => res.status(404).send('Page not found'));
 
@@ -253,7 +248,9 @@ app.use((err, req, res, next) => {
 });
 
 // starts server on PORT
-httpServer.listen(5656, () => console.log(`Server listening on port: ${PORT.DEV_PORT}`))
+httpServer.listen(5656, () =>
+  console.log(`Server listening on port: ${PORT.DEV_PORT}`)
+);
 
 if (isTest) module.exports = app;
 // export default app;