Merge branch 'feature/server/graphQL' of https://github.com/khuongdn16/ReacType into navbar

Author: slhoehn

app/src/Dashboard/Project.tsx

@@ -1,6 +1,11 @@
 import React from 'react';
 import { useMutation } from '@apollo/client';
-import { ADD_LIKE, MAKE_COPY, DELETE_PROJECT } from './gqlStrings';
+import { 
+  ADD_LIKE,
+  MAKE_COPY,
+  DELETE_PROJECT,
+  PUBLISH_PROJECT,
+} from './gqlStrings';
 
 // Variable validation using typescript
 type props = {
@@ -9,10 +14,15 @@ type props = {
   userId: string,
   username: string,
   likes: number,
+  published: boolean,
 };
 
+// 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';
+
 const Project = ({
-  name, likes, id, username,
+  name, likes, id, username, published,
 }: props) : JSX.Element => {
   // IMPORTANT:
   // 1) schema change projId => id to allows Apollo Client cache auto-update. Only works with 'id'
@@ -21,10 +31,10 @@ const Project = ({
   const [addLike] = useMutation(ADD_LIKE);
   const [makeCopy] = useMutation(MAKE_COPY);
   const [deleteProject] = useMutation(DELETE_PROJECT);
+  const [publishProject] = useMutation(PUBLISH_PROJECT);
 
   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 = {
       variables:
       {
@@ -36,10 +46,6 @@ const Project = ({
     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';
- 
 
   function handleDownload(e) {
     e.preventDefault();
@@ -51,7 +57,6 @@ const Project = ({
         username: currUsername,
       },
     };
-    // send Mutation
     makeCopy(myVar);
   }
 
@@ -66,15 +71,31 @@ const Project = ({
     deleteProject(myVar);
   }
 
+  function handlePublish(e) {
+    e.preventDefault();
+    const myVar = {
+      variables:
+      {
+        projId: id,
+        published: !published,
+      },
+    };
+    publishProject(myVar);
+  }
+
+
   return (
   <div className = 'project'>
     <h2>Project: { name }</h2>
     <h3>Author: { username }</h3>
     <h3>Likes: { likes }</h3>
     <div>
       <button onClick={ handleLike }>like me!</button>
-      {currUsername !== username ?  <button onClick={ handleDownload }>download me!</button> : <span></span>}
-      <button onClick={ handleDelete }>delete</button>
+      {currUsername !== username ? <button onClick={ handleDownload }>download me!</button> : <span></span>}
+      {currUsername === username ? <button onClick={ handleDelete }>delete</button> : <span></span>}
+      { currUsername === username
+        ? <button onClick={ handlePublish }> {published ? 'Unpublish Me!' : 'Publish Me!'} </button>
+        : <span></span> }
     </div>
   </div>
   );

app/src/Dashboard/ProjectContainer.tsx

@@ -10,7 +10,6 @@ import NavBar from './NavbarDash';
 // 2) useQuery hook will update the data stored in Apollo Client's cache and automatically trigger child components rendering
 
 const ProjectContainer = () => {
-
   let myVar = {};
   // Need this for the individual user dasboard, for now, dashboard shows all projects from all users
   const userSSID = window.localStorage.getItem('ssid') || 'unavailable';
@@ -28,18 +27,19 @@ const ProjectContainer = () => {
   console.log('Projects >>> ', projects);
   // generate an array of Project components based on data
   const publicProjects = [];
-  const userProjects = []; 
+  const userProjects = [];
   projects.forEach((proj, index) => {
     const component = <Project
                   key= { index }
                   name = {proj.name}
                   likes = {proj.likes}
+                  published = { proj.published }
                   userId = {proj.userId}
                   username = {proj.username}
                   id = {proj.id}
                 />;
     if (username === proj.username) userProjects.push(component);
-    else publicProjects.push(component);
+    if (proj.published) publicProjects.push(component);
   });
 
 

app/src/Dashboard/gqlStrings.ts

@@ -8,7 +8,8 @@ export const GET_PROJECTS = gql`query GetAllProjects($userId: ID) {
     likes 
     id
     userId
-    username 
+    username
+    published 
   }
 }`;
 
@@ -19,11 +20,10 @@ export const ADD_LIKE = gql`
     addLike(projId: $projId, likes: $likes) 
     {
       id
-      likes
     }
   }`;
 
-export const  MAKE_COPY = gql`
+export const MAKE_COPY = gql`
   mutation MakeCopy ($userId: ID!, $projId: ID!, $username: String!) {
     makeCopy(userId: $userId, projId: $projId, username: $username) 
     {
@@ -38,3 +38,12 @@ export const DELETE_PROJECT = gql`
       id
     }
   }`;
+
+export const PUBLISH_PROJECT = gql`
+  mutation Publish($projId: ID!, $published: Boolean!) {
+    publishProject(projId: $projId, published: $published) 
+    {
+      id
+      published
+    }
+  }`;

package.json

@@ -171,6 +171,7 @@
     "@types/enzyme": "^3.10.5",
     "@types/enzyme-adapter-react-16": "^1.0.6",
     "@types/jest": "^25.1.5",
+    "apollo": "^2.32.5",
     "babel-eslint": "^8.2.6",
     "babel-jest": "^25.2.4",
     "babel-loader": "^8.1.0",

server/graphQL/resolvers/mutation.js

@@ -1,130 +1,117 @@
-const { Tests, Projects } = require('../../models/reactypeModels');
-
+const { UserInputError } = require('apollo-server-express');
+const { Projects, Users } = require('../../models/reactypeModels');
 /*
 * resolvers are functions that handles graphQL requests. This file defines the logic for graphQL mutation requests
 * Link to Apollo Mutations:
 * https://www.apollographql.com/docs/apollo-server/data/resolvers/#defining-a-resolver
 */
 
-const Test = {
-  addTest: async (parent, args) => {
-    const resp = await Tests.create({ name: args.name, likes: args.likes });
-    console.log('Added test', resp);
-    if (resp) return { description: resp.name, id: resp._id, likes: args.likes };
-    return { description: 'Error creating test', id: 'unknown', likes: 0 };
-  },
-
-  updateTest: async (parent, args) => {
-    // console.log('args >>> ', args);
-    const filter = { _id: args.id };
-    const update = { name: args.name, likes: args.likes };
-    const options = { new: true };
-    const resp = await Tests.findOneAndUpdate(filter, update, options);
-
-    console.log('Updated database with', resp);
-
-    if (resp) return { description: resp.name, id: resp._id, likes: resp.likes };
-    return { description: 'Error updating', id: resp._id, likes: 0 };
-  },
-
-  deleteTest: async (parent, args) => {
-    const filter = { _id: args.id };
-    const resp = await Tests.deleteOne(filter);
-    if (resp) return { description: resp.name, id: resp._id, likes: 0 };
-    return { description: 'Error updating', likes: 0 };
-  },
-};
-
-
 const Project = {
   addLike: async (parent, { projId, likes }) => {
     const filter = { _id: projId };
     const update = { likes };
     const options = { new: true };
     const resp = await Projects.findOneAndUpdate(filter, update, options);
-
+  
     if (resp) {
       return ({
         name: resp.name,
         id: resp._id,
         userId: resp.userId,
-        username: resp.username,
         likes: resp.likes,
+        published: resp.published,
       });
     }
 
-    // TODO: Go back to this to see how to handle error later
-    return {
-      name: 'Error',
-      id: 'Error',
-      userId: 'Error',
-      username: 'Error',
-      likes: -1,
-    };
+    throw new UserInputError('Project is not found. Please try another project ID', {
+      argumentName: 'projId',
+    });
   },
 
   makeCopy: async (parent, { projId, userId, username }) => {
     const filter = { _id: projId };
     const target = await Projects.findOne(filter);
-    
-    // make a copy with the passed in userId
-    // IMPORTANT: DO NOT CHANGE copy.name, it will create a nother copy of the document with the origional project name.
-    const copy = {
-      name: target.name,   
-      project: target.project,
-      userId,
-      username,
-    };
-    
-    // IMPORTANT: MUST MAKE A DEEP COPY OF target.project, otherwise, field 'style' is lost during the copy process. See 'minimize' option in projectSchema
-    
-    const resp = await Projects.create(copy);
 
+    if (!target) {
+      throw new UserInputError('Project is not found. Please try another project ID', {
+        argumentName: 'projId',
+      });
+    }
+
+    // check if user account exists
+    const user = await Users.findOne({ _id: userId });
+
+    if (user) {
+      // make a copy with the passed in userId
+      const copy = {
+        name: target.name,
+        project: target.project,
+        userId,
+        username,
+      };
+
+      // Make a copy of the requested project
+      const resp = await Projects.create(copy);
+      if (resp) {
+        return ({
+          name: resp.name,
+          id: resp._id,
+          userId: resp.userId,
+          username: resp.username,
+          likes: resp.likes,
+          published: resp.published,
+        });
+      }
+
+      throw new UserInputError('Internal Server Error');
+    }
+
+    throw new UserInputError('User is not found. Please try another user ID', {
+      argumentName: 'userId',
+    });
+  },
+
+  deleteProject: async (parent, { projId }) => {
+    const filter = { _id: projId };
+    const options = { strict: true };
+    const resp = await Projects.findOneAndDelete(filter, options);
+  
     if (resp) {
       return ({
         name: resp.name,
         id: resp._id,
         userId: resp.userId,
-        username: resp.username,
         likes: resp.likes,
+        published: resp.published,
       });
     }
 
-    // TODO: Go back to this to see how to handle error later
-    return {
-      name: 'Error',
-      id: 'Error',
-      userId: 'Error',
-      username: 'Error',
-      likes: -1,
-    };
+    throw new UserInputError('Project is not found. Please try another project ID', {
+      argumentName: 'projId',
+    });
   },
 
-  deleteProject: async (parent, { projId }) => {
+  publishProject: async (parent, { projId, published }) => {
+
     const filter = { _id: projId };
-    const options = { strict: true };
-    const resp = await Projects.findOneAndDelete(filter, options);
-    // console.log("resp", resp);
+    const update = { published };
+    const options = { new: true };
+    const resp = await Projects.findOneAndUpdate(filter, update, options);
     if (resp) {
       return ({
         name: resp.name,
-        likes: resp.likes,
         id: resp._id,
         userId: resp.userId,
-        username: resp.username,
+        likes: resp.likes,
+        published: resp.published,
       });
     }
-    return {
-      name: 'Error',
-      id: 'Error',
-      userId: 'Error',
-      username: 'Error',
-      likes: -1,
-    };
+
+    throw new UserInputError('Project is not found. Please try another project ID', {
+      argumentName: 'projId',
+    });
   },
-};
 
-module.exports = {
-  TestMutation: Test,
-  ProjectMutation: Project,
 };
+
+module.exports = Project;