This is an automated email from the ASF dual-hosted git repository. lhotari pushed a commit to branch main in repository https://gitbox.apache.org/repos/asf/pulsar-site.git
commit 2abdcde1ee321a198308ca4a8bdda4b7992aaf98 Author: Lari Hotari <[email protected]> AuthorDate: Mon Oct 28 10:15:50 2024 +0200 Show case studies in random order for "All Industries" --- src/components/pages/CaseStudiesPage/Cards/Cards.tsx | 5 +++-- src/components/pages/CaseStudiesPage/CaseStudiesPage.tsx | 14 ++++++++++---- 2 files changed, 13 insertions(+), 6 deletions(-) diff --git a/src/components/pages/CaseStudiesPage/Cards/Cards.tsx b/src/components/pages/CaseStudiesPage/Cards/Cards.tsx index 2f1f830dee0b..0b769ef452ee 100644 --- a/src/components/pages/CaseStudiesPage/Cards/Cards.tsx +++ b/src/components/pages/CaseStudiesPage/Cards/Cards.tsx @@ -25,11 +25,12 @@ const Card: React.FC<data.Resource> = (props) => { export type CardsProps = { search: string, - resources: data.Resource[] + resources: data.Resource[], + sort?: boolean }; const Cards: React.FC<CardsProps> = (props) => { - const resources = props.resources.sort((a, b) => a.company.localeCompare(b.company, 'en', { sensitivity: 'base' })); + const resources = props.sort ? props.resources.sort((a, b) => a.company.localeCompare(b.company, 'en', { sensitivity: 'base' })) : props.resources; const filteredRes = resources.filter((r) => { return (r.company && r.company.toLowerCase().includes(props.search.toLowerCase())) || (r.description && r.description.toLowerCase().includes(props.search.toLowerCase())); diff --git a/src/components/pages/CaseStudiesPage/CaseStudiesPage.tsx b/src/components/pages/CaseStudiesPage/CaseStudiesPage.tsx index 90706328633f..e75042fa06aa 100644 --- a/src/components/pages/CaseStudiesPage/CaseStudiesPage.tsx +++ b/src/components/pages/CaseStudiesPage/CaseStudiesPage.tsx @@ -1,4 +1,4 @@ -import React, { useState } from "react"; +import React, { useState, useMemo } from "react"; import Layout from "@theme/Layout"; import Cards from "./Cards/Cards"; import * as data from '@site/data/case-studies'; @@ -7,6 +7,7 @@ import Select from "@site/src/components/ui/Select/Select"; import Page from "@site/src/components/ui/Page/Page"; import s from './CaseStudiesPage.module.css'; import ContributeDataDrivenPage from "../../ui/ContributeDataDrivenPage/ContributeDataDrivenPage"; +import shuffle from 'lodash/shuffle'; type CategoryFilterOption = data.Category | 'any'; const categoryFilterOptions = ['any', ...data.categories] as const; @@ -15,6 +16,11 @@ const CaseStudiesPage: React.FC = () => { const [searchQuery, setSearchQuery] = useState(''); const [categoryFilter, setCategoryFilter] = React.useState<CategoryFilterOption>('any'); + const shuffledResources = useMemo( + () => categoryFilter === 'any' ? shuffle(Object.values(data.resources).flat()) : [], + [data.resources, categoryFilter] + ); + return ( <Layout title={`Case studies`} @@ -46,10 +52,10 @@ const CaseStudiesPage: React.FC = () => { </div> <div> - {categoryFilter === 'any' && <Cards search={searchQuery} resources={Object.values(data.resources).flat()} />} - {data.categories.map((category) => { + {categoryFilter === 'any' && <Cards search={searchQuery} resources={shuffledResources} sort={false}/>} + {categoryFilter !== 'any' && data.categories.map((category) => { if (categoryFilter === category) { - return <Cards key={category} search={searchQuery} resources={data.resources[category]} /> + return <Cards key={category} search={searchQuery} resources={data.resources[category]} sort={true} /> } })} </div>
