Adding todo component and GraphQL queries/mutations

- Added TodoApp, TodoFooter, and TodoItem components
- Handler functions for queries and mutations
- Added GraphQL schema file, README docs, and config template JSON
- Util js files: GraphQLData, defs, history, and Utils

Author: prashant-shahi

todo-app-react/.gitignore

@@ -21,3 +21,6 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+# configurations
+config.json

todo-app-react/README.md

@@ -1,68 +1,276 @@
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+# Todo React App powered by Dgraph
 
-## Available Scripts
+Todo React App using GraphQL powered by Dgraph.
 
-In the project directory, you can run:
+### GraphQL Schema Design for Dgraph
 
-### `yarn start`
+At first, when we visualize the main components of Todo App, we get node as shown below:
 
-Runs the app in the development mode.<br />
-Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+![Todo Graph](./todo-graph.png)
 
-The page will reload if you make edits.<br />
-You will also see any lint errors in the console.
+Equivalent GraphQL schema for the graph above would be as follow:
 
-### `yarn test`
+```graphql
+type Task {
+    ...
+}
 
-Launches the test runner in the interactive watch mode.<br />
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+type User {
+    ...
+}
+```
 
-### `yarn build`
+So what do you think we should have for the Task and User nodes?
+
+We have mainly a title and a status to check if the Todo was completed.
+Next up, we know User has username, a unique identifier for the user,
+and name of the user.
+
+Apart from the fields of the nodes, we also have relationships between Task and User nodes.
+
+![Todo Graph complete](./todo-graph-2.png)
+
+We represent that in the GraphQL schema shown below:
+
+```graphql
+type Task {
+    id: ID!
+    title: String!
+    completed: Boolean!
+}
+
+type User {
+    username: String!
+    name: String
+}
+```
+
+_Note: You will be required to add custom directives to support additional functionalities of Dgraph._
+
+### Set Up the Environment
+
+Before we begin, make sure that you have [Docker](https://docs.docker.com/install/)
+installed on your machine.
+
+Let's begin by starting Dgraph standalone by running the command below:
+
+```bash
+docker run --rm -it -p 8080:8080 -v ~/dgraph:/dgraph dgraph/standalone:v20.03.1
+```
+
+Save the content below as `schema.graphql`.
+
+```graphql
+type Task {
+    id: ID!
+    title: String! @search(by: [fulltext])
+    completed: Boolean! @search
+    user: User!
+}
 
-Builds the app for production to the `build` folder.<br />
-It correctly bundles React in production mode and optimizes the build for the best performance.
+type User {
+    username: String! @id @search(by: [hash])
+    name: String
+    tasks: [Task] @hasInverse(field: user)
+}
+```
 
-The build is minified and the filenames include the hashes.<br />
-Your app is ready to be deployed!
+Let's load up the GraphQL schema file to Dgraph:
 
-See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+```bash
+curl -X POST localhost:8080/admin/schema --data-binary '@schema.graphql'
+```
 
-### `yarn eject`
+If you’ve followed the steps above correctly, there’s a GraphQL server up and running.
+You can access that GraphQL endpoint with any of the great GraphQL developer tools.
+Good choices include GraphQL Playground, Insomnia, GraphiQL and Altair.
 
-**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
+Set up any of them and point it at `http://localhost:8080/graphql`. If you know lots about GraphQL, you might want to explore the schema, queries and mutations that were generated from the input.
 
-If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
+### Mutating Data
 
-Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
+Let's add a user and some todos in our Todo App.
 
-You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
+```graphql
+mutation {
+  addUser(input: [
+    {
+      username: "alice@dgraph.io",
+      name: "Alice",
+      tasks: [
+        {
+          title: "Avoid touching your face",
+          completed: false,
+        },
+        {
+          title: "Stay safe",
+          completed: false
+        },
+        {
+          title: "Avoid crowd",
+          completed: true,
+        },
+        {
+          title: "Wash your hands often",
+          completed: true
+        }
+      ]
+    }
+  ]) {
+    user {
+      username
+      name
+      tasks {
+        id
+        title
+      }
+    }
+  }
+}
+```
 
-## Learn More
+### Querying Data
 
-You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+Let's fetch the todos to list in our Todo App:
 
-To learn React, check out the [React documentation](https://reactjs.org/).
+```graphql
+query {
+  queryTask {
+    id
+    title
+    completed
+    user {
+        username
+    }
+  }
+}
+```
 
-### Code Splitting
+Running the query above should return JSON response as shown below:
 
-This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting
+```json
+{
+  "data": {
+    "queryTask": [
+      {
+        "id": "0x3",
+        "title": "Avoid touching your face",
+        "completed": false,
+        "user": {
+          "username": "alice@dgraph.io"
+        }
+      },
+      {
+        "id": "0x4",
+        "title": "Stay safe",
+        "completed": false,
+        "user": {
+          "username": "alice@dgraph.io"
+        }
+      },
+      {
+        "id": "0x5",
+        "title": "Avoid crowd",
+        "completed": true,
+        "user": {
+          "username": "alice@dgraph.io"
+        }
+      },
+      {
+        "id": "0x6",
+        "title": "Wash your hands often",
+        "completed": true,
+        "user": {
+          "username": "alice@dgraph.io"
+        }
+      }
+    ]
+  }
+}
+```
 
-### Analyzing the Bundle Size
+### Querying Data with Filters
 
-This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size
+Before we get into querying data with filters, we will be required
+to define search indexes to the specific fields.
 
-### Making a Progressive Web App
+Let's say we have to run a query on the _completed_ field, for which
+we add `@search` directive to the field as shown in the schema below:
 
-This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app
+```graphql
+type Task {
+  id: ID!
+  title: String!
+  completed: Boolean! @search
+}
+```
 
-### Advanced Configuration
+The `@search` directive are added to support the native search indexes of **Dgraph**.
+
+Now, let's fetch all todos which are completed :
+
+```graphql
+query {
+  queryTask(filter: {
+    complete: {
+      eq: "true"
+    }
+  }) {
+    id
+    title
+  }
+}
+```
+
+Next, let's say we have to run a query on the _title_ field, for which
+we add another `@search` directive to the field as shown in the schema below:
+
+```graph
+type Task {
+    id: ID!
+    title: String! @search(by: [fulltext])
+    completed: Boolean! @search
+}
+```
+
+The `fulltext` search index provides the advanced search capability to perform equality
+comparision as well as matching with language specific stemming and stopwords.
+
+Now, let's try to fetch todos whose title has the word _"remember"_ :
+
+```graphql
+query {
+  queryTask(filter: {
+    title: {
+      alloftext: "remember"
+    }
+  }) {
+    id
+    title
+    completed
+  }
+}
+```
+
+## Bring up ToDo App
+
+### `yarn install`
+
+Install the dependencies needed to bring up the application.
+
+### `yarn start`
+
+Runs the Todo application.<br />
+Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+
+### `yarn build`
 
-This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration
+Compiles the Todo application and minifies to generate the production build.
 
-### Deployment
+## Screenshots
 
-This section has moved here: https://facebook.github.io/create-react-app/docs/deployment
+![Todo App 1](./todo-1.png)
 
-### `yarn build` fails to minify
+![Todo App 2](./todo-2.png)
 
-This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify
+---

todo-app-react/package.json

@@ -10,8 +10,12 @@
     "apollo-cache-inmemory": "^1.6.6",
     "apollo-client": "^2.6.10",
     "apollo-link-http": "^1.5.17",
+    "classnames": "^2.2.6",
+    "graphql-tag": "^2.10.3",
+    "history": "^4.10.1",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
+    "react-router-dom": "^5.2.0",
     "react-scripts": "3.4.1",
     "todomvc-app-css": "^2.3.0"
   },

todo-app-react/schema.graphql

@@ -0,0 +1,13 @@
+type Task {
+    id: ID!
+    title: String! @search(by: [fulltext])
+    completed: Boolean! @search
+    user: User!
+}
+
+type User {
+  username: String! @id @search(by: [hash])
+  name: String
+  tasks: [Task] @hasInverse(field: user)
+}
+

todo-app-react/src/App.js

@@ -1,15 +1,18 @@
 import React from 'react'
+import { Router, Switch } from "react-router-dom";
 
 import ApolloClient from "apollo-client";
 import { InMemoryCache } from "apollo-cache-inmemory";
 import { ApolloProvider } from "@apollo/react-hooks";
 import { createHttpLink } from "apollo-link-http";
 
+import TodoApp from "./TodoApp";
+import config from "./config.json";
 import './App.css';
 
 const createApolloClient = () => {
   const httpLink = createHttpLink({
-    uri: "http://localhost:8080/graphql",
+    uri: config.graphqlUrl,
     options: {
       reconnect: true,
     },
@@ -27,12 +30,8 @@ const App = () => {
     <ApolloProvider client={client}>
       <div>
         <h1>todos</h1>
-        <input
-          className="new-todo"
-          placeholder="What needs to be done?"
-          autoFocus={true}
-        />
-      </div>
+        <TodoApp />
+    </div>
     </ApolloProvider>
   );
 }