do not render "category" if there's no category filter

opengovsg · Jan 2, 2025 · cf20aa4 · cf20aa4
1 parent 2a4720b
commit cf20aa4
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 9 deletions.
diff --git a/packages/components/src/templates/next/components/internal/BlogCard/BlogCard.tsx b/packages/components/src/templates/next/components/internal/BlogCard/BlogCard.tsx
@@ -25,9 +25,11 @@ export const BlogCard = ({
   imageSrc,
   itemTitle,
   siteAssetsBaseUrl,
+  shouldShowCategory = true,
   shouldShowDate = true,
   tags = [],
 }: CollectionCardProps & {
+  shouldShowCategory?: boolean
   shouldShowDate?: boolean
   siteAssetsBaseUrl: string | undefined
   LinkComponent: CollectionPageSchemaType["LinkComponent"]
@@ -84,9 +86,11 @@ export const BlogCard = ({
           </Text>
         )}
         {/* TODO: Feature enhancement? Filter by category when clicked */}
-        <Text className="prose-label-sm-medium text-base-content-subtle">
-          {category}
-        </Text>
+        {shouldShowCategory && (
+          <Text className="prose-label-sm-medium text-base-content-subtle">
+            {category}
+          </Text>
+        )}
       </div>
     </div>
   )

diff --git a/packages/components/src/templates/next/components/internal/CollectionCard/CollectionCard.tsx b/packages/components/src/templates/next/components/internal/CollectionCard/CollectionCard.tsx
@@ -25,9 +25,11 @@ export const CollectionCard = ({
   imageSrc,
   itemTitle,
   siteAssetsBaseUrl,
+  shouldShowCategory = true,
   shouldShowDate = true,
   tags = [],
 }: CollectionCardProps & {
+  shouldShowCategory?: boolean
   shouldShowDate?: boolean
   siteAssetsBaseUrl: string | undefined
   LinkComponent: CollectionPageSchemaType["LinkComponent"]
@@ -69,9 +71,11 @@ export const CollectionCard = ({
           </Text>
         )}
         {/* TODO: Feature enhancement? Filter by category when clicked */}
-        <Text className="prose-label-md mt-3 text-base-content-subtle lg:mt-2">
-          {category}
-        </Text>
+        {shouldShowCategory && (
+          <Text className="prose-label-md mt-3 text-base-content-subtle lg:mt-2">
+            {category}
+          </Text>
+        )}
       </div>
       {image && (
         <div className="relative mt-3 min-h-40 w-full shrink-0 lg:ml-4 lg:mt-0 lg:h-auto lg:w-1/4">

diff --git a/packages/components/src/templates/next/layouts/Collection/Collection.tsx b/packages/components/src/templates/next/layouts/Collection/Collection.tsx
@@ -13,7 +13,7 @@ import {
 import { Skeleton } from "../Skeleton"
 import CollectionClient from "./CollectionClient"
 import { getAvailableFilters } from "./filterUtils"
-import { shouldShowDate } from "./utils"
+import { shouldShowCategory, shouldShowDate } from "./utils"
 
 const CATEGORY_OTHERS = "Others"
 
@@ -169,6 +169,7 @@ const CollectionLayout = ({
     site.siteMap,
     page.permalink.split("/").slice(1),
   )
+  const availableFilters = getAvailableFilters(processedItems)
 
   return (
     <Skeleton
@@ -182,7 +183,8 @@ const CollectionLayout = ({
         page={page}
         breadcrumb={breadcrumb}
         items={processedItems}
-        filters={getAvailableFilters(processedItems)}
+        filters={availableFilters}
+        shouldShowCategory={shouldShowCategory(availableFilters)}
         shouldShowDate={shouldShowDate(processedItems)}
         siteAssetsBaseUrl={site.assetsBaseUrl}
         LinkComponent={LinkComponent}

diff --git a/packages/components/src/templates/next/layouts/Collection/CollectionClient.tsx b/packages/components/src/templates/next/layouts/Collection/CollectionClient.tsx
@@ -26,6 +26,7 @@ interface CollectionClientProps {
   page: CollectionPagePageProps
   items: ProcessedCollectionCardProps[]
   filters: FilterType[]
+  shouldShowCategory: boolean
   shouldShowDate: boolean
   siteAssetsBaseUrl: string | undefined
   breadcrumb: BreadcrumbProps
@@ -55,6 +56,7 @@ const CollectionClient = ({
   page,
   items,
   filters,
+  shouldShowCategory,
   shouldShowDate,
   siteAssetsBaseUrl,
   breadcrumb,
@@ -130,6 +132,7 @@ const CollectionClient = ({
               paginatedItems={paginatedItems}
               searchValue={searchValue}
               totalCount={totalCount}
+              shouldShowCategory={shouldShowCategory}
               shouldShowDate={shouldShowDate}
               siteAssetsBaseUrl={siteAssetsBaseUrl}
               LinkComponent={LinkComponent}

diff --git a/packages/components/src/templates/next/layouts/Collection/CollectionResults.tsx b/packages/components/src/templates/next/layouts/Collection/CollectionResults.tsx
@@ -13,6 +13,7 @@ interface CollectionResultProps
     | "handleClearFilter"
     | "totalCount"
   > {
+  shouldShowCategory?: boolean
   shouldShowDate?: boolean
   variant?: CollectionVariant
   siteAssetsBaseUrl: string | undefined
@@ -48,6 +49,7 @@ export const CollectionResults = ({
   filteredCount,
   handleClearFilter,
   totalCount,
+  shouldShowCategory = true,
   shouldShowDate = true,
   siteAssetsBaseUrl,
   LinkComponent,
@@ -88,6 +90,7 @@ export const CollectionResults = ({
               <CollectionCard
                 key={`${item.title}-${item.category}`}
                 {...item}
+                shouldShowCategory={shouldShowCategory}
                 shouldShowDate={shouldShowDate}
                 siteAssetsBaseUrl={siteAssetsBaseUrl}
                 LinkComponent={LinkComponent}
@@ -96,6 +99,7 @@ export const CollectionResults = ({
               <BlogCard
                 key={`${item.title}-${item.category}`}
                 {...item}
+                shouldShowCategory={shouldShowCategory}
                 shouldShowDate={shouldShowDate}
                 siteAssetsBaseUrl={siteAssetsBaseUrl}
                 LinkComponent={LinkComponent}

diff --git a/packages/components/src/templates/next/layouts/Collection/utils.ts b/packages/components/src/templates/next/layouts/Collection/utils.ts
@@ -1,4 +1,4 @@
-import type { AppliedFilter } from "../../types/Filter"
+import type { AppliedFilter, Filter } from "../../types/Filter"
 import type { ProcessedCollectionCardProps } from "~/interfaces"
 import {
   FILTER_ID_CATEGORY,
@@ -124,6 +124,11 @@ export const updateAppliedFilters = (
   }
 }
 
+// use filters generated as the single source of truth
+export const shouldShowCategory = (filters: Filter[]): boolean => {
+  return Boolean(filters.find((filter) => filter.id === FILTER_ID_CATEGORY))
+}
+
 export const shouldShowDate = (
   items: ProcessedCollectionCardProps[],
 ): boolean => {