Merge pull request #20 from oslabs-beta/dev

Merging Dev into Main

Author: HadriChan

.gitignore

@@ -498,6 +498,7 @@ server/RootCA.srl
 
 
 # End of https://www.gitignore.io/api/node,linux,macos,windows,visualstudio,yarn
+
 /test-results/
 /playwright-report/
 /playwright/.cache/

.travis.yml

@@ -1,18 +1,18 @@
-import { test, expect } from '@playwright/test';
+// import { test, expect } from '@playwright/test';
 
-test('has title', async ({ page }) => {
-  await page.goto('https://app.reactype.dev/#/');
+// test('has title', async ({ page }) => {
+//   await page.goto('https://app.reactype.dev/#/');
 
-  // Expect a title "to contain" a substring.
-  await expect(page).toHaveTitle('ReacType');
-});
+//   // Expect a title "to contain" a substring.
+//   await expect(page).toHaveTitle('ReacType');
+// });
 
-test('get started link', async ({ page }) => {
-  await page.goto('https://playwright.dev/');
+// test('get started link', async ({ page }) => {
+//   await page.goto('https://playwright.dev/');
 
-  // Click the get started link.
-  await page.getByRole('link', { name: 'Get started' }).click();
+//   // Click the get started link.
+//   await page.getByRole('link', { name: 'Get started' }).click();
 
-  // Expects the URL to contain intro.
-  await expect(page).toHaveURL(/.*intro/);
-});
+//   // Expects the URL to contain intro.
+//   await expect(page).toHaveURL(/.*intro/);
+// });

__tests__/playwright/example.spec.ts

@@ -5,10 +5,10 @@
 const { Mongoose } = require('mongoose');
 const request = require('supertest');
 // initializes the project to be sent to server/DB
