From 817d84fd3be94aa5b6fcad07d6c8e0257a516d3b Mon Sep 17 00:00:00 2001 From: Boban Ljuljdjurovic Date: Fri, 27 Dec 2024 08:04:32 -0500 Subject: [PATCH] Revert "fix https://github.com/facebook/react/issues/14920" This reverts commit 68e5d8a8f094fbf664a941b83f76dce31b1cb24b. --- .../app/components/EcrPaginationWrapper.tsx | 2 +- .../src/app/components/EcrTableClient.tsx | 2 +- .../ecr-viewer/src/app/components/Filters.tsx | 69 +++++++++---------- .../app/view-data/components/DataDisplay.tsx | 2 +- .../ecr-viewer/src/app/view-data/page.tsx | 2 +- 5 files changed, 38 insertions(+), 39 deletions(-) diff --git a/containers/ecr-viewer/src/app/components/EcrPaginationWrapper.tsx b/containers/ecr-viewer/src/app/components/EcrPaginationWrapper.tsx index 136afdf2a9..150d321414 100644 --- a/containers/ecr-viewer/src/app/components/EcrPaginationWrapper.tsx +++ b/containers/ecr-viewer/src/app/components/EcrPaginationWrapper.tsx @@ -54,7 +54,7 @@ const EcrPaginationWrapper = ({ const search = current.toString(); const query = search ? `?${search}` : ""; router.push(`${pathname}${query}`); - }, [pathname, router, searchParams, userPreferences]); + }, [userPreferences]); const totalPages = totalCount > 0 ? Math.ceil(totalCount / userPreferences.itemsPerPage) : 1; diff --git a/containers/ecr-viewer/src/app/components/EcrTableClient.tsx b/containers/ecr-viewer/src/app/components/EcrTableClient.tsx index 1127e194dc..d19d531fb5 100644 --- a/containers/ecr-viewer/src/app/components/EcrTableClient.tsx +++ b/containers/ecr-viewer/src/app/components/EcrTableClient.tsx @@ -112,7 +112,7 @@ export const EcrTableClient: React.FC = ({ const search = current.toString(); const query = search ? `?${search}` : ""; router.push(`${pathname}${query}`); - }, [pathname, router, searchParams, sortPreferences]); + }, [sortPreferences]); /** * Updates the sort config from the server. diff --git a/containers/ecr-viewer/src/app/components/Filters.tsx b/containers/ecr-viewer/src/app/components/Filters.tsx index 8d33b4ef25..1be1ac937d 100644 --- a/containers/ecr-viewer/src/app/components/Filters.tsx +++ b/containers/ecr-viewer/src/app/components/Filters.tsx @@ -1,6 +1,6 @@ "use client"; -import React, { useCallback, useEffect, useState } from "react"; +import React, { useEffect, useState } from "react"; import { Icon } from "@trussworks/react-uswds"; import { useQueryParam, Filter } from "./BaseFilter"; import { @@ -39,29 +39,6 @@ const FilterReportableConditions = () => { const [filterConditions, setFilterConditions] = useState<{ [key: string]: boolean; }>({}); - const resetFilterConditions = useCallback( - (conditions: string[]) => { - const conditionParam = searchParams.get("condition"); - const conditionsToTrue = new Set(conditionParam?.split("|") || []); - - const conditionValue = (c: string) => { - if (conditionParam === null) { - return true; - } else { - return conditionsToTrue.has(c); - } - }; - const prevFilterConditions = conditions.reduce( - (dict: { [key: string]: boolean }, condition: string) => { - dict[condition] = conditionValue(condition); - return dict; - }, - {} as { [key: string]: boolean }, - ); - setFilterConditions(prevFilterConditions); - }, - [searchParams], - ); useEffect(() => { const fetchConditions = async () => { @@ -78,7 +55,7 @@ const FilterReportableConditions = () => { }; fetchConditions(); - }, [resetFilterConditions]); + }, []); // Build list of conditions to filter on const handleCheckboxChange = (event: React.ChangeEvent) => { @@ -107,6 +84,27 @@ const FilterReportableConditions = () => { (val) => val === true, ); + const resetFilterConditions = (conditions: string[]) => { + const conditionParam = searchParams.get("condition"); + const conditionsToTrue = new Set(conditionParam?.split("|") || []); + + const conditionValue = (c: string) => { + if (conditionParam === null) { + return true; + } else { + return conditionsToTrue.has(c); + } + }; + const prevFilterConditions = conditions.reduce( + (dict: { [key: string]: boolean }, condition: string) => { + dict[condition] = conditionValue(condition); + return dict; + }, + {} as { [key: string]: boolean }, + ); + setFilterConditions(prevFilterConditions); + }; + return ( { */ const FilterByDate = () => { const { searchParams, updateQueryParam } = useQueryParam(); + const [filterDateOption, setFilterDateOption] = useState(""); const isFilterDateDefault = filterDateOption === DEFAULT_DATE_RANGE; - const resetFilterDate = useCallback(() => { - const queryDateRange = searchParams.get("dateRange"); - if (!queryDateRange) { - setFilterDateOption(DEFAULT_DATE_RANGE); - } else if (queryDateRange !== filterDateOption) { - setFilterDateOption(queryDateRange); - } - }, [filterDateOption, searchParams]); - useEffect(() => { const fetchDateRange = async () => { try { @@ -201,7 +191,7 @@ const FilterByDate = () => { }; fetchDateRange(); - }, [resetFilterDate]); + }, []); const handleDateOptionChange = ( event: React.ChangeEvent, @@ -211,6 +201,15 @@ const FilterByDate = () => { setFilterDateOption(value); }; + const resetFilterDate = () => { + const queryDateRange = searchParams.get("dateRange"); + if (!queryDateRange) { + setFilterDateOption(DEFAULT_DATE_RANGE); + } else if (queryDateRange !== filterDateOption) { + setFilterDateOption(queryDateRange); + } + }; + return ( { } }; fetchData(); - }, [fhirId]); + }, []); if (errors) { if (errors.status === 404) {