From de4570f1e842c0d6fcc918efbd27dd3892f84cf1 Mon Sep 17 00:00:00 2001 From: Jonathan Peyper Date: Wed, 3 Jul 2019 08:08:53 +1000 Subject: [PATCH] Add all functionality --- .gitignore | 3 ++ .vscode/launch.json | 5 +++ package-lock.json | 99 +++++++++++++++++++++++++++++++++++++++++++++ package.json | 1 + src/App.css | 37 +++++------------ src/App.js | 43 ++++++++++---------- src/App.test.js | 9 ----- src/Home.css | 31 ++++++++++++++ src/Home.js | 24 +++++++++++ src/Navigation.js | 20 +++++++++ src/NotFound.css | 3 ++ src/NotFound.js | 10 +++++ src/Todos.css | 25 ++++++++++++ src/Todos.js | 61 ++++++++++++++++++++++++++++ 14 files changed, 312 insertions(+), 59 deletions(-) create mode 100644 .vscode/launch.json delete mode 100644 src/App.test.js create mode 100644 src/Home.css create mode 100644 src/Home.js create mode 100644 src/Navigation.js create mode 100644 src/NotFound.css create mode 100644 src/NotFound.js create mode 100644 src/Todos.css create mode 100644 src/Todos.js diff --git a/.gitignore b/.gitignore index 4d29575..7c7f3dd 100644 --- a/.gitignore +++ b/.gitignore @@ -21,3 +21,6 @@ npm-debug.log* yarn-debug.log* yarn-error.log* + +cypress/screenshots +cypress/videos \ No newline at end of file diff --git a/.vscode/launch.json b/.vscode/launch.json new file mode 100644 index 0000000..f446fd4 --- /dev/null +++ b/.vscode/launch.json @@ -0,0 +1,5 @@ +{ + "version": "0.2.0", + "configurations": [ + ] + } \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 41c4761..b99514e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1175,6 +1175,18 @@ "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-1.1.3.tgz", "integrity": "sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw==" }, + "@reach/router": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/@reach/router/-/router-1.2.1.tgz", + "integrity": "sha512-kTaX08X4g27tzIFQGRukaHmNbtMYDS3LEWIS8+l6OayGIw6Oyo1HIF/JzeuR2FoF9z6oV+x/wJSVSq4v8tcUGQ==", + "requires": { + "create-react-context": "0.2.3", + "invariant": "2.2.4", + "prop-types": "15.7.2", + "react-lifecycles-compat": "3.0.4", + "warning": "3.0.0" + } + }, "@svgr/babel-plugin-add-jsx-attribute": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-4.2.0.tgz", @@ -3605,6 +3617,15 @@ "sha.js": "2.4.11" } }, + "create-react-context": { + "version": "0.2.3", + "resolved": "https://registry.npmjs.org/create-react-context/-/create-react-context-0.2.3.tgz", + "integrity": "sha512-CQBmD0+QGgTaxDL3OX1IDXYqjkp2It4RIbcb99jS6AEg27Ga+a9G3JtK6SIu0HBwPLZlmwt9F7UwWA4Bn92Rag==", + "requires": { + "fbjs": "0.8.17", + "gud": "1.0.0" + } + }, "cross-spawn": { "version": "6.0.5", "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz", @@ -4288,6 +4309,14 @@ "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz", "integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=" }, + "encoding": { + "version": "0.1.12", + "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.12.tgz", + "integrity": "sha1-U4tm8+5izRq1HsMjgp0flIDHS+s=", + "requires": { + "iconv-lite": "0.4.24" + } + }, "end-of-stream": { "version": "1.4.1", "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.1.tgz", @@ -5128,6 +5157,35 @@ "bser": "2.1.0" } }, + "fbjs": { + "version": "0.8.17", + "resolved": "https://registry.npmjs.org/fbjs/-/fbjs-0.8.17.tgz", + "integrity": "sha1-xNWY6taUkRJlPWWIsBpc3Nn5D90=", + "requires": { + "core-js": "1.2.7", + "isomorphic-fetch": "2.2.1", + "loose-envify": "1.4.0", + "object-assign": "4.1.1", + "promise": "7.3.1", + "setimmediate": "1.0.5", + "ua-parser-js": "0.7.20" + }, + "dependencies": { + "core-js": { + "version": "1.2.7", + "resolved": "https://registry.npmjs.org/core-js/-/core-js-1.2.7.tgz", + "integrity": "sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY=" + }, + "promise": { + "version": "7.3.1", + "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz", + "integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==", + "requires": { + "asap": "2.0.6" + } + } + } + }, "figgy-pudding": { "version": "3.5.1", "resolved": "https://registry.npmjs.org/figgy-pudding/-/figgy-pudding-3.5.1.tgz", @@ -5531,6 +5589,11 @@ "resolved": "https://registry.npmjs.org/growly/-/growly-1.3.0.tgz", "integrity": "sha1-8QdIy+dq+WS3yWyTxrzCivEgwIE=" }, + "gud": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/gud/-/gud-1.0.0.tgz", + "integrity": "sha512-zGEOVKFM5sVPPrYs7J5/hYEw2Pof8KCyOwyhG8sAF26mCAeUFAcYPu1mwB7hhpIP29zOIBaDqwuHdLp0jvZXjw==" + }, "gzip-size": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-5.0.0.tgz", @@ -6313,6 +6376,15 @@ "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz", "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8=" }, + "isomorphic-fetch": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz", + "integrity": "sha1-YRrhrPFPXoH3KVB0coGf6XM1WKk=", + "requires": { + "node-fetch": "1.7.3", + "whatwg-fetch": "3.0.0" + } + }, "isstream": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz", @@ -8181,6 +8253,15 @@ "lower-case": "1.1.4" } }, + "node-fetch": { + "version": "1.7.3", + "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-1.7.3.tgz", + "integrity": "sha512-NhZ4CsKx7cYm2vSrBAr2PvFOe6sWDf0UYLRqA6svUYg7+/TSfVAu49jYC4BvQ4Sms9SZgdqGBgroqfDhJdTyKQ==", + "requires": { + "encoding": "0.1.12", + "is-stream": "1.1.0" + } + }, "node-forge": { "version": "0.7.5", "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.7.5.tgz", @@ -10045,6 +10126,11 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.8.6.tgz", "integrity": "sha512-aUk3bHfZ2bRSVFFbbeVS4i+lNPZr3/WM5jT2J5omUVV1zzcs1nAaf3l51ctA5FFvCRbhrH0bdAsRRQddFJZPtA==" }, + "react-lifecycles-compat": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz", + "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==" + }, "react-scripts": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-3.0.1.tgz", @@ -11682,6 +11768,11 @@ "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz", "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=" }, + "ua-parser-js": { + "version": "0.7.20", + "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.20.tgz", + "integrity": "sha512-8OaIKfzL5cpx8eCMAhhvTlft8GYF8b2eQr6JkCyVdrgjcytyOmPCXrqXFcUnhonRpLlh5yxEZVohm6mzaowUOw==" + }, "uglify-js": { "version": "3.4.10", "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.4.10.tgz", @@ -12054,6 +12145,14 @@ "makeerror": "1.0.11" } }, + "warning": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz", + "integrity": "sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w=", + "requires": { + "loose-envify": "1.4.0" + } + }, "watchpack": { "version": "1.6.0", "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.6.0.tgz", diff --git a/package.json b/package.json index 45b7918..136afb0 100644 --- a/package.json +++ b/package.json @@ -3,6 +3,7 @@ "version": "0.1.0", "private": true, "dependencies": { + "@reach/router": "^1.2.1", "react": "^16.8.6", "react-dom": "^16.8.6", "react-scripts": "3.0.1" diff --git a/src/App.css b/src/App.css index b41d297..19f6e6c 100644 --- a/src/App.css +++ b/src/App.css @@ -1,33 +1,14 @@ -.App { - text-align: center; -} - -.App-logo { - animation: App-logo-spin infinite 20s linear; - height: 40vmin; - pointer-events: none; -} .App-header { - background-color: #282c34; - min-height: 100vh; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - font-size: calc(10px + 2vmin); - color: white; + height: 120px; + padding: 10px; + box-sizing: border-box; + background-color: white; } -.App-link { - color: #61dafb; -} - -@keyframes App-logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } +.App-content { + min-height: calc(100vh - 120px); + padding: 10px; + box-sizing: border-box; + background-color: #282c34; } diff --git a/src/App.js b/src/App.js index ce9cbd2..376dfb0 100644 --- a/src/App.js +++ b/src/App.js @@ -1,26 +1,25 @@ -import React from 'react'; -import logo from './logo.svg'; -import './App.css'; +import React from "react"; +import { Router } from "@reach/router"; +import "./App.css"; +import Navigation from "./Navigation"; +import Home from "./Home"; +import Todos from "./Todos"; +import NotFound from "./NotFound"; -function App() { - return ( -
-
- logo -

- Edit src/App.js and save to reload. -

- - Learn React - -
+const App = () => ( +
+
+

Hi Coder Academy!

+
- ); -} +
+ + + + + +
+
+); export default App; diff --git a/src/App.test.js b/src/App.test.js deleted file mode 100644 index a754b20..0000000 --- a/src/App.test.js +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import App from './App'; - -it('renders without crashing', () => { - const div = document.createElement('div'); - ReactDOM.render(, div); - ReactDOM.unmountComponentAtNode(div); -}); diff --git a/src/Home.css b/src/Home.css new file mode 100644 index 0000000..d5e4bb3 --- /dev/null +++ b/src/Home.css @@ -0,0 +1,31 @@ +.Home { + text-align: center; +} + +.Home-logo { + animation: App-logo-spin infinite 20s linear; + height: 40vmin; + pointer-events: none; +} + +.Home-header { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + font-size: calc(10px + 2vmin); + color: white; +} + +.Home-link { + color: #61dafb; +} + +@keyframes App-logo-spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} diff --git a/src/Home.js b/src/Home.js new file mode 100644 index 0000000..fbcc7d0 --- /dev/null +++ b/src/Home.js @@ -0,0 +1,24 @@ +import React from "react"; +import logo from "./logo.svg"; +import "./Home.css"; + +const Home = () => ( +
+
+ logo +

+ Edit src/App.js and save to reload. +

+ + Learn React + +
+
+); + +export default Home; diff --git a/src/Navigation.js b/src/Navigation.js new file mode 100644 index 0000000..62fe577 --- /dev/null +++ b/src/Navigation.js @@ -0,0 +1,20 @@ +import React from "react"; +import { Link, Match } from "@reach/router"; + +const NavLink = ({ text, route, active }) => ( + active ? {text} : {text} +) + +const Navigation = () => ( + +); + +export default Navigation; diff --git a/src/NotFound.css b/src/NotFound.css new file mode 100644 index 0000000..7f97d34 --- /dev/null +++ b/src/NotFound.css @@ -0,0 +1,3 @@ +.NotFound h1 { + color: white +} \ No newline at end of file diff --git a/src/NotFound.js b/src/NotFound.js new file mode 100644 index 0000000..0c73d64 --- /dev/null +++ b/src/NotFound.js @@ -0,0 +1,10 @@ +import React from "react"; +import "./NotFound.css"; + +const NotFound = () => ( +
+

Whoops!

+
+); + +export default NotFound; diff --git a/src/Todos.css b/src/Todos.css new file mode 100644 index 0000000..c4f2aaa --- /dev/null +++ b/src/Todos.css @@ -0,0 +1,25 @@ +.Todos-todos { + padding: 0; +} + +.Todos-todo { + color: white; + list-style-type: none; +} + +.Todos-todo-remove-button { + background-color: transparent; + color: white; + border: none; + cursor: pointer; + text-decoration: underline; + display: inline; + margin: 0; + margin-left: 5px; + padding: 0; +} + +.Todos-todo-remove-button:hover, +.Todos-todo-remove-button:focus { +text-decoration: none; +} \ No newline at end of file diff --git a/src/Todos.js b/src/Todos.js new file mode 100644 index 0000000..f9e29de --- /dev/null +++ b/src/Todos.js @@ -0,0 +1,61 @@ +import React, { useState } from "react"; +import "./Todos.css"; + +const NewTodo = ({ addTodo }) => { + const [todo, setTodo] = useState(""); + + return ( + setTodo(event.target.value)} + onKeyPress={event => { + if (event.key === "Enter" && todo) { + addTodo(todo); + setTodo(""); + } + }} + /> + ); +}; + +const Todo = ({ todo, removeTodo }) => { + const [done, setDone] = useState(false); + return ( +
  • + + +
    • + ); +}; + +const Todos = () => { + const [todos, setTodos] = useState([]); + + return ( +
    + setTodos([...todos, todo])} /> +
      + {todos.map((todo, index) => ( + + setTodos( + todos.filter((_, removedIndex) => index !== removedIndex) + ) + } + /> + ))} +
    +
    + ); +}; + +export default Todos;