Update for react course

react/4/seasons/src/SeasonDisplay.css

@@ -0,0 +1,34 @@
+.icon-left {
+    position: absolute;
+    top: 10px;
+    left: 10px;
+}
+
+.icon-right {
+    position: absolute;
+    bottom: 10px;
+    right: 10px;
+}
+
+.season-display {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+}
+
+.season-display.winter i {
+    color: blue;
+}
+
+.season-display.summer i {
+    color: red;
+}
+
+.winter {
+    background-color: aliceblue;
+}
+
+.summer {
+    background-color: orange;
+}

react/4/seasons/src/SeasonDisplay.js

@@ -1,9 +1,33 @@
-import {
+import './SeasonDisplay.css'
-    React
+import React from 'react'
-} from "react";
 
-const SeasonDisplay = () => {
+const seasonConfig = {
-    return <div > Season display </div>
+    summer: {
+        text: 'Let\'s hit the beach',
+        iconName: 'sun'
+    },
+    winter: {
+        text: 'Brr it is chilly',
+        iconName: 'snowflake'
+    }
+}
+
+const getSeason = (lat, month) => {
+    if (month > 2 && month < 9) {
+        return lat > 0 ? 'summer' : 'winter'
+    } else {
+        return lat > 0 ? 'winter' : 'summer'
+    }
+}
+
+const SeasonDisplay = (props) => {
+    const season = getSeason(props.lat, new Date().getMonth())
+    const { text, iconName } = seasonConfig[season]
+    return <div className={`season-display ${season}`}>
+        <i className={`icon-left massive ${iconName} icon`} />
+        <h1>{text}</h1>
+        <i className={`icon-right massive ${iconName} icon`} />
+    </div>
 }
 
 export default SeasonDisplay

react/4/seasons/src/Spinner.js

@@ -0,0 +1,13 @@
+import React from 'react';
+
+const Spinner = () => {
+    return (
+        <div className="ui active dimmer">
+            <div className="ui big text loader">
+                Loading...
+            </div>
+        </div>
+    )
+}
+
+export default Spinner

react/4/seasons/src/index.js

@@ -1,20 +1,22 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
+import SeasonDisplay from './SeasonDisplay'
+import Spinner from './Spinner'
 
 class App extends React.Component {
 
     // specific to JS not to React
-    constructor(props) {
+    // constructor(props) {
-        super(props)
+    //     super(props)
-        this.state = { lat: null, errorMessage: '' }
+    //     this.state = { lat: null, errorMessage: '' }
+    // }
 
+    state = { lat: null, errorMessage: '' }
+
+    componentDidMount() {
         window.navigator.geolocation.getCurrentPosition(
-            postion => {
+            postion => this.setState({ lat: postion.coords.latitude }),
-                this.setState({ lat: postion.coords.latitude })
+            err => this.setState({ errorMessage: err.message })
-            },
-            err => {
-                this.setState({ errorMessage: err.message })
-            }
         )
     }
 
@@ -25,10 +27,10 @@ class App extends React.Component {
         }
 
         if (!this.state.errorMessage && this.state.lat) {
-            return <div>Latiture: {this.state.lat}</div>
+            return <SeasonDisplay lat={this.state.lat} />
         }
 
-        return <div>Loading...</div>
+        return <Spinner />
     }
 }
 ReactDOM.render(

react/NOTES.md

@@ -19,6 +19,8 @@ input.
 
 Class components are not classes in terms of Ruby or Python, they are a Javascript Class. They also must be extended to a subclass (react component). And they must define a `render` method that returns some amount of JSX.
 
+When components are reloaded they are also reloading the child components.gt
+
 ## State
 
 ### Rules
@@ -29,3 +31,11 @@ Class components are not classes in terms of Ruby or Python, they are a Javascri
 * Updating  `state` on a component causes the component to almost instantly rerender
 * `State` must be initialized when a component is created
 * `State` can *only* be updated with the `setState` function
+
+Video 61: refactorisation on state and constructors, you can remove the whole constructor by passing a state to the class. => what is the state in a react application? Code is passed to Babel and understand the code that is compiled and extends + implements the constructor function.
+```
+     constructor(props) {
+         super(props)
+         this.state = { lat: null, errorMessage: '' }
+     }
+```