Submission

.gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

.travis.yml

@@ -0,0 +1,7 @@
+language: node_js
+node_js:
+  - "10.15.3"
+
+script:
+  - npm run lint
+  - npm test

README.md

@@ -1,2 +1,67 @@
-# lab-36
-Context API
+![cf](http://i.imgur.com/7v5ASc8.png) LAB
+============================================================================    
+
+## Lab 36: Context API
+
+### Author: Joseph Wolfe
+
+### Links and Resources
+* [PR](https://github.com/charmedsatyr-401-advanced-javascript/lab-36/pull/1)
+* [![Build Status](https://travis-ci.com/charmedsatyr-401-advanced-javascript/lab-36.svg?branch=submission)](https://travis-ci.com/charmedsatyr-401-advanced-javascript/lab-36)
+* [Netlify](https://youthful-rosalind-0dd0f6.netlify.com/)
+
+### Modules
+```
+.
+├── package.json
+├── public
+│   ├── favicon.ico
+│   ├── index.html
+│   └── manifest.json
+├── README.md
+├── src
+│   ├── app.js
+│   ├── app.test.js
+│   ├── components
+│   │   ├── counter
+│   │   │   ├── counter-provider.js
+│   │   │   └── index.js
+│   │   ├── if
+│   │   │   └── index.js
+│   │   └── todo
+│   │       ├── add-todo.js
+│   │       ├── count.js
+│   │       ├── form.js
+│   │       ├── index.js
+│   │       ├── item.js
+│   │       ├── list.js
+│   │       ├── todo-provider.js
+│   │       └── todo.scss
+│   └── index.js
+└── yarn.lock
+
+6 directories, 20 files
+
+```
+### Summary
+The application has been refactored to be fully modular and use the React Context API for functionality. Context wrappers only provide the appropriate context to their children; I intentionally avoided providing global context.
+
+`index.js` renders `<App/>`.
+`<App/>` renders components `<Counter/>` and `<ToDo/>`.
+
+Both `<Counter/>` and `<ToDo/>` components are function components that receive context from class component context providers, `<CounterProvider/>` and `<ToDoProvider/>`, respectively.
+
+`./src/components/counter/` contains all files related to `<Counter/>`. Its `index.js` contains and renders the `<Count/>`, `<Decrementer/>`, `<Incrementer/>`, and `<Counter/>` components.
+
+`./src/components/todo/` contains all files related to `<Todo/>`. Its `index.js` renders `<Count/>` (for the To Do List), `<AddToDo/>`, and `<List/>`. The `<ToDo/>` component uses `<If/>` from `./src/components/if/index.js` for some conditional logic.
+
+#### Tests
+* What assertions were made?
+  * A placeholder test is in place.
+
+* What assertions need to be / should be made?
+  * Snapshot and functional tests could be made for each component.
+  * Tests could ensure each component properly receives and handles its context.
+
+#### UML
+![UML](assets/uml.jpg)  

package.json

@@ -1,22 +1,46 @@
 {
-  "name": "demo-context-api",
-  "version": "1.0.0",
-  "description": "",
-  "keywords": [],
-  "main": "src/index.js",
+  "name": "lab-36",
+  "version": "0.1.0",
+  "private": true,
   "dependencies": {
-    "react": "16.8.6",
-    "react-dom": "16.8.6",
-    "react-jsonschema-form": "1.0.6",
-    "react-router-dom": "5.0.0",
-    "react-scripts": "3.0.0",
-    "uuid": "3.3.2"
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6",
+    "react-scripts": "3.0.0"
   },
-  "devDependencies": {},
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
-    "test": "react-scripts test --env=jsdom",
-    "eject": "react-scripts eject"
+    "test": "react-scripts test",
+    "eject": "react-scripts eject",
+    "lint": "eslint '**/*.js'"
+  },
+  "eslintConfig": {
+    "extends": "react-app"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "export CI=true && lint-staged && yarn test",
+      "pre-push": "export CI=true && lint-staged && yarn test"
+    }
+  },
+  "lint-staged": {
+    "*.{js,jsx}": "eslint '**/*.js'"
+  },
+  "devDependencies": {
+    "husky": "^2.2.0",
+    "lint-staged": "^8.1.6",
+    "node-sass": "^4.12.0"
   }
-}
+}

public/index.html

@@ -1,17 +1,16 @@
 <!DOCTYPE html>
 <html lang="en">
-
-<head>
-	<meta charset="utf-8">
-	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-	<meta name="theme-color" content="#000000">
-	<!--
-      manifest.json provides metadata used when your web app is added to the
-      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
+  <head>
+    <meta charset="utf-8" />
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-	<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
-	<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
-	<!--
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
       Only files inside the `public` folder can be referenced from the HTML.
@@ -20,15 +19,12 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-	<title>React App</title>
-</head>
-
-<body>
-	<noscript>
-		You need to enable JavaScript to run this app.
-	</noscript>
-	<div id="root"></div>
-	<!--
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
 
@@ -38,6 +34,5 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
-</body>
-
-</html>
+  </body>
+</html>

public/manifest.json

@@ -0,0 +1,15 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

src/app.js

@@ -1,11 +1,13 @@
-import React from 'react';
+import React, { Component } from 'react';
 
-import ToDo from './components/todo/todo.js';
+import Counter from './components/counter';
+import ToDo from './components/todo';
 
-export default class App extends React.Component {
+export default class App extends Component {
   render() {
     return (
       <>
+        <Counter />
         <ToDo />
       </>
     );

src/app.test.js

@@ -0,0 +1,5 @@
+describe('App component', () => {
+  it('should be good', () => {
+    expect(true).toBeTruthy();
+  });
+});

src/components/counter/counter-provider.js

@@ -0,0 +1,27 @@
+import React, { Component } from 'react';
+
+export const CounterContext = React.createContext();
+
+class CounterProvider extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      count: 0,
+      decrement: this.decrement.bind(this),
+      increment: this.increment.bind(this),
+    };
+  }
+  increment() {
+    this.setState({ count: this.state.count + 1 });
+  }
+  decrement() {
+    this.setState({ count: this.state.count - 1 });
+  }
+  render() {
+    return (
+      <CounterContext.Provider value={this.state}>{this.props.children}</CounterContext.Provider>
+    );
+  }
+}
+
+export default CounterProvider;

src/components/counter/index.js

@@ -0,0 +1,23 @@
+import React from 'react';
+
+import CounterProvider, { CounterContext } from './counter-provider';
+
+const Count = props => <h1>{props.count}</h1>;
+const Decrementer = props => <button onClick={props.decrement}>-</button>;
+const Incrementer = props => <button onClick={props.increment}>+</button>;
+
+const Counter = () => (
+  <CounterProvider>
+    <CounterContext.Consumer>
+      {context => (
+        <>
+          <Count count={context.count} />
+          <Decrementer decrement={context.decrement} />
+          <Incrementer increment={context.increment} />
+        </>
+      )}
+    </CounterContext.Consumer>
+  </CounterProvider>
+);
+
+export default Counter;

src/components/if/index.js

@@ -1,13 +1,13 @@
 import React from 'react';
-import PropTypes from 'prop-types';
+// import PropTypes from 'prop-types';
 
 const render = (condition = false, children = null) => {
   return !!condition ? children : null;
 };
 
 export const If = props =>
   React.Children.map(props.children, child =>
-    React.cloneElement(child, { condition: props.condition }),
+    React.cloneElement(child, { condition: props.condition })
   );
 
 export const Then = props => render(props.condition, props.children);

src/components/todo/add-todo.js

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import { ToDoContext } from './todo-provider';
+
+const AddToDo = props => (
+  <ToDoContext.Consumer>
+    {context => (
+      <div>
+        <form onSubmit={context.addItem}>
+          <input placeholder="Add To Do List Item" onChange={context.handleInputChange} />
+        </form>
+      </div>
+    )}
+  </ToDoContext.Consumer>
+);
+
+export default AddToDo;

src/components/todo/count.js

@@ -0,0 +1,15 @@
+import React from 'react';
+
+import { ToDoContext } from './todo-provider';
+
+const Count = props => (
+  <ToDoContext.Consumer>
+    {context => (
+      <div>
+        <h2>There are {context.todoList.length} items in the list</h2>
+      </div>
+    )}
+  </ToDoContext.Consumer>
+);
+
+export default Count;

src/components/todo/form.js

@@ -0,0 +1,20 @@
+import React from 'react';
+
+import { ToDoContext } from './todo-provider';
+
+const Form = props => (
+  <ToDoContext.Consumer>
+    {context => (
+      <form onSubmit={context.updateItem}>
+        <input
+          onChange={context.handleInputChange}
+          id={context.item.id}
+          complete={context.item.complete.toString()}
+          defaultValue={context.item.text}
+        />
+      </form>
+    )}
+  </ToDoContext.Consumer>
+);
+
+export default Form;