Merge pull request #46 from oslabs-beta/liam/screenshots

Liam/screenshots

Author: AhnafKhvn

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

app/src/components/right/OpenProjects.tsx

@@ -37,7 +37,6 @@ function ProjectsDialog(props: ProjectDialogProps) {
       (project: any) => project._id === value
     )[0];
     // dispatch({ type: 'OPEN PROJECT', payload: selectedProject });
-    console.log(selectedProject);
     dispatch(openProject(selectedProject))
     openAlert()
     onClose();

app/src/components/top/NavBar.tsx

@@ -40,7 +40,6 @@ const NavBar = () => {
   }, [state.name])//update the ProjectName after state.name changes due to loading projects
 
   const deleteAlertOpen = () => {
-    console.log("I am hit")
     setDeleteAlert(true);
   }
 
@@ -92,7 +91,6 @@ const NavBar = () => {
 
       publishProject(projectName, state)
         .then((newProject: State) => {
-          console.log('Project published successfully', newProject);
           setPublishModalOpen(false);
           dispatch(updateProjectId(newProject._id));
           dispatch(updateProjectName(newProject.name));
@@ -109,7 +107,6 @@ const NavBar = () => {
     const handleUnpublish = () => {
       unpublishProject(state)
         .then((unpublishedProject: State) => {
-          console.log('Project unpublished successfully', unpublishedProject);
           dispatch(updateProjectPublished(false)); 
           setAlertOpen2(true);
         })

app/src/components/top/NavBarButtons.tsx

@@ -67,7 +67,6 @@ function initSocketConnection(roomCode) {
     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) {
@@ -260,7 +259,6 @@ function navbarDropDown(props) {
   }, [joinedRoom]);
 
   function joinRoom() {
-    console.log(roomCode);
     dispatch(changeRoom(roomCode));
     setConfirmRoom((confirmRoom) => roomCode);
 

app/src/containers/CustomizationPanel.tsx

@@ -394,7 +394,6 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
   // UNDO/REDO functionality--onClick these functions will be invoked.
   const handleUndo = () => {
     dispatch(undo({ contextParam }));
-    console.log(contextParam);
   };
   const handleRedo = () => {
     dispatch(redo({ contextParam }));
@@ -475,7 +474,6 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
   const keyBindedFunc = useCallback((e) => {
     // the || is for either Mac or Windows OS
     // Undo
-    console.log('keydown');
     (e.key === 'z' && e.metaKey && !e.shiftKey) ||
     (e.key === 'z' && e.ctrlKey && !e.shiftKey)
       ? handleUndo()

app/src/containers/MainContainer.tsx

@@ -47,8 +47,8 @@ const MainContainer = (props): JSX.Element => {
 
     async function checkStorageConnection() {
       try {
-        await Storage.list(''); // This is just a test operation
-        console.log('Connected to AWS S3 successfully.');
+        // await Storage.list(''); // This is just a test operation
+        // console.log('Connected to AWS S3 successfully.');
       } catch (error) {
         console.error('Error connecting to AWS S3:', error);
       }
@@ -60,7 +60,6 @@ const MainContainer = (props): JSX.Element => {
       await Storage.put(id, imgBuffer, {
         contentType: 'image/png',
       });
-      console.log('Screenshot uploaded to S3');
     } catch (error) {
       alert('Error uploading screenshot: ' + error);
     }

app/src/helperFunctions/cssRefresh.tsx

@@ -2,7 +2,6 @@
 // this is not currently being used for the website version
 const cssRefresher = () => {
   const oldStylesheet = document.getElementById('stylesheet');
-  console.log(oldStylesheet);
   if (oldStylesheet !== null) oldStylesheet.remove();
   // const rando = Math.random() * 100000;
   const newStylesheet = document.createElement('LINK');
@@ -11,6 +10,5 @@ const cssRefresher = () => {
   newStylesheet.setAttribute('href', 'fake.css');
   newStylesheet.setAttribute('id', 'stylesheet');
   document.getElementById('renderFocus').append(newStylesheet);
-  console.log(newStylesheet);
 };
 export default cssRefresher;

app/src/helperFunctions/projectGetSaveDel.ts

@@ -86,7 +86,6 @@ export const publishProject = (
   const publishedProject = response
     .then((res) => res.json())
     .then((data) => {
-      console.log({_id: data._id, name: data.name, published:data.published, ...data.project});
       return {_id: data._id, name: data.name, published:data.published, ...data.project};
     })
     .catch((err) => {
@@ -117,7 +116,6 @@ export const unpublishProject = (
   const unpublishedProject = response
     .then((res) => res.json())
     .then((data) => {
-      console.log({_id: data._id, name: data.name, published:data.published, ...data.project});
       return {_id: data._id, name: data.name, published:data.published, ...data.project};
     })
     .catch((err) => {
@@ -142,7 +140,7 @@ export const deleteProject = (project: any): Promise<Object> => {
     body
   })
     .then((res) => res.json())
-    .then((data) => { console.log(data)
+    .then((data) => { 
       return {_id: data._id, name: data.name, published:data.published, ...data.project};
     })
     .catch((err) => console.log(`Error deleting project ${err}`));

server/controllers/marketplaceController.ts

@@ -64,7 +64,6 @@ const marketplaceController: MarketplaceController = {
         delete noId.published;
         const publishedProject = await Projects.create( { project: noId, createdAt, published: true, comments, name, userId, username })
         res.locals.publishedProject = publishedProject.toObject({ minimize: false });
-        console.log('published backend new', res.locals.publishedProject)
         return next();
       }
     }