Merge pull request #23 from oslabs-beta/liamvictor/clonefix

Liamvictor/clonefix

Author: dentonwong

app/src/components/main/CanvasContainer.tsx

@@ -19,7 +19,6 @@ function CanvasContainer(props): JSX.Element {
   // onClickCodePreview swaps the rendered component from the canvas to the code preview editor
   const onClickCodePreview = () => {
     dispatch(toggleCodePreview());
-    console.log(state.codePreview);
   }
 
   const canvasContainerStyle = {

app/src/components/main/DemoRender.tsx

@@ -82,7 +82,7 @@ const DemoRender = (): JSX.Element => {
         const elementType = element.name;
         const childId = element.childId;
         const elementStyle = element.style;
-        const innerText = element.attributes.compText;
+        const innerText = element.attributes.compText; 
         const classRender = element.attributes.cssClasses;
         const activeLink = element.attributes.compLink;
         let renderedChildren;

app/src/components/marketplace/MarketplaceCard.tsx

@@ -18,8 +18,11 @@ import React from 'react';
 import imageSrc from '../../../../resources/marketplace_images/marketplace_image.png';
 import { red } from '@mui/material/colors';
 import axios from 'axios';
-import {useDispatch, useSelector} from 'react-redux'
+import { useDispatch, useSelector } from 'react-redux'
 import { RootState } from '../../redux/store';
+import { saveProject } from '../../helperFunctions/projectGetSaveDel';
+import { useHistory } from 'react-router-dom';
+import { openProject } from '../../redux/reducers/slice/appStateSlice';
 
 interface Project {
   forked: String,
@@ -36,21 +39,27 @@ interface Project {
 
 const ITEM_HEIGHT = 48;
 const MarketplaceCard = ({proj} :{proj: Project}) => {
+  const dispatch = useDispatch();
+  const history = useHistory();
   const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
   const open = Boolean(anchorEl);
   const state = useSelector((store:RootState) => store.appState);
   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, username: username //passing in the username from localstorage for verification, just in case someone altered local storage
-    });
+    const docId = proj._id;
+    const response = await axios.get(`/cloneProject/${docId}`);
+    const project = response.data.project;
     alert('Project cloned!');
     setAnchorEl(null);
+    return project;
+  };
+  
+  const handleCloneOpen = async() => {
+    const project = await handleClone();
+    history.push('/');
+    dispatch(openProject(project));
   };
   const handleClose = () => {
     setAnchorEl(null);
@@ -109,11 +118,19 @@ const MarketplaceCard = ({proj} :{proj: Project}) => {
           <MenuItem
             onClick={handleClone}
             sx={{
-              color: '#C6C6C6'
+              color: '#fff'
             }}
           >
             Clone
           </MenuItem>
+          <MenuItem
+            onClick={handleCloneOpen}
+            sx={{
+              color: '#fff'
+            }}
+          >
+            Clone and open
+          </MenuItem>
         </Menu>
       </Card>
     </>

app/src/containers/MarketplaceContainer.tsx

@@ -17,7 +17,6 @@ const MarketplaceContainer = () => {
           },
           withCredentials: true,
         });
-
         setMarketplaceProjects(response.data);
         setDisplayProjects(response.data);
 

app/src/public/styles/style.css

@@ -840,5 +840,5 @@ a.nav_link:hover {
 }
 
 li {
-  color: black !important;
+  color: black;
 }

server/controllers/marketplaceController.ts

@@ -1,3 +1,4 @@
+import Project from '../graphQL/resolvers/query';
 import { MarketplaceController } from '../interfaces';
 import { Projects, Users } from '../models/reactypeModels';
 
@@ -19,8 +20,12 @@ const marketplaceController: MarketplaceController = {
           }
         });
       }
-      // returns the entire project document, including the id
-      res.locals.publishedProjects = projects;
+      // returns the entire project document as an array
+      // need to convert each project document to an object
+      const convertedProjects = projects.map((project) => {
+        return project.toObject({ minimize: false });
+      });
+      res.locals.publishedProjects = convertedProjects;
       return next();
     });
   },
@@ -108,53 +113,32 @@ const marketplaceController: MarketplaceController = {
    * Middleware function that clones and saves project to user's library
    * 
    */
-  cloneProject: (req, res, next) => {
-    const { updatedProject, username } = req.body;
-    console.log('username in cloneProject end', username);
+  cloneProject: async (req, res, next) => {
     // pulls cookies from request
-    const currentuserID = req.cookies.ssid
-    //getting the username based on the cookies ssid
-    Users.findOne({ _id: currentuserID }, (err, user) => {
-      if (err) {
-        return next({
-          log: `Error in marketplaceController.cloneProjects findUser: ${err}`,
-          message: {
-            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;
-      updatedProject.userId = currentuserID;
-      updatedProject.project.forked = true; // updated the forked tag
+    const userId = req.cookies.ssid;
+    const username = req.cookies.username;
+    try { // trying to find project, update its userId and username to a new project, then save it
+      const originalProject = await Projects.findOne({ _id: req.params.docId }).exec();
+      const updatedProject = originalProject.toObject({ minimize: false }); // minimize false makes sure Mongoose / MongoDB does not remove nested properties with values of empty objects {}
+      updatedProject.userId = userId;
+      updatedProject.project.forked = true; 
+      updatedProject.published = false;
+      updatedProject.forked = `Forked from ${updatedProject.username}`; // add forked tag with current project owner username
+      updatedProject.username = username; // then switch to the cloning username
       delete updatedProject._id; // removes the old project id from the object
       updatedProject.createdAt = Date.now();
-      updatedProject.published = false;
-
-      Projects.create(
-        // creates a copy of the project to the user's library with a new generated _id
-        updatedProject,
-        (err, result) => {
-          if (err) {
-            return next({
-              log: `Error in marketplaceController.cloneProject: ${err}`,
-              message: {
-                err: 'Error in marketplaceController.cloneProject, check server logs for details'
-              }
-            });
-          }
-          res.locals.clonedProject = result;
-          return next();
+      const clonedProject = await Projects.create(updatedProject);
+      res.locals.clonedProject = clonedProject.toObject({ minimize: false }); // need to convert back to an object to send to frontend, again make sure minimize is false
+      return next();
+    }
+    catch (err) {
+      return next({
+        log: `Error in marketplaceController.cloneProject: ${err}`,
+        message: {
+          err: 'Error in marketplaceController.cloneProject, check server logs for details'
         }
-      );
-    })
+      });
+    }
   },
 };
 export default marketplaceController;

server/controllers/userController.ts

@@ -76,7 +76,6 @@ const userController: UserController = {
         // if no error found when creating a new user, send back user ID in res.locals
         res.locals.id = newUser.id;
         // send back username to store on cookies for forking projects
-        console.log(username);
         res.locals.username = username;
         return next();
       }

server/server.ts

@@ -218,9 +218,8 @@ app.get(
 );
 
 // Clone from marketplace
-app.post(
-  '/cloneProject',
-  sessionController.isLoggedIn,
+app.get(
+  '/cloneProject/:docId',
   marketplaceController.cloneProject, 
   (req, res) => res.status(200).json(res.locals.clonedProject)
 );