diff --git a/react/4/seasons/src/SeasonDisplay.css b/react/4/seasons/src/SeasonDisplay.css
new file mode 100644
index 0000000..cd4fc00
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/react/4/seasons/src/SeasonDisplay.js b/react/4/seasons/src/SeasonDisplay.js
index a457e99..55a2043 100644
--- a/react/4/seasons/src/SeasonDisplay.js
+++ b/react/4/seasons/src/SeasonDisplay.js
@@ -1,9 +1,33 @@
-import {
- React
-} from "react";
+import './SeasonDisplay.css'
+import React from 'react'
-const SeasonDisplay = () => {
- return
Season display
+const seasonConfig = {
+ 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
+
+
{text}
+
+
}
export default SeasonDisplay
\ No newline at end of file
diff --git a/react/4/seasons/src/Spinner.js b/react/4/seasons/src/Spinner.js
new file mode 100644
index 0000000..f9682d1
--- /dev/null
+++ b/react/4/seasons/src/Spinner.js
@@ -0,0 +1,13 @@
+import React from 'react';
+
+const Spinner = () => {
+ return (
+
+ )
+}
+
+export default Spinner
\ No newline at end of file
diff --git a/react/4/seasons/src/index.js b/react/4/seasons/src/index.js
index a829905..7e88cd6 100644
--- a/react/4/seasons/src/index.js
+++ b/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) {
- super(props)
- this.state = { lat: null, errorMessage: '' }
+ // constructor(props) {
+ // super(props)
+ // this.state = { lat: null, errorMessage: '' }
+ // }
+ state = { lat: null, errorMessage: '' }
+
+ componentDidMount() {
window.navigator.geolocation.getCurrentPosition(
- postion => {
- this.setState({ lat: postion.coords.latitude })
- },
- err => {
- this.setState({ errorMessage: err.message })
- }
+ postion => this.setState({ lat: postion.coords.latitude }),
+ err => this.setState({ errorMessage: err.message })
)
}
@@ -25,10 +27,10 @@ class App extends React.Component {
}
if (!this.state.errorMessage && this.state.lat) {
- return Latiture: {this.state.lat}
+ return
}
- return Loading...
+ return
}
}
ReactDOM.render(
diff --git a/react/NOTES.md b/react/NOTES.md
index 65b89cf..ace192e 100644
--- a/react/NOTES.md
+++ b/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: '' }
+ }
+```
\ No newline at end of file