add psuedo-code

Author: slhoehn

app/src/Dashboard/FormsContainer.jsx

@@ -1,58 +1,23 @@
-import React, { useContext, useState, useEffect } from 'react';
+import React from 'react';
 import { Link } from 'react-router-dom';
 
-import {
-  ApolloClient, InMemoryCache, gql, ApolloProvider, useQuery,
-} from '@apollo/client';
+import { gql, useQuery } from '@apollo/client';
 import Form from './Form.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 FormsContainer = () => {
-  // const [tests, updateTests] = useState([]);
-  /* GET using fetch */
-  // useEffect(() => {
-  //   console.log('inside useEffect');
-
-  //   fetch('http://localhost:5000/graphql', {
-  //     method: 'POST',
-  //     headers: {
-  //       'Content-Type': 'application/json',
-  //       Accept: 'application/json',
-  //     },
-  //     body: JSON.stringify({ query: '{readAllTests { description }}' }),
-  //   })
-  //     .then(res => res.json())
-  //     .then((resp) => {
-  //       // console.log('resp: ', resp);
-  //       const myTests = resp.data.readAllTests;
-  //       console.log('myTests: ', myTests);
-  //       updateTests(myTests);
-  //     })
-  //     .catch(err => console.log('error in readAllTests', err));
-  // }, []);
-
-
-  /* RULES OF HOOKS: DO NOT use hooks within hooks or conditionals */
-  // useEffect(() => {
-  //   const GET_TESTS = gql`query {readAllTests { description }}`;
-  //   const { loading, error, data } = useQuery(GET_TESTS);
-  //   if (loading) console.log('Loading...');
-  //   if (error) console.log(`Error :${error}`);
-  //   const myTests = data.readAllTests;
-  //   console.log('myTests: ', myTests);
-  //   updateTests(myTests);
-  // }, []);
-
-
+  // define the graphQL query string
   const GET_TESTS = gql`query {readAllTests { description id }}`;
-
+  // useQuery hook abstracts fetch request
   const { loading, error, data } = useQuery(GET_TESTS);
   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;
