Intigrate react-redux in weather app

client/package.json

@@ -3,9 +3,13 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "classnames": "^2.2.6",
+    "lodash": "^4.17.10",
     "react": "^16.3.2",
     "react-dom": "^16.3.2",
-    "react-scripts": "1.1.4"
+    "react-redux": "^5.0.7",
+    "react-scripts": "1.1.4",
+    "redux": "^4.0.0"
   },
   "scripts": {
     "start": "react-scripts start",

client/src/index.js

@@ -1,20 +1,26 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import './views/css/styles.css';
-import {BrowserRouter as Router, Route } from 'react-router-dom';
+import { BrowserRouter as Router, Route } from 'react-router-dom';
+import { Provider } from 'react-redux';
+
+// Store
+import store from './store/index';
 
 // Views
 import { App, ErrorDisplay } from './views/Components/index';
 import { Home, CurrentWeather } from './views/Containers/index';
 
 ReactDOM.render(
-  <Router>
-    <App>
-      <Route exact path='/' component={Home}/>
-      <Route exact path='/current-weather' component={CurrentWeather}/>
-      <Route exact path='/error' component={ErrorDisplay}/>
-    </App>
-  </Router>
+  <Provider store={store}>
+    <Router>
+      <App>
+        <Route exact path='/' component={Home}/>
+        <Route exact path='/current-weather' component={CurrentWeather}/>
+        <Route exact path='/error' component={ErrorDisplay}/>
+      </App>
+    </Router>
+  </Provider>
   , document.getElementById('root'));
 
-registerServiceWorker(); // eslint-disable-line no-undef
+// registerServiceWorker(); // eslint-disable-line no-undef

client/src/store/actions/action-types.js

@@ -0,0 +1,3 @@
+export const SET_LOCATION_TEXT_INPUT = 'SET_LOCATION_TEXT_INPUT';
+export const SET_LOCATION_RADIO_INPUT = 'SET_LOCATION_RADIO_INPUT';
+export const SET_DEFAULT_INPUT = 'SET_DEFAULT_INPUT';

client/src/store/actions/index.js

@@ -0,0 +1,23 @@
+import { SET_LOCATION_TEXT_INPUT, SET_LOCATION_RADIO_INPUT, SET_DEFAULT_INPUT } from './action-types';
+
+export const setLocationTextInput = locationInputConfig => (
+  {
+    type: SET_LOCATION_TEXT_INPUT,
+    payload: locationInputConfig,
+  }
+);
+
+export const setLocationRadioInput = locationRadioConfig => (
+  {
+    type: SET_LOCATION_RADIO_INPUT,
+    payload: locationRadioConfig,
+  }
+);
+
+export const setDefaultInput = () => {
+  return {
+    type: SET_DEFAULT_INPUT,
+  };
+};
+
+export { SET_LOCATION_TEXT_INPUT, SET_LOCATION_RADIO_INPUT, SET_DEFAULT_INPUT };

client/src/store/index.js

@@ -0,0 +1,6 @@
+import { createStore } from 'redux';
+import rootReducer from './reducers/index';
+
+const store = createStore(rootReducer);
+
+export default store;

client/src/store/reducers/index.js

@@ -0,0 +1,27 @@
+import { SET_LOCATION_TEXT_INPUT, SET_LOCATION_RADIO_INPUT, SET_DEFAULT_INPUT } from '../actions/index';
+
+const defaultState = {
+  locationData: '',
+  locationType: 'zipcode',
+};
+
+const rootReducer = function(state = defaultState, action) {
+  const { payload } = action;
+
+  switch (action.type) {
+    case SET_LOCATION_TEXT_INPUT: {
+      return { ...state, locationData: payload.locationData };
+    }
+    case SET_LOCATION_RADIO_INPUT: {
+      return { ...state, locationType: payload.locationType };
+    }
+    case SET_DEFAULT_INPUT: {
+      return { ...state };
+    }
+    default: {
+      return { ...state };
+    }
+  }
+};
+
+export default rootReducer;

client/src/views/Components/RadioButtonSection.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import classnames from 'classnames';
+
+import { RadioButton } from '../Containers/index';
+
+export default function RadioButtonSection(props) {
+  const { radioButtons, className, selectedOption, onChange } = props;
+
+  if (!radioButtons || !radioButtons.length) {
+    return null;
+  }
+
+  return (
+    <div className={classnames(className)}>
+      {
+        radioButtons.map(function(radioButton, index) {
+          const { value, radioButtonLabel } = radioButton;
+
+          return (
+            <RadioButton
+              key={index}
+              value={value}
+              isSelected={selectedOption === value}
+              radioButtonLabel={radioButtonLabel}
+              onChange={onChange}
+            />
+          );
+        })
+      }
+    </div>
+  );
+}

client/src/views/Components/index.js

@@ -1,5 +1,5 @@
 import { default as App } from './App';
 import { default as ErrorDisplay } from './ErrorDisplay';
-import { default as RadioButton } from './RadioButton';
+import { default as RadioButtonSection } from './RadioButtonSection';
 
-export { App, ErrorDisplay, RadioButton };
+export { App, ErrorDisplay, RadioButtonSection };

client/src/views/Containers/Home.js

@@ -1,41 +1,58 @@
 import React from 'react';
+import { connect } from 'react-redux';
 
 import { LightningBolt } from '../assets/lightning.svg';
-import { RadioButton } from '../Components/index';
+import { RadioButtonSection } from '../Components/index';
+import { setLocationTextInput, setLocationRadioInput, setDefaultInput } from '../../store/actions/index';
 
-export default class Home extends React.Component {
+const radioButtons = [
+  {
+    value: 'name',
+    radioButtonLabel: 'City name',
+  },
+  {
+    value: 'id',
+    radioButtonLabel: 'City Id',
+  },
+  {
+    value: 'coordinates',
+    radioButtonLabel: 'City co-ordinates',
+  },
+  {
+    value: 'zipcode',
+    radioButtonLabel: 'City zipcode',
+  },
+];
+
+export class Home extends React.Component {
 
   constructor(props) {
     super(props);
 
-    this.state = {
-      locationData: '',
-      locationType: 'zipcode',
-    };
-
-    this.handleRadioInputChange = this.handleRadioInputChange.bind(this);
-    this.handleButtonClick = this.handleButtonClick.bind(this);
-    this.handleInputFieldChange = this.handleInputFieldChange.bind(this);
+    this.props.setDefaultInput();
+    this.inputFieldRef = React.createRef();
   }
 
-  handleRadioInputChange(event) {
-    this.setState({
-      locationType: event.target.value,
-    });
+  handleRadioInputChange = (event) => {
+    this.props.setLocationRadioInput({ locationType: event.target.value });
   }
 
-  handleInputFieldChange(event) {
-    this.setState({
-      locationData: event.target.value,
-    });
+  handleButtonClick = (event) => {
+    this.props.setLocationTextInput({ locationData: this.inputFieldRef.current.value });
   }
 
-  handleButtonClick(event) {
-    console.log(this.props);
-    this.props.history.push({
-      pathname: '/current-weather',
-      state: this.state,
-    });
+  componentDidUpdate = (prevProps) => {
+    const { locationData, locationType } = this.props;
+
+    if (prevProps.locationData !== locationData) {
+      this.props.history.push({
+        pathname: '/current-weather',
+        state: {
+          locationType: locationType,
+          locationData: locationData,
+        },
+      });
+    }
   }
 
   render() {
@@ -50,40 +67,47 @@ export default class Home extends React.Component {
         </div>
         <div className='zipcodeInput'>
           <input
+            ref={this.inputFieldRef}
             type='text'
             placeholder='Enter zipcode..'
             name='zipcode'
-            onChange={this.handleInputFieldChange}
           />
           <button onClick={this.handleButtonClick}>ENTER</button>
         </div>
         <div className='radio-button-section'>
-          <RadioButton
-            value='name'
-            isSelected={this.state.locationType === 'name'}
-            onChange={this.handleRadioInputChange}
-            radioButtonLabel='City name'
-          />
-          <RadioButton
-            value='id'
-            isSelected={this.state.locationType === 'id'}
-            onChange={this.handleRadioInputChange}
-            radioButtonLabel='City Id'
-          />
-          <RadioButton
-            value='coordinates'
-            isSelected={this.state.locationType === 'coordinates'}
+          <RadioButtonSection
+            radioButtons={radioButtons}
+            selectedOption={this.props.locationType}
             onChange={this.handleRadioInputChange}
-            radioButtonLabel='City co-ordinates'
-          />
-          <RadioButton
-            value='zipcode'
-            isSelected={this.state.locationType === 'zipcode'}
-            onChange={this.handleRadioInputChange}
-            radioButtonLabel='City zipcode'
           />
         </div>
       </div>
     );
   }
 };
+
+const mapStateToProps = function(state) {
+  const locationData = state && state.locationData;
+  const locationType = state && state.locationType;
+
+  return {
+    locationType: locationType,
+    locationData: locationData,
+  };
+};
+
+const mapDispatchToProps = function(dispatch) {
+  return {
+    setLocationRadioInput: function(locationRadioConfig) {
+      dispatch(setLocationRadioInput(locationRadioConfig));
+    },
+    setLocationTextInput: function(locationTextConfig) {
+      dispatch(setLocationTextInput(locationTextConfig));
+    },
+    setDefaultInput: function() {
+      dispatch(setDefaultInput());
+    },
+  };
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(Home);

client/src/views/Containers/index.js

@@ -1,4 +1,5 @@
 import { default as Home } from './Home';
 import { default as CurrentWeather } from './CurrentWeather';
+import { default as RadioButton } from './RadioButton';
 
-export { Home, CurrentWeather };
+export { Home, CurrentWeather, RadioButton };