Merge branch 'dev' into Hernan/alerts

Author: raulclassico7

__tests__/projects.test.ts

@@ -11,7 +11,7 @@ const http = require('http')
 const {state, projectToSave } = mockData
 
 // save and get projects endpoint testing
-xdescribe('Project endpoints tests', () => {
+describe('Project endpoints tests', () => {
   let server;
   beforeAll((done) => {
     server = http.createServer(app);
@@ -22,7 +22,7 @@ xdescribe('Project endpoints tests', () => {
     server.close(done);
   });
   // test saveProject endpoint
-  xdescribe('/saveProject', () => {
+  describe('/saveProject', () => {
     describe('/POST', () => {
       it('responds with a status of 200 and json object equal to project sent', () => {
         return request(server)
@@ -36,7 +36,7 @@ xdescribe('Project endpoints tests', () => {
     });
   });
   // test getProjects endpoint
-  xdescribe('/getProjects', () => {
+  describe('/getProjects', () => {
     describe('POST', () => {
       it('responds with status of 200 and json object equal to an array of user projects', () => {
         return request(server)
@@ -53,7 +53,7 @@ xdescribe('Project endpoints tests', () => {
     });
   });
   // test deleteProject endpoint
-  xdescribe('/deleteProject', () => {
+  describe('/deleteProject', () => {
     describe('DELETE', () => {
       const { name, userId } = projectToSave;
       it('responds with status of 200 and json object equal to deleted project', () => {

__tests__/server.test.tsx

@@ -0,0 +1,124 @@
+import marketplaceController from '../server/controllers/marketplaceController'; 
+import app from '../server/server';
+import mockData from '../mockData';
+const request = require('supertest');
+const mongoose = require('mongoose');
+const mockNext = jest.fn(); // Mock nextFunction
+const MONGO_DB = process.env.MONGO_DB_TEST;
+const { state, projectToSave, user } = mockData
+const PORT = 8080;
+
+beforeAll(async () => {
+  await mongoose.connect(MONGO_DB, {
+    useNewUrlParser: true,
+    useUnifiedTopology: true,
+  });
+});
+
+afterAll(async () => {
+  await mongoose.connection.close();
+});
+
+describe('Server endpoint tests', () => {
+  it('should pass this test request', async () => {
+    const response = await request(app).get('/test');
+    expect(response.status).toBe(200);
+    expect(response.text).toBe('test request is working');
+  });
+  describe('Marketplace endpoint testing', () => {
+    it('get requests to /getMarketplaceProjects should return an array of projects', async () => {
+      const response = await request(app).get('/getMarketplaceProjects');
+      expect(response.status).toBe(200);
+      expect(Array.isArray(response.body)).toBe(true);
+    });
+    it('the return array should be populated with project objects', async () => {
+      const response = await request(app).get('/getMarketplaceProjects');
+      expect(response.status).toBe(200);
+      expect(Array.isArray(response.body)).toBe(true);
+    });
+  });
+  // test saveProject endpoint
+  describe('/saveProject', () => {
+    describe('/POST', () => {
+      it('responds with a status of 200 and json object equal to project sent', async () => {
+        // const response = await request(app).post('/saveProject').set('Accept', 'application/json').send(projectToSave);
+        // console.log(response);
+        // console.log(response.body);
+        // expect(response.status).toBe(200);
+        return request(app)
+          .post('/saveProject')
+          .set('Accept', 'application/json')
+          .send(projectToSave)
+          .expect(200)
+          .expect('Content-Type', /application\/json/)
+          .then((res) => expect(res.body.name).toBe(projectToSave.name));
+      });
+    // });
+  });
+  // test getProjects endpoint
+  describe('/getProjects', () => {
+    describe('POST', () => {
+      it('responds with status of 200 and json object equal to an array of user projects', () => {
+        return request(app)
+          .post('/getProjects')
+          .set('Accept', 'application/json')
+          .send({ userId: projectToSave.userId })
+          .expect(200)
+          .expect('Content-Type', /json/)
+          .then((res) => {
+            expect(Array.isArray(res.body)).toBeTruthy;
+            expect(res.body[0].name).toBe(state.name);
+          });
+      });
+    });
+  });
+  // test deleteProject endpoint
+  describe('/deleteProject', () => {
+    describe('DELETE', () => {
+      it('responds with status of 200 and json object equal to deleted project', async () => {
+        const response: Response = await request(app).post('/getProjects').set('Accept', 'application/json').send({ userId: projectToSave.userId });
+        const _id: String = response.body[0]._id;
+        const userId: String = user.username;
+        console.log(_id, userId);
+        return request(app)
+          .delete('/deleteProject')
+          .set('Content-Type', 'application/json')
+          .send({ _id, userId })
+          .expect(200)
+          .then((res) => expect(res.body.name).toBe(projectToSave.name)); // @Denton might want to check more of these fields
+      });
+    });
+  });
+});
+});
+
+
+
+
+
+
+
+// describe('marketplaceController Middleware', () => {
+//   describe('getProjects tests', () => {
+//     it('should add the projects as an array to res.locals', () => {
+//       const req = {};
+//       const res = { locals: {} };
+//       console.log(marketplaceController.getPublishedProjects);
+//       console.log(typeof marketplaceController.getPublishedProjects);
+//       marketplaceController.getPublishedProjects(req, res, mockNext);
+//       expect(Array.isArray(res.locals.publishedProjects)).toBe(true);
+//       expect(mockNext).toHaveBeenCalled();
+//     });
+//   });
+
+
+//   it('should send an error response if there is an error in the middleware', () => {
+//     const req = { user: { isAuthenticated: false } };
+//     const res = mockResponse();
+    
+//     marketplaceController.authenticateMiddleware(req, res, mockNext);
+    
+//     expect(res.status).toHaveBeenCalledWith(500);
+//     expect(res.json).toHaveBeenCalledWith({ err: 'Error in marketplaceController.getPublishedProjects, check server logs for details' });
+//   });
+// });

app/src/components/App.tsx

@@ -19,6 +19,7 @@ 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);
   const dispatch = useDispatch();
   // checks if user is signed in as guest or actual user and changes loggedIn boolean accordingly
@@ -34,11 +35,15 @@ export const App = (): JSX.Element => {
     console.log('state.isLoggedIn', state.isLoggedIn)
     // 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
     if (!state.isLoggedIn) {
+      console.log('not state.islogged in')
       localforage.getItem('guestProject').then((project) => {
         // if project exists, use dispatch to set initial state to that project
+        console.log('guestProject', project)
         if (project) {
           dispatch(setInitialState(project));
+          console.log('project', project)
         }
       });
     } else {

app/src/components/left/ComponentDrag.tsx

@@ -1,9 +1,9 @@
-import React from 'react';
-import Grid from '@mui/material/Grid';
 import ComponentPanelItem from '../right/ComponentPanelItem';
+import Grid from '@mui/material/Grid';
+import React from 'react';
+import { RootState } from '../../redux/store';
 import makeStyles from '@mui/styles/makeStyles';
 import { useSelector } from 'react-redux';
-import { RootState } from '../../redux/store';
 // The component panel section of the left panel displays all components and has the ability to add new components
 const ComponentDrag = ({ isThemeLight }): JSX.Element => {
   const classes = useStyles();
@@ -37,6 +37,7 @@ const ComponentDrag = ({ isThemeLight }): JSX.Element => {
           direction="row"
           justifyContent="center"
           alignItems="center"
+          
         >
           {state.components
             .filter((comp) => state.rootComponents.includes(comp.id))
@@ -54,7 +55,7 @@ const ComponentDrag = ({ isThemeLight }): JSX.Element => {
             })}
         </Grid>
         {/* Display all reusable components */}
-        <h4
+        {/* <h4
           className={
             !isDarkMode
               ? classes.lightThemeFontColor
@@ -83,7 +84,7 @@ const ComponentDrag = ({ isThemeLight }): JSX.Element => {
                 />
               );
             })}
-        </Grid>
+        </Grid> */}
       </div>
     </div>
   );
@@ -99,16 +100,9 @@ const useStyles = makeStyles({
   },
   panelWrapperList: {
     minHeight: '120px',
-    marginLeft: '-15px',
-    marginRight: '-15px',
-    width: '100%',
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'center',
-    wordWrap: 'break-word'
   },
   lightThemeFontColor: {
-    color: '#155084'
+    color: '#fff'
   },
   darkThemeFontColor: {
     color: '#fff'

app/src/components/left/ComponentsContainer.tsx

@@ -1,7 +1,74 @@
+import ComponentPanelItem from '../right/ComponentPanelItem';
+import Grid from '@mui/material/Grid';
 import React from 'react';
+import { RootState } from '../../redux/store';
+import makeStyles from '@mui/styles/makeStyles';
+import { useSelector } from 'react-redux';
 
 const ComponentsContainer = () => {
-  return <div>ComponentsContainer</div>;
+  const classes = useStyles();
+  const state = useSelector((store: RootState) => store.appState);
+  const isDarkMode = useSelector(
+    (store: RootState) => store.darkMode.isDarkMode
+  );
+  const isFocus = (targetId: Number) => {
+    return state.canvasFocus.componentId === targetId ? true : false;
+  };
+  return (
+    <div>
+      <div className={classes.panelWrapper}>
+        <div className={classes.panelWrapperList}>
+          <h4
+            className={
+              !isDarkMode
+                ? classes.lightThemeFontColor
+                : classes.darkThemeFontColor
+            }
+          >
+            Reusable Components
+          </h4>
+          <Grid
+            container
+            direction="column"
+            alignContent={"center"}
+          >
+            {state.components
+              .filter((comp) => !state.rootComponents.includes(comp.id))
+              .map((comp) => {
+                return (
+                  <ComponentPanelItem
+                    isFocus={isFocus(comp.id)}
+                    key={`comp-${comp.id}`}
+                    name={comp.name}
+                    id={comp.id}
+                    root={false}
+                  />
+                );
+              })}
+          </Grid>
+        </div>
+      </div>
+    </div>
+  );
 };
 
+const useStyles = makeStyles({
+  panelWrapper: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    flexGrow: 1,
+    overflow: 'auto'
+  },
+  panelWrapperList: {
+    minHeight: '120px',
+  },
+  lightThemeFontColor: {
+    color: '#fff'
+  },
+  darkThemeFontColor: {
+    color: '#fff'
+  }
+});
+
 export default ComponentsContainer;

app/src/components/left/ContentArea.tsx

@@ -5,35 +5,38 @@ import React from 'react';
 import RoomsContainer from './RoomsContainer';
 import TreeContainer from './TreeContainer';
 
-interface TabPanelProps {
-  value: number;
-  index: number;
+interface ContentAreaProps {
+  activeTab: number | null;
+  isVisible: boolean;
 }
 
-const TabPanel: React.FC<TabPanelProps> = ({ children, value, index }) => {
-  return <Box hidden={value !== index}>{value === index && children}</Box>;
+const TabPanel: React.FC<{
+  children: React.ReactNode;
+  activeTab: number | null;
+  index: number;
+}> = ({ children, activeTab, index }) => {
+  return (
+    <Box hidden={activeTab !== index}>{activeTab === index && children}</Box>
+  );
 };
 
-const ContentArea: React.FC<{ value: number | null }> = ({ value }) => {
-  if (value === null) {
-    return null;
-  }
-
+const panels = [
+  <ElementsContainer />,
+  <ComponentsContainer />,
+  <RoomsContainer />
+];
+const ContentArea: React.FC<ContentAreaProps> = ({ activeTab, isVisible }) => {
   return (
-    <div className="left-container">
+    <div
+      className="left-container"
+      style={{ display: isVisible ? 'block' : 'none' }} // Visibility based on activeTab
+    >
       <div className="column left">
-        <TabPanel value={value} index={0}>
-          <ElementsContainer />
-        </TabPanel>
-        <TabPanel value={value} index={1}>
-          <ComponentsContainer />
-        </TabPanel>
-        <TabPanel value={value} index={2}>
-          <TreeContainer />
-        </TabPanel>
-        <TabPanel value={value} index={3}>
-          <RoomsContainer />
-        </TabPanel>
+        {panels.map((panel, idx) => (
+          <TabPanel activeTab={activeTab} index={idx} key={idx}>
+            {panel}
+          </TabPanel>
+        ))}
       </div>
     </div>
   );

app/src/components/left/DragDropPanel.tsx

@@ -86,7 +86,7 @@ const DragDropPanel = (props): JSX.Element => {
               state.projectType === 'Classic React'
             ) {
               return (
-                <Grid item xs={2} sm={2} md={2}>
+                <Grid item xs={2} sm={2} md={2} key={option.name}>
                   <HTMLItem
                     name={option.name}
                     key={`html-${option.name}`}

app/src/components/left/ElementsContainer.tsx

@@ -48,7 +48,7 @@ const ElementsContainer = (props): JSX.Element => {
         textAlign: 'center'
       }}
     >
-      <h4>Drag and Drop</h4>
+      {' '}
       <DragDropPanel />
       <div id={'CompBottomHalf'}>
         <ComponentDrag isThemeLight={props.isThemeLight} />