Merge pull request #1643 from visualize-admin/fix/subtheme-filters

fix: Sub-theme filters
visualize-admin · Jun 27, 2024 · 760dacc · 760dacc
2 parents 923bd97 + 84bc1c4
commit 760dacc
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 19 deletions.
diff --git a/app/browser/dataset-browse.tsx b/app/browser/dataset-browse.tsx
@@ -354,7 +354,7 @@ const encodeFilter = (filter: BrowseFilter) => {
       case "DataCubeOrganization":
         return "organization";
       case "DataCubeAbout":
-        throw new Error("Should not happen");
+        return "topic";
       case "Termset":
         return "termset";
       default:
@@ -394,26 +394,26 @@ const NavItem = ({
         {
           includeDrafts,
           search,
-          topic: level === 2 ? next.iri : undefined,
+          topic: level === 2 && !disableLink ? next.iri : undefined,
         },
         Boolean
       )
     );
     const newFilters = [...filters].filter(
       (f) =>
-        f.__typename !== "DataCubeAbout" &&
+        (disableLink ? true : f.__typename !== "DataCubeAbout") &&
         (level === 1 ? f.__typename !== next.__typename : true)
     );
 
-    if (level === 1) {
+    if (level === 1 || disableLink) {
       newFilters.push(next);
     }
 
     return [
       newFilters,
       `/browse/${newFilters.map(encodeFilter).join("/")}?${extraURLParams}`,
     ] as const;
-  }, [includeDrafts, search, level, next, filters]);
+  }, [includeDrafts, search, level, next, filters, disableLink]);
 
   const [newFiltersRemove, removeFilterPath] = useMemo(() => {
     const extraURLParams = stringify(
@@ -441,13 +441,19 @@ const NavItem = ({
       passHref
       legacyBehavior
       disabled={!!disableLink}
+      scroll={false}
+      shallow
     >
       <ButtonBase
         className={classes.removeFilterButton}
-        onClick={(ev) => {
-          ev.preventDefault();
-          setFilters(newFiltersRemove);
-        }}
+        onClick={
+          disableLink
+            ? (e) => {
+                e.preventDefault();
+                setFilters(newFiltersRemove);
+              }
+            : undefined
+        }
       >
         <SvgIcClose width={24} height={24} />
       </ButtonBase>
@@ -494,16 +500,22 @@ const NavItem = ({
             passHref
             legacyBehavior
             disabled={!!disableLink}
+            scroll={false}
+            shallow
           >
             <MUILink
               className={classes.link}
-              href={path}
+              href={disableLink ? undefined : path}
               underline="none"
               variant="body2"
-              onClick={(ev) => {
-                ev.preventDefault();
-                setFilters(newFiltersAdd);
-              }}
+              onClick={
+                disableLink
+                  ? (e) => {
+                      e.preventDefault();
+                      setFilters(newFiltersAdd);
+                    }
+                  : undefined
+              }
             >
               {children}
             </MUILink>
@@ -519,10 +531,12 @@ const Subthemes = ({
   subthemes,
   filters,
   counts,
+  disableLinks,
 }: {
   subthemes: SearchCube["subthemes"];
   filters: BrowseFilter[];
   counts: Record<string, number>;
+  disableLinks?: boolean;
 }) => {
   return (
     <>
@@ -542,6 +556,7 @@ const Subthemes = ({
             active={filters[filters.length - 1]?.iri === d.iri}
             level={2}
             count={count}
+            disableLink={disableLinks}
           >
             {d.label}
           </NavItem>
@@ -863,6 +878,7 @@ export const SearchFilters = ({
               subthemes={subthemes}
               filters={filters}
               counts={counts}
+              disableLinks={disableNavLinks}
             />
           ) : null
         }

diff --git a/app/components/maybe-link.tsx b/app/components/maybe-link.tsx
@@ -1,5 +1,4 @@
-import { Link } from "@mui/material";
-import { LinkProps } from "next/link";
+import NextLink, { LinkProps } from "next/link";
 import React from "react";
 
 /** A link where the default link behavior can be disabled */
@@ -8,9 +7,11 @@ const MaybeLink = ({
   children,
   ...props
 }: LinkProps & { disabled: boolean; children: React.ReactNode }) => {
-  const Wrapper = disabled ? React.Fragment : Link;
-  const wrapperProps = disabled ? {} : props;
-  return <Wrapper {...wrapperProps}>{children}</Wrapper>;
+  if (disabled) {
+    return <>{children}</>;
+  }
+
+  return <NextLink {...props}>{children}</NextLink>;
 };
 
 export default MaybeLink;