Update Readme image and add comments

README.md

@@ -1,5 +1,7 @@
 ## SupaDo
 
-SupaPass Example Todo App using Graph QL
+SupaPass Example Todo App using create-react-app and Graph QL
+
+The 8-bit characters speed increases depending on how close the deadline is for each task.
 
 ![Screenshot](/screen.png)

public/index.html

@@ -10,26 +10,7 @@
       content="Web site created using create-react-app"
     />
     <style>
-      html, body, #root, #root>div {
-        height: 100%;
-        margin: 0;
-      }
-      body {
-      background: repeating-linear-gradient(
-  45deg,
-  #606dbc,
-  #606dbc 10px,
-  #465298 10px,
-  #465298 20px
-); }
-     .banner {
-       border-top-left-radius: 50px !important;
-       border-top-right-radius:50px !important;
-     }
-     .cardbanner {
-       border-top-left-radius: 60px !important;
-       border-top-right-radius:60px !important;
-     }
+
     </style>
 
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />

src/components/TaskItem.js

@@ -1,10 +1,14 @@
 import React,{ useState, useRef } from 'react';
-import Moment from 'react-moment';
+
+// components import
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import DatePicker from "react-datepicker";
-import { useMutation } from '@apollo/react-hooks';
 import EditableLabel from 'react-inline-editing';
 import Runner from './Runner';
+import Moment from 'react-moment';
+
+// Apollo Hooks and gql
+import { useMutation } from '@apollo/react-hooks';
 import { UPDATE_TODO, MARK_COMPLETE, CLEAR_TODO ,DELETE_TODO,UPDATE_TITLE } from '../services/TaskGql';
 
 
@@ -24,6 +28,8 @@ const TaskItem = (props) => {
 
   const dateRef = useRef();
 
+  // Graph QL Functions
+
   const markCompleted = () => {
     dateRef.current.setOpen(false);
     markComplete({
@@ -47,7 +53,7 @@ const TaskItem = (props) => {
       <FontAwesomeIcon className="ml-1 text-primary" icon="calendar-alt" />
     </div>
   );
-    // Ask question if delete option is chosen
+    // Ask check question if delete option is chosen
     if (deleting) return (
         <div className="row">
             <div className="col-8 text-center">
@@ -68,6 +74,7 @@ const TaskItem = (props) => {
     <div className="row">
       <div className="col-md-5 col-lg-5 col-xl-5 col-sm-4 col-xs-4 font-weight-bold my-auto">
         <div className="row align-items-center">
+          {/* Delete Button */}
           <FontAwesomeIcon
             icon="trash-alt"
             className="text-primary mr-1"
@@ -76,18 +83,22 @@ const TaskItem = (props) => {
             }}
           />
           <div className="mt-2">
+          {/* Editable Title Label */}
           <EditableLabel 
           text={props.todo.title} 
           onFocusOut={changeTitle} />
           </div>
         </div>
       </div>
       <div className="col-1 text-center">
+          {/* Runner animation based on dueDate */}
           <Runner dueDate={dueDate} completedDate={props.todo.completedDate} />
       </div>
       <div className="col text-right">
+        {/* Check if Task Completed */}
         {props.todo.completedDate == null ? (
           <div>
+            {/* Datepicker to update dueDate or Mark Completed */}
             <DatePicker
               ref={dateRef}
               withPortal
@@ -115,6 +126,7 @@ const TaskItem = (props) => {
           </div>
         ) : (
           <div className="mt-1">
+            {/* Show a star if task is completed */}
             <FontAwesomeIcon
               icon="star"
               size="2x"

src/components/TaskList.js

@@ -1,7 +1,11 @@
 import React from 'react';
-import { useQuery } from '@apollo/react-hooks';
+
+// components
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import TaskItem from './TaskItem';
+
+// Apollo Hooks and gql
+import { useQuery } from '@apollo/react-hooks';
 import { getTasksQuery } from '../services/TaskGql';
 
 

src/index.css

@@ -11,3 +11,26 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
+
+html, body, #root, #root>div {
+  height: 100%;
+  margin: 0;
+}
+
+body {
+background: repeating-linear-gradient(
+45deg,
+#606dbc,
+#606dbc 10px,
+#465298 10px,
+#465298 20px
+); }
+
+.banner {
+ border-top-left-radius: 50px !important;
+ border-top-right-radius:50px !important;
+}
+.cardbanner {
+ border-top-left-radius: 60px !important;
+ border-top-right-radius:60px !important;
+}

src/index.js

@@ -2,6 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
+// Get bootstrap and font awesome icons
 import 'bootstrap/dist/css/bootstrap.css';
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { fas } from '@fortawesome/free-solid-svg-icons'