chore(heureka): handles initialFilter store status in services route component

Author: hodanoori

apps/heureka/src/components/Services/ServicesFilters.tsx

@@ -3,44 +3,17 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { useCallback, useLayoutEffect } from "react"
-import { useLoaderData, useNavigate, useRouteContext, useSearch } from "@tanstack/react-router"
+import React, { useCallback } from "react"
+import { useLoaderData, useNavigate } from "@tanstack/react-router"
 import { Filters } from "../common/Filters"
 import { FilterSettings } from "../common/Filters/types"
-import { getFiltersForUrl, getInitialFilters } from "./utils"
+import { getFiltersForUrl } from "./utils"
 import { SELECTED_FILTER_PREFIX } from "../../constants"
-import { useStore } from "../../store/StoreProvider"
+
 
 export const ServicesFilters = () => {
   const navigate = useNavigate()
   const { filters, filterSettings } = useLoaderData({ from: "/services/" })
-  const { appProps } = useRouteContext({ from: "/services/" })
-  const search = useSearch({ from: "/services/" })
-  const { hasAppliedInitialFilters, markInitialFiltersApplied } = useStore()
-
-  // Use store to track initial filters across tab navigation - prevents re-application when switching between services/vulnerabilities tabs
-  useLayoutEffect(() => {
-    if (hasAppliedInitialFilters) return
-
-    // Use parsed search params from TanStack Router instead of window.location.search
-    const hasUrlFilters = Object.keys(search).some((key) => key.startsWith(SELECTED_FILTER_PREFIX))
-
-    if (!hasUrlFilters && appProps?.initialFilters?.support_group?.length) {
-      const initialFilters = getInitialFilters(appProps.initialFilters)
-
-      if (initialFilters.length > 0) {
-        navigate({
-          to: "/services",
-          search: getFiltersForUrl({
-            searchTerm: "",
-            selectedFilters: initialFilters,
-          }),
-          replace: true,
-        })
-        markInitialFiltersApplied()
-      }
-    }
-  }, [navigate, appProps, hasAppliedInitialFilters, markInitialFiltersApplied, search])
 
   const handleFilterChange = useCallback(
     (updatedFilterSettings: FilterSettings) => {

apps/heureka/src/routes/services/index.tsx

@@ -2,7 +2,10 @@
  * SPDX-FileCopyrightText: 2024 SAP SE or an SAP affiliate company and Juno contributors
  * SPDX-License-Identifier: Apache-2.0
  */
-
+import React, { useLayoutEffect } from "react"
+import { useNavigate, useRouteContext, useSearch } from "@tanstack/react-router"
+import { getFiltersForUrl, getInitialFilters } from "../../components/Services/utils"
+import { useStore } from "../../store/StoreProvider"
 import { createFileRoute } from "@tanstack/react-router"
 import { z } from "zod"
 import { Services } from "../../components/Services"
@@ -71,5 +74,38 @@ export const Route = createFileRoute("/services/")({
       filterSettings: sanitizeFilterSettings(filters, filterSettings), // we need to only apply filters that backend supports hence this sanitization
     }
   },
-  component: Services,
+  component: RouteComponent,
 })
+
+function RouteComponent() {
+  const navigate = useNavigate()
+  const { appProps } = useRouteContext({ from: "/services/" })
+  const search = useSearch({ from: "/services/" })
+  const { hasAppliedInitialFilters, markInitialFiltersApplied } = useStore()
+
+  // Use store to track initial filters across tab navigation - prevents re-application when switching between services/vulnerabilities tabs
+  useLayoutEffect(() => {
+    if (hasAppliedInitialFilters) return
+
+    // Use parsed search params from TanStack Router instead of window.location.search
+    const hasUrlFilters = Object.keys(search).some((key) => key.startsWith(SELECTED_FILTER_PREFIX))
+
+    if (!hasUrlFilters && appProps?.initialFilters?.support_group?.length) {
+      const initialFilters = getInitialFilters(appProps.initialFilters)
+
+      if (initialFilters.length > 0) {
+        navigate({
+          to: "/services",
+          search: getFiltersForUrl({
+            searchTerm: "",
+            selectedFilters: initialFilters,
+          }),
+          replace: true,
+        })
+        markInitialFiltersApplied()
+      }
+    }
+  }, [navigate, appProps, hasAppliedInitialFilters, markInitialFiltersApplied, search])
+
+  return <Services />
+}