implement toggle publish state

Author: khuongdn16

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

@@ -26,18 +26,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);
   });
 
   return (

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
+    }
+  }`;

server/graphQL/resolvers/mutation.js

@@ -71,6 +71,26 @@ const Project = {
     });
   },
 
+  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,
+        likes: resp.likes,
+        published: resp.published,
+      });
+    }
+
+    throw new UserInputError('Project is not found. Please try another project ID', {
+      argumentName: 'projId',
+    });
+  },
+
   publishProject: async (parent, { projId, published }) => {
 
     const filter = { _id: projId };