(pulsar-site) 02/05: Show case studies in random order for "All Industries"

[lh...@apache.org]

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 <lh...@users.noreply.github.com>
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>