diff --git a/package-lock.json b/package-lock.json index d1720c3..5f2d893 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6404,14 +6404,6 @@ "minimalistic-crypto-utils": "^1.0.1" } }, - "hoist-non-react-statics": { - "version": "3.3.1", - "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz", - "integrity": "sha512-wbg3bpgA/ZqWrZuMOeJi8+SKMhr7X9TesL/rXMjTzh0p0JUBo3II8DHboYbuIXWRlttrUFxwcu/5kygrCw8fJw==", - "requires": { - "react-is": "^16.7.0" - } - }, "hosted-git-info": { "version": "2.8.5", "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.5.tgz", @@ -11138,19 +11130,6 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.12.0.tgz", "integrity": "sha512-rPCkf/mWBtKc97aLL9/txD8DZdemK0vkA3JMLShjlJB3Pj3s+lpf1KaBzMfQrAmhMQB0n1cU/SUGgKKBCe837Q==" }, - "react-redux": { - "version": "7.1.3", - "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.1.3.tgz", - "integrity": "sha512-uI1wca+ECG9RoVkWQFF4jDMqmaw0/qnvaSvOoL/GA4dNxf6LoV8sUAcNDvE5NWKs4hFpn0t6wswNQnY3f7HT3w==", - "requires": { - "@babel/runtime": "^7.5.5", - "hoist-non-react-statics": "^3.3.0", - "invariant": "^2.2.4", - "loose-envify": "^1.4.0", - "prop-types": "^15.7.2", - "react-is": "^16.9.0" - } - }, "react-scripts": { "version": "3.3.0", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-3.3.0.tgz", @@ -11299,20 +11278,6 @@ "strip-indent": "^3.0.0" } }, - "redux": { - "version": "4.0.5", - "resolved": "https://registry.npmjs.org/redux/-/redux-4.0.5.tgz", - "integrity": "sha512-VSz1uMAH24DM6MF72vcojpYPtrTUu3ByVWfPL1nPfVRb5mZVTve5GnNCUV53QM/BZ66xfWrm0CTWoM+Xlz8V1w==", - "requires": { - "loose-envify": "^1.4.0", - "symbol-observable": "^1.2.0" - } - }, - "redux-thunk": { - "version": "2.3.0", - "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-2.3.0.tgz", - "integrity": "sha512-km6dclyFnmcvxhAcrQV2AkZmPQjzPDjgVlQtR0EQjxZPyJ0BnMf3in1ryuR8A2qU0HldVRfxYXbFSKlI3N7Slw==" - }, "regenerate": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.0.tgz", @@ -12703,11 +12668,6 @@ "util.promisify": "~1.0.0" } }, - "symbol-observable": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.2.0.tgz", - "integrity": "sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ==" - }, "symbol-tree": { "version": "3.2.4", "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz", diff --git a/package.json b/package.json index 2d0a59f..16ef9b6 100644 --- a/package.json +++ b/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", diff --git a/src/actions/index.js b/src/actions/index.js deleted file mode 100644 index 5ebcd38..0000000 --- a/src/actions/index.js +++ /dev/null @@ -1,32 +0,0 @@ -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)), - ); - }; -} diff --git a/src/components/ISSLocation.js b/src/components/ISSLocation.js index 2bcf07c..5f5e5b0 100644 --- a/src/components/ISSLocation.js +++ b/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 && } @@ -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; diff --git a/src/context/ISSContext.js b/src/context/ISSContext.js new file mode 100644 index 0000000..d411f00 --- /dev/null +++ b/src/context/ISSContext.js @@ -0,0 +1,5 @@ +import { createContext } from 'react'; + +const ISSContext = createContext(); + +export default ISSContext; diff --git a/src/context/Provider.js b/src/context/Provider.js new file mode 100644 index 0000000..e66b3fe --- /dev/null +++ b/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 ( + + {children} + + ); + } +} + +Provider.propTypes = { + children: PropTypes.node.isRequired, +}; + +export default Provider; diff --git a/src/index.js b/src/index.js index 02d2bed..94c5b39 100644 --- a/src/index.js +++ b/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( - + , document.getElementById('root'), ); diff --git a/src/reducers/index.js b/src/reducers/index.js deleted file mode 100644 index 890d5bf..0000000 --- a/src/reducers/index.js +++ /dev/null @@ -1,8 +0,0 @@ -import { combineReducers } from 'redux'; -import issLocation from './issLocation'; - -const rootReducer = combineReducers({ - issLocation, -}); - -export default rootReducer; diff --git a/src/reducers/issLocation.js b/src/reducers/issLocation.js deleted file mode 100644 index 6b0fc61..0000000 --- a/src/reducers/issLocation.js +++ /dev/null @@ -1,38 +0,0 @@ -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; diff --git a/src/store/index.js b/src/store/index.js deleted file mode 100644 index fa4e65b..0000000 --- a/src/store/index.js +++ /dev/null @@ -1,8 +0,0 @@ -import { applyMiddleware, createStore } from 'redux'; -import thunk from 'redux-thunk'; - -import reducer from '../reducers'; - -const store = createStore(reducer, applyMiddleware(thunk)); - -export default store;