-  console.log('myTests: ', myTests);
-
+  // generate an array of Form components based on data
   const forms = myTests.map((test, index) => <Form key={index} id={test.id} description={test.description} />);
 
   return (

app/src/index.js

@@ -8,12 +8,6 @@ import SignUp from './components/login/SignUp.tsx';
 import FBPassWord from './components/login/FBPassWord.tsx';
 import Tutorial from './tutorial/Tutorial.tsx';
 import TutorialPage from './tutorial/TutorialPage.tsx';
-/*
-*  Dashboard
-*/
-import Dashboard from './Dashboard/FormsContainer.jsx';
-import styles from './Dashboard/styles.css';
-import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';
 
 import {
   HashRouter as Router,
@@ -22,10 +16,28 @@ import {
   Switch,
 } from 'react-router-dom';
 
+
+/*
+*  Dashboard
+*/
+import Dashboard from './Dashboard/FormsContainer.jsx';
+import styles from './Dashboard/styles.css';
+import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';
+
+const client = new ApolloClient({
+  uri: 'http://localhost:5000/graphql',
+  cache: new InMemoryCache()
+});
+
+/*
+*  
+*/
+
+
 const PrivateRoute = ({ component: Component, ...rest }) => (
   <Route
     {...rest}
-    render={props => {
+    render={ (props) => {
       return Cookies.get('ssid') || window.localStorage.getItem('ssid') ? (
         <Component {...props} />
       ) : (
@@ -36,24 +48,19 @@ const PrivateRoute = ({ component: Component, ...rest }) => (
 );
 
 
-const client = new ApolloClient({
-  uri: 'http://localhost:5000/graphql',
-  cache: new InMemoryCache()
-});
-
 ReactDOM.render(
   <ApolloProvider client={client}>
-  <Router>
-    <Switch>
-      <Route exact path="/login" component={SignIn} />
-      <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="/tutorial" component={Tutorial} />
-      <Route exact path="/tutorialPage/:learn" component={TutorialPage} />
-    </Switch>
-  </Router>
+    <Router>
+      <Switch>
+        <Route exact path="/login" component={SignIn} />
+        <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="/tutorial" component={Tutorial} />
+        <Route exact path="/tutorialPage/:learn" component={TutorialPage} />
+      </Switch>
+    </Router>
   </ ApolloProvider>,
   document.getElementById('app')
 );

server/graphQL/resolvers/mutation.js

@@ -1,26 +1,29 @@
 const { Tests } = 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
+*/
 
 
 module.exports = {
-
+  
   addTest: async (parent, args) => {
     const resp = await Tests.create({ name: args.name });
-    // console.log('Response >>> ', resp);
+    console.log('Added test', resp);
     if (resp) return { description: args.name };
     return { description: 'Error creating test' };
   },
-  updateTest: async (parent, args, context, info) => {
 
+  updateTest: async (parent, args) => {
     const filter = { _id: args.id };
     const update = { name: args.name };
-
     const resp = await Tests.updateOne(filter, update);
     console.log('Updated database with', resp);
     if (resp) return { description: args.name };
     return { description: 'Error updating' };
   },
 
-
   deleteTest: async (parent, args) => {
     const filter = { _id: args.id };
     const resp = await Tests.deleteOne(filter);

server/graphQL/resolvers/query.js

@@ -1,5 +1,8 @@
 const { Tests } = require('../../models/reactypeModels');
 
+// Link to Apollo Query Types:
+// https://www.apollographql.com/docs/apollo-server/data/resolvers/#defining-a-resolver
+
 module.exports = {
   readTest: async (parent, args) => {
     const resp = await Tests.findOne({ _id: args.id });

server/graphQL/typeDefs.js

@@ -1,10 +1,13 @@
 
 const { gql } = require('apollo-server-express');
 
+// Link to defining a schema in Apollo:
+// https://www.apollographql.com/docs/apollo-server/schema/schema/
+// The schema specifies which queries and mutations are available for clients
+// to execute against your data graph.
 
 const typeDefs = gql`
-  # Comments in GraphQL strings (such as this one) start with the hash (#) symbol.
-  
+
   type Mutation {
     addTest(name: String): Test
     updateTest(id: String, name: String): Test

server/models/reactypeModels.js

@@ -66,14 +66,17 @@ const projectSchema = new Schema({
   createdAt: { type: Date, default: Date.now }
 });
 
+// Test schema for implementing GraphQL
 const testSchema = new Schema({
   name: String,
 });
+const Tests = mongoose.model('Tests', testSchema);
+/* *********************************************** */
+
 
 const Users = mongoose.model('Users', userSchema);
 const Sessions = mongoose.model('Sessions', sessionSchema);
 const Projects = mongoose.model('Projects', projectSchema);
-const Tests = mongoose.model('Tests', testSchema);
 
 module.exports = {
   Users, Sessions, Projects, Tests,

server/server.js

@@ -58,16 +58,21 @@ GraphQl Router
 /* ******************************************************************* */
 const { ApolloServer } = require('apollo-server-express');
 
+// Query resolvers
 const query = require('./graphQL/resolvers/query');
-
+// Mutation resolvers
 const mutation = require('./graphQL/resolvers/mutation');
 
+// package resolvers into one variable to pass to Apollo Server
 const resolvers = {
   Query: query,
   Mutation: mutation,
 };
 
+// schemas used for graphQL
 const { typeDefs } = require('./graphQL/typeDefs');
+
+// instantiate Apollo server and attach to Express server, mounted at 'http://localhost:PORT/graphql'
 const server = new ApolloServer({ typeDefs, resolvers });
 server.applyMiddleware({ app });
 /** ****************************************************************** */