hide irrelevant filters based on node type

Author: Jonas-C

src/containers/SearchPageV2/GrepFilter.tsx

@@ -6,13 +6,14 @@
  *
  */
 
-import { useCallback, useMemo } from "react";
+import { useCallback, useEffect, useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { gql, useQuery } from "@apollo/client";
 import { CloseLine } from "@ndla/icons";
 import { Button, Heading, Spinner } from "@ndla/primitives";
 import { styled } from "@ndla/styled-system/jsx";
 import { FilterContainer } from "./FilterContainer";
+import { RESOURCE_NODE_TYPE } from "./searchUtils";
 import { useStableSearchPageParams } from "./useStableSearchParams";
 import { GQLGrepFilterQuery, GQLGrepFilterQueryVariables } from "../../graphqlTypes";
 
@@ -65,14 +66,21 @@ const grepFilterQuery = gql`
 export const GrepFilter = () => {
   const [searchParams, setSearchParams] = useStableSearchPageParams();
   const { t, i18n } = useTranslation();
+  const nodeType = searchParams.get("type");
 
   const codes = useMemo(() => searchParams.get("grepCodes")?.split(",") ?? [], [searchParams]);
 
   const grepQuery = useQuery<GQLGrepFilterQuery, GQLGrepFilterQueryVariables>(grepFilterQuery, {
     variables: { language: i18n.language, codes },
-    skip: !codes.length,
+    skip: !codes.length || (!!nodeType && nodeType !== RESOURCE_NODE_TYPE),
   });
 
+  useEffect(() => {
+    if (nodeType && nodeType !== RESOURCE_NODE_TYPE) {
+      setSearchParams({ grepCodes: null });
+    }
+  }, [nodeType, setSearchParams]);
+
   // const groupedCompetenceGoals = useMemo(() => {
   //   return groupCompetenceGoals(grepQuery.data?.competenceGoals ?? [], true, "LK20");
   // }, [grepQuery.data?.competenceGoals]);
@@ -101,7 +109,10 @@ export const GrepFilter = () => {
     [codes, setSearchParams],
   );
 
-  if (!grepQuery.loading && !grepQuery.data?.competenceGoals?.length && !grepQuery.data?.coreElements?.length) {
+  if (
+    (!grepQuery.loading && !grepQuery.data?.competenceGoals?.length && !grepQuery.data?.coreElements?.length) ||
+    (nodeType && nodeType !== RESOURCE_NODE_TYPE)
+  ) {
     return;
   }
 

src/containers/SearchPageV2/SearchContainer.tsx

@@ -423,14 +423,14 @@ export const SearchContainer = ({ resourceTypes, resourceTypesLoading }: Props)
           <Heading id={filterHeadingId} textStyle="title.medium" asChild consumeCss>
             <h2>{t("searchPage.filtersHeading")}</h2>
           </Heading>
-          <GrepFilter />
-          <TraitFilter />
-          <SubjectFilter />
           <ResourceTypeFilter
             bucketResult={data?.search?.aggregations?.[0]?.values ?? []}
             resourceTypes={resourceTypes}
             resourceTypesLoading={resourceTypesLoading}
           />
+          <GrepFilter />
+          <TraitFilter />
+          <SubjectFilter />
           {!!isLti && (
             <LanguageSelector
               languages={supportedLanguages}

src/containers/SearchPageV2/SubjectFilter.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import { useCallback, useMemo } from "react";
+import { useCallback, useEffect, useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { gql, useQuery } from "@apollo/client";
 import { CloseLine } from "@ndla/icons";
@@ -23,6 +23,7 @@ import {
 } from "@ndla/primitives";
 import { styled } from "@ndla/styled-system/jsx";
 import { FilterContainer } from "./FilterContainer";
+import { RESOURCE_NODE_TYPE } from "./searchUtils";
 import { useStableSearchPageParams } from "./useStableSearchParams";
 import { DialogCloseButton } from "../../components/DialogCloseButton";
 import { GQLSubjectFilterQuery } from "../../graphqlTypes";
@@ -54,8 +55,17 @@ const subjectFilterQuery = gql`
 export const SubjectFilter = () => {
   const { t } = useTranslation();
   const [searchParams, setSearchParams] = useStableSearchPageParams();
+  const nodeType = searchParams.get("type");
 
-  const subjectsQuery = useQuery<GQLSubjectFilterQuery>(subjectFilterQuery);
+  const subjectsQuery = useQuery<GQLSubjectFilterQuery>(subjectFilterQuery, {
+    skip: !!nodeType && nodeType !== RESOURCE_NODE_TYPE,
+  });
+
+  useEffect(() => {
+    if (nodeType && nodeType !== RESOURCE_NODE_TYPE) {
+      setSearchParams({ subjects: null });
+    }
+  }, [nodeType, setSearchParams]);
 
   const activeSubjectIds = useMemo(() => searchParams.get("subjects")?.split(",") ?? [], [searchParams]);
 
@@ -79,6 +89,10 @@ export const SubjectFilter = () => {
     [t, subjectsQuery.data],
   );
 
+  if (nodeType && nodeType !== RESOURCE_NODE_TYPE) {
+    return;
+  }
+
   return (
     <FilterContainer>
       <Heading asChild consumeCss textStyle="label.medium" fontWeight="bold">

src/containers/SearchPageV2/TraitFilter.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import { useCallback } from "react";
+import { useCallback, useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { CheckLine } from "@ndla/icons";
 import {
@@ -20,13 +20,21 @@ import {
 } from "@ndla/primitives";
 import { SearchTrait } from "@ndla/types-backend/search-api";
 import { FilterContainer } from "./FilterContainer";
+import { RESOURCE_NODE_TYPE } from "./searchUtils";
 import { useStableSearchPageParams } from "./useStableSearchParams";
 
 const TRAITS: SearchTrait[] = ["VIDEO", "AUDIO", "H5P", "PODCAST"];
 
 export const TraitFilter = () => {
   const { t } = useTranslation();
   const [searchParams, setSearchParams] = useStableSearchPageParams();
+  const nodeType = searchParams.get("type");
+
+  useEffect(() => {
+    if (nodeType && nodeType !== RESOURCE_NODE_TYPE) {
+      setSearchParams({ traits: null });
+    }
+  }, [nodeType, setSearchParams]);
 
   const onValueChange = useCallback(
     (traits: string[]) => {
@@ -35,6 +43,10 @@ export const TraitFilter = () => {
     [setSearchParams],
   );
 
+  if (nodeType && nodeType !== RESOURCE_NODE_TYPE) {
+    return;
+  }
+
   return (
     <FilterContainer>
       <Heading textStyle="label.medium" fontWeight="bold" asChild consumeCss>