fix link in link error

udk-berlin · Jun 20, 2024 · 1e720d9 · 1e720d9
1 parent 424bc2f
commit 1e720d9
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 23 deletions.
diff --git a/src/components/filterTag.tsx b/src/components/filterTag.tsx
@@ -1,8 +1,10 @@
 'use client';
+import { useCallback } from 'react';
 import Link from 'next/link';
 import { useSearchParams, useSelectedLayoutSegment } from 'next/navigation';
 import { Filter } from '@/types/types';
 import cx from 'classnames';
+import useQuery from '@/lib/useQuery';
 
 export type FilterTagProps = {
   filter: Filter;
@@ -17,29 +19,19 @@ export default function FilterTag({
   isReverse = false,
   disabled = false,
 }: FilterTagProps) {
-  const selectedLayoutSegment = useSelectedLayoutSegment(); // todo: why are we using this instead of usePathname() ?
-  const searchParams = useSearchParams();
+  const { changeParameter } = useQuery(filter.searchParam);
+
+  const handleClickFilter = useCallback(() => {
+    changeParameter(filter?.id);
+  }, [filter?.id, changeParameter]);
 
   return (
-    <Link
-      href={{
-        pathname: selectedLayoutSegment,
-        query: {
-          // this should be wrapped nicely in some utility function or so?
-          ...(filter.searchParam != 'language' && searchParams.get('language')
-            ? { language: searchParams.get('language') }
-            : {}),
-          ...(filter.searchParam != 'faculty' && searchParams.get('faculty')
-            ? { faculty: searchParams.get('faculty') }
-            : {}),
-          ...(filter.searchParam != 'format' && searchParams.get('format')
-            ? { format: searchParams.get('format') }
-            : {}),
-          ...(isSelected ? {} : { [filter.searchParam]: filter?.id }),
-          //[filter.searchParam]: filter?.id,
-        },
-      }}
-      className={cx('pl-1 pt-1', disabled && 'pointer-events-none')}
+    <div
+      onClick={handleClickFilter}
+      className={cx(
+        'cursor-pointer pl-1 pt-1',
+        disabled && 'pointer-events-none',
+      )}
     >
       <div
         className={cx(
@@ -52,6 +44,6 @@ export default function FilterTag({
       >
         {filter.name}
       </div>
-    </Link>
+    </div>
   );
 }
diff --git a/src/lib/useQuery.ts b/src/lib/useQuery.ts
@@ -14,7 +14,12 @@ const useQuery = (param: string) => {
   const createQueryString = useCallback(
     (name: string, value: string) => {
       const params = new URLSearchParams(searchParams.toString());
-      params.set(name, value);
+      const oldValue = params.get(name) ?? '';
+      if (decodeURIComponent(oldValue) == value) {
+        params.delete(name);
+      } else {
+        params.set(name, value);
+      }
 
       return params.toString();
     },