From 7d48bff5cd891f9cabc4de175f69f1a00374e2ed Mon Sep 17 00:00:00 2001 From: Cory Hedeen Date: Wed, 29 May 2019 16:43:00 -0400 Subject: [PATCH 1/4] Refactor App into class constructor. Set state. Import axios and Route. Fetch API. --- friends/src/App.css | 33 +++++++ friends/src/App.js | 35 +++++++ friends/src/components/FriendsList.js | 19 ++++ friends/src/index.css | 13 +++ friends/src/index.js | 16 +++ friends/src/logo.svg | 7 ++ friends/src/serviceWorker.js | 135 ++++++++++++++++++++++++++ 7 files changed, 258 insertions(+) create mode 100644 friends/src/App.css create mode 100644 friends/src/App.js create mode 100644 friends/src/components/FriendsList.js create mode 100644 friends/src/index.css create mode 100644 friends/src/index.js create mode 100644 friends/src/logo.svg create mode 100644 friends/src/serviceWorker.js diff --git a/friends/src/App.css b/friends/src/App.css new file mode 100644 index 0000000000..b41d297cab --- /dev/null +++ b/friends/src/App.css @@ -0,0 +1,33 @@ +.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; +} + +.App-link { + color: #61dafb; +} + +@keyframes App-logo-spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} diff --git a/friends/src/App.js b/friends/src/App.js new file mode 100644 index 0000000000..66af2eb105 --- /dev/null +++ b/friends/src/App.js @@ -0,0 +1,35 @@ +import React from 'react'; +import logo from './logo.svg'; +import './App.css'; +import axios from 'axios'; +import Friends from './components/FriendsList'; +import { Route } from 'react-router-dom'; + +class App extends React.Component { + constructor(){ + super(); + this.state = { + friends: [] + } + } + +componentDidMount(){ + axios + .get("http://localhost:5000/friends") + .then(res => this.setState({friends: res})) + .catch(err => console.log(err)) +} + + render(){ + return ( +
+ ()}/> +
+ ); +} +} + +export default App; diff --git a/friends/src/components/FriendsList.js b/friends/src/components/FriendsList.js new file mode 100644 index 0000000000..38a285c4e7 --- /dev/null +++ b/friends/src/components/FriendsList.js @@ -0,0 +1,19 @@ +//friendsList +import React from 'react'; + +const Friends = props =>{ + return( +
+ {props.friends.map( + item => +
+ {item.name} + {item.age} + {item.email} +
+ )} +
+ ); +} + +export default Friends; diff --git a/friends/src/index.css b/friends/src/index.css new file mode 100644 index 0000000000..4a1df4db71 --- /dev/null +++ b/friends/src/index.css @@ -0,0 +1,13 @@ +body { + margin: 0; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", + "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", + sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +code { + font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", + monospace; +} diff --git a/friends/src/index.js b/friends/src/index.js new file mode 100644 index 0000000000..16b3ba3486 --- /dev/null +++ b/friends/src/index.js @@ -0,0 +1,16 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import './index.css'; +import App from './App'; +import * as serviceWorker from './serviceWorker'; +import { BrowserRouter as Router } from 'react-router-dom'; + +ReactDOM.render( + + + , document.getElementById('root')); + +// If you want your app to work offline and load faster, you can change +// unregister() to register() below. Note this comes with some pitfalls. +// Learn more about service workers: https://bit.ly/CRA-PWA +serviceWorker.unregister(); diff --git a/friends/src/logo.svg b/friends/src/logo.svg new file mode 100644 index 0000000000..6b60c1042f --- /dev/null +++ b/friends/src/logo.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/friends/src/serviceWorker.js b/friends/src/serviceWorker.js new file mode 100644 index 0000000000..f8c7e50c20 --- /dev/null +++ b/friends/src/serviceWorker.js @@ -0,0 +1,135 @@ +// This optional code is used to register a service worker. +// register() is not called by default. + +// This lets the app load faster on subsequent visits in production, and gives +// it offline capabilities. However, it also means that developers (and users) +// will only see deployed updates on subsequent visits to a page, after all the +// existing tabs open on the page have been closed, since previously cached +// resources are updated in the background. + +// To learn more about the benefits of this model and instructions on how to +// opt-in, read https://bit.ly/CRA-PWA + +const isLocalhost = Boolean( + window.location.hostname === 'localhost' || + // [::1] is the IPv6 localhost address. + window.location.hostname === '[::1]' || + // 127.0.0.1/8 is considered localhost for IPv4. + window.location.hostname.match( + /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ + ) +); + +export function register(config) { + if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { + // The URL constructor is available in all browsers that support SW. + const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href); + if (publicUrl.origin !== window.location.origin) { + // Our service worker won't work if PUBLIC_URL is on a different origin + // from what our page is served on. This might happen if a CDN is used to + // serve assets; see https://github.com/facebook/create-react-app/issues/2374 + return; + } + + window.addEventListener('load', () => { + const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; + + if (isLocalhost) { + // This is running on localhost. Let's check if a service worker still exists or not. + checkValidServiceWorker(swUrl, config); + + // Add some additional logging to localhost, pointing developers to the + // service worker/PWA documentation. + navigator.serviceWorker.ready.then(() => { + console.log( + 'This web app is being served cache-first by a service ' + + 'worker. To learn more, visit https://bit.ly/CRA-PWA' + ); + }); + } else { + // Is not localhost. Just register service worker + registerValidSW(swUrl, config); + } + }); + } +} + +function registerValidSW(swUrl, config) { + navigator.serviceWorker + .register(swUrl) + .then(registration => { + registration.onupdatefound = () => { + const installingWorker = registration.installing; + if (installingWorker == null) { + return; + } + installingWorker.onstatechange = () => { + if (installingWorker.state === 'installed') { + if (navigator.serviceWorker.controller) { + // At this point, the updated precached content has been fetched, + // but the previous service worker will still serve the older + // content until all client tabs are closed. + console.log( + 'New content is available and will be used when all ' + + 'tabs for this page are closed. See https://bit.ly/CRA-PWA.' + ); + + // Execute callback + if (config && config.onUpdate) { + config.onUpdate(registration); + } + } else { + // At this point, everything has been precached. + // It's the perfect time to display a + // "Content is cached for offline use." message. + console.log('Content is cached for offline use.'); + + // Execute callback + if (config && config.onSuccess) { + config.onSuccess(registration); + } + } + } + }; + }; + }) + .catch(error => { + console.error('Error during service worker registration:', error); + }); +} + +function checkValidServiceWorker(swUrl, config) { + // Check if the service worker can be found. If it can't reload the page. + fetch(swUrl) + .then(response => { + // Ensure service worker exists, and that we really are getting a JS file. + const contentType = response.headers.get('content-type'); + if ( + response.status === 404 || + (contentType != null && contentType.indexOf('javascript') === -1) + ) { + // No service worker found. Probably a different app. Reload the page. + navigator.serviceWorker.ready.then(registration => { + registration.unregister().then(() => { + window.location.reload(); + }); + }); + } else { + // Service worker found. Proceed as normal. + registerValidSW(swUrl, config); + } + }) + .catch(() => { + console.log( + 'No internet connection found. App is running in offline mode.' + ); + }); +} + +export function unregister() { + if ('serviceWorker' in navigator) { + navigator.serviceWorker.ready.then(registration => { + registration.unregister(); + }); + } +} From c0bf488e17f2d807c8f92c9f36a15e49329c2813 Mon Sep 17 00:00:00 2001 From: Cory Hedeen Date: Wed, 29 May 2019 17:25:57 -0400 Subject: [PATCH 2/4] Fix axios bug. Create log-in page. Import Links. Links functional. --- friends/src/App.js | 8 +++++-- friends/src/components/FriendsList.js | 15 +++++++++++--- friends/src/components/Input.js | 30 +++++++++++++++++++++++++++ friends/src/index.css | 6 ++++++ 4 files changed, 54 insertions(+), 5 deletions(-) create mode 100644 friends/src/components/Input.js diff --git a/friends/src/App.js b/friends/src/App.js index 66af2eb105..8312c32e59 100644 --- a/friends/src/App.js +++ b/friends/src/App.js @@ -4,6 +4,7 @@ import './App.css'; import axios from 'axios'; import Friends from './components/FriendsList'; import { Route } from 'react-router-dom'; +import Input from './components/Input'; class App extends React.Component { constructor(){ @@ -16,17 +17,20 @@ class App extends React.Component { componentDidMount(){ axios .get("http://localhost:5000/friends") - .then(res => this.setState({friends: res})) + .then(res => this.setState({friends: res.data})) .catch(err => console.log(err)) } render(){ return (
- (()}/> + ()}/>
); } diff --git a/friends/src/components/FriendsList.js b/friends/src/components/FriendsList.js index 38a285c4e7..8be729aac5 100644 --- a/friends/src/components/FriendsList.js +++ b/friends/src/components/FriendsList.js @@ -1,5 +1,6 @@ //friendsList import React from 'react'; +import {Link} from 'react-router-dom'; const Friends = props =>{ return( @@ -7,12 +8,20 @@ const Friends = props =>{ {props.friends.map( item =>
- {item.name} - {item.age} - {item.email} +
+ name: {item.name} +
+
+ age: {item.age} +
+
+ email: {item.email} +
)} + Log In + ); } diff --git a/friends/src/components/Input.js b/friends/src/components/Input.js new file mode 100644 index 0000000000..a083ea6da9 --- /dev/null +++ b/friends/src/components/Input.js @@ -0,0 +1,30 @@ +//Input + +import React from 'react'; +import { Link } from 'react-router-dom'; + +const Input = props => { + return( +
+ Home + +
+

