implement project download feature for each user

Author: khuongdn16

app/src/Dashboard/Project.jsx

@@ -3,7 +3,7 @@ import { gql, useMutation } from '@apollo/client';
 import PropTypes from 'prop-types';
 
 
-const Project = ({ name, likes, projId, userId }) => {
+const Project = ({ name, likes, projId, userId, username }) => {
 
   // IMPORTANT: 
   // 1) schema change projId => id to allows Apollo Client cache auto-update. Only works with 'id'
@@ -20,7 +20,19 @@ const Project = ({ name, likes, projId, userId }) => {
 
   const [addLike] = useMutation(ADD_LIKE);
 
-  function handleClick(e) {
+
+  const MAKE_COPY = gql`
+  mutation MakeCopy ($userId: ID!, $projId: ID!, $username: String!) {
+    makeCopy(userId: $userId, projId: $projId, username: $username) 
+    {
+      id
+    }
+  }`;
+  
+  const [ makeCopy ] = useMutation(MAKE_COPY);
+
+
+  function handleLike(e) {
     e.preventDefault();
     // IMPORTANT: DO NOT ADD extra comma to the last line of the variable object, the query will not work
     const myVar = {
@@ -34,12 +46,37 @@ const Project = ({ name, likes, projId, userId }) => {
     addLike(myVar);
   }
 
+  // Use current user info to make a make copy of another user's project
+  const currUserSSID = window.localStorage.getItem('ssid') || 'unavailable';
+  const currUsername = window.localStorage.getItem('username') || 'unavailable';
+  // if (userSSID !== 'guest') {
+  //   myVar = { userId: userSSID };
+  // }
+
+  function handleDownload(e) {
+    e.preventDefault();
+    const myVar = {
+      variables:
+      {
+        projId,
+        userId: currUserSSID,
+        username: currUsername,
+      },
+    };
+    // send Mutation
+    makeCopy(myVar);
+  }
+
   return (
   <div className = 'project'>
     <h2>Project: { name }</h2>
     {/* <h3>Project ID: {projId} </h3> */}
+    <h3>Author: { username }</h3>
     <h3>Likes: { likes }</h3>
-    <button onClick={ handleClick }>like me!</button>
+    <div>
+      <button onClick={ handleLike }>like me!</button>
+      <button onClick={ handleDownload }>download me!</button>
+    </div>
   </div>
   );
 };
@@ -49,6 +86,7 @@ Project.propTypes = {
   name: PropTypes.string.isRequired,
   projId: PropTypes.string.isRequired,
   userId: PropTypes.string.isRequired,
+  username: PropTypes.string.isRequired,
   likes: PropTypes.number.isRequired,
 };
 

app/src/Dashboard/ProjectContainer.jsx

@@ -14,16 +14,20 @@ const ProjectContainer = () => {
     getAllProjects(userId: $userId) { 
       name 
       likes 
-      id 
+      id
+      userId
+      username 
     }
   }`;
 
-  // For now, if cookie exists, pull projects for the specific user only, otherwise pull all projects
-  const userSSID = window.localStorage.getItem('ssid') || '';
   let myVar = {};
-  if (userSSID !== 'guest') {
-    myVar = { userId: userSSID };
-  }
+  // Need this for the individual user dasboard, for now, dashboard shows all projects from all users
+  const userSSID = window.localStorage.getItem('ssid') || 'unavailable';
+  const username = window.localStorage.getItem('username') || 'unavailable';
+  // if (userSSID !== 'guest') {
+  //   myVar = { userId: userSSID };
+  // }
+
   // useQuery hook abstracts fetch request
   const { loading, error, data } = useQuery(GET_PROJECTS, { pollInterval: 2000, variables: myVar } ); // Need to find where the userId is stored for the logged in user.
   if (loading) return <p>Loading...</p>;
@@ -36,12 +40,14 @@ const ProjectContainer = () => {
     key= { index }
     name = {proj.name}
     likes = {proj.likes}
-    userId = {userSSID}
+    userId = {proj.userId}
+    username = {proj.username}
     projId = {proj.id}
     />);
 
   return (
       <div>
+        <h1> Public Dashboard </h1>
         <Link to="/">
           <button type="button">Go Back</button>
         </Link>

app/src/helperFunctions/auth.ts

@@ -30,6 +30,9 @@ export const sessionIsCreated = (
       if (data.sessionId && typeof data.sessionId === 'string') {
         // check that a session id was passed down
         window.localStorage.setItem('ssid', data.sessionId);
+        // save username locally, will be added to saved project for each user
+        window.localStorage.setItem('username', username);
+
         return 'Success';
       }
       return data; // error message returned from userController.verifyUser
@@ -61,6 +64,8 @@ export const newUserIsCreated = (
       if (data.sessionId && typeof data.sessionId === 'string') {
         // check that a session id was passed down
         window.localStorage.setItem('ssid', data.sessionId);
+        // save username locally, will be added to saved project for each user
+        window.localStorage.setItem('username', username);
         return 'Success';
       }
       return data; // response is either Email Taken or Username Taken, refer to userController.createUser

app/src/helperFunctions/projectGetSaveDel.ts

@@ -32,7 +32,8 @@ export const saveProject = (
   const body = JSON.stringify({
     name,
     project: workspace,
-    userId: window.localStorage.getItem('ssid')
+    userId: window.localStorage.getItem('ssid'),
+    username: window.localStorage.getItem('username'),
   });
   const project = fetch(`${serverURL}/saveProject`, {
     method: 'POST',

server/controllers/projectController.js

@@ -6,11 +6,11 @@ const projectController = {};
 
 projectController.saveProject = (req, res, next) => {
   // pull project name and project itself from body
-  const { name, project, userId } = req.body;
+  const { name, project, userId, username } = req.body;
   // pull ssid from cookies for user id
   Projects.findOneAndUpdate(
     // looks in projects collection for project by user and name
-    { name, userId },
+    { name, userId, username },
     // update or insert the project
     { project },
     // Options:

server/graphQL/resolvers/mutation.js

@@ -47,6 +47,7 @@ const Project = {
         name: resp.name,
         id: resp._id,
         userId: resp.userId,
+        username: resp.username,
         likes: resp.likes,
       })}
 
@@ -55,11 +56,12 @@ const Project = {
       name: 'Error',
       id: 'Error',
       userId: 'Error',
+      username: 'Error',
       likes: -1,
     };
   },
 
-  makeCopy: async (parent, { projId, userId }) => {
+  makeCopy: async (parent, { projId, userId, username }) => {
     const filter = { _id: projId };
     const target = await Projects.findOne(filter);
     // make a copy with the passed in userId
@@ -68,6 +70,7 @@ const Project = {
       likes: target.likes,
       project: target.project,
       userId,
+      username,
     };
     const resp = await Projects.create(copy);
 
@@ -76,6 +79,7 @@ const Project = {
         name: resp.name,
         id: resp._id,
         userId: resp.userId,
+        username: resp.username,
         likes: resp.likes,
       })}
 
@@ -84,6 +88,7 @@ const Project = {
       name: 'Error',
       id: 'Error',
       userId: 'Error',
+      username: 'Error',
       likes: -1,
     };
   },

server/graphQL/resolvers/query.js

@@ -1,4 +1,4 @@
-const { Tests, Projects } = require('../../models/reactypeModels');
+const { Tests, Projects, Users } = require('../../models/reactypeModels');
 
 // Link to Apollo Query Types:
 // https://www.apollographql.com/docs/apollo-server/data/resolvers/#defining-a-resolver
@@ -32,6 +32,7 @@ const Project = {
         name: resp.name,
         id: resp._id,
         userId: resp.userId,
+        username: resp.username,
         likes: resp.likes,
       });
     }
@@ -41,13 +42,15 @@ const Project = {
       name: 'Error',
       id: 'Error',
       userId: 'Error',
+      username: 'Error',
       likes: -1,
     };
   },
 
   getAllProjects: async (parent, { userId }) => {
+
     let resp = await Projects.find({});
-    // console.log('resp >>> ', resp);
+    // console.log('getAllProjects resp >>> ', resp);
     if (userId) {
       // use loosely equal for the callback because there are some discrepancy between the type of userId from the db vs from the mutation query
       resp = resp.filter(proj => proj.userId == userId);
@@ -58,6 +61,7 @@ const Project = {
         name: proj.name,
         id: proj._id,
         userId: proj.userId,
+        username: proj.username,
         likes: proj.likes,
       }));
     }
@@ -67,6 +71,7 @@ const Project = {
       name: 'Error',
       id: 'Error',
       userId: 'Error',
+      username: 'Error',
       likes: -1,
     }];
   },

server/graphQL/typeDefs.js

@@ -29,20 +29,20 @@ const Project = gql`
 
   type Mutation {
     addLike(projId: ID!, likes: Int!): Project
-    makeCopy(projId: ID!, userId: ID!): Project
+    makeCopy(projId: ID!, userId: ID!, username: String!): Project
   }
 
   type Project {
     name: String!
     likes: Int
     id: ID!
     userId: ID!
+    username: String!
   }
 
   type Query {
     getProject(projId: ID!): Project
     getAllProjects(userId: ID): [Project]
-    getLikedProjects(userId: ID): [Project]
   }
 `;
 

server/models/reactypeModels.js

@@ -64,6 +64,7 @@ const projectSchema = new Schema({
     type: Schema.Types.ObjectId,
     ref: 'Users',
   },
+  username: {type: String, required: true },
   createdAt: { type: Date, default: Date.now }
 });