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;

src/components/DashBoard.tsx

@@ -14,7 +14,7 @@ interface ConfirmButtonProps {
   clearObservation: (property: string, unitId: number) => void;
 }
 
-function ConfirmButton({ unitId, clearObservation }: ConfirmButtonProps): React.ReactElement {
+function ConfirmButton({ unitId, clearObservation }: Readonly<ConfirmButtonProps>): React.ReactElement {
   const buttonClassName = 'btn btn-success btn-block';
   return (
     <Link to={`/unit/${unitId}`} className={buttonClassName} onClick={() => { clearObservation('notice', unitId); }}>
@@ -27,7 +27,7 @@ interface TextualDescriptionProps {
   text: string;
 }
 
-function TextualDescription({ text }: TextualDescriptionProps): React.ReactElement {
+function TextualDescription({ text }: Readonly<TextualDescriptionProps>): React.ReactElement {
   const lines = text.split('\n');
   return (
     <div className="notice-large">
@@ -54,7 +54,7 @@ const DeleteConfirmation: React.FC = () => {
   const isLoading = useSelector((state: RootState) => state.data.loading.unit === true);
 
   const observation = useMemo(() => {
-    if (!unit || !unit.observations) return null;
+    if (!unit?.observations) return null;
     return _.find(unit.observations, (o) => { return o.property === 'notice'; }) || null;
   }, [unit]);
 

src/components/DeleteConfirmation.tsx

@@ -10,7 +10,7 @@ interface GroupListElementProps {
   name: string;
 }
 
-function GroupListElement({ id, name }: GroupListElementProps): React.ReactElement {
+function GroupListElement({ id, name }: Readonly<GroupListElementProps>): React.ReactElement {
   const url = `/group/${id}`;
   return (
     <Link to={url} className="list-group-item">