ISS Location with Redux

package.json

@@ -9,10 +9,15 @@
     "eslint": "^6.8.0",
     "eslint-config-airbnb": "^18.0.1",
     "eslint-plugin-jsx-a11y": "^6.2.3",
+    "pigeon-maps": "^0.14.0",
+    "pigeon-marker": "^0.3.4",
     "prop-types": "^15.7.2",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
-    "react-scripts": "3.3.0"
+    "react-redux": "^7.1.3",
+    "react-scripts": "3.3.0",
+    "redux": "^4.0.5",
+    "redux-thunk": "^2.3.0"
   },
   "scripts": {
     "start": "react-scripts start",

src/App.css

@@ -2,37 +2,8 @@
   text-align: center;
 }
 
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+.map {
+  border: 1px solid black;
+  margin: 0 auto;
+  max-width: 700px;
 }

src/App.js

@@ -1,24 +1,12 @@
 import React from 'react';
-import logo from './logo.svg';
 import './App.css';
+import ISSLocation from './components/ISSLocation';
 
 function App() {
   return (
     <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+      <h1>International Space Station Location Tracker</h1>
+      <ISSLocation />
     </div>
   );
 }

src/actions/index.js

@@ -0,0 +1,32 @@
+import { getCurrentISSLocation } from '../services/issAPI';
+
+export const RECEIVE_ISS_LOCATION_FAILURE = 'RECEIVE_ISS_LOCATION_FAILURE';
+export const RECEIVE_ISS_LOCATION_SUCCESS = 'RECEIVE_ISS_LOCATION_SUCCESS';
+export const REQUEST_ISS_LOCATION = 'REQUEST_ISS_LOCATION';
+
+const requestISSLocation = () => ({
+  type: REQUEST_ISS_LOCATION,
+});
+
+const receiveISSLocationFailure = (error) => ({
+  type: RECEIVE_ISS_LOCATION_FAILURE,
+  error,
+});
+
+const receiveISSLocationSuccess = ({ iss_position: { latitude, longitude } }) => ({
+  type: RECEIVE_ISS_LOCATION_SUCCESS,
+  latitude: parseFloat(latitude),
+  longitude: parseFloat(longitude),
+});
+
+export function fetchISSLocation() {
+  return (dispatch) => {
+    dispatch(requestISSLocation());
+
+    return getCurrentISSLocation()
+      .then(
+        (location) => dispatch(receiveISSLocationSuccess(location)),
+        (error) => dispatch(receiveISSLocationFailure(error.message)),
+      );
+  };
+}

src/components/ISSLocation.js

@@ -0,0 +1,88 @@
+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';
+
+class ISSLocation extends Component {
+  componentDidMount() {
+    const { getCurrentISSLocation } = this.props;
+
+    this.timer = setInterval(
+      getCurrentISSLocation,
+      2000,
+    );
+  }
+
+  componentWillUnmount() {
+    clearInterval(this.timer);
+  }
+
+  render() {
+    const {
+      error,
+      isFetching,
+      latitude,
+      longitude,
+    } = this.props;
+    const isLocationPresent = latitude && longitude;
+
+    return (
+      <div>
+        <div className="map">
+          <Map
+            center={[0, 0]}
+            defaultWidth={700}
+            height={450}
+            minZoom={1}
+            maxZoom={8}
+            zoom={1}
+          >
+            {!isFetching && isLocationPresent && <Marker anchor={[latitude, longitude]} />}
+          </Map>
+        </div>
+        {isFetching && 'Loading...'}
+        {!isFetching && isLocationPresent && `Current ISS location: latitude = ${latitude}, longitude = ${longitude}`}
+        {!isFetching && error}
+      </div>
+    );
+  }
+}
+
+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,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(ISSLocation);

src/index.js

@@ -1,12 +1,13 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import { Provider } from 'react-redux';
+
 import './index.css';
 import App from './App';
-import * as serviceWorker from './serviceWorker';
-
-ReactDOM.render(<App />, document.getElementById('root'));
+import store from './store';
 
-// If you want your app to work offline and load faster, you can change
-// unregister() to register() below. Note this comes with some pitfalls.
-// Learn more about service workers: https://bit.ly/CRA-PWA
-serviceWorker.unregister();
+ReactDOM.render(
+  <Provider store={store}>
+    <App />
+  </Provider>, document.getElementById('root'),
+);

src/reducers/index.js

@@ -0,0 +1,8 @@
+import { combineReducers } from 'redux';
+import issLocation from './issLocation';
+
+const rootReducer = combineReducers({
+  issLocation,
+});
+
+export default rootReducer;

src/reducers/issLocation.js

@@ -0,0 +1,38 @@
+import {
+  RECEIVE_ISS_LOCATION_FAILURE,
+  RECEIVE_ISS_LOCATION_SUCCESS,
+  REQUEST_ISS_LOCATION,
+} from '../actions';
+
+const INITIAL_ISS_LOCATION_STATE = {
+  isFetching: false,
+};
+
+const issLocation = (state = INITIAL_ISS_LOCATION_STATE, action) => {
+  console.log('received action:', action);
+
+  switch (action.type) {
+    case REQUEST_ISS_LOCATION:
+      return {
+        ...state,
+        isFetching: true,
+      };
+    case RECEIVE_ISS_LOCATION_SUCCESS:
+      return {
+        ...state,
+        latitude: action.latitude,
+        longitude: action.longitude,
+        isFetching: false,
+      };
+    case RECEIVE_ISS_LOCATION_FAILURE:
+      return {
+        ...state,
+        error: action.error,
+        isFetching: false,
+      };
+    default:
+      return state;
+  }
+};
+
+export default issLocation;