implement projects sync between Dashboard and main App. Dashboard actively polls the server for syncing

Author: khuongdn16

app/src/Dashboard/Form.jsx

@@ -46,7 +46,7 @@ const Form = ({ description, id, likes }) => {
 // Variable validation using propTypes
 Form.propTypes = {
   description: PropTypes.string.isRequired,
-  id: PropTypes.id.isRequired,
+  id: PropTypes.string.isRequired,
   likes: PropTypes.number.isRequired,
 };
 

app/src/Dashboard/Project.jsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { gql, useMutation } from '@apollo/client';
+import PropTypes from 'prop-types';
+
+
+const Project = ({ name, likes, projId, userId }) => {
+
+  // IMPORTANT: 
+  // 1) schema change projId => id to allows Apollo Client cache auto-update. Only works with 'id'
+  // 2) always request the 'id' in a mutation request
+
+  const ADD_LIKE = gql`
+  mutation AddLike($projId: ID!, $likes: Int!) {
+    addLike(projId: $projId, likes: $likes) 
+    {
+      id
+      likes
+    }
+  }`;
+
+  const [addLike] = useMutation(ADD_LIKE);
+
+  function handleClick(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:
+      {
+        projId,
+        likes: likes + 1,
+      },
+    };
+    // send Mutation
+    addLike(myVar);
+  }
+
+  return (
+  <div className = 'project'>
+    <h2>Project: { name }</h2>
+    {/* <h3>Project ID: {projId} </h3> */}
+    <h3>Likes: { likes }</h3>
+    <button onClick={ handleClick }>like me!</button>
+  </div>
+  );
+};
+
+// Variable validation using propTypes
+Project.propTypes = {
+  name: PropTypes.string.isRequired,
+  projId: PropTypes.string.isRequired,
+  userId: PropTypes.string.isRequired,
+  likes: PropTypes.number.isRequired,
+};
+
+
+export default Project;

app/src/Dashboard/ProjectContainer.jsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+import { gql, useQuery } from '@apollo/client';
+
+import Project from './Project.jsx';
+// Implement Apollo Client useQuery hook to retrieve data from the server through graphQL. This includes 2 steps:
+// 1) Impliment Apollo Provider in the top component in ./src/index.js, this allows children components access to the queried data
+// 2) useQuery hook will update the data stored in Apollo Client's cache and automatically trigger child components rendering
+
+const ProjectContainer = () => {
+  // define the graphQL query string
+  const GET_PROJECTS = gql`query GetAllProjects($userId: ID) {
+    getAllProjects(userId: $userId) { 
+      name 
+      likes 
+      id 
+    }
+  }`;
+
+  // 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 };
+  }
+  // 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>;
+  if (error) return <p>Error :{error}</p>;
+  // based on resolver(getAllProject) for this query, the data is stored in the data object with the key 'getAllProjects'
+  const myProjs = data.getAllProjects;
+  console.log('Projects >>> ', myProjs);
+  // generate an array of Project components based on data
+  const projects = myProjs.map((proj, index) => <Project 
+    key= { index }
+    name = {proj.name}
+    likes = {proj.likes}
+    userId = {userSSID}
+    projId = {proj.id}
+    />);
+
+  return (
+      <div>
+        <Link to="/">
+          <button type="button">Go Back</button>
+        </Link>
+        <div className = "projectContainer">
+          {projects}
+        </div>
+      </div>
+  );
+};
+
+export default ProjectContainer;

app/src/Dashboard/navbar.jsx

@@ -8,7 +8,7 @@ $light-grey: #bfcbd4;
 $light-blue: #759cc9;
 $button-blue: #24BCFF; */
 
-.form {
+.form , .project{
   display: flex;
   flex-direction: column;
   background-color: white;
@@ -23,7 +23,7 @@ $button-blue: #24BCFF; */
   width: 250px;
 }
 
-.formContainer {
+.formContainer , .projectContainer{
   display: flex;
   flex-flow: row wrap;
 }

app/src/Dashboard/styles.css

@@ -20,7 +20,9 @@ import {
 /*
 *  Dashboard
 */
-import Dashboard from './Dashboard/FormsContainer.jsx';
+// import TestDashboard from './Dashboard/FormsContainer.jsx';
+import ProjectDashboard from './Dashboard/ProjectContainer.jsx';
+
 import styles from './Dashboard/styles.css';
 import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';
 
@@ -56,7 +58,7 @@ ReactDOM.render(
         <Route exact path="/signup" component={SignUp} />
         <Route exact path="/password" component={FBPassWord} />
         <PrivateRoute exact path="/" component={App} />
-        <Route exact path="/dashboard" component={Dashboard} />
+        <Route exact path="/dashboard" component={ProjectDashboard} />
         <Route exact path="/tutorial" component={Tutorial} />
         <Route exact path="/tutorialPage/:learn" component={TutorialPage} />
       </Switch>

app/src/index.js

@@ -45,15 +45,15 @@ const Project = {
     if (resp) {
       return ({
         name: resp.name,
-        projId: resp._id,
+        id: resp._id,
         userId: resp.userId,
         likes: resp.likes,
       })}
 
     // TODO: Go back to this to see how to handle error later
     return {
       name: 'Error',
-      projId: 'Error',
+      id: 'Error',
       userId: 'Error',
       likes: -1,
     };
@@ -74,15 +74,15 @@ const Project = {
     if (resp) {
       return ({
         name: resp.name,
-        projId: resp._id,
+        id: resp._id,
         userId: resp.userId,
         likes: resp.likes,
       })}
 
     // TODO: Go back to this to see how to handle error later
     return {
       name: 'Error',
-      projId: 'Error',
+      id: 'Error',
       userId: 'Error',
       likes: -1,
     };

server/graphQL/resolvers/mutation.js

@@ -30,39 +30,48 @@ const Project = {
     if (resp) {
       return ({
         name: resp.name,
-        projId: resp._id,
+        id: resp._id,
         userId: resp.userId,
         likes: resp.likes,
-      })}
+      });
+    }
 
     // TODO: Go back to this to see how to handle error later
-    return { 
+    return {
       name: 'Error',
-      projId: 'Error',
+      id: 'Error',
       userId: 'Error',
       likes: -1,
     };
   },
 
-  getAllProjects: async () => {
-    const resp = await Projects.find({});
+  getAllProjects: async (parent, { userId }) => {
+    let resp = await Projects.find({});
+    // console.log('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);
+    }
+
     if (resp) {
       return resp.map(proj => ({
         name: proj.name,
-        projId: proj._id,
+        id: proj._id,
         userId: proj.userId,
         likes: proj.likes,
       }));
     }
+
     // TODO: Go back to this to see how to handle error later
-    return [{ 
+    return [{
       name: 'Error',
-      projId: 'Error',
+      id: 'Error',
       userId: 'Error',
       likes: -1,
     }];
   },
 
+
 };
 
 module.exports = {

server/graphQL/resolvers/query.js

@@ -35,13 +35,14 @@ const Project = gql`
   type Project {
     name: String!
     likes: Int
-    projId: ID!
+    id: ID!
     userId: ID!
   }
 
   type Query {
     getProject(projId: ID!): Project
-    getAllProjects: [Project]
+    getAllProjects(userId: ID): [Project]
+    getLikedProjects(userId: ID): [Project]
   }
 `;
 

server/graphQL/typeDefs.js

@@ -58,7 +58,7 @@ const sessionSchema = new Schema({
 
 const projectSchema = new Schema({
   name: String,
-  likes: Number,
+  likes: { type: Number, default: 0 },
   project: { type: Object, required: true },
   userId: {
     type: Schema.Types.ObjectId,