refactor fetching data and including global summary to redux

src/components/left-panel/left-panel.component.jsx

@@ -1,58 +1,38 @@
 import React from 'react';
-import axios from 'axios';
 import {connect} from 'react-redux';
-import {updateTopCountriesBarData} from '../../redux/top-countries/top-countries.actions';
 import {HorizontalBar} from 'react-chartjs-2';
 import {options} from '../../utils/chart.utils';
 
 
-class LeftPanel extends React.Component{
-
-    componentDidMount(){
-        this.fetchAllCountriesData();
-    }
-
-    fetchAllCountriesData(){
-        const {updateTopCountriesBarData} = this.props;
-        axios.get(`https://api.covid19api.com/summary`)
-        .then(response => {
-            const countries = response.data.Countries;
-            updateTopCountriesBarData(countries);
-        }).catch((error)=>console.log(error.message));
-    }
-
-    render(){
-        const {countries} = this.props;
-        const dataSet = {
-            labels: countries.map(country=>country.countryCode),
-            datasets:[
-                {
-                    label: "Total confirmed",
-                    data: countries.map(country=>country.totalConfirmed) ,
-                    backgroundColor: "#f4a548",
-                },
-                {
-                    label: "Total deaths",
-                    data: countries.map(country=>country.totalDeaths) ,
-                    backgroundColor: "#f6d198",
-
-                }
-            ]
-        };
-
-        return (
-            <div className='left-panel'>
-                <HorizontalBar data={dataSet} options={options}/>
-            </div>
-        );
-    }
+const LeftPanel = ({countries}) => {
+    const dataSet = {
+        labels: countries.map(country=>country.countryCode),
+        datasets:[
+            {
+                label: "Total confirmed",
+                data: countries.map(country=>country.totalConfirmed) ,
+                backgroundColor: "#f4a548",
+            },
+            {
+                label: "Total deaths",
+                data: countries.map(country=>country.totalDeaths) ,
+                backgroundColor: "#f6d198",
+
+            }
+        ]
+    };
+
+    return (
+        <div className='left-panel'>
+            <HorizontalBar data={dataSet} options={options}/>
+        </div>
+    );
+
 }
 
-const mapStateToProps = ({topCountries:{ countries }})=> ({
-    countries
-});
-const mapDispatchToProps = dispatch => ({
-    updateTopCountriesBarData: (countries)=> dispatch(updateTopCountriesBarData(countries))
+const mapStateToProps = ({countries:{ countries}})=> ({
+    countries,
 });
 
-export default connect(mapStateToProps,mapDispatchToProps)( LeftPanel);
+
+export default connect(mapStateToProps)( LeftPanel);

src/pages/homepage/homepage.component.jsx

@@ -1,16 +1,40 @@
 import React from 'react';
+import {connect} from 'react-redux';
+import axios from 'axios';
 import LeftPanel from '../../components/left-panel/left-panel.component';
 import MainArea from '../../components/main-area/main-area.component';
 import RightPanel from '../../components/right-panel/right-panel.component';
+import {updateCountriesData} from '../../redux/countries/countries.actions';
 import './homepage.styles.scss';
 
 
-const Homepage = ()=>(
-    <div className='homepage'>
-        <LeftPanel />
-        <MainArea />
-        <RightPanel />
-    </div>
-)
+class Homepage extends React.Component {
+    componentDidMount(){
+        this.fetchAllCountriesData();
+    }
+    fetchAllCountriesData(){
+        const {updateCountriesData} = this.props;
+        axios.get(`https://api.covid19api.com/summary`)
+        .then(response => {
+            const countriesData = response.data;
+            updateCountriesData(countriesData);
+        }).catch((error)=>console.log(error.message));
+    }
 
-export default Homepage;
+    render(){
+        return (
+            <div className='homepage'>
+                <LeftPanel />
+                <MainArea />
+                <RightPanel />
+            </div>
+        )
+    }
+
+}
+
+const mapDispatchToProps = dispatch => ({
+    updateCountriesData: (countries)=> dispatch(updateCountriesData(countries))
+});
+
+export default connect(null,mapDispatchToProps)(Homepage);

src/redux/countries/countries.actions.js

@@ -0,0 +1,11 @@
+import {CountriesActionTypes} from './countries.types';
+
+export const updateCountriesData = countries => ({
+    type:CountriesActionTypes.UPDATE_COUNTRY_DATA,
+    payload:countries
+});
+
+export const fetchCountriesDataFailure = message => ({
+    type:CountriesActionTypes.FETCH_COUNTRY_DATA_FAILURE,
+    payload:message
+});

src/redux/countries/countries.reducer.js

@@ -0,0 +1,28 @@
+import {CountriesActionTypes} from './countries.types';
+import {convertToChartData} from './countries.utils';
+
+const INITIAL_STATE = {
+    countries:[],
+    globalSummary:{},
+    errorMessage:''
+}
+
+const countriesReducer = (state=INITIAL_STATE,action)=>{
+    switch (action.type) {
+        case CountriesActionTypes.UPDATE_COUNTRY_DATA:
+            return {
+                ...state,
+                countries:convertToChartData(action.payload.Countries),
+                globalSummary:action.payload.Global
+            };
+        case CountriesActionTypes.FETCH_COUNTRY_DATA_FAILURE:
+            return {
+                ...state,
+                errorMessage:action.payload
+            };
+        default:
+            return state;
+    }
+}
+
+export default countriesReducer;

src/redux/countries/countries.types.js

@@ -0,0 +1,4 @@
+export const CountriesActionTypes ={
+    UPDATE_COUNTRY_DATA:'UPDATE_COUNTRY_DATA',
+    FETCH_COUNTRY_DATA_FAILURE:'FETCH_COUNTRY_DATA_FAILURE'
+};

src/redux/root.reducer.js

@@ -1,8 +1,8 @@
 import {combineReducers} from 'redux';
-import topCountriesReducer from './top-countries/top-countries.reducer';
+import countriesReducer from './countries/countries.reducer';
 
 const rootReducer = combineReducers({
-    topCountries: topCountriesReducer,
+    countries: countriesReducer,
   });
 
 export default rootReducer;