Flyttet kode for å sjekke om api-queries og query-params er klare (#3187

)

* Flyttet kode for å sjekke om api-queries og query-params er klare

* fjernet gamle kommentarer

* endret hook-navn fordi den skal bli true kun hvis query-params og api-kall ikke allerede var ferdig i utgangspunktet

* flyttet eslint-kommentar pga prettier endret linje-breaks

* la til en forklarende kommentar til hooken

* added important detail to comment

* fixed format

* endret filnavnet

* oppdaterte import

* change variable name to make its meaning clearer

* endret flere variablenavn til mer forklarende navn

* endret funksjonsnavn til mer forklarende

* changing the return a bit

* Bedre kommentar til funksjon

* format

---------

Co-authored-by: jo-inge-arnes <[email protected]>

packages/qmongjs/src/components/FilterMenu/TreatmentQualityFilterMenu/index.tsx

@@ -1,5 +1,4 @@
-import { PropsWithChildren, useEffect, useState } from "react";
-import { useRouter } from "next/router";
+import { PropsWithChildren } from "react";
 import {
   ArrayParam,
   DelimitedArrayParam,
@@ -39,6 +38,7 @@ import {
   getFilterSettingsValuesMap,
 } from "../TreeViewFilterSection";
 import { useMediaQuery, useTheme } from "@mui/material";
+import useShouldReinitialize from "../../../helpers/hooks/useShouldReinitialize";
 
 // The keys used for the different filter sections
 export const yearKey = "year";
@@ -107,20 +107,6 @@ export function TreatmentQualityFilterMenu({
     ? 5
     : 10;
 
-  // When the user navigates to the page, it may contain query parameters for
-  // filtering indicators. Use NextRouter to get the current path containing the
-  // initial query parameters.
-  const router = useRouter();
-  // Next's prerender stage causes problems for the initial values given to
-  // useReducer, because they are only set once by the reducer and are missing
-  // during Next's prerender stage. Tell FilterMenu to refresh its state during
-  // the first call after the prerender is done.
-  const [prevReady, setPrevReady] = useState(router.isReady);
-  const prerenderFinished = prevReady !== router.isReady;
-  useEffect(() => {
-    setPrevReady(router.isReady);
-  }, [router.isReady]);
-
   // Map for filter options, defaults, and query parameter values and setters
   const optionsMap = new Map<string, OptionsMapEntry>();
 
@@ -206,14 +192,7 @@ export function TreatmentQualityFilterMenu({
     queryContext.type,
   );
 
-  const [prevApiQueryLoading, setPrevApiQueryLoading] = useState(
-    unitNamesQuery.isLoading,
-  );
-  const apiQueriesCompleted = prevApiQueryLoading && !unitNamesQuery.isLoading;
-
-  useEffect(() => {
-    setPrevApiQueryLoading(unitNamesQuery.isLoading);
-  }, [unitNamesQuery.isLoading]);
+  const shouldRefreshInitialState = useShouldReinitialize([unitNamesQuery]);
 
   const treatmentUnits = getTreatmentUnitsTree(unitNamesQuery);
 
@@ -361,8 +340,6 @@ export function TreatmentQualityFilterMenu({
     return valueLabel;
   };
 
-  const shouldRefreshInitialState = prerenderFinished || apiQueriesCompleted;
-
   if (register) {
     return (
       <>

packages/qmongjs/src/helpers/hooks/useShouldReinitialize.ts

@@ -0,0 +1,53 @@
+import { UseQueryResult } from "@tanstack/react-query";
+import { useRouter } from "next/router";
+import { useEffect, useState } from "react";
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const anyQueriesLoading = (queries: UseQueryResult<any, unknown>[]) => {
+  return queries.some((query) => query.isLoading);
+};
+
+/**
+ *
+ * The variable from useShouldReinitialize becomes true either:
+ * 1) The first time the page has finished "pre-rendering" and the API calls have already finished loading. At this point, the query/get parameters from the URL are also ready.
+ * 2) The first time the API calls finish loading and the page is already "pre-rendered". That is, pre-rendering finishes first and then the API calls. At this point, the query/get parameters from the URL are also ready.
+ *
+ * @param queries An array of tanstack queries of type UseQueryResults
+ * @returns True the first time the page is finished hydrated and all queries have finished loading
+ */
+export default function useShouldReinitialize(
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  queries: UseQueryResult<any, unknown>[],
+) {
+  const router = useRouter();
+
+  const [previousPrerenderingStatus, setPreviousPrerenderingStatus] = useState(
+    router.isReady,
+  );
+
+  const prerenderingJustCompleted =
+    previousPrerenderingStatus !== router.isReady;
+
+  useEffect(() => {
+    setPreviousPrerenderingStatus(router.isReady);
+  }, [router.isReady]);
+
+  const areQueriesStillLoading = anyQueriesLoading(queries);
+
+  const [previousQueryLoadingStatus, setPreviousQueryLoadingStatus] = useState(
+    areQueriesStillLoading,
+  );
+
+  const queriesJustCompleted =
+    previousQueryLoadingStatus && !anyQueriesLoading(queries);
+
+  useEffect(() => {
+    setPreviousQueryLoadingStatus(areQueriesStillLoading);
+  }, [areQueriesStillLoading]);
+
+  return (
+    (prerenderingJustCompleted && !areQueriesStillLoading) ||
+    queriesJustCompleted
+  );
+}