Merge pull request #32 from oslabs-beta/cyrus-styling

More room entry type checking.

Author: Eliza612

app/src/components/left/ProfilePage.tsx

@@ -41,7 +41,7 @@ const ProfilePage = () => {
   }, []);
 
   return (
-    <Card sx={{ minWidth: 275, color: 'white', backgroundColor: 'black' }}>
+    <div sx={{ minWidth: 275, color: 'white' }}>
       <CardContent>
         <Typography variant="h5" component="div" sx={{ color: '#019cde' }}>
           {username ? username : null}
@@ -83,7 +83,7 @@ const ProfilePage = () => {
       <CardActions>
         <Button
           size="small"
-          sx={{ color: '#189bd7' }}
+          sx={{ color: '#0671e3' }}
           href="https://legacy.reactjs.org/tutorial/tutorial.html"
         >
           React docs
@@ -103,22 +103,21 @@ const ProfilePage = () => {
       <CardActions>
         <Button
           size="small"
-          sx={{ color: '#189bd7' }}
+          sx={{ color: '#0671e3' }}
           href="https://www.mongodb.com/"
         >
           MongoDB
         </Button>
         <Button
           size="small"
-          sx={{ color: '#189bd7' }}
+          sx={{ color: '#0671e3' }}
           href="https://aws.amazon.com/what-is/sql/#:~:text=Structured%20query%20language%20(SQL)%20is,relationships%20between%20the%20data%20values."
         >
           AWS SQL
         </Button>
       </CardActions>
-
       <Divider />
-    </Card>
+    </div>
   );
 };
 

app/src/components/left/RoomsContainer.tsx

@@ -65,6 +65,7 @@ const RoomsContainer = () => {
   const [isPasswordAttemptIncorrect, setIsPasswordAttemptIncorrect] =
     useState(true);
   const [isCollabRoomTaken, setIsCollabRoomTaken] = useState(false);
+  const [isRoomAvailable, setIsRoomAvailable] = useState(true);
 
   const dispatch = useDispatch();
   const roomCode = useSelector((store: RootState) => store.roomSlice.roomCode);
@@ -74,6 +75,7 @@ const RoomsContainer = () => {
     (store: RootState) => store.roomSlice.password
   );
 
+
   const userJoinCollabRoom = useSelector(
     (store: RootState) => store.roomSlice.userJoinCollabRoom
   );
@@ -118,6 +120,11 @@ const RoomsContainer = () => {
       socket.on('room is already taken', () => {
         setIsCollabRoomTaken(true);
       });
+
+      socket.on('room does not exist', () => {
+        setIsRoomAvailable(false);
+
+      });
       //If you are the host: send current state to server when a new user joins
       socket.on('requesting state from host', (callback) => {
         const newState = store.getState(); //pull the current state
@@ -369,13 +376,18 @@ const RoomsContainer = () => {
       createNewCollabRoom();
     }
   };
+
   const userColors = [
-    '#FC00BD',
-    '#D0FC00',
-    '#00DBFC',
-    '#FD98B8',
-    '#FCAA00',
-    '#9267FF'
+    '#0671e3',
+    '#2fd64d',
+    '#f0c000',
+    '#fb4c64',
+    '#be5be8',
+    '#fe9c06',
+    '#f6352b',
+    '#1667d1',
+    '#1667d1',
+    '#50ed6a'
   ];
 
   return (
@@ -475,20 +487,39 @@ const RoomsContainer = () => {
               placeholder="Nickname"
               onChange={(e) => dispatch(setUserName(e.target.value))}
             />
-            <TextField
-              error={isCollabRoomTaken}
-              fullWidth
-              hiddenLabel={true}
-              id="filled-hidden-label-small"
-              variant="standard"
-              size="small"
-              value={roomCode}
-              placeholder="Room Name"
-              onChange={(e) => dispatch(setRoomCode(e.target.value))}
-              className="enterRoomInput"
-              onKeyDown={handleKeyDown}
-              helperText={isCollabRoomTaken ? 'Room name already taken' : ''}
-            />
+            {isJoinCallabRoom ? (
+              <TextField
+                error={isRoomAvailable === false}
+                fullWidth
+                hiddenLabel={true}
+                id="filled-hidden-label-small"
+                variant="standard"
+                size="small"
+                value={roomCode}
+                placeholder="Room Name"
+                onChange={(e) => dispatch(setRoomCode(e.target.value))}
+                className="enterRoomInput"
+                onKeyDown={handleKeyDown}
+                helperText={
+                  isRoomAvailable === false ? `Room doesn't exist` : ''
+                }
+              />
+            ) : (
+              <TextField
+                error={isCollabRoomTaken}
+                fullWidth
+                hiddenLabel={true}
+                id="filled-hidden-label-small"
+                variant="standard"
+                size="small"
+                value={roomCode}
+                placeholder="Room Name"
+                onChange={(e) => dispatch(setRoomCode(e.target.value))}
+                className="enterRoomInput"
+                onKeyDown={handleKeyDown}
+                helperText={isCollabRoomTaken ? 'Room name already taken' : ''}
+              />
+            )}
             {isJoinCallabRoom ? (
               <TextField
                 error={isPasswordAttemptIncorrect === false}
@@ -523,11 +554,15 @@ const RoomsContainer = () => {
               variant="contained"
               disabled={checkInputField(userName, roomCode, roomCode)}
               fullWidth
-              onClick={(e) =>
+              onClick={(e) => {
                 isJoinCallabRoom
                   ? joinExistingCollabRoom()
-                  : createNewCollabRoom()
-              }
+                  : createNewCollabRoom();
+
+                setJoinedPasswordAttempt('');
+                setIsCollabRoomTaken(false);
+                setIsRoomAvailable(true);
+              }}
               sx={{
                 backgroundColor: '#e9e9e9',
                 color: '#253b80',

app/src/components/left/Sidebar.tsx

@@ -23,10 +23,10 @@ const Sidebar: React.FC<SidebarProps> = ({
     oldValue = newValue;
   };
 
-  //the following allows users to click on the left panel to expand and collapse.
+    //the following allows users to click on the left panel to expand and collapse.
   // We decided to freeze so we've commented this and line 41 out
 
-  
+
   // const handleTabClick = (event: React.MouseEvent, oldValue: number) => {
   //   if (activeTab === oldValue) {
   //     setActiveTab(null);

app/src/components/main/Canvas.tsx

@@ -307,12 +307,16 @@ const Canvas = forwardRef<HTMLDivElement, CanvasProps>(({ zoom }, ref) => {
 
   // Array of colors that color code users as they join the room (In a set order)
   const userColors = [
-    '#FC00BD',
-    '#D0FC00',
-    '#00DBFC',
-    '#FD98B8',
-    '#FCAA00',
-    '#9267FF'
+    '#0671e3',
+    '#2fd64d',
+    '#f0c000',
+    '#fb4c64',
+    '#be5be8',
+    '#fe9c06',
+    '#f6352b',
+    '#1667d1',
+    '#1667d1',
+    '#50ed6a'
   ];
 
   const zoomedChildren: React.CSSProperties = {
@@ -380,7 +384,7 @@ const Canvas = forwardRef<HTMLDivElement, CanvasProps>(({ zoom }, ref) => {
               color: '#ffffff',
               backgroundColor: '#151515',
               zIndex: 0,
-              border: '2px solid #354e9c',
+              border: '2px solid #0671e3',
               whiteSpace: 'nowrap',
               cursor: 'pointer',
               textTransform: 'none'

app/src/components/main/CanvasContainer.tsx

@@ -88,7 +88,7 @@ function CanvasContainer(props: CanvasContainerProps): JSX.Element {
     color: '#ffffff',
     backgroundColor: '#151515',
     zIndex: 0,
-    border: '2px solid #354e9c'
+    border: '2px solid #0671e3'
   };
 
   return (

app/src/components/top/NavBar.tsx

@@ -269,4 +269,4 @@ const NavBar: React.FC = () => {
   );
 };
 
-export default NavBar;
+export default NavBar;

app/src/components/top/NewExportButton.tsx

@@ -86,4 +86,4 @@ export default function NewExportButton(): React.JSX.Element {
       {modal}
     </div>
   );
-}
+}

app/src/public/icons/win/blue-R-white-bg.png

@@ -3,12 +3,12 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>ReacType</title>
+    <title>Reactype</title>
     <link rel="stylesheet" type="text/css" href="./style.css" />
     <link
       rel="icon"
       type="image/x-icon"
-      href="/app/src/public/icons/win/icon.ico"
+      href="/app/src/public/icons/win/blue-R-white-bg.png"
     />
   </head>
   <body>

index.html

@@ -5,29 +5,20 @@ const { expressMiddleware } = require('@apollo/server/express4');
 import cors from 'cors';
 import bodyParser from 'body-parser';
 const { json, urlencoded } = bodyParser;
-
-// //possibly redundant
 const { makeExecutableSchema } = require('@graphql-tools/schema');
 
 import express from 'express';
 import cookieParser from 'cookie-parser';
-
 import config from '../config.js';
 const { API_BASE_URL, DEV_PORT } = config;
-
 import path from 'path';
-
 import userController from './controllers/userController';
 import cookieController from './controllers/cookieController';
 import sessionController from './controllers/sessionController';
 import projectController from './controllers/projectController';
 import marketplaceController from './controllers/marketplaceController';
-
-// // docker stuff
 import { fileURLToPath } from 'url';
 import { dirname } from 'path';
-
-// // env file
 import dotenv from 'dotenv';
 dotenv.config();
 
@@ -40,9 +31,8 @@ const isTest = process.env.NODE_ENV === 'test';
 
 app.use(express.json({ limit: '100mb' }));
 app.use(express.urlencoded({ limit: '100mb', extended: true }));
-app.use(cookieParser()); //added cookie parser
-// Routes
-// const stylesRouter = require('./routers/stylesRouter');
+app.use(cookieParser());
+
 import stylesRouter from './routers/stylesRouter';
 
 // enable cors
@@ -59,13 +49,8 @@ app.use(
   })
 );
 
-// TODO: github Oauth still needs debugging
-// on initial login, redirect back to app is not working correctly when in production environment
-// subsequent logins seem to be working fine, however
-
 // NOTE from v13.0 team: GitHub OAuth works fine in Electron production app and the backend for Electron production app is deployed on Heroku at https://reactype-caret.herokuapp.com/ (get credentials from instructor )
 
-// V.15 Team: Github Oauth and Google Oauth works! (starts here)
 const passport = require('passport');
 const passportSetup = require('./routers/passport-setup');
 const session = require('express-session');
@@ -81,15 +66,11 @@ app.use(
 );
 app.use(passport.initialize());
 app.use(passport.session());
-
-// go to other files
-// 8080 only for the container
 app.use('/auth', authRoutes);
 
 import { createServer } from 'http';
 import { Server } from 'socket.io';
 
-//creating an HTTP server and setting up socket.io
 const httpServer = createServer(app);
 const io = new Server(httpServer, {
   transports: ['websocket'],
@@ -130,6 +111,10 @@ io.on('connection', (client) => {
           io.emit('room is already taken');
         }
 
+        if (!roomLists[roomCode] && method === 'JOIN') {
+          io.emit('room does not exist');
+        }
+
         if (!roomLists[roomCode] && method === 'CREATE') {
           roomLists[roomCode] = {};
           roomLists[roomCode].userList = {};
@@ -435,17 +420,7 @@ io.on('connection', (client) => {
   });
 });
 
-//--------------------------------
-
-/*
-GraphQl Router
-*/
-/* ******************************************************************* */
-
-// Query resolvers
 import Query from './graphQL/resolvers/query';
-
-// Mutation resolvers
 import Mutation from './graphQL/resolvers/mutation';
 
 // package resolvers into one variable to pass to Apollo Server
@@ -460,28 +435,8 @@ app.use('/user-styles', stylesRouter);
 // schemas used for graphQL
 
 import typeDefs from './graphQL/schema/typeDefs';
-
-// 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 });
-
-// //v4 syntax
-
-// await server.start();
-// app.use(
-//   '/graphql',
-//   cors(),
-//   json(),
-//   expressMiddleware(server, {
-//     context: async ({ req }) => ({ token: req.headers.token })
-//   })
-// );
-
-/** ****************************************************************** */
-
 app.post(
   '/signup',
   userController.createUser,
@@ -594,15 +549,6 @@ 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)');
-// });
-// catch-all route handler
 app.use('/*', (req, res) => res.status(404).send('Page not found'));
 
 // Global error handler