refactor: convert UnitHistory to TypeScript with modern hooks

- Convert UnitHistory.js to UnitHistory.tsx with full TypeScript support
- Replace withRouter HOC with useParams hook from react-router-dom
- Replace connect HOC with useSelector and useDispatch hooks from react-redux
- Convert class component to functional component with hooks
- Add comprehensive unit tests
- Add renderWithRoute helper function to testUtils for route-based testing

Author: jorilindell

src/components/UnitHistory.js

@@ -0,0 +1,80 @@
+import React, { useEffect, useMemo } from 'react';
+import { Link, useParams } from 'react-router-dom';
+import { useSelector, useDispatch } from 'react-redux';
+
+import * as actions from '../actions/index';
+import ObservationItem from './ObservationItem';
+import { Unit, UnitObservation } from '../types';
+
+interface Params {
+  unitId: string;
+}
+
+interface DataState {
+  unit: { [key: number]: Unit };
+  observation: { [key: number]: UnitObservation };
+}
+
+interface RootState {
+  data: DataState;
+}
+
+const UnitHistory: React.FC = () => {
+  const params = useParams<Params>();
+  const dispatch = useDispatch();
+  
+  const unitId = useMemo(() => Number(params.unitId), [params.unitId]);
+  
+  const unit = useSelector((state: RootState) => state.data.unit[unitId]);
+  const observationData = useSelector((state: RootState) => state.data.observation);
+  
+  const observations = useMemo(() => {
+    if (!observationData) return [];
+    return Object.values(observationData).filter(obs => obs.unit === unitId);
+  }, [observationData, unitId]);
+
+  useEffect(() => {
+    if (params.unitId) {
+      dispatch(actions.fetchUnitObservations(params.unitId));
+    }
+  }, [dispatch, params.unitId]);
+
+  const renderObservations = (observations: UnitObservation[]) => {
+    return observations.map(obs => (
+      <div key={obs.id} className="list-group-item">
+        <ObservationItem observation={obs} />
+      </div>
+    ));
+  };
+
+  if (unit === undefined) {
+    return <div>Ladataan...</div>;
+  }
+
+  return (
+    <div className="row">
+      <div className="col-xs-12">
+        <div className="list-group facility-return clearfix">
+          <Link to={`/unit/${unit.id}`} className="list-group-item">
+            <span className="action-icon glyphicon glyphicon-chevron-left"></span>
+            {' '}Takaisin
+          </Link>
+        </div>
+        <div className="well">
+          <h4>{ unit.name.fi }</h4>
+        </div>
+        <div className="unit-observations">
+          <h4>Historia</h4>
+          {observations && observations.length > 0 ? (
+            <div className="list-group">
+              {renderObservations(observations)}
+            </div>
+          ) : (
+            <p>Ei historiatietoja</p>
+          )}
+        </div>
+      </div>
+    </div>);
+};
+
+export default UnitHistory;

src/components/UnitHistory.tsx

