Merge branch 'dev' into denton/link

Author: dentonwong

app/src/components/marketplace/MarketplaceCard.tsx

@@ -17,8 +17,10 @@ import { MoreVert } from '@mui/icons-material';
 import React from 'react';
 import imageSrc from '../../../../resources/marketplace_images/marketplace_image.png';
 import { red } from '@mui/material/colors';
+import axios from 'axios';
 
 interface Project {
+  forked: String,
   comments: string[]
   createdAt: Date
   likes: number
@@ -37,9 +39,19 @@ const MarketplaceCard = ({proj} :{proj: Project}) => {
   const handleClick = (event: React.MouseEvent<HTMLElement>) => {
     setAnchorEl(event.currentTarget);
   };
-  const handleClose = () => {
+  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}`;
+    await axios.post('/cloneProject', {
+      updatedProject
+    });
+    alert('Project cloned!');
     setAnchorEl(null);
   };
+  const handleClose = () => {
+    setAnchorEl(null);
+  }
+
   return (
     <>
       <Card
@@ -90,7 +102,7 @@ const MarketplaceCard = ({proj} :{proj: Project}) => {
           }}
         >
           <MenuItem
-            onClick={handleClose}
+            onClick={handleClone}
             sx={{
               color: '#C6C6C6'
             }}

app/src/interfaces/Interfaces.ts

@@ -2,6 +2,7 @@ import { DragObjectWithType } from 'react-dnd';
 
 export interface State {
   name: string;
+  forked: boolean;
   isLoggedIn: boolean;
   components: Component[];
   rootComponents: number[];

app/src/redux/reducers/slice/appStateSlice.ts

@@ -13,6 +13,7 @@ import manageSeparators from '../../../helperFunctions/manageSeparators';
 
 export const initialState: State = {
   name: '',
+  forked: false,
   isLoggedIn: false,
   // config: { saveFlag: true, saveTimer: false },
   components: [

server/controllers/cookieController.ts

@@ -10,6 +10,18 @@ const cookieController: CookieController = {
       secure: true
     });
     return next();
+  }, 
+
+  /**
+   * Stores the current user's username in cookie (for use in cloning projects)
+   */
+  setUserCookie: (req, res, next) => {
+    res.cookie('username', res.locals.username, {
+      httpOnly: true, 
+      sameSite: 'none', 
+      secure: true
+    });
+    return next();
   }
 };
 

server/controllers/marketplaceController.ts

@@ -102,6 +102,39 @@ const marketplaceController: MarketplaceController = {
       })
 
     }
-  }
+  }, 
+
+  /**
+   * Middleware function that clones and saves project to user's library
+   * 
+   */
+  cloneProject: (req, res, next) => {
+    // pulls cookies from request
+    const userId = req.cookies.ssid;
+    const username = req.cookies.username;
+    const { updatedProject } = req.body;
+    updatedProject.userId = userId;
+    updatedProject.username = username;
+    updatedProject.project.forked = true; // updated the forked tag
+    delete updatedProject._id; // removes the old project id from the object
+    updatedProject.createdAt = Date.now();
+
+    Projects.create(
+      // creates a copy of the project to the user's library
+      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();
+      }
+    );
+  },
 };
 export default marketplaceController;

server/controllers/userController.ts

@@ -75,6 +75,9 @@ 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();
       }
     );
@@ -114,6 +117,7 @@ const userController: UserController = {
           if (isMatch) {
             // if password matches, save user id for following middleware
             res.locals.id = user.id;
+            res.locals.username = username;
             return next();
           }
           // if hashed password is not matched saved password in db, send 400 response

server/interfaces.ts

@@ -3,6 +3,7 @@ import { Document, NativeError } from 'mongoose';
 
 export interface CookieController {
   setSSIDCookie: RequestHandler;
+  setUserCookie: RequestHandler;
 }
 
 export interface ProjectController {
@@ -15,6 +16,7 @@ export interface MarketplaceController {
   publishProject: RequestHandler;
   getPublishedProjects: RequestHandler;
   unpublishProject: RequestHandler;
+  cloneProject: RequestHandler;
 }
 
 export interface RequestId extends Request {

server/models/reactypeModels.ts

@@ -79,6 +79,7 @@ const sessionSchema = new Schema({
 const projectSchema = new Schema(
   {
     name: String,
+    forked: String,
     likes: { type: Number, default: 0 },
     published: { type: Boolean, default: false },
     project: { type: Object, required: true },

server/server.ts

@@ -159,6 +159,7 @@ app.post(
   '/signup',
   userController.createUser,
   cookieController.setSSIDCookie,
+  cookieController.setUserCookie,
   sessionController.startSession,
   (req, res) => res.status(200).json({ sessionId: res.locals.ssid })
 );
@@ -167,6 +168,7 @@ app.post(
   '/login',
   userController.verifyUser,
   cookieController.setSSIDCookie,
+  cookieController.setUserCookie,
   sessionController.startSession,
   (req, res) => res.status(200).json({ sessionId: res.locals.ssid })
 );
@@ -217,6 +219,13 @@ app.get(
   (req, res) => res.status(200).json(res.locals.publishedProjects)
 );
 
+// Clone from marketplace
+app.post(
+  '/cloneProject',
+  marketplaceController.cloneProject, 
+  (req, res) => res.status(200).json(res.locals.clonedProject)
+);
+
 // serve index.html on the route '/'
 const isDocker = process.env.IS_DOCKER === 'true';
 console.log('this is running on docker: ', isDocker);