class based components

Author: Vishal Upadhyay

3_class_based_components/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;
+}

3_class_based_components/src/SeasonDisplay.js

@@ -1,7 +1,19 @@
 import React from 'react';
+import './SeasonDisplay.css';
 
 // lat > 0 : Northen Hemisphere
 
+const seasonConfig = {
+    summer: {
+        text: 'Let\'s hit the beach!',
+        iconName: 'snowflake'
+    },
+    winter: {
+        text: 'Burr its cold!',
+        iconName: 'snowflake'
+    }
+}
+
 const getSeason = (lat, month) => {
     if (month>2 && month<9){
         return lat>0 ? 'summer' : 'winter'
@@ -13,13 +25,12 @@ const getSeason = (lat, month) => {
 
 const SeasonDisplay = (props) => {
     const season = getSeason(props.lat, new Date().getDate())
-    const text = season === 'winter' ? 'Burr, its chilly' : 'Lets hit the beach'
-    const icon = season === 'winter' ? 'snowflake' : 'sun'
+    const {text, iconName} = seasonConfig[season]
     return (
-        <div>
-            <i className={`${icon} icon`} />
+        <div className={`season-display ${season}`}>
+            <i className={`${iconName} icon-left icon massive`} />
                 <h1>{text}</h1>
-            <i className={`${icon} icon`} />
+            <i className={`${iconName} icon-right icon massive`} />
         </div>
     )
 }

3_class_based_components/src/Spinner.js

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

3_class_based_components/src/index.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import SeasonDisplay from './SeasonDisplay';
+import Spinner from './Spinner';
 
 class App extends React.Component {
     state = { lat: null, long: null, errMessage: '' }
@@ -19,7 +20,7 @@ class App extends React.Component {
         if (this.state.lat && !this.state.errMessage) {
             return <SeasonDisplay lat={this.state.lat} />
         }
-        return <div>Loading!!</div>
+        return <Spinner message='Please accept the location request!!' />
     }
 }