refactor: modernize GroupList component to TypeScript

- Convert GroupList from JavaScript to TypeScript with proper types
- Replace connect() with modern useSelector hook for Redux integration
- Extract GroupListElement as typed functional sub-component
- Add comprehensive unit test suite

Author: jorilindell

src/components/DeleteConfirmation.tsx

@@ -5,6 +5,7 @@ import { useSelector, useDispatch } from 'react-redux';
 
 import UnitStatusSummary from './UnitStatusSummary';
 import { RootState } from '../reducers/types';
+import { LocalizedText } from '../types';
 
 import * as actions from '../actions/index';
 
@@ -87,7 +88,7 @@ const DeleteConfirmation: React.FC = () => {
           <h6>Oletko varma että haluat poistaa liikuntapaikalta seuraavan tekstitiedotteen?</h6>
         </div>
         <div className="panel-body">
-          <TextualDescription text={observation.value.fi} />
+          <TextualDescription text={(observation.value as LocalizedText).fi} />
           {buttonRow}
           <div className="row">
             <div className="col-xs-12">

src/components/GroupList.js

@@ -0,0 +1,56 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { useSelector } from 'react-redux';
+import _ from 'lodash';
+import { calculateGroups } from './utils';
+import { RootState } from '../reducers/types';
+
+interface GroupListElementProps {
+  id: string;
+  name: string;
+}
+
+function GroupListElement({ id, name }: GroupListElementProps): React.ReactElement {
+  const url = `/group/${id}`;
+  return (
+    <Link to={url} className="list-group-item">
+      <span className="action-icon glyphicon glyphicon-chevron-right"></span>
+      {name}
+    </Link>
+  );
+}
+
+interface Groups {
+  [groupId: string]: any;
+}
+
+const GroupList: React.FC = () => {
+  const groups = useSelector((state: RootState): Groups =>
+    calculateGroups(state.data.unit, state.auth.maintenance_organization)
+  );
+
+  const hasRequiredData = (groups: Groups): boolean => {
+    return (groups && Object.keys(groups).length > 0);
+  };
+
+  if (!hasRequiredData(groups)) {
+    return <div>Ladataan...</div>;
+  }
+
+  const elements = _.map(groups, (group, groupId) => {
+    return <GroupListElement key={groupId} id={groupId} name={groupId} />;
+  });
+
+  return (
+    <div className="row">
+      <div className="col-xs-12">
+        <h5>Alueet</h5>
+        <div className="list-group facility-drilldown">
+          {elements}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default GroupList;

src/components/GroupList.tsx

@@ -7,12 +7,9 @@ import ObservationItem from './ObservationItem';
 import { UnitObservation } from '../types';
 import { RootState } from '../reducers/types';
 
-interface Params {
-  unitId: string;
-}
 
 const UnitHistory: React.FC = () => {
-  const params = useParams<Params>();
+  const params = useParams<{ unitId: string }>();
   const dispatch = useDispatch();
 
   const unitId = useMemo(() => Number(params.unitId), [params.unitId]);
@@ -28,7 +25,7 @@ const UnitHistory: React.FC = () => {
 
   useEffect(() => {
     if (params.unitId) {
-      dispatch(actions.fetchUnitObservations(params.unitId));
+      dispatch(actions.fetchUnitObservations(params.unitId) as any);
     }
   }, [dispatch, params.unitId]);
 

src/components/UnitHistory.tsx

@@ -52,9 +52,9 @@ export function getQualityObservation(unit?: Unit): UnitObservation | undefined
   });
 }
 
-export function calculateGroups(units: Unit[], maintenanceOrg: string): Record<string, number[]> {
+export function calculateGroups(units: Record<string, Unit> | Unit[], maintenanceOrg: string): Record<string, number[]> {
   let result: Record<string, number[]> = {};
-  _.each(units, (u) => {
+  _.each(units, (u: Unit) => {
     if (u.extensions.maintenance_organization == maintenanceOrg) {
       const group = result[u.extensions.maintenance_group] || [];
       result[u.extensions.maintenance_group] = group.concat(u.id);