From d1bf136b5b37bc0fcd7c75a117f2ab3f83bdb501 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Tue, 4 Sep 2018 10:40:16 +0200 Subject: [PATCH] Both tutorial merged and working --- client/src/App.js | 27 +++++-- client/src/components/Home.js | 24 +++--- client/src/hoc/Rainbow.js | 17 ++++ client/src/index.css | 34 ++++++++ client/src/reducers/rootReducer.js | 25 ++++++ client/src/registerServiceWorker.js | 117 ++++++++++++++++++++++++++++ 6 files changed, 228 insertions(+), 16 deletions(-) create mode 100644 client/src/hoc/Rainbow.js create mode 100644 client/src/reducers/rootReducer.js create mode 100644 client/src/registerServiceWorker.js diff --git a/client/src/App.js b/client/src/App.js index 360dc840e..f36f5505a 100644 --- a/client/src/App.js +++ b/client/src/App.js @@ -23,13 +23,26 @@ const client = new ApolloClient({ class App extends Component { render() { return ( - -
-

Advanced Algos - Users Module

- - -
- + + + +
+ + + + + + + +
+ +
+

Advanced Algos - Users Module

+ + +
+ + ); } } diff --git a/client/src/components/Home.js b/client/src/components/Home.js index cb1f79b04..5566de9fc 100644 --- a/client/src/components/Home.js +++ b/client/src/components/Home.js @@ -1,11 +1,23 @@ import React, { Component } from 'react' +import axios from 'axios' import { Link } from 'react-router-dom' import Pokeball from '../pokeball.png' -import { connect } from 'react-redux' class Home extends Component { + state = { + posts: [] + } + componentDidMount(){ + axios.get('https://jsonplaceholder.typicode.com/posts/') + .then(res => { + console.log(res); + this.setState({ + posts: res.data.slice(0,10) + }); + }) + } render(){ - const { posts } = this.props + const { posts } = this.state const postList = posts.length ? ( posts.map(post => { return ( @@ -35,10 +47,4 @@ class Home extends Component { } } -const mapStateToProps = (state) => { - return { - posts: state.posts - } -} - -export default connect(mapStateToProps)(Home) \ No newline at end of file +export default Home diff --git a/client/src/hoc/Rainbow.js b/client/src/hoc/Rainbow.js new file mode 100644 index 000000000..9af9ca298 --- /dev/null +++ b/client/src/hoc/Rainbow.js @@ -0,0 +1,17 @@ +import React from 'react' + +const Rainbow = (WrappedComponent) => { + + const colours = ['red', 'pink', 'orange', 'blue', 'green', 'yellow']; + const randomColour = colours[Math.floor(Math.random() * 6)]; + const className = randomColour + '-text'; + + return (props) => ( +
+ +
+ ) + +} + +export default Rainbow diff --git a/client/src/index.css b/client/src/index.css index 74d96ab6c..b141c590e 100644 --- a/client/src/index.css +++ b/client/src/index.css @@ -84,3 +84,37 @@ form button{ box-sizing: border-box; color: #fff; } + + + + + + + +body { + margin: 0; + padding: 0; + font-family: sans-serif; + background: #eee; +} + +nav a.active{ + border-bottom: 5px solid #333; + transition: all ease 0.5s; +} + +.container{ + margin-top: 20px; +} + +.home .post img{ + position: absolute; + top: 20px; + left: -100px; + opacity: 0.6; +} + +.home .post{ + overflow: hidden; + padding-left: 80px; +} diff --git a/client/src/reducers/rootReducer.js b/client/src/reducers/rootReducer.js new file mode 100644 index 000000000..819adc0f2 --- /dev/null +++ b/client/src/reducers/rootReducer.js @@ -0,0 +1,25 @@ +const initState = { + posts: [ + {id: '1', title: 'Squirtle Laid an Egg', body: 'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Consequatur voluptate laborum perferendis, enim repellendus ipsam sunt autem at odit dolorum, voluptatum suscipit iste harum cum magni itaque animi laudantium fugiat'}, + {id: '2', title: 'Charmander Laid an Egg', body: 'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Consequatur voluptate laborum perferendis, enim repellendus ipsam sunt autem at odit dolorum, voluptatum suscipit iste harum cum magni itaque animi laudantium fugiat'}, + {id: '3', title: 'a Helix Fossil was Found', body: 'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Consequatur voluptate laborum perferendis, enim repellendus ipsam sunt autem at odit dolorum, voluptatum suscipit iste harum cum magni itaque animi laudantium fugiat'} + ] +} + + + +const rootReducer = (state = initState, action) => { + console.log(action); + if(action.type === 'DELETE_POST'){ + let newPosts = state.posts.filter(post => { + return post.id !== action.id + }); + return { + ...state, + posts: newPosts + } + } + return state; +} + +export default rootReducer \ No newline at end of file diff --git a/client/src/registerServiceWorker.js b/client/src/registerServiceWorker.js new file mode 100644 index 000000000..a3e6c0cfc --- /dev/null +++ b/client/src/registerServiceWorker.js @@ -0,0 +1,117 @@ +// In production, we register a service worker to serve assets from local cache. + +// 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 the "N+1" visit to a page, since previously +// cached resources are updated in the background. + +// To learn more about the benefits of this model, read https://goo.gl/KwvDNy. +// This link also includes instructions on opting out of this behavior. + +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 default function register() { + 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); + 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/facebookincubator/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. Lets check if a service worker still exists or not. + checkValidServiceWorker(swUrl); + + // 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://goo.gl/SC7cgQ' + ); + }); + } else { + // Is not local host. Just register service worker + registerValidSW(swUrl); + } + }); + } +} + +function registerValidSW(swUrl) { + navigator.serviceWorker + .register(swUrl) + .then(registration => { + registration.onupdatefound = () => { + const installingWorker = registration.installing; + installingWorker.onstatechange = () => { + if (installingWorker.state === 'installed') { + if (navigator.serviceWorker.controller) { + // At this point, the old content will have been purged and + // the fresh content will have been added to the cache. + // It's the perfect time to display a "New content is + // available; please refresh." message in your web app. + console.log('New content is available; please refresh.'); + } 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.'); + } + } + }; + }; + }) + .catch(error => { + console.error('Error during service worker registration:', error); + }); +} + +function checkValidServiceWorker(swUrl) { + // 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. + if ( + response.status === 404 || + response.headers.get('content-type').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); + } + }) + .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(); + }); + } +}