fix: add clickable tags in collection header (#415)

graasp · Nov 8, 2023 · a85477d · a85477d
1 parent d2111bc
commit a85477d
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 12 deletions.
diff --git a/src/components/collection/summary/SummaryHeader.tsx b/src/components/collection/summary/SummaryHeader.tsx
@@ -1,4 +1,5 @@
 import dynamic from 'next/dynamic';
+import Link from 'next/link';
 
 import React, { useContext } from 'react';
 
@@ -18,7 +19,9 @@ import {
 
 import { DiscriminatedItem, ThumbnailSize } from '@graasp/sdk';
 
+import { UrlSearch } from '../../../config/constants';
 import { useLibraryTranslation } from '../../../config/i18n';
+import { ALL_COLLECTIONS_ROUTE } from '../../../config/routes';
 import {
   ITEM_SUMMARY_TITLE_ID,
   LIKE_COLLECTION_NOT_LOGGED_ID,
@@ -184,7 +187,15 @@ const SummaryHeader: React.FC<SummaryHeaderProps> = ({
               spacing={1}
             >
               {tags.map((text) => (
-                <Chip key={text} label={text} />
+                <Chip
+                  component={Link}
+                  href={{
+                    pathname: ALL_COLLECTIONS_ROUTE,
+                    query: { [UrlSearch.KeywordSearch]: text },
+                  }}
+                  key={text}
+                  label={text}
+                />
               ))}
             </Stack>
           )}

diff --git a/src/components/layout/HomeHeader.tsx b/src/components/layout/HomeHeader.tsx
@@ -32,17 +32,18 @@ const { GraaspLogo } = {
   ),
 };
 type PopularSearchItemProps = {
-  onClick: (search: string) => void;
   text: string;
 };
 
-const PopularSearchItem = ({
-  onClick,
-  text,
-}: PopularSearchItemProps): JSX.Element => {
+const PopularSearchItem = ({ text }: PopularSearchItemProps): JSX.Element => {
   const theme = useTheme();
   return (
     <Chip
+      component={Link}
+      href={{
+        pathname: ALL_COLLECTIONS_ROUTE,
+        query: { [UrlSearch.KeywordSearch]: text },
+      }}
       variant="filled"
       sx={{
         color: theme.palette.primary.contrastText,
@@ -52,7 +53,6 @@ const PopularSearchItem = ({
         },
       }}
       label={text}
-      onClick={() => onClick(text)}
     />
   );
 };
@@ -150,11 +150,7 @@ const HomeHeader = () => {
               useFlexGap
             >
               {popularSearches.map((term) => (
-                <PopularSearchItem
-                  key={term}
-                  text={term}
-                  onClick={handleSearch}
-                />
+                <PopularSearchItem key={term} text={term} />
               ))}
             </Stack>
           </Box>