Add typing /hooks + /icons + /style + /types

src/hooks/MountEffects.ts

-import { useEffect, useRef } from "react";
-
-function useMountEffect(effect, deps = [], afterMount) {
-  const didMountRef = useRef(false);
-
-  useEffect(() => {
-    let cleanup;
-    if (didMountRef.current === afterMount) {
-      cleanup = effect();
-    }
-    didMountRef.current = true;
-    return cleanup;
-    // eslint-disable-next-line
-  }, deps);
-}
-
-export function useEffectOnMount(effect) {
-  useMountEffect(effect, [], false);
-}
-
-export function useEffectAfterMount(effect, deps) {
-  useMountEffect(effect, deps, true);
-}

src/hooks/Redirect.ts

@@ -6,7 +6,7 @@ export function useRedirect() {
   const navigate = useNavigate();
   // const history = useHistory();
   const redirect = useCallback(
-    (destination, state, replace = false) => {
+    (destination: string, state: object, replace: boolean = false) => {
       /* const method = replace ? history.replace : history.push;
     method(destination, { ...state, from: history.location.pathname });*/
       navigate(destination, { replace: replace, state: state });

src/hooks/useTypingTimer.tsx

-import { useState } from "react";
+import { useState, type KeyboardEvent } from "react";
 
-export function useTypingTimer({ init = "", interval = 750 } = {}) {
-  const [typingTimer, setTypingTimer] = useState();
+interface UseTypingTimerReturn {
+  value: string;
+  onKeyUp: (event: KeyboardEvent<HTMLInputElement>) => void;
+}
+
+export function useTypingTimer({
+  init = "",
+  interval = 750
+} = {}): UseTypingTimerReturn {
+  const [typingTimer, setTypingTimer] = useState<number | undefined>(undefined);
   const [value, setValue] = useState(init);
   const doneTypingInterval = interval; // ms
 
-  const onKeyUp = (event) => {
-    const { target, key } = event;
+  const onKeyUp = (event: KeyboardEvent<HTMLInputElement>): void => {
+    const target = event.target as HTMLInputElement;
+    const { key } = event;
     clearTimeout(typingTimer);
     if (key === "Enter") {
       setValue(target.value);
@@ -20,5 +29,5 @@ export function useTypingTimer({ init = "", interval = 750 } = {}) {
     }
   };
 
-  return [value, onKeyUp];
+  return { value, onKeyUp };
 }

src/icons/BatchDeploySymbol.tsx

-import BatchDeployIcon from "./resources/batch/batch_deploy_icon.svg?react";
+import { ComponentProps } from "react";
+import BatchDeployIconSvg from "./resources/batch/batch_deploy_icon.svg?react";
+import { BatchDeployIcon } from "../components/Job/JobIcons";
 
-export function BatchDeploySymbol(props) {
-  return <BatchDeployIcon {...props} />;
+export function BatchDeploySymbol(
+  props: ComponentProps<typeof BatchDeployIcon>
+) {
+  return <BatchDeployIconSvg {...props} />;
 }

src/icons/BatchUndeploySymbol.tsx

-import BatchUndeployIcon from "./resources/batch/batch_undeploy_icon.svg?react";
+import { type ComponentProps } from "react";
+import BatchUndeployIconSvg from "./resources/batch/batch_undeploy_icon.svg?react";
+import { BatchUndeployIcon } from "../components/Job/JobIcons";
 
-export function BatchUndeploySymbol(props) {
-  return <BatchUndeployIcon {...props} />;
+export function BatchUndeploySymbol(
+  props: ComponentProps<typeof BatchUndeployIcon>
+) {
+  return <BatchUndeployIconSvg {...props} />;
 }

src/icons/CCCEControlSymbol.tsx

 import CcceControlSymbolGray from "./resources/control/ccce-control-symbol_757575.svg?react";
 
-export function CCCEControlSymbol(props) {
+export function CCCEControlSymbol(props: { width: string; height: string }) {
   return <CcceControlSymbolGray {...props} />;
 }

src/icons/RocketLaunch.tsx

-import { Tooltip } from "@mui/material";
-import { ReactComponent as RocketLaunchBlack } from "./resources/rocket/rocket_launch_black_24dp.svg?react";
-
-export function RocketLaunch(props) {
-  return (
-    <Tooltip title="Deployment">
-      <RocketLaunchBlack {...props} />
-    </Tooltip>
-  );
-}

src/style/Theme.ts

@@ -17,6 +17,13 @@ declare module "@mui/material/styles" {
         disabled: {
           main: string;
         };
+        icons: string;
+      };
+      error: {
+        main: string;
+      };
+      warning: {
+        main: string;
       };
       primary: {
         inconsistency: string;

src/types/common.ts

@@ -47,3 +47,25 @@ export interface ApiResult<T> {
 
 export type FormElements<U extends string> = HTMLFormControlsCollection &
   Record<U, HTMLInputElement>;
+
+export interface Pagination {
+  page: number;
+  rows: number;
+  query?: string;
+  orderAsc?: boolean;
+  totalCount?: number;
+  rowsPerPageOptions?: number[];
+}
+
+export interface DeployIocFormDefaults {
+  name: string;
+  description: string;
+  git: string;
+  gitProjectId?: number;
+  reference?: string;
+  short_reference?: string;
+  netBoxHost?: {
+    fqdn: string;
+    hostId: string;
+  };
+}