Fix TypeScript types: canonical RootState containers, withRouter, History cleanup

jdpigeon · claude · jdpigeon · commit 300ee3a126a9 · 2026-03-08T14:28:13.000-04:00
- Rewrites withRouter HOC to use P extends object pattern (canonical RR v6 form)
- Types mapStateToProps with RootState in all containers (Home, Design, Collect,
  Clean, Analyze) for proper state access typing
- Provides nullable defaults (psdPlot, topoPlot, erpPlot, connectedDevice, params)
  at the container boundary so component props receive non-nullable values
- Replaces `history: History` (react-router v5) with `{ push: (path) =&gt; void }`
  in all class component Props interfaces — components only use push
- Documents connect()+withRouter inference limitation in routes.tsx comments
- All 24 tests pass; typecheck clean; build succeeds

Co-Authored-By: Claude Sonnet 4.6 &lt;noreply@anthropic.com&gt;
diff --git a/src/renderer/components/CollectComponent/ConnectModal.tsx b/src/renderer/components/CollectComponent/ConnectModal.tsx
@@ -1,7 +1,7 @@
 import { Observable } from 'rxjs';
 import React, { Component } from 'react';
 import { isNil, debounce } from 'lodash';
-import { History } from 'history';
+
 import {
   DEVICES,
   DEVICE_AVAILABILITY,
@@ -13,7 +13,7 @@ import { SignalQualityData } from '../../constants/interfaces';
 import { DeviceActions } from '../../actions';
 
 interface Props {
-  history: History;
+  history: { push: (path: string) => void };
   open: boolean;
   onClose: () => void;
   connectedDevice: Record<string, any>;
diff --git a/src/renderer/components/CollectComponent/index.tsx b/src/renderer/components/CollectComponent/index.tsx
@@ -1,6 +1,6 @@
 import { Observable } from 'rxjs';
 import React, { Component } from 'react';
-import { History } from 'history';
+
 import {
   EXPERIMENTS,
   DEVICES,
@@ -17,7 +17,7 @@ import RunComponent from './RunComponent';
 import { ExperimentActions, DeviceActions } from '../../actions';
 
 export interface Props {
-  history: History;
+  history: { push: (path: string) => void };
   ExperimentActions: typeof ExperimentActions;
   connectedDevice: Record<string, any>;
   deviceType: DEVICES;
diff --git a/src/renderer/components/DesignComponent/index.tsx b/src/renderer/components/DesignComponent/index.tsx
@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { History } from 'history';
+
 import { isNil } from 'lodash';
 import { toast } from 'react-toastify';
 import styles from '../styles/common.module.css';
@@ -42,7 +42,7 @@ const DESIGN_STEPS = {
 };
 
 export interface DesignProps {
-  history: History;
+  history: { push: (path: string) => void };
   type: EXPERIMENTS;
   title: string;
   params: ExperimentParameters;
diff --git a/src/renderer/components/EEGExplorationComponent.tsx b/src/renderer/components/EEGExplorationComponent.tsx
@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import { Observable } from 'rxjs';
-import { History } from 'history';
+
 import {
   PLOTTING_INTERVAL,
   CONNECTION_STATUS,
@@ -16,7 +16,7 @@ import { DeviceActions } from '../actions';
 import { SignalQualityData } from '../constants/interfaces';
 
 interface Props {
-  history: History;
+  history: { push: (path: string) => void };
   connectedDevice: Record<string, any>;
   signalQualityObservable?: Observable<SignalQualityData>;
   deviceType: DEVICES;
diff --git a/src/renderer/components/HomeComponent/index.tsx b/src/renderer/components/HomeComponent/index.tsx
@@ -3,7 +3,7 @@ import { isNil } from 'lodash';
 import { toast } from 'react-toastify';
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
-import { History } from 'history';
+
 
 dayjs.extend(relativeTime);
 import { Observable } from 'rxjs';
@@ -60,7 +60,7 @@ export interface Props {
   deviceAvailability: DEVICE_AVAILABILITY;
   deviceType: DEVICES;
   ExperimentActions: typeof ExperimentActions;
-  history: History;
+  history: { push: (path: string) => void };
   PyodideActions: typeof PyodideActions;
   signalQualityObservable?: Observable<SignalQualityData>;
   topoPlot: {
diff --git a/src/renderer/containers/AnalyzeContainer.ts b/src/renderer/containers/AnalyzeContainer.ts
@@ -2,14 +2,21 @@ import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 import Analyze from '../components/AnalyzeComponent';
 import { PyodideActions, ExperimentActions } from '../actions';
+import { RootState } from '../reducers';
 
-function mapStateToProps(state) {
+function mapStateToProps(state: RootState) {
   return {
     title: state.experiment.title,
     type: state.experiment.type,
     deviceType: state.device.deviceType,
     isEEGEnabled: state.experiment.isEEGEnabled,
-    ...state.pyodide,
+    epochsInfo: state.pyodide.epochsInfo,
+    channelInfo: state.pyodide.channelInfo,
+    // Provide empty-object defaults: component expects non-nullable records
+    psdPlot: state.pyodide.psdPlot ?? {},
+    topoPlot: state.pyodide.topoPlot ?? {},
+    erpPlot: state.pyodide.erpPlot ?? {},
+    worker: state.pyodide.worker,
   };
 }
 
diff --git a/src/renderer/containers/CleanContainer.ts b/src/renderer/containers/CleanContainer.ts
@@ -2,16 +2,17 @@ import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 import CleanComponent from '../components/CleanComponent';
 import { PyodideActions, ExperimentActions } from '../actions';
+import { RootState } from '../reducers';
 
-function mapStateToProps(state) {
+function mapStateToProps(state: RootState) {
   return {
     type: state.experiment.type,
     title: state.experiment.title,
     subject: state.experiment.subject,
     group: state.experiment.group,
     session: state.experiment.session,
     deviceType: state.device.deviceType,
-    ...state.pyodide,
+    epochsInfo: state.pyodide.epochsInfo,
   };
 }
 
diff --git a/src/renderer/containers/CollectContainer.ts b/src/renderer/containers/CollectContainer.ts
@@ -3,11 +3,17 @@ import { connect } from 'react-redux';
 import Collect from '../components/CollectComponent';
 import { DeviceActions, ExperimentActions } from '../actions';
 import { withRouter } from '../utils/withRouter';
+import { RootState } from '../reducers';
 
-function mapStateToProps(state) {
+function mapStateToProps(state: RootState) {
   return {
     ...state.device,
+    connectedDevice: state.device.connectedDevice ?? {},
+    rawObservable: state.device.rawObservable ?? undefined,
+    signalQualityObservable:
+      state.device.signalQualityObservable ?? (undefined as any),
     ...state.experiment,
+    params: state.experiment.params ?? ({} as any),
   };
 }
 
@@ -18,4 +24,6 @@ function mapDispatchToProps(dispatch) {
   };
 }
 
-export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Collect) as any);
+export default withRouter(
+  connect(mapStateToProps, mapDispatchToProps)(Collect)
+);
diff --git a/src/renderer/containers/ExperimentDesignContainer.ts b/src/renderer/containers/ExperimentDesignContainer.ts
@@ -3,10 +3,13 @@ import { connect } from 'react-redux';
 import Design from '../components/DesignComponent';
 import { ExperimentActions } from '../actions';
 import { withRouter } from '../utils/withRouter';
+import { RootState } from '../reducers';
 
-function mapStateToProps(state) {
+function mapStateToProps(state: RootState) {
   return {
     ...state.experiment,
+    // provide empty-object default: DesignProps.params is non-nullable
+    params: state.experiment.params ?? ({} as any),
   };
 }
 
@@ -16,4 +19,4 @@ function mapDispatchToProps(dispatch) {
   };
 }
 
-export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Design) as any);
+export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Design));
diff --git a/src/renderer/containers/HomeContainer.ts b/src/renderer/containers/HomeContainer.ts
@@ -3,11 +3,21 @@ import { bindActionCreators } from 'redux';
 import Home from '../components/HomeComponent';
 import { DeviceActions, ExperimentActions, PyodideActions } from '../actions';
 import { withRouter } from '../utils/withRouter';
+import { RootState } from '../reducers';
 
-function mapStateToProps(state) {
+function mapStateToProps(state: RootState) {
   return {
     ...state.device,
-    ...state.pyodide,
+    connectedDevice: state.device.connectedDevice ?? {},
+    rawObservable: state.device.rawObservable ?? undefined,
+    signalQualityObservable: state.device.signalQualityObservable ?? undefined,
+    // Pyodide state with nullable defaults
+    epochsInfo: state.pyodide.epochsInfo,
+    channelInfo: state.pyodide.channelInfo,
+    psdPlot: state.pyodide.psdPlot ?? {},
+    topoPlot: state.pyodide.topoPlot ?? {},
+    erpPlot: state.pyodide.erpPlot ?? {},
+    worker: state.pyodide.worker,
   };
 }
 
@@ -19,4 +29,4 @@ function mapDispatchToProps(dispatch) {
   };
 }
 
-export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Home) as any);
+export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Home));
diff --git a/src/renderer/routes.tsx b/src/renderer/routes.tsx
@@ -4,22 +4,22 @@ import { App } from './containers/App';
 import HomeContainerRaw from './containers/HomeContainer';
 import ExperimentDesignContainerRaw from './containers/ExperimentDesignContainer';
 import CollectContainerRaw from './containers/CollectContainer';
-import CleanContainerRaw from './containers/CleanContainer';
-import AnalyzeContainerRaw from './containers/AnalyzeContainer';
+import CleanContainer from './containers/CleanContainer';
+import AnalyzeContainer from './containers/AnalyzeContainer';
 import { SCREENS } from './constants/constants';
 
-// These connected components receive their required props from Redux.
-// Cast to a permissive type so routes.tsx doesn't have to enumerate all mapped props.
+// TypeScript cannot infer the type subtraction performed by withRouter<P> when
+// the argument is a ConnectedComponent (react-redux) rather than a plain
+// ComponentType. This is a known limitation at the class-component + connect +
+// withRouter boundary; the HOC works correctly at runtime. The casts below are
+// the pragmatic bridge until these screens are converted to functional components.
 const HomeContainer = HomeContainerRaw as React.ComponentType<{
   activeStep: string;
 }>;
 const ExperimentDesignContainer =
   ExperimentDesignContainerRaw as unknown as React.ComponentType;
 const CollectContainer =
   CollectContainerRaw as unknown as React.ComponentType;
-const CleanContainer = CleanContainerRaw as unknown as React.ComponentType;
-const AnalyzeContainer =
-  AnalyzeContainerRaw as unknown as React.ComponentType;
 
 export default function AppRoutes() {
   return (
diff --git a/src/renderer/utils/withRouter.tsx b/src/renderer/utils/withRouter.tsx
@@ -1,19 +1,27 @@
 import React from 'react';
 import { useNavigate } from 'react-router-dom';
 
+export interface WithRouterProps {
+  history: { push: (path: string) => void };
+}
+
 /**
  * withRouter HOC — React Router v6 replacement for the v5 HOC.
- * Injects a `history` prop with a `push` method (backed by useNavigate)
- * so existing class components do not need to be rewritten.
+ *
+ * Canonical pattern: the outer component accepts all props P (which does NOT
+ * include `history`); the HOC injects `history` before forwarding to the
+ * wrapped component that expects P & WithRouterProps.
  */
-export function withRouter<P extends { history: { push: (path: string) => void } }>(
-  Component: React.ComponentType<P>
-): React.ComponentType<Omit<P, 'history'>> {
-  function WithRouterWrapper(props: Omit<P, 'history'>) {
+export function withRouter<P extends object>(
+  WrappedComponent: React.ComponentType<P & WithRouterProps>
+): React.ComponentType<P> {
+  function WithRouterWrapper(props: P) {
     const navigate = useNavigate();
-    const history = { push: navigate };
-    return <Component {...(props as P)} history={history} />;
+    const history: WithRouterProps['history'] = { push: navigate };
+    return <WrappedComponent {...props} history={history} />;
   }
-  WithRouterWrapper.displayName = `WithRouter(${Component.displayName || Component.name || 'Component'})`;
+  WithRouterWrapper.displayName = `WithRouter(${
+    WrappedComponent.displayName || WrappedComponent.name || 'Component'
+  })`;
   return WithRouterWrapper;
 }
