Merge pull request #4 from khuongdn16/feature/client/graphQL

Implement Dashboard for with actual data base

Author: khuongdn16

app/src/Dashboard/Form.jsx

@@ -1,13 +1,54 @@
 
 import React from 'react';
+import { gql, useMutation } from '@apollo/client';
+import PropTypes from 'prop-types';
 
 
-const Form = (props) => {
+const Form = ({ description, id, likes }) => {
+
+  const ADD_LIKE = gql`
+  mutation UpdateTest($id: ID, $name: String, $likes: Int) {
+    updateTest(id: $id, name: $name, likes: $likes ) 
+    {
+      description
+      id
+      likes
+    }
+  }`;
+
+  const [updateTest] = useMutation(ADD_LIKE);
+
+  // go to bed
+  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:
+      {
+        id,
+        name: 'testname',
+        likes: likes + 1,
+      },
+    };
+    // send Mutation
+    updateTest(myVar);
+  }
+
   return (
   <div className = 'form'>
-    <h2>{ props.description }</h2>
-    <button id={ props.id }>heart</button>
-  </div>);
+    <h2>{ description }</h2>
+    <button id={ id } onClick={ handleClick }>heart</button>
+    <h3>Likes: { likes }</h3>
+  </div>
+  );
 };
 
+// Variable validation using propTypes
+Form.propTypes = {
+  description: PropTypes.string.isRequired,
+  id: PropTypes.string.isRequired,
+  likes: PropTypes.number.isRequired,
+};
+
+
 export default Form;

app/src/Dashboard/FormsContainer.jsx

@@ -10,22 +10,24 @@ import Form from './Form.jsx';
 
 const FormsContainer = () => {
   // define the graphQL query string
-  const GET_TESTS = gql`query {readAllTests { description id }}`;
+  const GET_TESTS = gql`query {readAllTests { description id likes }}`;
   // useQuery hook abstracts fetch request
-  const { loading, error, data } = useQuery(GET_TESTS);
+  const { loading, error, data } = useQuery(GET_TESTS, { pollInterval: 1000	} );
   if (loading) return <p>Loading...</p>;
   if (error) return <p>Error :{error}</p>;
   // based on resolver(readAllTests) for this query, the data is stored in the data object with the key 'readAllTests'
   const myTests = data.readAllTests;
   // generate an array of Form components based on data
-  const forms = myTests.map((test, index) => <Form key={index} id={test.id} description={test.description} />);
+  const forms = myTests.map((test, index) => <Form key={index} id={test.id} description={test.description} likes={test.likes}/>);
 
   return (
       <div>
         <Link to="/">
           <button type="button">Go Back</button>
         </Link>
-        {forms}
+        <div className = "formContainer">
+          {forms}
+        </div>
       </div>
   );
 };

app/src/Dashboard/Project.jsx

@@ -0,0 +1,94 @@
+import React from 'react';
+import { gql, useMutation } from '@apollo/client';
+import PropTypes from 'prop-types';
+
+
+const Project = ({ name, likes, id, userId, username }) => {
+
+  // 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);
+
+
+  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 = {
+      variables:
+      {
+        projId: id,
+        likes: likes + 1,
+      },
+    };
+    // send Mutation
+    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: id,
+        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>
+    <div>
+      <button onClick={ handleLike }>like me!</button>
+      <button onClick={ handleDownload }>download me!</button>
+    </div>
+  </div>
+  );
+};
+
+// Variable validation using propTypes
+Project.propTypes = {
+  name: PropTypes.string.isRequired,
+  id: PropTypes.string.isRequired,
+  userId: PropTypes.string.isRequired,
+  username: PropTypes.string.isRequired,
+  likes: PropTypes.number.isRequired,
+};
+
+
+export default Project;

app/src/Dashboard/ProjectContainer.jsx

@@ -0,0 +1,61 @@
+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
+      userId
+      username 
+    }
+  }`;
+
+  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';
+  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>;
+  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 = {proj.userId}
+    username = {proj.username}
+    id = {proj.id}
+    />);
+
+  return (
+      <div>
+        <h1> Public Dashboard </h1>
+        <Link to="/">
+          <button type="button">Go Back</button>
+        </Link>
+        <div className = "projectContainer">
+          {projects}
+        </div>
+      </div>
+  );
+};
+
+export default ProjectContainer;

server/apollo-server.js renamed to 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,3 +23,8 @@ $button-blue: #24BCFF; */
   width: 250px;
 }
 
+.formContainer , .projectContainer{
+  display: flex;
+  flex-flow: row wrap;
+}
+

app/src/Dashboard/styles.css

@@ -168,7 +168,7 @@ export default function NavBar(props) {
           </Typography>
 
           {/* ==================================Dashboard Button================================================== */}
-          <Link to='/dashboard'>
+          <Link to='/dashboard' style ={ {textDecoration: 'none'} }>
             <Button
               variant="contained"
               color="primary"

app/src/components/top/NavBar.tsx

@@ -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/auth.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',

app/src/helperFunctions/projectGetSaveDel.ts

@@ -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

@@ -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: