pr05 Typescript Migration #7: migrate client components

client/common/ButtonOrLink.tsx

@@ -4,7 +4,7 @@ import { Link } from 'react-router-dom';
 /**
  * Accepts all the props of an HTML <a> or <button> tag.
  */
-export interface ButtonOrLinkProps {
+export interface ButtonOrLinkProps extends React.HTMLAttributes<HTMLElement> {
   /**
    * Can be internal or external ('http'- or 'https'-).
    */

client/common/useModalClose.ts

@@ -1,4 +1,4 @@
-import { useEffect, useRef, MutableRefObject } from 'react';
+import { useEffect, useRef, MutableRefObject, ForwardedRef } from 'react';
 import { useKeyDownHandlers } from './useKeyDownHandlers';
 
 /**
@@ -18,12 +18,29 @@ import { useKeyDownHandlers } from './useKeyDownHandlers';
  * @param passedRef - Optional ref to the modal element. If not provided, one is created internally.
  * @returns A ref to be attached to the modal DOM element
  */
-export function useModalClose(
+export function useModalClose<T extends HTMLElement = HTMLElement>(
   onClose: () => void,
-  passedRef?: MutableRefObject<HTMLElement | null>
-): MutableRefObject<HTMLElement | null> {
-  const createdRef = useRef<HTMLElement | null>(null);
-  const modalRef = passedRef ?? createdRef;
+  passedRef?: MutableRefObject<T | null> | ForwardedRef<T>
+): MutableRefObject<T | null> {
+  const createdRef = useRef<T | null>(null);
+
+  // Normalize any ref to a MutableRefObject internally
+  const modalRef: MutableRefObject<T | null> = (() => {
+    if (!passedRef) return createdRef;
+    if (typeof passedRef === 'function') {
+      // For function refs, write to createdRef and call the function
+      return {
+        get current() {
+          return createdRef.current;
+        },
+        set current(value: T | null) {
+          createdRef.current = value;
+          passedRef(value);
+        }
+      };
+    }
+    return passedRef;
+  })();
 
   useEffect(() => {
     modalRef.current?.focus();

client/common/usePrevious.ts

@@ -5,8 +5,8 @@ import { useEffect, useRef } from 'react';
  * @param value - The current value to track.
  * @returns The previous value before the current render, or undefined if none.
  */
-export function usePrevious(value: unknown): unknown | undefined {
-  const ref = useRef<unknown>();
+export function usePrevious<T>(value: T): T | undefined {
+  const ref = useRef<T>();
 
   useEffect(() => {
     ref.current = value;