More code cleaning. Down to 2855 problems.

Author: Spencer-Lau

__tests__/spec.ts

@@ -0,0 +1,32 @@
+// import 'regenerator-runtime/runtime'; // if there is an error with moduleNameMapper, npm -S install regenerator-runtime
+
+//const { Application } = require('spectron');
+// const electronPath = require('electron');
+// const path = require('path');
+
+// let app;
+
+// // beforeAll(() => {
+// //   // create a new app to test with setTimeout to be 15000 because the app takes a few seconds to spin up
+// //   app = new Application({
+// //     path: electronPath,
+// //     chromeDriverArgs: ['--disable-extensions'],
+// //     args: [path.join(__dirname, '../app/electron/main.js')] // this is the path from this test file to main.js inside electron folder
+// //   });
+// //   return app.start();
+// // }, 15000);
+
+// // getWindowsCount() will return 2 instead of 1 in dev mode (one for the actual app, one in the browser at localhost:8080 in dev mode)
+// xtest('Displays App window', async () => {
+//   const windowCount = await app.client.getWindowCount();
+//   // expect(windowCount).toBe(1); // this returns true/passed if in production mode, change mode in script "test" to 'production' instead of 'test'
+//   expect(windowCount).toBe(2); // 'dev' or 'test' mode results in 2 windows (one for the app and one for the browser)
+// });
+
+// /* we want to test other functionalities of app.client such as text, title, etc. but even the examples from the official spectron website
+// or github repo did not yield the same outcomes as demonstrated. So we stopped testing Electron app here */
+// // afterAll(() => {
+// //   if (app && app.isRunning()) {
+// //     return app.stop();
+// //   }
+// // });

app/src/Dashboard/NavbarDash.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable max-len */
 import React, { useState, useContext } from 'react';
 import { Theme } from '@mui/material/styles';
 import withStyles from '@mui/styles/withStyles';
@@ -23,44 +24,42 @@ import { setStyle } from '../redux/reducers/slice/styleSlice';
 import { useSelector, useDispatch } from 'react-redux';
 
 // NavBar text and button styling
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      flexGrow: 1,
-      width: '100%'
-    },
-    menuButton: {
-      marginRight: theme.spacing(2),
-      color: 'white'
-    },
-    title: {
-      flexGrow: 1,
-      color: 'white'
-    },
-    manageProject: {
-      display: 'flex',
-      justifyContent: 'center'
-    }
-  })
-);
+const useStyles = makeStyles((theme: Theme) => createStyles({
+  root: {
+    flexGrow: 1,
+    width: '100%',
+  },
+  menuButton: {
+    marginRight: theme.spacing(2),
+    color: 'white',
+  },
+  title: {
+    flexGrow: 1,
+    color: 'white',
+  },
+  manageProject: {
+    display: 'flex',
+    justifyContent: 'center',
+  },
+}));
 // sorting options
 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
     elevation={0}
     // getContentAnchorEl={null}
     anchorOrigin={{
       vertical: 'bottom',
-      horizontal: 'center'
+      horizontal: 'center',
     }}
     transformOrigin={{
       vertical: 'top',
-      horizontal: 'center'
+      horizontal: 'center',
     }}
     {...props}
   />
@@ -69,10 +68,10 @@ const StyledMenuItem = withStyles((theme) => ({
   root: {
     '&:focus': {
       '& .MuiListItemIcon-root, & .MuiListItemText-primary': {
-        color: theme.palette.common.white
-      }
-    }
-  }
+        color: theme.palette.common.white,
+      },
+    },
+  },
 }))(MenuItem);
 
 /**
@@ -117,7 +116,7 @@ export default function NavBar(props): JSX.Element {
             style={{
               display: 'inline-flex',
               justifyContent: 'center',
-              textDecoration: 'none'
+              textDecoration: 'none',
             }}
           >
             <Avatar src={greenLogo}></Avatar>
@@ -126,7 +125,7 @@ export default function NavBar(props): JSX.Element {
               style={{
                 marginTop: '0.3rem',
                 marginLeft: '0.5rem',
-                color: 'silver'
+                color: 'silver',
               }}
               className={classes.title}
             >

app/src/Dashboard/Project.tsx

@@ -1,11 +1,12 @@
+/* eslint-disable max-len */
 import React, { useState } from 'react';
 import { useMutation } from '@apollo/client';
 import {
   ADD_LIKE,
   MAKE_COPY,
   DELETE_PROJECT,
   PUBLISH_PROJECT,
-  ADD_COMMENT
+  ADD_COMMENT,
 } from './gqlStrings';
 import CloseIcon from '@mui/icons-material/Close';
 import AddCommentIcon from '@mui/icons-material/AddComment';
