Merge pull request #1 from exanup/dev

Dev
exanup · Jul 14, 2018 · ce96781 · ce96781
2 parents fcce059 + 7966834
commit ce96781
Show file tree

Hide file tree

Showing 15 changed files with 374 additions and 125 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -0,0 +1,18 @@
+{
+  "env": {
+    "browser": true,
+    "es6": true,
+    "node": true
+  },
+  "extends": ["standard", "plugin:react/recommended"],
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "ecmaVersion": 2018,
+    "sourceType": "module"
+  },
+  "rules": {
+    "react/prop-types": 0
+  }
+}
diff --git a/package.json b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "reactjs-test",
+  "name": "simple-react-spa",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
@@ -12,5 +12,14 @@
     "build": "react-scripts build",
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
+  },
+  "devDependencies": {
+    "eslint": "^5.1.0",
+    "eslint-config-standard": "^11.0.0",
+    "eslint-plugin-import": "^2.13.0",
+    "eslint-plugin-node": "^6.0.1",
+    "eslint-plugin-promise": "^3.8.0",
+    "eslint-plugin-react": "^7.10.0",
+    "eslint-plugin-standard": "^3.1.0"
   }
-}
+}
diff --git a/public/index.html b/public/index.html
@@ -19,7 +19,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>Simple React SPA</title>
   </head>
   <body>
     <noscript>

diff --git a/src/App.css b/src/App.css
diff --git a/src/App.js b/src/App.js
diff --git a/src/App.test.js b/src/App.test.js
diff --git a/src/components/App.js b/src/components/App.js
@@ -0,0 +1,8 @@
+import React, { Component } from 'react'
+import Calculator from './Calculator'
+
+export default class App extends Component {
+  render () {
+    return <Calculator />
+  }
+}
diff --git a/src/components/BoilingVerdict.js b/src/components/BoilingVerdict.js
@@ -0,0 +1,11 @@
+import React, { Component } from 'react'
+
+export default class BoilingVerdict extends Component {
+  render () {
+    const temperature = this.props.temperature
+    const verdict = temperature >= 100 ? `boil` : `not boil`
+    const msg = `The water would ${verdict}.`
+
+    return <div>{msg}</div>
+  }
+}
diff --git a/src/components/Calculator.js b/src/components/Calculator.js
@@ -0,0 +1,51 @@
+import React, { Component, Fragment } from 'react'
+import BoilingVerdict from './BoilingVerdict'
+import TemperatureUnit from './TemperatureUnit'
+
+import { convertUnit, toCelsius, toFahrenheit } from '../utils/unitConversion'
+
+const scales = { CELSIUS: 0, FAHRENHEIT: 1 }
+
+export default class Calculator extends Component {
+  constructor () {
+    super()
+    this.state = { temperature: '', scale: scales.CELSIUS }
+
+    this.handleTemperatureUpdate = this.handleTemperatureUpdate.bind(this)
+  }
+
+  handleTemperatureUpdate (temperature, scale) {
+    this.setState({ temperature, scale })
+  }
+
+  render () {
+    const temperature = this.state.temperature
+    const scale = this.state.scale
+
+    const celsius =
+      scale === scales.CELSIUS
+        ? temperature
+        : convertUnit(temperature, toCelsius)
+
+    const fahrenheit =
+      scale === scales.FAHRENHEIT
+        ? temperature
+        : convertUnit(temperature, toFahrenheit)
+
+    return (
+      <Fragment>
+        <TemperatureUnit
+          temperature={celsius}
+          scale={scales.CELSIUS}
+          onUpdateTemperature={this.handleTemperatureUpdate}
+        />
+        <TemperatureUnit
+          temperature={fahrenheit}
+          scale={scales.FAHRENHEIT}
+          onUpdateTemperature={this.handleTemperatureUpdate}
+        />
+        <BoilingVerdict temperature={temperature} />
+      </Fragment>
+    )
+  }
+}
diff --git a/src/components/TemperatureUnit.js b/src/components/TemperatureUnit.js
@@ -0,0 +1,23 @@
+import React, { Component } from 'react'
+
+export default class TemperatureUnit extends Component {
+  constructor (props) {
+    super(props)
+    this.handleChange = this.handleChange.bind(this)
+  }
+  handleChange (e) {
+    const temperature = isNaN(parseFloat(e.target.value))
+      ? 0
+      : parseFloat(e.target.value)
+
+    const scale = this.props.scale
+    this.props.onUpdateTemperature(temperature, scale)
+  }
+
+  render () {
+    const temperature = this.props.temperature
+    return (
+      <input type="text" value={temperature} onChange={this.handleChange} />
+    )
+  }
+}
diff --git a/src/index.js b/src/index.js
@@ -1,8 +1,8 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import './index.css';
-import App from './App';
-import registerServiceWorker from './registerServiceWorker';
+import React from 'react'
+import ReactDOM from 'react-dom'
+import './index.css'
+import App from './components/App'
+import registerServiceWorker from './registerServiceWorker'
 
-ReactDOM.render(<App />, document.getElementById('root'));
-registerServiceWorker();
+ReactDOM.render(<App />, document.getElementById('root'))
+registerServiceWorker()
diff --git a/src/logo.svg b/src/logo.svg
diff --git a/src/registerServiceWorker.js b/src/registerServiceWorker.js
@@ -16,72 +16,72 @@ const isLocalhost = Boolean(
     window.location.hostname.match(
       /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
     )
-);
+)
 
-export default function register() {
+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);
+    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;
+      return
     }
 
     window.addEventListener('load', () => {
-      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
+      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);
+        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);
+        registerValidSW(swUrl)
       }
-    });
+    })
   }
 }
 
-function registerValidSW(swUrl) {
+function registerValidSW (swUrl) {
   navigator.serviceWorker
     .register(swUrl)
     .then(registration => {
       registration.onupdatefound = () => {
-        const installingWorker = registration.installing;
+        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.');
+              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.');
+              console.log('Content is cached for offline use.')
             }
           }
-        };
-      };
+        }
+      }
     })
     .catch(error => {
-      console.error('Error during service worker registration:', error);
-    });
+      console.error('Error during service worker registration:', error)
+    })
 }
 
-function checkValidServiceWorker(swUrl) {
+function checkValidServiceWorker (swUrl) {
   // Check if the service worker can be found. If it can't reload the page.
   fetch(swUrl)
     .then(response => {
@@ -93,25 +93,25 @@ function checkValidServiceWorker(swUrl) {
         // No service worker found. Probably a different app. Reload the page.
         navigator.serviceWorker.ready.then(registration => {
           registration.unregister().then(() => {
-            window.location.reload();
-          });
-        });
+            window.location.reload()
+          })
+        })
       } else {
         // Service worker found. Proceed as normal.
-        registerValidSW(swUrl);
+        registerValidSW(swUrl)
       }
     })
     .catch(() => {
       console.log(
         'No internet connection found. App is running in offline mode.'
-      );
-    });
+      )
+    })
 }
 
-export function unregister() {
+export function unregister () {
   if ('serviceWorker' in navigator) {
     navigator.serviceWorker.ready.then(registration => {
-      registration.unregister();
-    });
+      registration.unregister()
+    })
   }
 }
diff --git a/src/utils/unitConversion.js b/src/utils/unitConversion.js
@@ -0,0 +1,3 @@
+export let convertUnit = (value, callback) => callback(value)
+export let toCelsius = (f) => (f - 32) / 1.8
+export let toFahrenheit = (c) => c * 1.8 + 32