ISS Location with Context API

package.json

@@ -14,10 +14,7 @@
     "prop-types": "^15.7.2",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
-    "react-redux": "^7.1.3",
-    "react-scripts": "3.3.0",
-    "redux": "^4.0.5",
-    "redux-thunk": "^2.3.0"
+    "react-scripts": "3.3.0"
   },
   "scripts": {
     "start": "react-scripts start",

src/components/ISSLocation.js

@@ -1,14 +1,12 @@
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
 import Map from 'pigeon-maps';
 import Marker from 'pigeon-marker';
 
-import { fetchISSLocation } from '../actions';
+import ISSContext from '../context/ISSContext';
 
 class ISSLocation extends Component {
   componentDidMount() {
-    const { getCurrentISSLocation } = this.props;
+    const { getCurrentISSLocation } = this.context;
 
     this.timer = setInterval(
       getCurrentISSLocation,
@@ -26,7 +24,7 @@ class ISSLocation extends Component {
       isFetching,
       latitude,
       longitude,
-    } = this.props;
+    } = this.context;
     const isLocationPresent = latitude && longitude;
 
     return (
@@ -37,7 +35,7 @@ class ISSLocation extends Component {
             defaultWidth={700}
             height={450}
             minZoom={1}
-            maxZoom={8}
+            maxZoom={20}
             zoom={1}
           >
             {!isFetching && isLocationPresent && <Marker anchor={[latitude, longitude]} />}
@@ -51,38 +49,6 @@ class ISSLocation extends Component {
   }
 }
 
-const mapStateToProps = ({
-  issLocation: {
-    error,
-    isFetching,
-    latitude,
-    longitude,
-  },
-}) => (
-  {
-    error,
-    isFetching,
-    latitude,
-    longitude,
-  }
-);
-
-const mapDispatchToProps = (dispatch) => ({
-  getCurrentISSLocation: () => dispatch(fetchISSLocation()),
-});
-
-ISSLocation.propTypes = {
-  error: PropTypes.string,
-  getCurrentISSLocation: PropTypes.func.isRequired,
-  isFetching: PropTypes.bool.isRequired,
-  latitude: PropTypes.number,
-  longitude: PropTypes.number,
-};
-
-ISSLocation.defaultProps = {
-  error: null,
-  latitude: null,
-  longitude: null,
-};
+ISSLocation.contextType = ISSContext;
 
-export default connect(mapStateToProps, mapDispatchToProps)(ISSLocation);
+export default ISSLocation;

src/context/ISSContext.js

@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+
+const ISSContext = createContext();
+
+export default ISSContext;

src/context/Provider.js

@@ -0,0 +1,69 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+import ISSContext from './ISSContext';
+import { getCurrentISSLocation } from '../services/issAPI';
+
+class Provider extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      error: null,
+      isFetching: false,
+      latitude: null,
+      longitude: null,
+    };
+
+    this.fetchISSLocation = this.fetchISSLocation.bind(this);
+    this.handleISSLocationSuccess = this.handleISSLocationSuccess.bind(this);
+    this.handleISSLocationFailure = this.handleISSLocationFailure.bind(this);
+  }
+
+  fetchISSLocation() {
+    const { isFetching } = this.state;
+
+    if (isFetching) return;
+
+    this.setState({ isFetching: true });
+
+    getCurrentISSLocation()
+      .then(this.handleISSLocationSuccess, this.handleISSLocationFailure);
+  }
+
+  handleISSLocationSuccess(response) {
+    const { iss_position: { latitude, longitude } } = response;
+
+    this.setState({
+      isFetching: false,
+      latitude: parseFloat(latitude),
+      longitude: parseFloat(longitude),
+    });
+  }
+
+  handleISSLocationFailure(error) {
+    this.setState({
+      isFetching: false,
+      error: error.message,
+    });
+  }
+
+  render() {
+    const contextValue = {
+      ...this.state,
+      getCurrentISSLocation: this.fetchISSLocation,
+    };
+    const { children } = this.props;
+
+    return (
+      <ISSContext.Provider value={contextValue}>
+        {children}
+      </ISSContext.Provider>
+    );
+  }
+}
+
+Provider.propTypes = {
+  children: PropTypes.node.isRequired,
+};
+
+export default Provider;

src/index.js

@@ -1,13 +1,12 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { Provider } from 'react-redux';
+import Provider from './context/Provider';
 
 import './index.css';
 import App from './App';
-import store from './store';
 
 ReactDOM.render(
-  <Provider store={store}>
+  <Provider>
     <App />
   </Provider>, document.getElementById('root'),
 );