@@ -58,7 +59,7 @@ const Project = ({
   id,
   username,
   published,
-  comments
+  comments,
 }: props): JSX.Element => {
   // IMPORTANT:
   // 1) schema change projId => id to allows Apollo Client cache auto-update. Only works with 'id'
@@ -72,53 +73,53 @@ const Project = ({
   const [addComment] = useMutation(ADD_COMMENT);
 
   const noPointer = { cursor: 'default' };
-  //Likes the project when the star icon is clicked
+  // Likes the project when the star icon is clicked
   function handleLike(e) {
     e.preventDefault();
     const myVar = {
       variables: {
         projId: id,
-        likes: likes + 1
-      }
+        likes: likes + 1,
+      },
     };
     addLike(myVar);
   }
-  //Makes a copy of the public project and saves as a user project
+  // Makes a copy of the public project and saves as a user project
   function handleDownload(e) {
     e.preventDefault();
     const myVar = {
       variables: {
         projId: id,
         userId: currUserSSID,
-        username: currUsername
-      }
+        username: currUsername,
+      },
     };
     makeCopy(myVar);
   }
-  //Publishes project from user dashboard to public dashboard
+  // Publishes project from user dashboard to public dashboard
   function handlePublish(e) {
     e.preventDefault();
     const myVar = {
       variables: {
         projId: id,
-        published: !published
-      }
+        published: !published,
+      },
     };
     publishProject(myVar);
   }
-  //Adds the comment to the project
+  // Adds the comment to the project
   function handleComment(e) {
     e.preventDefault();
     const myVar = {
       variables: {
         projId: id,
         comment: commentVal,
-        username: currUsername
-      }
+        username: currUsername,
+      },
     };
     addComment(myVar);
   }
-  //sets state of commentVal to what the user types in to comment
+  // sets state of commentVal to what the user types in to comment
   function handleChange(e) {
     e.preventDefault();
     let commentValue = e.target.value;
@@ -133,21 +134,21 @@ const Project = ({
         <p className="comment">
           <b>{reversedCommentArray[i].username}</b>:
           {reversedCommentArray[i].text}
-        </p>
+        </p>,
       );
     }
   }
   // Closes out the open modal
   const closeModal = () => setModal('');
   // Creates modal that asks if user wants to delete project
   const deleteProjectModal = () => {
-    //Deletes project from the database
+    // Deletes project from the database
     const handleDelete = (e) => {
       e.preventDefault();
       const myVar = {
         variables: {
-          projId: id
-        }
+          projId: id,
+        },
       };
       deleteProject(myVar);
     };
@@ -161,7 +162,7 @@ const Project = ({
           style={{
             border: '1px solid #3c59ba',
             marginBottom: '2%',
-            marginTop: '5%'
+            marginTop: '5%',
           }}
         >
           <ListItemText
@@ -183,8 +184,8 @@ const Project = ({
         primBtnAction: null,
         secBtnAction: null,
         secBtnLabel: null,
-        open: true
-      })
+        open: true,
+      }),
     );
   };
 

app/src/Dashboard/ProjectContainer.tsx

@@ -1,9 +1,10 @@
+/* eslint-disable max-len */
 import React, { useState } from 'react';
 import {
   ThemeProvider,
   Theme,
   StyledEngineProvider,
-  useTheme
+  useTheme,
 } from '@mui/material/styles';
 import makeStyles from '@mui/styles/makeStyles';
 import { useQuery } from '@apollo/client';
