style(frontend): fix ESLint warnings

frontend-v2/src/components/DynamicTabs.tsx

@@ -66,7 +66,7 @@ export const DynamicTabs: FC<PropsWithChildren<DynamicTabsProps>> = ({
   const toast = useCustomToast();
   const dispatch = useDispatch();
 
-  const errors: { [key: string]: ReactElement<any, string> } = {};
+  const errors: { [key: string]: ReactElement<unknown, string> } = {};
   for (const key in tabErrors) {
     errors[key] = (
       <Tooltip title={tabErrors[key]}>
@@ -115,7 +115,13 @@ export const DynamicTabs: FC<PropsWithChildren<DynamicTabsProps>> = ({
   return (
     <TabContext.Provider value={{ currentTab, setCurrentTab }}>
       <Box sx={{ width: "100%" }}>
-        <Box sx={{ borderBottom: 1, borderColor: "divider", marginBottom: marginBottom }}>
+        <Box
+          sx={{
+            borderBottom: 1,
+            borderColor: "divider",
+            marginBottom: marginBottom,
+          }}
+        >
           <Tabs
             value={currentTab}
             onChange={handleChange}

frontend-v2/src/components/FloatField.tsx

@@ -15,7 +15,7 @@ type Props<T extends FieldValues> = {
   sx?: Record<string, string>;
 };
 
-function convert(value: any) {
+function convert(value: string): number | null {
   if (typeof value === "string") {
     if (value !== "") {
       return parseFloat(value);

frontend-v2/src/components/HelpButton.tsx

@@ -10,7 +10,7 @@ interface HelpButtonProps {
   children: ReactNode;
 }
 
-const HelpButton: FC<HelpButtonProps> = ({ title, children }) => {
+const HelpButton: FC<HelpButtonProps> = ({ children }) => {
   const [open, setOpen] = useState(false);
   const selectedPage = useSelector(
     (state: RootState) => state.main.selectedPage,

frontend-v2/src/components/IntegerField.tsx

@@ -7,12 +7,12 @@ type Props<T extends FieldValues> = {
   label?: string;
   name: FieldPath<T>;
   control: Control<T>;
-  size?: 'small' | 'medium',
-  rules?: Object;
+  size?: "small" | "medium";
+  rules?: Record<string, unknown>;
   textFieldProps?: TextFieldProps;
 };
 
-function convert(value: any) {
+function convert(value: string): number | string {
   if (typeof value === "string" && value !== "") {
     return parseInt(value);
   } else {
@@ -25,7 +25,7 @@ function IntegerField<T extends FieldValues>({
   name,
   control,
   rules,
-  size = 'medium',
+  size = "medium",
   textFieldProps,
 }: Props<T>): ReactElement {
   const [fieldValue, setFieldValue] = useFieldState({ name, control });
@@ -36,12 +36,12 @@ function IntegerField<T extends FieldValues>({
       rules={rules}
       render={({
         field: { onChange, onBlur, value },
-        fieldState: { error, isDirty, isTouched },
+        fieldState: { error },
       }) => {
         const handleBlur = (e: FocusEvent<HTMLInputElement>) => {
           const updatedValue = convert(e.target.value);
           if (updatedValue !== value) {
-            e.target.value = updatedValue;
+            e.target.value = updatedValue.toString();
             onChange(e);
           }
           onBlur();

frontend-v2/src/components/SelectField.tsx

@@ -13,7 +13,7 @@ import {
 import { getLabel } from "../shared/getRequiredLabel";
 
 type Option = {
-  value: any;
+  value: string;
   label: string;
 };
 
@@ -25,7 +25,7 @@ type Props<T extends FieldValues> = {
   rules?: Record<string, unknown>;
   selectProps?: SelectProps;
   formControlProps?: FormControlProps;
-  size?: 'small' | 'medium'
+  size?: "small" | "medium";
   sx?: SxProps;
 };
 
@@ -37,7 +37,7 @@ function SelectField<T extends FieldValues>({
   rules,
   selectProps,
   formControlProps,
-  size = 'medium',
+  size = "medium",
   sx,
 }: Props<T>): ReactElement {
   const labelId = `${name}-label`;
@@ -69,7 +69,6 @@ function SelectField<T extends FieldValues>({
             name={name}
             id={name}
             value={value === undefined || value === null ? "" : value}
-            // @ts-ignore
             onChange={onChange}
             onBlur={onBlur}
             input={<OutlinedInput label={label} notched={displayEmpty} />}

frontend-v2/src/components/TextField.tsx

@@ -16,7 +16,7 @@ type Props<T extends FieldValues> = {
   mode?: "onChange" | "onBlur";
   textFieldProps?: TextFieldProps;
   autoShrink?: boolean;
-  size?: 'small' | 'medium'
+  size?: "small" | "medium";
   sx?: SxProps;
 };
 
@@ -26,7 +26,7 @@ function TextField<T extends FieldValues>({
   control,
   rules,
   mode,
-  size = 'medium',
+  size = "medium",
   textFieldProps,
   autoShrink,
   sx,
@@ -44,7 +44,7 @@ function TextField<T extends FieldValues>({
       rules={rules}
       render={({
         field: { onChange, onBlur, value },
-        fieldState: { error, isDirty, isTouched },
+        fieldState: { error },
       }) => {
         const handleBlur = (e: FocusEvent<HTMLInputElement>) => {
           if (mode === "onBlur" && e.target.value !== value) {

frontend-v2/src/contexts/SimulationContext.ts

@@ -3,5 +3,5 @@ import { SimulateResponse } from "../app/backendApi";
 
 export const SimulationContext = createContext({
   simulations: [] as SimulateResponse[],
-  setSimulations: (simulations: SimulateResponse[]) => {},
+  setSimulations: (_simulations: SimulateResponse[]) => {},
 });

frontend-v2/src/features/data/CreateDosingProtocols.tsx

@@ -222,34 +222,7 @@ const CreateDosingProtocols: FC<IDosingProtocols> = ({
     administrationIdField,
     groupIdField,
   );
-  const administrationIds = dosingRows.map((row) => row[administrationIdField]);
-  const uniqueAdministrationIds = [...new Set(administrationIds)];
 
-  const isAmount = (variable: VariableRead) => {
-    const amountUnits = units?.find(
-      (unit) => unit.symbol === amountUnit?.symbol,
-    )?.compatible_units;
-    const variableUnit = units?.find((unit) => unit.id === variable.unit);
-    return (
-      variableUnit?.symbol !== "" &&
-      amountUnits?.find((unit) => parseInt(unit.id) === variable.unit) !==
-        undefined
-    );
-  };
-  const modelAmounts = variables?.filter(isAmount) || [];
-
-  const handleAmountMappingChange =
-    (id: string) => (event: SelectChangeEvent) => {
-      const nextData = [...state.data];
-      const { value } = event.target;
-      const dosingRows = nextData.filter(
-        (row) => row[administrationIdField] === id && row["Amount"] !== ".",
-      );
-      dosingRows.forEach((row) => {
-        row["Amount Variable"] = value;
-      });
-      state.setData(nextData);
-    };
   type InputChangeEvent =
     | ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
     | SelectChangeEvent;

frontend-v2/src/features/data/LoadData.tsx

@@ -102,11 +102,7 @@ function setMinimumInfusionTime(state: StepperState) {
   }
 }
 
-const LoadData: FC<ILoadDataProps> = ({
-  state,
-  firstTime,
-  notificationsInfo,
-}) => {
+const LoadData: FC<ILoadDataProps> = ({ state, notificationsInfo }) => {
   const showData = state.data.length > 0 && state.fields.length > 0;
   const normalisedHeaders = state.normalisedHeaders;
   if (!normalisedHeaders.includes("ID")) {
@@ -184,14 +180,6 @@ const LoadData: FC<ILoadDataProps> = ({
     state.setWarnings(warnings);
   };
 
-  const noTimeUnit = !state.normalisedHeaders.find(
-    (field) => field === "Time Unit",
-  );
-  const invalidTimeUnits = state.errors.find((error) =>
-    error.includes("file contains multiple time units"),
-  );
-  const showTimeUnitSelector = noTimeUnit || invalidTimeUnits;
-
   return (
     <Stack
       sx={{

frontend-v2/src/features/data/LoadDataStepper.tsx

@@ -94,7 +94,8 @@ const LoadDataStepper: FC<IStepper> = ({ csv = "", onCancel, onFinish }) => {
   const csvData = Papa.parse(csv, { header: true });
   const csvFields = csvData.meta.fields || [];
   const [data, setData] = useState<Data>((csvData.data as Data) || []);
-  let [errors, setErrors] = useState<string[]>([]);
+  const [errors, setErrors] = useState<string[]>([]);
+  let displayedErrors = [...errors];
   const [warnings, setWarnings] = useState<string[]>([]);
   const [normalisedFields, setNormalisedFields] = useState<Map<Field, string>>(
     new Map(csvFields.map(normaliseHeader)),
@@ -145,7 +146,7 @@ const LoadDataStepper: FC<IStepper> = ({ csv = "", onCancel, onFinish }) => {
     "Invalid data file. Each subject ID can only belong to one dosing protocol.";
 
   if (!areValidProtocols && !errors.includes(protocolErrorMessage)) {
-    errors = [...errors, protocolErrorMessage];
+    displayedErrors = [...displayedErrors, protocolErrorMessage];
   }
 
   const [stepState, setStepState] = useState({ activeStep: 0, maxStep: 0 });
@@ -158,7 +159,7 @@ const LoadDataStepper: FC<IStepper> = ({ csv = "", onCancel, onFinish }) => {
     !normalisedHeaders.includes("Time Unit") &&
     !timeUnit
   ) {
-    errors = [...errors, "Time unit is not defined."];
+    displayedErrors = [...displayedErrors, "Time unit is not defined."];
   }
 
   const noTimeUnit = !state.normalisedHeaders.find(
@@ -172,7 +173,7 @@ const LoadDataStepper: FC<IStepper> = ({ csv = "", onCancel, onFinish }) => {
   const shouldShowTimeUnitNotification =
     showTimeUnitSelector || hasTimeUnitChanged;
   const notificationsCount =
-    errors?.length +
+    displayedErrors?.length +
     warnings?.length +
     (shouldShowTimeUnitNotification ? 2 : 1);
 
@@ -291,7 +292,9 @@ const LoadDataStepper: FC<IStepper> = ({ csv = "", onCancel, onFinish }) => {
           <Step key={index}>
             <StepButton
               onClick={handleStep(index)}
-              disabled={data.length === 0 || isFinished || errors.length > 0}
+              disabled={
+                data.length === 0 || isFinished || displayedErrors.length > 0
+              }
             >
               {step}
             </StepButton>
@@ -301,7 +304,7 @@ const LoadDataStepper: FC<IStepper> = ({ csv = "", onCancel, onFinish }) => {
       <Notifications
         isOpen={isNotificationsOpen}
         showData={showData}
-        errors={errors}
+        errors={displayedErrors}
         warnings={warnings}
         fileName={fileName}
         state={state}

frontend-v2/src/features/data/MapDosing.tsx

@@ -23,7 +23,6 @@ interface IMapDosing {
 
 const MapDosing: FC<IMapDosing> = ({
   state,
-  firstTime,
   notificationsInfo,
 }: IMapDosing) => {
   const projectId = useSelector(
@@ -35,8 +34,10 @@ const MapDosing: FC<IMapDosing> = ({
     { skip: !projectId },
   );
   const isPreclinical = project?.species !== "H";
-  const { data: projectProtocols, isLoading: isProtocolsLoading } =
-    useProtocolListQuery({ projectId: projectIdOrZero }, { skip: !projectId });
+  const { data: projectProtocols } = useProtocolListQuery(
+    { projectId: projectIdOrZero },
+    { skip: !projectId },
+  );
   const { data: models = [] } = useCombinedModelListQuery(
     { projectId: projectIdOrZero },
     { skip: !projectId },

frontend-v2/src/features/data/MapHeaders.tsx

@@ -13,6 +13,7 @@ import {
   Typography,
   TablePagination,
   TableContainer,
+  SelectChangeEvent,
 } from "@mui/material";
 import { Data, Field } from "./LoadData";
 import { groupedHeaders } from "./dataValidation";
@@ -47,7 +48,7 @@ const MapHeaders: FC<IMapHeaders> = ({
     handlePageChange,
   } = usePagination();
   const fields = [...normalisedFields.keys()];
-  const handleFieldChange = (field: string) => (event: any) => {
+  const handleFieldChange = (field: string) => (event: SelectChangeEvent) => {
     const newFields = new Map([
       ...normalisedFields.entries(),
       [field, event.target.value],

frontend-v2/src/features/data/MapObservations.tsx

@@ -1,4 +1,4 @@
-import { ChangeEvent, FC, useState } from "react";
+import { FC, SyntheticEvent, useState } from "react";
 import { DataGrid } from "@mui/x-data-grid";
 import {
   Box,
@@ -206,7 +206,10 @@ const MapObservations: FC<IMapObservations> = ({
     state.setWarnings(warnings);
   };
 
-  function handleTabChange(event: ChangeEvent<{}>, newValue: number) {
+  function handleTabChange(
+    event: SyntheticEvent<Element, Event>,
+    newValue: number,
+  ) {
     setTab(newValue);
   }
 

frontend-v2/src/features/data/PreviewData.tsx

@@ -25,7 +25,7 @@ const IGNORED_COLUMNS = ["Ignore"];
 function normaliseDataColumn(state: StepperState, type: string) {
   const normalisedHeaders = [...state.normalisedFields.entries()];
   const matchingFields =
-    normalisedHeaders.filter(([key, value]) => value === type) || [];
+    normalisedHeaders.filter(([_key, value]) => value === type) || [];
   if (matchingFields.length !== 1) {
     // only normalise a column if there is exactly one column of that type.
     return state.data;

frontend-v2/src/features/data/SetUnits.tsx

@@ -26,7 +26,6 @@ interface IMapObservations {
 
 const SetUnits: FC<IMapObservations> = ({
   state,
-  firstTime,
   setHasTimeUnitChanged,
 }: IMapObservations) => {
   const [isChanged, setIsChanged] = useState<boolean>(false);

frontend-v2/src/features/data/Stratification.tsx

@@ -1,4 +1,4 @@
-import { ChangeEvent, FC, useState } from "react";
+import { ChangeEvent, FC, SyntheticEvent, useState } from "react";
 import {
   Box,
   Radio,
@@ -126,7 +126,10 @@ const Stratification: FC<IStratification> = ({
     );
   }
 
-  const handleTabChange = (event: ChangeEvent<{}>, newValue: number) => {
+  const handleTabChange = (
+    event: SyntheticEvent<Element, Event>,
+    newValue: number,
+  ) => {
     setTab(newValue);
   };
 

frontend-v2/src/features/login/loginSlice.ts

@@ -5,7 +5,7 @@ import { UserRead, ProjectRead, ProjectAccessRead } from "../../app/backendApi";
 
 export const fetchCsrf = createAsyncThunk<string, undefined>(
   "login/fetchCsrf",
-  async (_, { dispatch }) => {
+  async () => {
     const csrfResponse = await fetch("/api/csrf/", {
       method: "GET",
       credentials: "include",
@@ -17,7 +17,7 @@ export const fetchCsrf = createAsyncThunk<string, undefined>(
 
 interface Login {
   isAuthenticated: boolean;
-  user: any;
+  user: UserRead;
 }
 
 interface LoginErrorResponse {
@@ -111,7 +111,7 @@ export const logout = createAsyncThunk(
       credentials: "include",
     })
       .then(isResponseOk)
-      .then((data) => {
+      .then(() => {
         dispatch(fetchCsrf());
         return { isAuthenticated: false };
       });
@@ -143,7 +143,7 @@ const slice = createSlice({
     },
   },
   extraReducers: (builder) => {
-    builder.addCase(fetchCsrf.rejected, (state, action) => {
+    builder.addCase(fetchCsrf.rejected, (state) => {
       state.csrf = undefined;
     });
     builder.addCase(fetchCsrf.fulfilled, (state, action) => {

frontend-v2/src/features/model/ParametersTab.tsx

@@ -43,14 +43,7 @@ interface Props {
   units: UnitRead[];
 }
 
-const ParametersTab: FC<Props> = ({
-  model,
-  project,
-  control,
-  variables,
-  compound,
-  units,
-}) => {
+const ParametersTab: FC<Props> = ({ model, project, variables, units }) => {
   const [setParamsToDefault] =
     useCombinedModelSetParamsToDefaultsUpdateMutation();
 

frontend-v2/src/features/model/VariableRow.tsx

@@ -8,7 +8,6 @@ import {
   FormControlLabel,
   Tooltip,
   Typography,
-  Radio,
 } from "@mui/material";
 import {
   Variable,
@@ -43,12 +42,9 @@ interface Props {
 
 type DerivedVariableType = "AUC" | "RO" | "FUP" | "BPR" | "TLG";
 
-const derivedVariableRegex = /calc_.*_(f|bl|RO)/;
-
 const VariableRow: FC<Props> = ({
   project,
   compound,
-  model,
   variable,
   control,
   effectVariable,
@@ -59,15 +55,11 @@ const VariableRow: FC<Props> = ({
   updateLinksToPd,
   updateLagTimes,
 }) => {
-  const {
-    fields: mappings
-  } = useFieldArray({
+  const { fields: mappings } = useFieldArray({
     control,
     name: "model.mappings",
   });
-  const {
-    fields: derivedVariables
-  } = useFieldArray({
+  const { fields: derivedVariables } = useFieldArray({
     control,
     name: "model.derived_variables",
   });

frontend-v2/src/features/model/resetToSpeciesDefaults.ts

@@ -63,7 +63,7 @@ type VariableMutation = MutationTrigger<
       string | FetchArgs,
       unknown,
       FetchBaseQueryError,
-      {},
+      unknown,
       FetchBaseQueryMeta
     >,
     never,

frontend-v2/src/features/projects/Project.tsx

@@ -87,7 +87,12 @@ const ProjectRow: FC<Props> = ({
 
   const [projectCopyUpdate] = useProjectCopyUpdateMutation();
   const [isEditMode, setIsEditMode] = useState(false);
-  const { isDescriptionModalOpen, onOpenDescriptionModal, onCloseDescriptionModal, descriptionProjectId } = useProjectDescription();
+  const {
+    isDescriptionModalOpen,
+    onOpenDescriptionModal,
+    onCloseDescriptionModal,
+    descriptionProjectId,
+  } = useProjectDescription();
 
   useEffect(() => {
     if (isEditMode) {
@@ -116,16 +121,10 @@ const ProjectRow: FC<Props> = ({
     molecular_mass: 100,
     target_molecular_mass: 100,
   };
-  const {
-    reset,
-    handleSubmit,
-    control,
-    setValue,
-    register,
-    formState: { isDirty },
-  } = useForm<FormData>({
-    defaultValues: { project, compound: defaultCompound },
-  });
+  const { reset, handleSubmit, control, setValue, register } =
+    useForm<FormData>({
+      defaultValues: { project, compound: defaultCompound },
+    });
 
   const [userAccessOpen, setUserAccessOpen] = useState<boolean>(false);
 
@@ -179,7 +178,7 @@ const ProjectRow: FC<Props> = ({
     setValue("project.user_access", project.user_access);
     setUserAccessOpen(false);
     setIsEditMode(false);
-  }
+  };
 
   if (isLoading) {
     return <div>Loading...</div>;
@@ -249,7 +248,7 @@ const ProjectRow: FC<Props> = ({
     if (window.innerHeight < 800) return Math.ceil(window.innerHeight / 100);
 
     return 15;
-  }
+  };
 
   return (
     <>
@@ -277,7 +276,7 @@ const ProjectRow: FC<Props> = ({
               textFieldProps={defaultProps}
               size="small"
               rules={{ required: true, validate: validateName }}
-              sx={{ ...defaultSx, minWidth: '10rem' }}
+              sx={{ ...defaultSx, minWidth: "10rem" }}
             />
           ) : (
             <label htmlFor={`project-${project.id}`}>
@@ -293,7 +292,7 @@ const ProjectRow: FC<Props> = ({
               textFieldProps={defaultProps}
               size="small"
               rules={{ required: true }}
-              sx={{ ...defaultSx, minWidth: '10rem'}}
+              sx={{ ...defaultSx, minWidth: "10rem" }}
             />
           ) : (
             <Typography>{compound?.name}</Typography>
@@ -333,7 +332,10 @@ const ProjectRow: FC<Props> = ({
           {!isEditMode ? (
             <Stack component="span" direction="row" spacing={0.0}>
               <Tooltip title="Edit project">
-                <IconButton disabled={isSharedWithMe} onClick={() => setIsEditMode(true)}>
+                <IconButton
+                  disabled={isSharedWithMe}
+                  onClick={() => setIsEditMode(true)}
+                >
                   <EditIcon />
                 </IconButton>
               </Tooltip>

frontend-v2/src/features/results/columns.tsx

@@ -24,7 +24,6 @@ interface ParametersProps {
  */
 export function columns({
   variable,
-  aucVariable,
   concentrationVariables = [],
   simulation,
   simulations = [],

frontend-v2/src/features/simulation/config.ts

@@ -31,8 +31,10 @@ export function useConfig({
             new ClipboardItem({ [blob.type]: blob }),
           ]);
           console.log("Image copied.");
-        } catch (err: any) {
-          console.error(err.name, err.message);
+        } catch (err: unknown) {
+          console.error(
+            err instanceof Error ? `${err.name} ${err.message}` : err,
+          );
         }
       },
     );

frontend-v2/src/features/simulation/useExportSimulation.ts

@@ -47,7 +47,7 @@ export default function useExportSimulation({
   simInputs,
   model,
   project,
-}: iExportSimulation): [() => void, { error: any }] {
+}: iExportSimulation): [() => void, { error: unknown }] {
   const { groups } = useSubjectGroups();
   const { compound, protocols } = useProtocols();
   const { data: variables } = useVariableListQuery(

frontend-v2/src/hooks/useCustomToast.tsx

@@ -2,7 +2,6 @@ import { toast, ToastOptions } from "react-toastify";
 import { Notification } from "./../components/Notification/Notification";
 import { NotificationTypes } from "../components/Notification/notificationTypes";
 
-// @ts-nocheck
 type ToastProps = {
   type: NotificationTypes;
   text: string;

frontend-v2/src/hooks/usePagination.tsx

@@ -10,15 +10,13 @@ export const usePagination = () => {
   const [page, setPage] = useState<number>(0);
   const [isDense, setIsDense] = useState(true);
 
-  const handleChangeRowsPerPage = (
-    event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
-  ): void => {
+  const handleChangeRowsPerPage = (): void => {
     setRowsPerPage(page || 0);
     setPage(0);
   };
 
   const handlePageChange = (
-    event: React.MouseEvent<HTMLButtonElement, MouseEvent> | null,
+    _event: React.MouseEvent<HTMLButtonElement, MouseEvent> | null,
     page: number,
   ): void => {
     setPage(page);

frontend-v2/src/hooks/usePrevious.ts

@@ -1,6 +1,6 @@
 import { useEffect, useRef } from "react";
 
-function usePrevious(value: any) {
+function usePrevious(value: null) {
   const ref = useRef(null);
   useEffect(() => {
     ref.current = value; //assign the value of ref to the argument

frontend-v2/src/shared/contexts/CollapsibleSidebarContext.tsx

@@ -7,7 +7,7 @@ const CollapsibleSidebarContext = createContext({
   onExpand: () => {
     return;
   },
-  setHasSimulationsExpandedChanged: (isChanged: boolean) => {
+  setHasSimulationsExpandedChanged: (_isChanged: boolean) => {
     return;
   },
   isExpanded: true,
@@ -30,7 +30,7 @@ export const CollapsibleSidebarProvider = ({
 
   const onCollapse = () => {
     setHasExpandedChanged(true);
-    dispatchEvent(eventCollapse)
+    dispatchEvent(eventCollapse);
     setHasSimulationsExpandedChanged(true);
     setIsExpanded(false);
   };

frontend-v2/src/shared/contexts/ProjectDescriptionContext.tsx

@@ -1,16 +1,16 @@
 import { createContext, ReactNode, useContext, useState } from "react";
 
 type ProjectDescriptionContextType = {
-    isDescriptionModalOpen: boolean,
-    descriptionProjectId: number | null,
-    onOpenDescriptionModal: (id: number | null) => void,
-    onCloseDescriptionModal: () => void
-}
+  isDescriptionModalOpen: boolean;
+  descriptionProjectId: number | null;
+  onOpenDescriptionModal: (id: number | null) => void;
+  onCloseDescriptionModal: () => void;
+};
 
 const ProjectDescriptionContext = createContext<ProjectDescriptionContextType>({
   isDescriptionModalOpen: false,
   descriptionProjectId: null,
-  onOpenDescriptionModal: (id: number | null) => {
+  onOpenDescriptionModal: (_id: number | null) => {
     return;
   },
   onCloseDescriptionModal: () => {