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();
+ });
+ }
+}