feat: convert DashBoard component to TypeScript

- Convert DashBoard.js to DashBoard.tsx with proper TypeScript types
- Add comprehensive test suite for DashBoard component
- Improve type safety across actions and reducers
- Add jest-dom type declarations for better testing support

Author: jorilindell

src/actions/index.ts

@@ -2,7 +2,7 @@ import _ from 'lodash';
 import { createAction } from 'redux-actions';
 import * as ApiClient from '../lib/municipalServicesClient';
 import { ActionTypes } from '../constants';
-import { AllowedValue } from 'types';
+import { AllowedValue, UserLocation } from 'types';
 
 // Action creators with proper TypeScript types
 export const setResourceFetchStart = createAction(
@@ -65,7 +65,10 @@ export const retryImmediately = createAction(ActionTypes.FLUSH_UPDATE_QUEUE);
 export const finishRetryImmediately = createAction(ActionTypes.FLUSH_UPDATE_QUEUE_DISABLED);
 export const selectServiceGroup = createAction(ActionTypes.SELECT_SERVICE_GROUP);
 
-export const setUserLocation = createAction(ActionTypes.SET_USER_LOCATION);
+export const setUserLocation = createAction(
+  ActionTypes.SET_USER_LOCATION,
+  (userLocation: UserLocation | null) => userLocation
+);
 
 export const sendObservation = createAction(
   ActionTypes.POST_OBSERVATION,

src/components/DashBoard.js

@@ -0,0 +1,80 @@
+import _ from 'lodash';
+import React, { useMemo } from 'react';
+import { useSelector } from 'react-redux';
+
+import { UnitListElement } from './UnitList';
+import { Unit } from '../types';
+import { RootState, UnitsByUpdateCountState } from '../reducers/types';
+
+interface UnitByUpdateCount {
+  id: string;
+  count: number;
+}
+
+function topUnits(
+  n: number,
+  units: Record<string, Unit>,
+  unitsByUpdateCount: UnitsByUpdateCountState
+): Unit[] {
+  return _.reverse(
+    _.map(
+      _.sortBy(
+        _.map(unitsByUpdateCount, (u, id) => ({
+          id,
+          count: u.count
+        })),
+        ['count']
+      ),
+      (u: UnitByUpdateCount) => {
+        return units[u.id];
+      }
+    ).filter(unit => unit != null).slice(0, n)
+  );
+}
+
+const DashBoard: React.FC = () => {
+  const loading = useSelector((state: RootState) => state.data.loading.unit);
+  const userLocation = useSelector((state: RootState) => state.userLocation);
+  const unitData = useSelector((state: RootState) => state.data.unit);
+  const unitsByDistance = useSelector((state: RootState) => state.data.unitsByDistance);
+  const unitsByUpdateCount = useSelector((state: RootState) => state.unitsByUpdateCount);
+  
+  const nearest = useMemo(() => {
+    if (_.keys(unitData).length > 0) {
+      return _.map(unitsByDistance, (u) => {
+        return unitData[u.id.toString()];
+      });
+    }
+    return [];
+  }, [unitData, unitsByDistance]);
+
+  const frequent = useMemo(() => {
+    if (_.keys(unitData).length > 0) {
+      return topUnits(20, unitData, unitsByUpdateCount);
+    }
+    return [];
+  }, [unitData, unitsByUpdateCount]);
+
+  if (loading) {
+    return <div>Ladataan...</div>;
+  }
+
+  const nearestElements = userLocation === null
+    ? <span>Sijainti ei saatavilla.</span>
+    : nearest.filter(u => u?.id).map(u => <UnitListElement key={u.id} unit={u} />);
+
+  const frequentElements = frequent.map(u => <UnitListElement key={u.id} unit={u} />);
+
+  return (
+    <div className="row">
+      <div className="col-xs-12">
+        <h5>Lähimmät</h5>
+        <div className="list-group facility-drilldown">{nearestElements}</div>
+        <h5>Yleisimmät</h5>
+        <div className="list-group facility-drilldown">{frequentElements}</div>
+      </div>
+    </div>
+  );
+};
+
+export default DashBoard;