Merge branch 'dev' of https://github.com/oslabs-beta/ReacType into dev

Author: r-mcgrath

.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

@@ -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

@@ -15,10 +15,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 +34,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 +43,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,
+  const { state } = useSelector((store: RootState) => ({
     state: store.appState
   }));
-  const color = isDarkMode ? 'black' : 'white';
+
+  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 }}

app/src/components/ContextAPIManager/CreateTab/components/AddContextForm.tsx

@@ -10,7 +10,7 @@ const AddDataForm = ({ handleClickInputData, currentContext }) => {
   //const [contextInput, setContextInput] = React.useState(null);
   const defaultInputData = { inputKey: '', inputValue: '' };
   const [dataContext, setDataContext] = React.useState(defaultInputData);
-  const { isDarkMode } = useSelector((store: RootState) => store.darkMode);
+
   const saveData = () => {
     setDataContext(defaultInputData);
     if (dataContext.inputKey === '' || dataContext.inputValue === '') {
@@ -19,7 +19,7 @@ const AddDataForm = ({ handleClickInputData, currentContext }) => {
     }
     handleClickInputData(currentContext, dataContext);
   };
-  const color = isDarkMode ? 'black' : 'white';
+  const color = 'white';
 
   const handleChange = (e) => {
     setDataContext((prevDataContext) => {