Name

+ +

Age

+ +

Email

+ + +
+
+ ); +} + +export default Input; diff --git a/friends/src/index.css b/friends/src/index.css index 4a1df4db71..e50e8e8d64 100644 --- a/friends/src/index.css +++ b/friends/src/index.css @@ -11,3 +11,9 @@ code { font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace; } + +.friendList { + text-align: left; + line-height: 1.5; + margin-left: 20%; +} From 88d5514b8c35b65e435a9b836e64d0dd24ad6254 Mon Sep 17 00:00:00 2001 From: Cory Hedeen Date: Wed, 29 May 2019 17:41:38 -0400 Subject: [PATCH 3/4] Add button --- friends/src/components/Input.js | 31 +++++++++++++++---------------- 1 file changed, 15 insertions(+), 16 deletions(-) diff --git a/friends/src/components/Input.js b/friends/src/components/Input.js index a083ea6da9..8c4d31956d 100644 --- a/friends/src/components/Input.js +++ b/friends/src/components/Input.js @@ -7,22 +7,21 @@ const Input = props => { return(
Home - -
-

Name

- -

Age

- -

Email

- - -
+
+

Name

+ +

Age

+ +

Email

+ +
+
); } From 3db8afa06eb2ff307b19e8e2193dc8035c83e4ec Mon Sep 17 00:00:00 2001 From: Cory Hedeen Date: Thu, 30 May 2019 15:23:10 -0400 Subject: [PATCH 4/4] Add functionality to the Form --- friends/src/App.js | 10 ++++++++- friends/src/components/Input.js | 40 +++++++++++++++++++++++++++++---- 2 files changed, 45 insertions(+), 5 deletions(-) diff --git a/friends/src/App.js b/friends/src/App.js index 8312c32e59..6bfc404fc2 100644 --- a/friends/src/App.js +++ b/friends/src/App.js @@ -10,7 +10,8 @@ class App extends React.Component { constructor(){ super(); this.state = { - friends: [] + friends: [], + newFriend: [] } } @@ -21,6 +22,12 @@ componentDidMount(){ .catch(err => console.log(err)) } +postFriend = info => { + axios.post("http://localhost:5000/friends", info) + .then(res => this.setState({newFriend: res.info})) + .catch(err=>console.log(err)) +} + render(){ return (
@@ -30,6 +37,7 @@ componentDidMount(){ />)}/> ()}/>
); diff --git a/friends/src/components/Input.js b/friends/src/components/Input.js index 8c4d31956d..68e4e53f10 100644 --- a/friends/src/components/Input.js +++ b/friends/src/components/Input.js @@ -3,27 +3,59 @@ import React from 'react'; import { Link } from 'react-router-dom'; -const Input = props => { +class Input extends React.Component { +constructor(props){ + super(props); + this.state = { + profile: { + name: '', + age: '', + email: '' + } + } +} + +handleChange = event => { + this.setState({profile: { ...this.state.profile, [event.target.name]: event.target.value}}) +} + +postFriend = e => { + e.preventDefault(); + this.props.postFriend(this.state.profile); +} + + render(){ return(
Home -
+

Name

Age

Email

- +
); } - +} export default Input;