React Geoloc Season display (based on Stephen Grider's course Modern React Redux on Udemy)

A.React Geoloc.md

React Geoloc

index.js

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, errorMessage: '' };

  componentDidMount() {
    window.navigator.geolocation.getCurrentPosition(
      position => this.setState({ lat: position.coords.latitude }),
      err => this.setState({ errorMessage: err.message })
    );
  }

  renderContent() {
    if (this.state.errorMessage && !this.state.lat) {
      return <div>Error: {this.state.errorMessage}</div>;
    }

    if (!this.state.errorMessage && this.state.lat) {
      return <SeasonDisplay lat={this.state.lat} />;
    }

    return <Spinner message="Please accept location request" />;
  }

  render() {
    return <div className="border red">{this.renderContent()}</div>;
  }
}

ReactDOM.render(<App />, document.querySelector('#root'));

indexHook.js

import React from 'react';
import ReactDOM from 'react-dom';
import SeasonDisplay from './classApproach/SeasonDisplay';
import Spinner from './classApproach/Spinner';
import useLocation from "./useLocation";

const App = () => {
  const [lat, errorMessage] = useLocation();

  let content;
  if (errorMessage) {
    content = <div>Error: {errorMessage}</div>;
  } else if (lat) {
    content = <SeasonDisplay lat={lat}/>;
  } else {
    content = <Spinner message="Please accept location request" />;
  }

  return <div className="border red">{content}</div>;
};


ReactDOM.render(<App />, document.querySelector('#root'));

SeasonDisplay.css

.icon-left {
  position: absolute;
  top: 10px;
  left: 10px;
}

.icon-right {
  position: absolute;
  bottom: 10px;
  right: 10px;
}

.season-display.winter i {
  color: blue;
}

.season-display.summer i {
  color: red;
}

.season-display {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.winter {
  background-color: aliceblue;
}

.summer {
  background-color: orange;
}

SeasonDisplay.js

import './SeasonDisplay.css';
import React from 'react';

const seasonConfig = {
  summer: {
    text: "Let's hit the beach!",
    iconName: 'sun'
  },
  winter: {
    text: 'Burr it is cold!',
    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;

Spinner.js

import React from 'react';

const Spinner = props => {
  return (
    <div className="ui active dimmer">
      <div className="ui big text loader">{props.message}</div>
    </div>
  );
};

Spinner.defaultProps = {
  message: 'Loading...'
};

export default Spinner;

useLocation.js

import { useState, useEffect } from 'react';

export default () => {
  const [lat, setLat ] = useState(null);
  const [errorMessage, setErrorMessage ] = useState('');

  // empty array to call the callback function only once, when the component if first rendered
  useEffect( () => {
    window.navigator.geolocation.getCurrentPosition(
      position => setLat(position.coords.latitude),
      err => setErrorMessage(err.message));
  }, []);

  return [lat, errorMessage];
}