diff --git a/react-app/src/components/Opensearch/main/Filtering/Drawer/hooks.ts b/react-app/src/components/Opensearch/main/Filtering/Drawer/hooks.ts index a04e4c4999..91cae20898 100644 --- a/react-app/src/components/Opensearch/main/Filtering/Drawer/hooks.ts +++ b/react-app/src/components/Opensearch/main/Filtering/Drawer/hooks.ts @@ -1,11 +1,11 @@ -import { useState, useEffect, useMemo } from "react"; import { useGetUser } from "@/api"; +import { useEffect, useMemo, useState } from "react"; import { UserRoles, opensearch } from "shared-types"; -import * as C from "./consts"; +import { checkMultiFilter, useOsAggregate, useOsUrl } from "@/components"; import { useLabelMapping } from "@/hooks"; import { useFilterDrawerContext } from "../FilterProvider"; -import { checkMultiFilter, useOsAggregate, useOsUrl } from "@/components"; +import * as C from "./consts"; type FilterGroup = Partial>; @@ -146,6 +146,7 @@ export const useFilterDrawer = () => { }, {} as any); }); setAccordionValues(updateAccordions); + // eslint-disable-next-line react-hooks/exhaustive-deps }, [url.state.filters, drawer.drawerOpen]); const aggs = useMemo(() => { @@ -163,7 +164,7 @@ export const useFilterDrawer = () => { }, {} as Record, ); - }, [_aggs]); + }, [_aggs, labelMap]); return { aggs, diff --git a/react-app/src/components/Opensearch/main/useOpensearch.ts b/react-app/src/components/Opensearch/main/useOpensearch.ts index 4a0006088b..cc46d73ec0 100644 --- a/react-app/src/components/Opensearch/main/useOpensearch.ts +++ b/react-app/src/components/Opensearch/main/useOpensearch.ts @@ -1,11 +1,11 @@ -import { useEffect, useState } from "react"; +import { getOsData, useGetUser, useOsSearch } from "@/api"; +import { useLzUrl } from "@/hooks"; import { useQuery } from "@tanstack/react-query"; +import { useEffect, useState } from "react"; +import { useLocation } from "react-router"; import { UserRoles, opensearch } from "shared-types"; -import { getOsData, useOsSearch, useGetUser } from "@/api"; -import { useLzUrl } from "@/hooks"; -import { OsTab } from "./types"; import { createSearchFilterable } from "../utils"; -import { useLocation } from "react-router"; +import { OsTab } from "./types"; export const DEFAULT_FILTERS: Record> = { spas: { @@ -71,6 +71,7 @@ export const useOsData = () => { }; useEffect(() => { onRequest(params.state); + // eslint-disable-next-line react-hooks/exhaustive-deps }, [params.queryString]); return { data, isLoading, error, ...params }; }; diff --git a/react-app/src/components/RHF/Slot.tsx b/react-app/src/components/RHF/Slot.tsx index 6ea806ed44..7306a577d5 100644 --- a/react-app/src/components/RHF/Slot.tsx +++ b/react-app/src/components/RHF/Slot.tsx @@ -1,10 +1,10 @@ +import { cn } from "@/utils"; import { useEffect } from "react"; import { ControllerProps, FieldPath, FieldValues } from "react-hook-form"; import type { RHFSlotProps, RHFTextField } from "shared-types"; import { FormControl, FormDescription, FormItem, FormLabel, FormMessage } from "../Inputs"; import { RHFTextDisplay } from "."; import { SlotField } from "./SlotField"; -import { cn } from "@/utils"; export const RHFSlot = < TFieldValues extends FieldValues = FieldValues, @@ -30,7 +30,7 @@ export const RHFSlot = < return () => { control.unregister(field.name); }; - }, []); + }, [field.name]); return ( { handleSearch(debouncedSearchString); + // eslint-disable-next-line react-hooks/exhaustive-deps }, [debouncedSearchString]); const handleSubmit = (event: React.FormEvent) => { diff --git a/react-app/src/features/package/admin-changes/index.tsx b/react-app/src/features/package/admin-changes/index.tsx index 798ae11832..cf883acdbe 100644 --- a/react-app/src/features/package/admin-changes/index.tsx +++ b/react-app/src/features/package/admin-changes/index.tsx @@ -1,6 +1,3 @@ -import { FC, useMemo } from "react"; -import { opensearch } from "shared-types"; -import { format } from "date-fns"; import { Accordion, AccordionContent, @@ -9,6 +6,9 @@ import { DetailsSection, } from "@/components"; import { BLANK_VALUE } from "@/consts"; +import { format } from "date-fns"; +import { FC, useMemo } from "react"; +import { opensearch } from "shared-types"; import { usePackageDetailsCache } from ".."; export const AC_WithdrawEnabled: FC = (props) => { @@ -64,6 +64,7 @@ export const AdminChange: FC = (props) => { default: return [BLANK_VALUE, AC_Update]; } + // eslint-disable-next-line react-hooks/exhaustive-deps }, [props.actionType, props.changeType]); return ( diff --git a/react-app/src/hooks/UseMediaQuery.test.tsx b/react-app/src/hooks/UseMediaQuery.test.tsx index 69b7273613..a641c34a7d 100644 --- a/react-app/src/hooks/UseMediaQuery.test.tsx +++ b/react-app/src/hooks/UseMediaQuery.test.tsx @@ -1,5 +1,5 @@ import { renderHook } from "@testing-library/react"; -import { describe, it, vi, expect } from "vitest"; +import { describe, expect, it, vi } from "vitest"; import { useMediaQuery } from "./useMediaQuery"; describe("UseMediaQuery", () => { diff --git a/react-app/src/hooks/useIdle/index.ts b/react-app/src/hooks/useIdle/index.ts index 903aa73aa0..a4e7912873 100644 --- a/react-app/src/hooks/useIdle/index.ts +++ b/react-app/src/hooks/useIdle/index.ts @@ -50,7 +50,7 @@ export function useIdle( return () => { events.forEach((event) => document.removeEventListener(event, handleEvents)); }; - }, [timeout]); + }, [timeout, events]); return idle; } diff --git a/react-app/src/hooks/useMediaQuery.ts b/react-app/src/hooks/useMediaQuery.ts index eb992bdc46..58f8a10830 100644 --- a/react-app/src/hooks/useMediaQuery.ts +++ b/react-app/src/hooks/useMediaQuery.ts @@ -1,31 +1,21 @@ import { useEffect, useState } from "react"; export function useMediaQuery(query: string): boolean { - const getMatches = (query: string): boolean => { - // Prevents SSR issues - if (typeof window !== "undefined") { - return window.matchMedia(query).matches; - } - return false; - }; - - const [matches, setMatches] = useState(getMatches(query)); - - function handleChange() { - setMatches(getMatches(query)); - } + const [matches, setMatches] = useState( + () => typeof window !== "undefined" && window.matchMedia(query).matches, + ); useEffect(() => { - const matchMedia = window.matchMedia(query); + const mediaQuery = window.matchMedia(query); - // Triggered at the first client-side load and if query changes - handleChange(); + const handleChange = () => setMatches(mediaQuery.matches); - matchMedia.addEventListener("change", handleChange); + // Initial check and event listener + handleChange(); + mediaQuery.addEventListener("change", handleChange); - return () => { - matchMedia.removeEventListener("change", handleChange); - }; + // Cleanup + return () => mediaQuery.removeEventListener("change", handleChange); }, [query]); return matches;