Merge branch 'dev' into Hernan/alerts

Author: raulclassico7

.gitignore

@@ -524,4 +524,4 @@ amplifytools.xcconfig
 **.sample
 #amplify-do-not-edit-end
 
-team-provider-info.json
+/amplify/team-provider-info.json

__tests__/NavBar.test.tsx

@@ -4,15 +4,13 @@ import '@testing-library/jest-dom/extend-expect';
 import { MemoryRouter } from 'react-router-dom';
 import { ThemeProvider, createTheme } from '@mui/material/styles';
 import NavBar from '../app/src/components/top/NavBar';
-import navBarButtons from '../app/src/components/top/NavBarButtons';
 import * as projectFunctions from '../app/src/helperFunctions/projectGetSaveDel';
 import { Provider } from 'react-redux';
+import { act } from 'react-dom/test-utils';
 import { configureStore } from '@reduxjs/toolkit';
 import rootReducer from '../app/src/redux/reducers/rootReducer';
 import { initialState as appStateInitialState } from '../app/src/redux/reducers/slice/appStateSlice';
 
-
-
 // Mock the non-serializable HTMLTypes
 const mockHTMLTypes = [
   {
@@ -47,7 +45,6 @@ const mockHTMLTypes = [
   },
 ];
 
-
 // Mocking the theme
 const theme = createTheme({
   spacing: (value) => `${value}px`,
@@ -117,8 +114,10 @@ describe('NavBar Component', () => {
 
     console.log('After rendering NavBar');
 
-    const publishButton = getByText('Publish');
-    fireEvent.click(publishButton);
+    await act(async () => { 
+      const publishButton = getByText('Publish');
+      fireEvent.click(publishButton);
+    });
   });
 
   it('handles publish correctly with new project', async () => {
@@ -147,26 +146,27 @@ describe('NavBar Component', () => {
 
     console.log('After rendering NavBar');
 
-    // Check if the "Publish" button is present
-    const publishButton = queryByText('Publish');
+    await act(async () => { 
+      // Check if the "Publish" button is present
+      const publishButton = queryByText('Publish');
 
-    if (publishButton) {
-      fireEvent.click(publishButton);
-    } else {
-      // If "Publish" button is not found, look for the "Unpublish" button
-      const unpublishButton = getByText('Unpublish');
-      fireEvent.click(unpublishButton);
-    }
+      if (publishButton) {
+        fireEvent.click(publishButton);
+      } else {
+        // If "Publish" button is not found, look for the "Unpublish" button
+        const unpublishButton = getByText('Unpublish');
+        fireEvent.click(unpublishButton);
+      }
 
-    // Check if the modal for a new project is displayed
-    const projectNameInput = queryByTestId('project-name-input');
+      // Check if the modal for a new project is displayed
+      const projectNameInput = queryByTestId('project-name-input');
 
-    if (projectNameInput) {
-      // entering a project name in the modal
-      fireEvent.change(projectNameInput, { target: { value: 'My Project' } });
-    }
+      if (projectNameInput) {
+        // entering a project name in the modal
+        fireEvent.change(projectNameInput, { target: { value: 'My Project' } });
+      }
     });
-  
+  });
 
   it('handles unpublish correctly', async () => {
     const unpublishProjectMock = jest.spyOn(projectFunctions, 'unpublishProject');
@@ -239,7 +239,8 @@ describe('NavBar Component', () => {
     fireEvent.click(exportComponentsOption);
 
   });
-  test('handles dropdown menu correctly', async () => {
+
+  it('handles dropdown menu correctly', async () => {
     const store = configureStore({
       reducer: rootReducer,
       preloadedState: {
@@ -248,8 +249,9 @@ describe('NavBar Component', () => {
         },
       },
     });
-  
-    // Render component
+
+    console.log('Before rendering NavBar');
+
     const { getByTestId, getByText } = render(
       <Provider store={store}>
         <MemoryRouter>
@@ -259,33 +261,34 @@ describe('NavBar Component', () => {
         </MemoryRouter>
       </Provider>
     );
-  
-    // Initially, the dropdown should have the "hideNavDropDown" class
-    const dropdownMenu = getByTestId('navDropDown');
-    expect(dropdownMenu).toHaveClass('hideNavDropDown');
-  
-    // Find and click the button to open the dropdown
-    const moreVertButton = getByTestId('more-vert-button');
-    fireEvent.click(moreVertButton);
-  
-    // After clicking, the dropdown should have the "navDropDown" class
-    expect(dropdownMenu).toHaveClass('navDropDown');
-  
-  
-    //clear canvas click
-    const clearCanvasMenuItem = getByText('Clear Canvas');
-    fireEvent.click(clearCanvasMenuItem);
-    expect(dropdownMenu).toHaveClass('navDropDown');
-  
-    // After clicking "Marketplace", it should remain open
-    const marketplaceMenuItem = getByText('Marketplace');
-    fireEvent.click(marketplaceMenuItem);
-    expect(dropdownMenu).toHaveClass('navDropDown');
-  
-    // Close the dropdown by clicking the button again
-    fireEvent.click(moreVertButton);
-  
-    // After closing, the dropdown should have the "hideNavDropDown" class
-    expect(dropdownMenu).toHaveClass('hideNavDropDown');
+
+    console.log('After rendering NavBar');
+
+    await act(async () => { 
+
+      const dropdownMenu = getByTestId('navDropDown');
+      expect(dropdownMenu).toHaveClass('hideNavDropDown');
+
+
+      const moreVertButton = getByTestId('more-vert-button');
+      fireEvent.click(moreVertButton);
+
+
+      expect(dropdownMenu).toHaveClass('hideNavDropDown');
+
+
+      const clearCanvasMenuItem = getByText('Clear Canvas');
+      fireEvent.click(clearCanvasMenuItem);
+      expect(dropdownMenu).toHaveClass('hideNavDropDown');
+
+
+      const marketplaceMenuItem = getByText('Marketplace');
+      fireEvent.click(marketplaceMenuItem);
+      expect(dropdownMenu).toHaveClass('hideNavDropDown');
+
+      fireEvent.click(moreVertButton);
+
+      expect(dropdownMenu).toHaveClass('hideNavDropDown');
+    });
   });
-});
+})

app/src/components/App.tsx

@@ -32,18 +32,14 @@ export const App = (): JSX.Element => {
 
   // following useEffect runs on first mount
   useEffect(() => {
-    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/ContextAPIManager/CreateTab/CreateContainer.tsx

@@ -82,7 +82,6 @@ const CreateContainer = () => {
     setCurrentContext('');
   };
 
-  console.log('state.allContext', state.allContext);
   return (
     <>
       <Grid container display="flex" justifyContent="space-evenly">

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

@@ -23,7 +23,6 @@ const AddContextForm = ({
   setErrorStatus
 }) => {
   const { allContext } = contextStore;
-  console.log('all contexts', allContext);
   const [btnDisabled, setBtnDisabled] = useState(false);
   const [open, setOpen] = useState(false);
   const { state, isDarkMode } = useSelector((store: RootState) => ({

app/src/components/StateManagement/CreateTab/components/StatePropsPanel.tsx

@@ -62,7 +62,6 @@ const StatePropsPanel = ({ isThemeLight, data }): JSX.Element => {
         try{
           let retVal = JSON.parse(value);
           if(Array.isArray(retVal)){
-            console.log('is this an array still', retVal)
             setInputTypeError('');
             return retVal
           }else{
@@ -195,7 +194,6 @@ const StatePropsPanel = ({ isThemeLight, data }): JSX.Element => {
     if (exists) {
       setInputKey(table.row.key);
       setInputType(table.row.type);
-      console.log("tablerowvalue", table.row.value);
       setInputValue(table.row.value ? JSON.stringify(table.row.value) : '');
     } else clearForm();
   };

app/src/components/StateManagement/DisplayTab/DataTable.tsx

@@ -0,0 +1,111 @@
+import React from 'react';
+import Table from '@mui/material/Table';
+import TableBody from '@mui/material/TableBody';
+import TableContainer from '@mui/material/TableContainer';
+import TableHead from '@mui/material/TableHead';
+import TableRow from '@mui/material/TableRow';
+import Paper from '@mui/material/Paper';
+import { styled } from '@mui/material/styles';
+import TableCell, { tableCellClasses } from '@mui/material/TableCell';
+import { useSelector } from 'react-redux';
+import { RootState } from '../../../redux/store'
+
+const StyledTableCell = styled(TableCell)(({ theme }) => ({
+  [`&.${tableCellClasses.head}`]: {
+    backgroundColor: theme.palette.common.black,
+    color: theme.palette.common.white,
+  },
+  [`&.${tableCellClasses.body}`]: {
+    color: theme.palette.common.black,
+    fontSize: 14,
+  },
+}));
+
+const StyledTableRow = styled(TableRow)(({ theme }) => ({
+  '&:nth-of-type(odd)': {
+    backgroundColor: theme.palette.action.hover
+  },
+  // hide last border
+  '&:last-child td, &:last-child th': {
+    border: 0,
+  },
+}));
+
+export default function DataTable(props) {
+  const {
+    currComponentState, parentProps, clickedComp, data,
+  } = props;
+  const state = useSelector((store:RootState) => store.appState)
+
+  // determine if the current component is a root component
+  let isRoot = false;
+
+  for (let i = 0; i < data.length; i++) {
+    if (data[i].name === clickedComp) {
+      if (state.rootComponents.includes(data[i].id)) isRoot = true;
+    }
+  }
+
+  return (
+    <TableContainer component={Paper} sx={{ maxHeight: '350px' }}>
+      <Table
+        sx={{ width: '510px' }}
+        aria-label="customized table"
+        stickyHeader
+      >
+
+        {/* we are checking if the clicked component is a root component-- if yes, it doesn't have any parents so don't need passed-in props table */}
+        {(!isRoot
+          && (
+            <>
+              <TableHead>
+                <TableRow>
+                  <StyledTableCell align="center" colSpan={3}>
+                    Props Passed in from Parent:
+                  </StyledTableCell>
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                <StyledTableRow>
+                  <StyledTableCell component="th" scope="row"><b>Key</b></StyledTableCell>
+                  <StyledTableCell align="right"><b>Type</b></StyledTableCell>
+                  <StyledTableCell align="right"><b>Initial Value</b></StyledTableCell>
+                </StyledTableRow>
+                {parentProps ? parentProps.map((data, index) => (
+                  <StyledTableRow key={index}>
+                    <StyledTableCell component="th" scope="row">{data.key}</StyledTableCell>
+                    <StyledTableCell align="right">{data.type}</StyledTableCell>
+                    <StyledTableCell align="right">{data.value}</StyledTableCell>
+                  </StyledTableRow>
+                )) : ''}
+              </TableBody>
+            </>
+          )
+        )}
+
+        {/* The below table will contain the state initialized within the clicked component */}
+        <TableHead>
+          <TableRow>
+            <StyledTableCell align="center" colSpan={3}>
+              State Initialized in Current Component:
+            </StyledTableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          <StyledTableRow>
+            <StyledTableCell component="th" scope="row"><b>Key</b></StyledTableCell>
+            <StyledTableCell align="right"><b>Type</b></StyledTableCell>
+            <StyledTableCell align="right"><b>Initial Value</b></StyledTableCell>
+          </StyledTableRow>
+          {currComponentState ? currComponentState.map((data, index) => (
+            <StyledTableRow key={index}>
+              <StyledTableCell component="th" scope="row">{data.key}</StyledTableCell>
+              <StyledTableCell align="right">{data.type}</StyledTableCell>
+              <StyledTableCell align="right">{data.value}</StyledTableCell>
+            </StyledTableRow>
+          )) : ''}
+        </TableBody>
+      </Table>
+    </TableContainer>
+  );
+}

app/src/components/left/RoomsContainer.tsx

@@ -62,7 +62,6 @@ const RoomsContainer = () => {
       if (currentStore !== event) {
         currentStore = JSON.parse(currentStore);
         event = JSON.parse(event);
-        console.log('stores do not match');
         if (currentStore.darkMode.isDarkMode !== event.darkMode.isDarkMode) {
           store.dispatch(toggleDarkMode());
         } else if (currentStore.appState !== event.appState) {
@@ -75,7 +74,6 @@ const RoomsContainer = () => {
           store.dispatch(cooperativeStyle(event.styleSlice));
         }
       }
-      console.log('updated user Store from another user: ', store.getState());
     });
   }
 
@@ -84,7 +82,6 @@ const RoomsContainer = () => {
   }
 
   function joinRoom() {
-    console.log(roomCode);
     dispatch(changeRoom(roomCode));
     setConfirmRoom((confirmRoom) => roomCode);
 

app/src/components/left/Sidebar.tsx

@@ -22,12 +22,10 @@ const Sidebar: React.FC<SidebarProps> = ({
     setActiveTab(newValue);
     toggleVisibility(true);// Show the left-container when a different tab is clicked 
     oldValue = newValue;//setting the oldvalue to match the new tab
-    console.log('oldValue change', oldValue)
   };
 
   const handleTabClick = (event: React.MouseEvent, oldValue: number) => {
     if (activeTab === oldValue) { //if the person is clicking the same tab, oldValue should match activeTab since it did not trigger an onChange
-      console.log('handleTabChange null', oldValue)
       setActiveTab(null);
       toggleVisibility(false); // Hide the left-container when the same tab is clicked again
     }

app/src/components/marketplace/MarketplaceCard.tsx

@@ -58,9 +58,9 @@ const MarketplaceCard = ({ proj }: { proj: Project }) => {
       try {
         const objId: string = proj._id.toString();
         // the below functions are commented out as not to incur too many charges
-        // const response: string = await Storage.get(objId);
+        const response: string = await Storage.get(objId);
         // const response: string = await Storage.get('test');
-        // setS3ImgURL(response);
+        setS3ImgURL(response);
       } catch (error) {
         console.error(`Error fetching image preview for ${proj._id}: `, error);
       }

app/src/components/right/DeleteProjects.tsx

@@ -44,7 +44,6 @@ function ProjectsDialog(props: ProjectDialogProps) {
     const selectedProject = projects.filter(
       (project: any) => project._id === value
       )[0];
-      console.log('deleting this one', selectedProject)
       deleteProject(selectedProject);
       localforage.removeItem(window.localStorage.getItem('ssid'));
       dispatch(setInitialState(initialState))