From 48734085b4fa9e0574e42722daeebf835fb68578 Mon Sep 17 00:00:00 2001 From: ayshiff Date: Fri, 11 May 2018 10:00:43 +0200 Subject: [PATCH] Add front in the app folder --- app/App.css | 28 +++++++++ app/App.js | 69 +++++++++++++++++++++ app/index.css | 5 ++ app/index.js | 7 +++ app/public/index.html | 39 ++++++++++++ app/public/manifest.json | 15 +++++ app/registerServiceWorker.js | 117 +++++++++++++++++++++++++++++++++++ 7 files changed, 280 insertions(+) create mode 100644 app/App.css create mode 100644 app/App.js create mode 100644 app/index.css create mode 100644 app/index.js create mode 100644 app/public/index.html create mode 100644 app/public/manifest.json create mode 100644 app/registerServiceWorker.js diff --git a/app/App.css b/app/App.css new file mode 100644 index 0000000..c5c6e8a --- /dev/null +++ b/app/App.css @@ -0,0 +1,28 @@ +.App { + text-align: center; +} + +.App-logo { + animation: App-logo-spin infinite 20s linear; + height: 80px; +} + +.App-header { + background-color: #222; + height: 150px; + padding: 20px; + color: white; +} + +.App-title { + font-size: 1.5em; +} + +.App-intro { + font-size: large; +} + +@keyframes App-logo-spin { + from { transform: rotate(0deg); } + to { transform: rotate(360deg); } +} diff --git a/app/App.js b/app/App.js new file mode 100644 index 0000000..7f5a450 --- /dev/null +++ b/app/App.js @@ -0,0 +1,69 @@ +import React, { Component } from 'react'; +import logo from './logo.svg'; +import './App.css'; + +class App extends Component { + + constructor(props) { + super(props); + this.state = { + currentOptionsState: [], + pastOptions: [], + score: 0 + } + } + + fetchOptions() { + + } + + componentWillMount(){ + this.fetchOptions() + } + + headerRendering() { + + let headerPast = [] + + for(let i = 0; i +

+ {this.state.pastOptions[i]} +

+

+ {this.state.pastOptions[i+1]} +

+ + ) + } + return headerPast + } + + + render() { + let currentOptions = this.state.currentOptionsState.map(((element) => ( +

+ {element} +

+ ))) + + return ( +
+
+ {this.state.pastOptions ? this.headerRendering() : null} + +
+
+

+

Je fais quoi ?

+
+ {this.state.currentOptionsState ? currentOptions : null} +
+
+
+ ); + } +} + +export default App; diff --git a/app/index.css b/app/index.css new file mode 100644 index 0000000..b4cc725 --- /dev/null +++ b/app/index.css @@ -0,0 +1,5 @@ +body { + margin: 0; + padding: 0; + font-family: sans-serif; +} diff --git a/app/index.js b/app/index.js new file mode 100644 index 0000000..a9df054 --- /dev/null +++ b/app/index.js @@ -0,0 +1,7 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import './index.css'; +import App from './App'; + +ReactDOM.render(, document.getElementById('root')); +registerServiceWorker(); diff --git a/app/public/index.html b/app/public/index.html new file mode 100644 index 0000000..eb62297 --- /dev/null +++ b/app/public/index.html @@ -0,0 +1,39 @@ + + + + + + + + + + React App + + + +
+ + + diff --git a/app/public/manifest.json b/app/public/manifest.json new file mode 100644 index 0000000..ef19ec2 --- /dev/null +++ b/app/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": "./index.html", + "display": "standalone", + "theme_color": "#000000", + "background_color": "#ffffff" +} diff --git a/app/registerServiceWorker.js b/app/registerServiceWorker.js new file mode 100644 index 0000000..a3e6c0c --- /dev/null +++ b/app/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(); + }); + } +}