with search

Author: dentonwong

app/src/components/App.tsx

@@ -1,6 +1,6 @@
 import '../public/styles/style.css';
 
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import {
   setInitialState,
   toggleLoggedIn
@@ -19,16 +19,20 @@ 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
   useEffect(() => {
     if (window.localStorage.getItem('ssid') !== 'guest') {
       dispatch(toggleLoggedIn(true));
     }
+    setToggleAttempt(!toggleAttempt);
   }, []);
 
   // 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
     if (!state.isLoggedIn) {
       localforage.getItem('guestProject').then((project) => {
@@ -39,6 +43,7 @@ export const App = (): JSX.Element => {
       });
     } 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');
@@ -56,7 +61,7 @@ export const App = (): JSX.Element => {
         }
       });
     }
-  }, []);
+  }, [toggleAttempt]);
   // useEffect(() => {
   //   // provide config properties to legacy projects so new edits can be auto saved
   //   // if (state.config === undefined) {

app/src/components/marketplace/MarketplaceCard.tsx

@@ -40,15 +40,15 @@ const MarketplaceCard = ({proj} :{proj: Project}) => {
   const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
   const open = Boolean(anchorEl);
   const state = useSelector((store:RootState) => store.appState);
-  console.log('HEY', state)
   const handleClick = (event: React.MouseEvent<HTMLElement>) => {
     setAnchorEl(event.currentTarget);
   };
   const handleClone = async () => { // creates a copy of the project 
     const updatedProject: Project = JSON.parse(JSON.stringify(proj)); // creates a deep copy
     updatedProject.forked = `Forked from ${updatedProject.username}`;
+    const username = window.localStorage.getItem('username');
     await axios.post('/cloneProject', {
-      updatedProject
+      updatedProject, username: username //passing in the username from localstorage for verification, just in case someone altered local storage
     });
     alert('Project cloned!');
     setAnchorEl(null);

app/src/components/right/LoginButton.tsx

@@ -3,16 +3,20 @@ import { useSelector, useDispatch } from 'react-redux';
 import { toggleLoggedIn } from '../../redux/reducers/slice/appStateSlice';
 import config from '../../../../config.js';
 import { RootState } from '../../redux/store';
+import Cookies from 'js-cookie';
 // note that API_BASE_URL is assigned to different pages on dev mode vs prod mode
 const { API_BASE_URL, API_BASE_URL2 } = config;
 
 export default function LoginButton() {
   const state = useSelector((store:RootState) => store.appState);
   const dispatch = useDispatch();
-
+  console.log('doc cookie 1', Cookies.get())
   const handleLogout = () => {
+    console.log('doc cookie 2', Cookies.get('ssid'))
+    // document.cookie = 'ssid' + '=; Max-Age=0';
+    console.log('doc cookie 3', Cookies.get())
+
     window.localStorage.clear();
-    document.cookie = 'ssid' + '=; Max-Age=0';
 
     if (state.isLoggedIn) {
       dispatch(toggleLoggedIn(false));

app/src/components/right/OpenProjects.tsx

@@ -24,7 +24,6 @@ export interface ProjectDialogProps {
 function ProjectsDialog(props: ProjectDialogProps) {
   const classes = useStyles();
   const { onClose, open, projects } = props;
-  console.log(projects)
   const state = useSelector((store:RootState) => store.appState);
   const dispatch = useDispatch();
   // If no projects selected, keep the name of the current displayed

app/src/containers/MarketplaceContainer.tsx

@@ -2,6 +2,7 @@ import MarketplaceCardContainer from '../components/marketplace/MarketplaceCardC
 import SearchBar from '../components/marketplace/Searchbar';
 import React, {useEffect, useState} from 'react';
 import axios from 'axios';
+import { CircularProgress } from '@mui/material';
 
 const MarketplaceContainer = () => {
 
@@ -28,13 +29,14 @@ const MarketplaceContainer = () => {
 
   }, []);
 
+
   const updateDisplayProjects = (searchResults) => {
 
     setDisplayProjects(searchResults);//have to pass this down as a prop so that the setting is done outside of Rendering otherwise callstack issues
 
   };
 
-
+  
 
 
   return (
@@ -48,9 +50,17 @@ const MarketplaceContainer = () => {
         <SearchBar marketplaceProjects = {marketplaceProjects} updateDisplayProjects = {updateDisplayProjects}/>
       </div>
         {displayProjects.length ? <MarketplaceCardContainer displayProjects = {displayProjects} /> : 
-          <h2 style={{textAlign: 'center'}}>
-              No Results Found!
-          </h2> 
+        
+          (/*while marketplaceProjects is length 0 means it is not done fetching.  Add loading...*/
+          marketplaceProjects.length  ? 
+            <h2 style={{textAlign: 'center'}}>
+                No Results Found!
+            </h2> 
+            :
+            <h2 style={{textAlign: 'center'}}> {/*added a circular progress bar*/}
+                Loading... <CircularProgress thickness={5.0}/>
+            </h2> 
+          )
         }
     </div>
   );

server/controllers/marketplaceController.ts

@@ -109,8 +109,8 @@ const marketplaceController: MarketplaceController = {
    * 
    */
   cloneProject: (req, res, next) => {
-    const { updatedProject } = req.body;
- 
+    const { updatedProject, username } = req.body;
+    console.log('username in cloneProject end', username);
     // pulls cookies from request
     const currentuserID = req.cookies.ssid
     //getting the username based on the cookies ssid
@@ -122,6 +122,13 @@ const marketplaceController: MarketplaceController = {
             err: 'Error in marketplaceController.cloneProjects findUser, check server logs for details'
           }
         });
+      }else if (user.username !== username){ //prevents users from editing their username to assign a different username to a cloned project
+        return next({
+          log: `Error in marketplaceController.cloneProjects. Window username did not match the corresponding db username: ${err}`,
+          message: {
+            err: 'Error in marketplaceController.cloneProjects. Window username did not match the corresponding db username, check server logs for details'
+          }
+        });
       }
       //adding the current user's username and userID since the project is now cloned
       updatedProject.username = user.username;