refactor

StephenGrider · StephenGrider · commit 5e9efd28b5dc · 2018-12-05T16:53:30.000-07:00
diff --git a/seasons-hooks/src/index.js b/seasons-hooks/src/index.js
@@ -1,33 +1,29 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import ReactDOM from 'react-dom';
 import SeasonDisplay from './SeasonDisplay';
 import Spinner from './Spinner';
 
-class App extends React.Component {
-  state = { lat: null, errorMessage: '' };
+const App = () => {
+  const [lat, setLat] = useState(null);
+  const [errorMessage, setErrorMessage] = useState('');
 
-  componentDidMount() {
+  useEffect(() => {
     window.navigator.geolocation.getCurrentPosition(
-      position => this.setState({ lat: position.coords.latitude }),
-      err => this.setState({ errorMessage: err.message })
+      position => setLat(position.coords.latitude),
+      err => setErrorMessage(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" />;
+  let content;
+  if (errorMessage) {
+    content = <div>Error: {errorMessage}</div>;
+  } else if (lat) {
+    content = <SeasonDisplay lat={lat} />;
+  } else {
+    content = <Spinner message="Please accept location request" />;
   }
 
-  render() {
-    return <div className="border red">{this.renderContent()}</div>;
-  }
-}
+  return <div className="border red">{content}</div>;
+};
 
 ReactDOM.render(<App />, document.querySelector('#root'));