-import mockData from '../mockData'
-import app from ('../server/server');
-const http = require('http')
-const {state, projectToSave } = mockData
+import mockData from '../mockData';
+import app from '../server/server';
+const http = require('http');
+const { state, projectToSave } = mockData;
 
 // save and get projects endpoint testing
 describe('Project endpoints tests', () => {

__tests__/projects.test.ts

@@ -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/Dashboard/ProjectContainer.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';
@@ -17,34 +16,34 @@ import localforage from 'localforage';
 import { saveProject } from '../helperFunctions/projectGetSaveDel';
 
 // Intermediary component to wrap main App component with higher order provider components
-export const App = (): JSX.Element => {
-  const state = useSelector((store: RootState) => store.appState);
-  
-  const [toggleAttempt, setToggleAttempt] = useState(false);
+export const App: React.FC = (): JSX.Element => {
+  // const state = useSelector((store: RootState) => store.appState);
+
   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);
   }, []);
 
-  // following useEffect runs on first mount
+  // 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())
+  //   console.log('cookies.get in App', Cookies.get());
   //   // if user is a guest, see if a project exists in localforage and retrieve it
-  //   // v17 May not currently work yet
+  //   // v17: May not currently work yet
   //   if (!state.isLoggedIn) {
   //     localforage.getItem('guestProject').then((project) => {
   //       // if project exists, use dispatch to set initial state to that project
+  //       console.log('local forage get project', project);
   //       if (project) {
   //         dispatch(setInitialState(project));
   //       }
   //     });
   //   } else {
   //     // otherwise if a user is logged in, use a fetch request to load user's projects from DB
-      
   //     let userId;
   //     if (Cookies.get('ssid')) {
   //       userId = Cookies.get('ssid');
@@ -63,24 +62,26 @@ export const App = (): JSX.Element => {
   //     });
   //   }
   // }, []);
+
+  // // New project save configuration to optimize server load and minimize Ajax requests
   // useEffect(() => {
   //   // provide config properties to legacy projects so new edits can be auto saved
-  //   // if (state.config === undefined) {
-  //   //   state.config = { saveFlag: true, saveTimer: false };
-  //   // }
-  //   // New project save configuration to optimize server load and minimize Ajax requests
+  //   if (state.config === undefined) {
+  //     state.config = { saveFlag: true, saveTimer: false };
+  //   }
+
   //   if (state.config.saveFlag) {
-  //     // state.config.saveFlag = false;
-  //     // state.config.saveTimer = true;
-  //     // dispatch(configToggle())
+  //     state.config.saveFlag = false;
+  //     state.config.saveTimer = true;
+  //     //dispatch(configToggle());
 
   //     let userId;
   //     if (Cookies.get('ssid')) {
   //       userId = Cookies.get('ssid');
   //     } else {
   //       userId = window.localStorage.getItem('ssid');
   //     }
-  //     // if (state.isLoggedIn === false) {
+
   //     if (!state.isLoggedIn) {
   //       localforage.setItem('guestProject', state);
   //     } else if (state.name !== '') {
@@ -95,19 +96,16 @@ export const App = (): JSX.Element => {
   //     }, 15000);
   //   }
   // }, [state]);
-  // uncomment below to log state
 
   return (
     <div className="app">
-      
-        <header
-          style={{ height: '40px', width: '100%', backgroundColor: 'white' }}
-        >
-          ReacType
-        </header>
+      <header
+        style={{ height: '40px', width: '100%', backgroundColor: 'white' }}
+      >
+        ReacType
+      </header>
 
-        <AppContainer />
-     
+      <AppContainer />
     </div>
   );
 };

app/src/components/App.tsx

@@ -12,11 +12,10 @@ const ComponentDropDown = ({
   componentInput,
   setComponentInput
 }) => {
-  const { state, isDarkMode } = useSelector((store: RootState) => ({
-    state: store.appState,
-    isDarkMode: store.darkMode.isDarkMode
+  const { state } = useSelector((store: RootState) => ({
+    state: store.appState
   }));
-  const color = isDarkMode ? 'white' : 'black';
+
   const onChange = (event, newValue) => {
     if (typeof newValue === 'string') {
       setComponentInput({
@@ -36,7 +35,6 @@ const ComponentDropDown = ({
   };
 
   const filterOptions = (options, params) => {
-    // setBtnDisabled(true);
     const filtered = filter(options, params);
     const { inputValue } = params;
     // Suggest the creation of a new contextInput
@@ -46,8 +44,6 @@ const ComponentDropDown = ({
         inputValue,
         name: `Add "${inputValue}"`
       });
-
-      // setBtnDisabled(false);
     }
 
     return filtered;
@@ -67,7 +63,7 @@ const ComponentDropDown = ({
   };
 
   const renderOption = (props, option) => (
-    <li style={{ color: 'black', backgroundColor: 'none'}} {...props}>
+    <li style={{ color: 'black', backgroundColor: 'none' }} {...props}>
       {option.name}
     </li>
   );

app/src/components/ContextAPIManager/AssignTab/components/ComponentDropDrown.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();
 
@@ -15,10 +14,6 @@ const ContextDropDown = ({
 }) => {
   const { allContext } = contextStore;
 
-  const isDarkMode = useSelector(
-    (store: RootState) => store.darkMode.isDarkMode
-  );
-  const color = isDarkMode ? 'white' : 'black';
   const onChange = (event, newValue) => {
     if (typeof newValue === 'string') {
       setContextInput({
@@ -38,7 +33,6 @@ const ContextDropDown = ({
   };
 
   const filterOptions = (options, params) => {
-    // setBtnDisabled(true);
     const filtered = filter(options, params);
     const { inputValue } = params;
     // Suggest the creation of a new contextInput
@@ -48,8 +42,6 @@ const ContextDropDown = ({
         inputValue,
         name: `Add "${inputValue}"`
       });
-
-      // setBtnDisabled(false);
     }
 
     return filtered;

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

@@ -45,9 +45,7 @@ const rows = [
   createData('Cupcake', 305, 3.7, 67, 4.3),
   createData('Gingerbread', 356, 16.0, 49, 3.9)
 ];
-{
-  /* <Table style={{ width: 400, margin: 'auto' }}></Table> */
-}
+
 export default function ContextTable() {
   return (
     <TableContainer component={Paper}>

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

@@ -1,4 +1,4 @@
- import React, { useContext } from 'react';
+import React, { useContext } from 'react';
 import { makeStyles } from '@mui/styles';
 import Box from '@mui/material/Box';
 import Tab from '@mui/material/Tab';
@@ -9,39 +9,40 @@ import TabPanel from '@mui/lab/TabPanel';
 import CreateContainer from './CreateTab/CreateContainer';
 import AssignContainer from './AssignTab/AssignContainer';
 import DisplayContainer from './DisplayTab/DisplayContainer';
-import { useSelector } from 'react-redux'
+import { useSelector } from 'react-redux';
 import { RootState } from '../../redux/store';
 
-
 const useStyles = makeStyles({
   contextContainer: {
     backgroundColor: '#191919',
-    height: 'fit-content',
+    height: 'fit-content'
   }
 });
 
 const ContextManager = (props): JSX.Element => {
-  const { isDarkMode, style } = useSelector((store:RootState) => ({
-    isDarkMode: store.darkMode.isDarkMode,
+  const { style } = useSelector((store: RootState) => ({
     style: store.styleSlice
   }));
   const classes = useStyles();
   const [value, setValue] = React.useState<string>('1');
-  
+
   const handleChange = (event: React.SyntheticEvent, newValue: string) => {
     setValue(newValue);
   };
 
-  const background_Color = isDarkMode ? '#21262b' : 'white'
-  const color = isDarkMode ? 'white' : 'white'
+  const color = 'white';
 
   return (
     <React.Fragment>
       <div className={classes.contextContainer} style={style.style}>
         <Box sx={{ width: '100%', typography: 'body1' }}>
           <TabContext value={value}>
             <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
-              <TabList onChange={handleChange} centered={true} sx={{color:color}}>
+              <TabList
+                onChange={handleChange}
+                centered={true}
+                sx={{ color: color }}
+              >
                 <Tab style={{ color: color }} label="Create/Edit" value="1" />
                 <Tab style={{ color: color }} label="Assign" value="2" />
                 <Tab style={{ color: color }} label="Display" value="3" />
@@ -63,4 +64,4 @@ const ContextManager = (props): JSX.Element => {
   );
 };
 
-export default ContextManager;
+export default ContextManager;

app/src/components/ContextAPIManager/ContextManager.tsx

@@ -25,11 +25,11 @@ const AddContextForm = ({
   const { allContext } = contextStore;
   const [btnDisabled, setBtnDisabled] = useState(false);
   const [open, setOpen] = useState(false);
-  const { state, isDarkMode } = useSelector((store: RootState) => ({
-    isDarkMode: store.darkMode.isDarkMode,
-    state: store.appState
-  }));
-  const color = isDarkMode ? 'black' : 'white';
+  // const { state } = useSelector((store: RootState) => ({
+  //   state: store.appState
+  // }));
+
+  const color = 'white';
 
   //handler for submitting new context for creation
   const handleSubmit = () => {
@@ -67,7 +67,7 @@ const AddContextForm = ({
   const contexts = allContext.length ? (
     allContext.map((context, index) => {
       return (
-        <MenuItem style={{ color: '#383838'}} value={context.name} key={index}>
+        <MenuItem style={{ color: '#383838' }} value={context.name} key={index}>
           {context.name}
         </MenuItem>
       );
@@ -99,7 +99,7 @@ const AddContextForm = ({
         />
         <Snackbar
           open={open && !errorStatus}
-          anchorOrigin={{ vertical: 'top', horizontal: 'center' }} 
+          anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
           autoHideDuration={3000}
           onClose={handleClose}
         >
@@ -129,7 +129,7 @@ const AddContextForm = ({
           <Select
             required
             sx={{ width: 425 }}
-            style={{ border: '1px solid #0099e6', color: color}}
+            style={{ border: '1px solid #0099e6', color: color }}
             value={currentContext}
             label="Select Context"
             MenuProps={{ disablePortal: true }}