feat: add loading state management for data fetching

- Add loading state tracking to Redux store with initial states for unit/service
- Implement GET_RESOURCE_START action to set loading states to true
- Update dataReducer to handle loading state transitions and normalize state structure
- Modify Dashboard component to use loading state instead of checking for undefined data
- Add setResourceFetchStart action dispatch in Main component before fetch operations

Author: jorilindell

src/actions/index.js

@@ -2,6 +2,12 @@ import _ from 'lodash';
 import { createAction } from 'redux-actions';
 import * as ApiClient from '../lib/municipal-services-client.js';
 
+export const setResourceFetchStart = createAction(
+  'GET_RESOURCE_START',
+  (resourceType) => resourceType,
+  (resourceType) => ({ resourceType })
+);
+
 export const fetchUnitsWithServices = createAction(
   'GET_RESOURCE',
   ApiClient.fetchUnitsWithServices,

src/components/DashBoard.js

@@ -8,7 +8,7 @@ import { UnitListElement } from './UnitList';
 class DashBoard extends React.Component {
 
   render() {
-    if (this.props.nearest === undefined || this.props.frequent === undefined) {
+    if (this.props.loading) {
       return <div>Ladataan...</div>;
     }
     let nearest;
@@ -48,14 +48,18 @@ function topUnits(n, units, unitsByUpdateCount) {
 function mapStateToProps(state) {
   if (_.keys(state.data.unit).length > 0) {
     return {
+      loading: state.data.loading.unit,
       nearest: _.map(state.data.unitsByDistance, (u) => {
         return state.data.unit[u.id];
       }),
       frequent: topUnits(20, state.data.unit, state.unitsByUpdateCount),
       userLocation: state.userLocation
     };
   }
-  return {};
+  return {
+    loading: state.data.loading.unit,
+    userLocation: state.userLocation
+  };
 }
 
 function mapDispatchToProps() {

src/components/Main.js

@@ -6,7 +6,7 @@ import { connect } from 'react-redux';
 import { Link, Outlet } from 'react-router-dom';
 import _ from 'lodash';
 
-import { fetchUnitsWithServices, fetchResource, setUserLocation, getNearestUnits } from '../actions/index';
+import { fetchUnitsWithServices, fetchResource, setUserLocation, getNearestUnits, setResourceFetchStart, getResourceError } from '../actions/index';
 import { getCurrentSeason } from './utils';
 import { getInitialLocation } from '../lib/geolocation';
 import { withRouter } from '../hooks/index';
@@ -30,10 +30,12 @@ class AppComponent extends React.Component {
     let { navigate, auth } = this.props;
     requireAuth(navigate, auth);
     const services = constants.SERVICE_GROUPS[this.props.serviceGroup].services;
+    this.props.setResourceFetchStart('service');
     this.props.fetchResource(
       'service', { id: services.join(',') },
       ['id', 'name'], ['observable_properties']
     );
+    this.props.setResourceFetchStart('unit');
     this.props.fetchUnitsWithServices(
       services, this.props.maintenanceOrganization, {
         selected: ['id', 'name', 'services', 'location', 'extensions'],
@@ -113,6 +115,9 @@ const mapDispatchToProps = (dispatch) => {
     },
     getNearestUnits: (...args) => {
       dispatch(getNearestUnits(...args));
+    },
+    setResourceFetchStart: (resourceType) => {
+      dispatch(setResourceFetchStart(resourceType));
     }
   };
 };

src/reducers/index.js

@@ -8,7 +8,8 @@ const initialDataState = {
   unitsByDistance: [],
   observable_property: {},
   observation: {},
-  service: {}
+  service: {},
+  loading: {}
 };
 
 const initialAuthState = {
@@ -27,21 +28,37 @@ const serviceGroup = 'skiing';
 
 function dataReducer(state = initialDataState, action) {
   switch (action.type) {
+    case 'GET_RESOURCE_START':
+      const startResourceType = action.meta.resourceType;
+      return {
+        ...state,
+          loading: {
+            ...state.loading,
+            [startResourceType]: true
+          }
+      };
     case 'GET_RESOURCE':
       const resourceType = action.meta.resourceType;
       let existingResources = state[resourceType];
       if (action.meta.replaceAll === true) {
         existingResources = {};
       }
-      return Object.assign(
-        {}, state,
-        {[resourceType]: Object.assign(
-          existingResources,
-          action.payload[resourceType])});
+      return {
+        ...state,
+        [resourceType]: {
+          ...existingResources,
+          ...action.payload[resourceType]
+        },
+        loading: {
+          ...state.loading,
+          [resourceType]: false
+        }
+      };
     case 'GET_NEAREST_UNITS':
-      return Object.assign(
-        {}, state,
-        {unitsByDistance: action.payload});
+      return {
+        ...state,
+        unitsByDistance: action.payload
+      };
   }
   return state;
 }