Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/swift-experts-camp.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"nextjs-website": minor
---

Generalise filtered grid component
25 changes: 22 additions & 3 deletions apps/nextjs-website/src/app/[productSlug]/tutorials/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ import {
breadcrumbItemByProduct,
productToBreadcrumb,
} from '@/helpers/structuredData.helpers';
import { TutorialsList } from '@/components/organisms/TutorialsList/TutorialsList';
import { FilteredGridLayout } from '@/components/organisms/FilteredGridLayout/FilteredGridLayout';

export type TutorialsPageProps = {
readonly product: Product;
Expand Down Expand Up @@ -75,6 +75,24 @@ const TutorialsPage = async ({ params }: ProductParams) => {
],
seo: seo,
});
const mappedTutorials = tutorials.map((tutorial) => {
return {
tags: tutorial.tags || [],
title: tutorial.title,
date: {
date: tutorial.publishedAt,
},
href: {
label: 'shared.readTutorial',
link: tutorial.path,
translate: true,
},
img: {
alt: tutorial.image?.alternativeText || '',
src: tutorial.image?.url || '/images/news.png',
},
};
});

return (
<ProductLayout
Expand All @@ -92,10 +110,11 @@ const TutorialsPage = async ({ params }: ProductParams) => {
/>
)}
{tutorials && (
<TutorialsList
<FilteredGridLayout
items={mappedTutorials}
tags={product.tags || []}
tutorials={tutorials}
enableFilters={enableFilters}
noItemsMessageKey={'overview.tutorial.noTutorialMessage'}
/>
)}
</ProductLayout>
Expand Down
26 changes: 23 additions & 3 deletions apps/nextjs-website/src/app/[productSlug]/use-cases/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ import {
} from '@/helpers/structuredData.helpers';
import { UseCase } from '@/lib/types/useCaseData';
import { getUseCaseListPageProps } from '@/lib/api';
import { UseCaseList } from '../../../components/organisms/UseCaseList/UseCaseList';
import { FilteredGridLayout } from '@/components/organisms/FilteredGridLayout/FilteredGridLayout';

export type UseCasesPageProps = {
readonly product: Product;
Expand Down Expand Up @@ -69,6 +69,25 @@ const UseCasesPage = async ({ params }: ProductParams) => {
seo: seo,
});

const mappedUseCases = useCases.map((useCase) => {
return {
tags: useCase.tags || [],
title: useCase.title,
date: {
date: useCase.publishedAt,
},
href: {
label: 'shared.readUseCase',
link: useCase.path,
translate: true,
},
img: {
alt: useCase.coverImage?.alternativeText || '',
src: useCase.coverImage?.url || '/images/news.png',
},
};
});

return (
<ProductLayout
product={product}
Expand All @@ -85,10 +104,11 @@ const UseCasesPage = async ({ params }: ProductParams) => {
/>
)}
{useCases && (
<UseCaseList
<FilteredGridLayout
items={mappedUseCases}
tags={product.tags || []}
useCases={useCases}
enableFilters={enableFilters}
noItemsMessageKey={'overview.useCases.noUseCaseMessage'}
/>
)}
</ProductLayout>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ const DesktopFilterSelector = ({
}: DesktopFilterSelectorProps) => {
return (
<Stack
id={'filters'}
component='section'
spacing={{ md: '32px', sm: '16px' }}
direction={'row'}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@ const MobileFilterSelector = ({
const icon = isExpanded ? null : <ExpandMoreIcon />;
return (
<Box
id={'filters'}
sx={{
backgroundColor: '#EBF4FD',
paddingY: '24px',
Expand Down
Original file line number Diff line number Diff line change
@@ -1,31 +1,34 @@
'use client';

import { Tag } from '@/lib/types/tag';
import Newsroom from '@/editorialComponents/Newsroom/Newsroom';
import Newsroom, {
INewsroomItem,
} from '@/editorialComponents/Newsroom/Newsroom';
import { Box, useMediaQuery } from '@mui/material';
import React, { useState } from 'react';
import { useTranslations } from 'next-intl';
import { useSearchParams } from 'next/navigation';
import MobileFilterSelector from '@/components/molecules/MobileFilterSelector/MobileFilterSelector';
import DesktopFilterSelector from '@/components/molecules/DesktopFilterSelector/DesktopFilterSelector';
import SectionTitle from '@/components/molecules/SectionTitle/SectionTitle';
import { UseCase } from '../../../lib/types/useCaseData';

type UseCaseListProps = {
readonly useCases: readonly UseCase[];
type FilteredGridLayoutProps = {
readonly items: readonly (INewsroomItem & { tags: readonly Tag[] })[];
readonly tags: readonly Tag[];
readonly enableFilters?: boolean;
readonly noItemsMessageKey?: string;
};

export const UseCaseList = ({
export const FilteredGridLayout = ({
tags,
useCases,
items,
enableFilters,
}: UseCaseListProps) => {
noItemsMessageKey = '',
}: FilteredGridLayoutProps) => {
const t = useTranslations();
const updatedTags = [
{
name: t('overview.useCases.all'),
name: t('overview.all'),
icon: {
data: {
attributes: {
Expand All @@ -52,19 +55,17 @@ export const UseCaseList = ({
);
const [selectedTag, setSelectedTag] = useState(tagValue);

const filteredUseCases = useCases.filter((useCase) => {
const filteredItems = items.filter((item) => {
return (
selectedTag === 0 ||
useCase.tags?.some((tag) => tag.name === updatedTags[selectedTag].name)
item.tags?.some((tag) => tag.name === updatedTags[selectedTag].name)
);
});
// eslint-disable-next-line functional/no-return-void
const setSelectedTagFilter = (newTag: number): void => {
if (newTag === selectedTag) return;
addQueryParam('tag', `${newTag}`);
document
.getElementById('chatbot-page-content')
?.scrollIntoView({ behavior: 'smooth' });
document.getElementById('filters')?.scrollIntoView({ behavior: 'smooth' });
setSelectedTag(newTag);
};

Expand All @@ -76,7 +77,7 @@ export const UseCaseList = ({
const isSmallScreen = useMediaQuery('(max-width: 1000px)');
return (
<Box>
<Box sx={{ paddingBottom: filteredUseCases.length > 0 ? '24px' : 0 }}>
<Box sx={{ paddingBottom: filteredItems.length > 0 ? '24px' : 0 }}>
{enableFilters &&
tags.length > 0 &&
(isSmallScreen ? (
Expand All @@ -93,7 +94,7 @@ export const UseCaseList = ({
/>
))}
</Box>
{filteredUseCases.length <= 0 ? (
{filteredItems.length <= 0 ? (
<Box
pt={8}
pb={2}
Expand All @@ -103,24 +104,12 @@ export const UseCaseList = ({
alignItems: 'center',
}}
>
<SectionTitle title={t('overview.useCases.noUseCaseMessage')} />
<SectionTitle title={t(noItemsMessageKey)} />
</Box>
) : (
<Newsroom
items={useCases.map((useCase) => ({
title: useCase.title,
date: {
date: useCase.publishedAt,
},
href: {
label: 'shared.readUseCase',
link: useCase.path,
translate: true,
},
img: {
alt: useCase.coverImage?.alternativeText || '',
src: useCase.coverImage?.url || '/images/news.png',
},
items={filteredItems.map((item) => ({
...item,
}))}
/>
)}
Expand Down

This file was deleted.

Loading