@@ -0,0 +1,233 @@
+import React from 'react';
+import { screen } from '@testing-library/react';
+
+import UnitHistory from '../../src/components/UnitHistory';
+import { renderWithRoute } from '../testUtils';
+import * as actions from '../../src/actions/index';
+
+// Mock the actions
+jest.mock('../../src/actions/index', () => ({
+  fetchUnitObservations: jest.fn()
+}));
+
+const mockFetchUnitObservations = actions.fetchUnitObservations as jest.MockedFunction<typeof actions.fetchUnitObservations>;
+
+const mockUnit = {
+  id: 123,
+  name: { fi: 'Test Unit' },
+  services: [1, 2]
+};
+
+const mockObservations = [
+  {
+    id: 1,
+    unit: 123,
+    property: 'test_property_1',
+    time: '2024-01-01T12:00:00Z',
+    expiration_time: null,
+    name: { fi: 'Test Property 1' },
+    quality: 'good',
+    value: 'test_value_1',
+    primary: true
+  },
+  {
+    id: 2,
+    unit: 123,
+    property: 'test_property_2',
+    time: '2024-01-02T12:00:00Z',
+    expiration_time: null,
+    name: { fi: 'Test Property 2' },
+    quality: 'good',
+    value: 'test_value_2',
+    primary: false
+  }
+];
+
+const defaultState = {
+  data: {
+    unit: { 123: mockUnit },
+    observation: {
+      1: mockObservations[0],
+      2: mockObservations[1]
+    },
+    unitsByDistance: [],
+    observable_property: {},
+    service: {},
+    loading: {}
+  },
+  auth: {
+    token: null,
+    maintenance_organization: 'test-org',
+    login_id: null
+  },
+  authError: null,
+  updateQueue: {},
+  updateFlush: false,
+  serviceGroup: 'skiing',
+  userLocation: null,
+  unitsByUpdateTime: [],
+  unitsByUpdateCount: {},
+  selectedUnits: [],
+  observationsByPropertyByUnit: {},
+  allowedValuesByProperty: {},
+  massEdit: {
+    selectedUnits: [],
+    isEditing: false,
+    property: null,
+    value: null
+  }
+};
+
+const renderComponent = (unitId = '123', initialState = defaultState) => {
+  return renderWithRoute(<UnitHistory />, {
+    route: `/unit/${unitId}/history`,
+    path: '/unit/:unitId/history',
+    initialState
+  });
+};
+
+describe('UnitHistory', () => {
+  beforeEach(() => {
+    mockFetchUnitObservations.mockClear();
+    mockFetchUnitObservations.mockReturnValue({ type: 'FETCH_UNIT_OBSERVATIONS' });
+  });
+
+  it('renders loading state when unit is undefined', () => {
+    const stateWithoutUnit = {
+      ...defaultState,
+      data: {
+        ...defaultState.data,
+        unit: {}
+      }
+    };
+
+    renderComponent('123', stateWithoutUnit);
+    expect(screen.getByText('Ladataan...')).toBeInTheDocument();
+  });
+
+  it('renders unit name and back link when unit is loaded', () => {
+    renderComponent();
+
+    expect(screen.getByText('Test Unit')).toBeInTheDocument();
+    expect(screen.getByText('Takaisin')).toBeInTheDocument();
+    
+    const backLink = screen.getByRole('link', { name: /takaisin/i });
+    expect(backLink).toHaveAttribute('href', '/unit/123');
+  });
+
+  it('dispatches fetchUnitObservations on component mount', () => {
+    renderComponent();
+
+    expect(mockFetchUnitObservations).toHaveBeenCalledWith('123');
+    expect(mockFetchUnitObservations).toHaveBeenCalledTimes(1);
+  });
+
+  it('renders observations when they exist', () => {
+    renderComponent();
+
+    expect(screen.getByText('Historia')).toBeInTheDocument();
+    // Check that observation components are rendered (they contain the property names)
+    expect(screen.getByText('Test Property 1')).toBeInTheDocument();
+    expect(screen.getByText('Test Property 2')).toBeInTheDocument();
+  });
+
+  it('renders "no history" message when observations are empty', () => {
+    const stateWithoutObservations = {
+      ...defaultState,
+      data: {
+        ...defaultState.data,
+        observation: {}
+      }
+    };
+
+    renderComponent('123', stateWithoutObservations);
+
+    expect(screen.getByText('Historia')).toBeInTheDocument();
+    expect(screen.getByText('Ei historiatietoja')).toBeInTheDocument();
+    expect(screen.queryByText('Test Property')).not.toBeInTheDocument();
+  });
+
+  it('filters observations by unit id', () => {
+    const stateWithMultipleObservations = {
+      ...defaultState,
+      data: {
+        ...defaultState.data,
+        observation: {
+          1: { ...mockObservations[0], unit: 123 },
+          2: { ...mockObservations[1], unit: 123 },
+          3: { 
+            id: 3, 
+            unit: 456, 
+            property: 'other_property',
+            time: '2024-01-03T12:00:00Z',
+            expiration_time: null,
+            name: { fi: 'Other Property' },
+            quality: 'good',
+            value: 'other_value',
+            primary: false
+          }
+        }
+      }
+    };
+
+    renderComponent('123', stateWithMultipleObservations);
+
+    expect(screen.getByText('Test Property 1')).toBeInTheDocument();
+    expect(screen.getByText('Test Property 2')).toBeInTheDocument();
+    expect(screen.queryByText('Other Property')).not.toBeInTheDocument();
+  });
+
+  it('handles different unit ids correctly', () => {
+    const stateWithDifferentUnit = {
+      ...defaultState,
+      data: {
+        ...defaultState.data,
+        unit: { 456: { ...mockUnit, id: 456, name: { fi: 'Different Unit' } } },
+        observation: {
+          3: { ...mockObservations[0], id: 3, unit: 456 }
+        }
+      }
+    };
+
+    renderComponent('456', stateWithDifferentUnit);
+
+    expect(screen.getByText('Different Unit')).toBeInTheDocument();
+    expect(mockFetchUnitObservations).toHaveBeenCalledWith('456');
+    
+    const backLink = screen.getByRole('link', { name: /takaisin/i });
+    expect(backLink).toHaveAttribute('href', '/unit/456');
+  });
+
+  it('handles missing observations gracefully', () => {
+    const stateWithNullObservations = {
+      ...defaultState,
+      data: {
+        ...defaultState.data,
+        observation: null as any
+      }
+    };
+
+    renderComponent('123', stateWithNullObservations);
+
+    expect(screen.getByText('Test Unit')).toBeInTheDocument();
+    expect(screen.getByText('Ei historiatietoja')).toBeInTheDocument();
+  });
+
+  it('renders correct DOM structure', () => {
+    renderComponent();
+
+    // Check main container structure
+    expect(document.querySelector('.row')).toBeInTheDocument();
+    expect(document.querySelector('.col-xs-12')).toBeInTheDocument();
+    expect(document.querySelector('.list-group.facility-return')).toBeInTheDocument();
+    expect(document.querySelector('.well')).toBeInTheDocument();
+    expect(document.querySelector('.unit-observations')).toBeInTheDocument();
+  });
+
+  it('renders glyphicon for back link', () => {
+    renderComponent();
+
+    const glyphicon = document.querySelector('.glyphicon-chevron-left');
+    expect(glyphicon).toBeInTheDocument();
+  });
+});