@@ -36,20 +37,19 @@ const darkTheme = theme2; // dark mode color in theme.ts not reached
  * @param {Array} arr - An array of project objects, where each object contains project data.
  * @returns {Array<JSX.Element>} An array of <Project> components populated with data from the input array.
  */
-const arrToComponent = (arr): Array<JSX.Element> =>
-  arr.map((proj, index) => (
-    <Project
-      key={index}
-      name={proj.name}
-      likes={proj.likes}
-      published={proj.published}
-      userId={proj.userId}
-      username={proj.username}
-      createdAt={proj.createdAt}
-      id={proj.id}
-      comments={proj.comments}
-    />
-  ));
+const arrToComponent = (arr): Array<JSX.Element> => arr.map((proj, index) => (
+  <Project
+    key={index}
+    name={proj.name}
+    likes={proj.likes}
+    published={proj.published}
+    userId={proj.userId}
+    username={proj.username}
+    createdAt={proj.createdAt}
+    id={proj.id}
+    comments={proj.comments}
+  />
+));
 
 /**
  * Generates accessibility props for a tab component within a tab panel. These properties help in
@@ -58,9 +58,9 @@ const arrToComponent = (arr): Array<JSX.Element> =>
  * @param {any} index - The index of the tab and its corresponding panel.
  * @returns {Object} An object containing the `id` and `aria-controls` attributes for accessibility purposes.
  */
-const a11yProps = (index: any): Object => ({
+const a11yProps = (index: any): object => ({
   id: `vertical-tab-${index}`,
-  'aria-controls': `vertical-tabpanel-${index}`
+  'aria-controls': `vertical-tabpanel-${index}`,
 });
 
 interface LinkTabProps {
@@ -95,11 +95,11 @@ const useStyles = makeStyles((theme) => ({
   root: {
     flexGrow: 1,
     // backgroundColor: theme.palette.background.paper,
-    display: 'flex'
+    display: 'flex',
   },
   tabs: {
     // borderRight: `1px solid ${theme.palette.divider}`
-  }
+  },
 }));
 
 /**
@@ -163,26 +163,20 @@ const ProjectContainer = (): JSX.Element => {
   // useQuery hook abstracts fetch request
   const { loading, error, data } = useQuery(GET_PROJECTS, {
     pollInterval: 2000,
-    variables: myVar
+    variables: myVar,
   });
   if (loading) return <p>Loading...</p>;
   if (error) return <p>Error :{error}</p>;
   // based on resolver(getAllProject) for this query, the data is stored in the data object with the key 'getAllProjects'
   const projects = data.getAllProjects;
 
-  //create array to hold the data recieved in the public dashboard the will be conditionally rendered
-  let sortedProjects = projects.filter((proj) => {
-    return proj.published;
-  });
-  const userProjects = projects.filter((proj) => {
-    return proj.username === username;
-  });
+  // create array to hold the data recieved in the public dashboard the will be conditionally rendered
+  let sortedProjects = projects.filter((proj) => proj.published);
+  const userProjects = projects.filter((proj) => proj.username === username);
   // checking which sorting method was selected from drop down menu and invoking correct sorting function
   if (selectedOption === 'DATE') sortedProjects = sortByDate(sortedProjects);
-  else if (selectedOption === 'USER')
-    sortedProjects = sortByUser(sortedProjects);
-  else if (selectedOption === 'RATING')
-    sortedProjects = sortByRating(sortedProjects);
+  else if (selectedOption === 'USER') sortedProjects = sortByUser(sortedProjects);
+  else if (selectedOption === 'RATING') sortedProjects = sortByRating(sortedProjects);
   // create array to hold the components Project of loggin-in users
   // generate an array of Project components based on queried data
   const userDisplay = arrToComponent(userProjects);

app/src/Dashboard/gqlStrings.ts

@@ -49,7 +49,7 @@ export const PUBLISH_PROJECT = gql`
     }
   }`;
 
-  export const ADD_COMMENT = gql`
+export const ADD_COMMENT = gql`
   mutation AddComment($projId: ID!, $comment: String!, $username: String!) {
     addComment(projId: $projId, comment: $comment, username: $username)
     {