Skip to content

Commit 1478360

Browse files
Deepthi-ChandDeepthi-Chand
committed
add facet search for usecase
1 parent 51bd33e commit 1478360

File tree

3 files changed

+29
-137
lines changed

3 files changed

+29
-137
lines changed

‎app/[locale]/(user)/components/ListingComponent.tsx‎

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -190,7 +190,7 @@ interface ListingProps {
190190
total: number;
191191
aggregations: Aggregations;
192192
}>;
193-
breadcrumbData: { href: string; label: string }[];
193+
breadcrumbData?: { href: string; label: string }[];
194194
headerComponent?: React.ReactNode;
195195
categoryName?: string;
196196
categoryDescription?: string;
@@ -289,7 +289,7 @@ const ListingComponent: React.FC<ListingProps> = ({
289289

290290
return (
291291
<div className="bg-basePureWhite">
292-
<BreadCrumbs data={breadcrumbData} />
292+
{breadcrumbData && <BreadCrumbs data={breadcrumbData} />}
293293
<div className="container">
294294
{/* Optional Category Header */}
295295
{(categoryName || categoryDescription || categoryImage) && (
@@ -491,7 +491,7 @@ const ListingComponent: React.FC<ListingProps> = ({
491491
{
492492
icon: Icons.download,
493493
label: 'Download',
494-
value: item.download_count.toString(),
494+
value: item.download_count?.toString() || '0',
495495
tooltip: 'Download',
496496
},
497497
];
@@ -515,9 +515,9 @@ const ListingComponent: React.FC<ListingProps> = ({
515515

516516
const FooterContent = [
517517
{
518-
icon: `/Sectors/${item.sectors[0]}.svg`,
518+
icon: `/Sectors/${item.sectors?.[0]}.svg`,
519519
label: 'Sectors',
520-
tooltip: `${item.sectors[0]}`,
520+
tooltip: `${item.sectors?.[0]}`,
521521
},
522522
...(item.has_charts && view !== 'expanded'
523523
? [
@@ -542,8 +542,13 @@ const ListingComponent: React.FC<ListingProps> = ({
542542
tag: item.tags,
543543
formats: item.formats,
544544
footerContent: FooterContent,
545+
imageUrl: '',
545546
};
546547

548+
if (item.logo) {
549+
commonProps.imageUrl = `${process.env.NEXT_PUBLIC_BACKEND_URL}/${item.logo}`;
550+
}
551+
547552
return (
548553
<Card
549554
{...commonProps}

‎app/[locale]/(user)/usecases/page.tsx‎

Lines changed: 11 additions & 132 deletions
Original file line numberDiff line numberDiff line change
@@ -3,89 +3,21 @@
33
import Image from 'next/image';
44
import { graphql } from '@/gql';
55
import { useQuery } from '@tanstack/react-query';
6+
import { fetchUseCases } from '@/fetch';
67
import { Card, Spinner, Text } from 'opub-ui';
7-
8-
import { GraphQL } from '@/lib/api';
9-
import { cn, formatDate } from '@/lib/utils';
108
import BreadCrumbs from '@/components/BreadCrumbs';
11-
import { Icons } from '@/components/icons';
12-
import { Loading } from '@/components/loading';
13-
import Styles from '../page.module.scss';
14-
15-
const useCasesListQueryDoc: any = graphql(`
16-
query UseCasesList($filters: UseCaseFilter) {
17-
publishedUseCases(filters: $filters) {
18-
id
19-
title
20-
summary
21-
slug
22-
datasetCount
23-
isIndividualUsecase
24-
user {
25-
fullName
26-
profilePicture {
27-
url
28-
}
29-
}
30-
organization {
31-
name
32-
logo {
33-
url
34-
}
35-
}
36-
logo {
37-
path
38-
}
39-
metadata {
40-
metadataItem {
41-
id
42-
label
43-
dataType
44-
}
45-
id
46-
value
47-
}
48-
publishers {
49-
logo {
50-
path
51-
}
52-
name
53-
}
54-
sectors {
55-
id
56-
name
57-
}
58-
created
59-
modified
60-
website
61-
contactEmail
62-
}
63-
}
64-
`);
9+
import { GraphQL } from '@/lib/api';
10+
import ListingComponent from '../components/ListingComponent';
11+
const breadcrumbData = [
12+
{ href: '/', label: 'Home' },
13+
{ href: '#', label: 'Use Cases' },
14+
];
6515

6616
const UseCasesListingPage = () => {
67-
const getUseCasesList: {
68-
data: any;
69-
isLoading: boolean;
70-
error: any;
71-
isError: boolean;
72-
} = useQuery([`useCases_list_page`], () =>
73-
GraphQL(
74-
useCasesListQueryDoc,
75-
{},
76-
{
77-
filters: { status: 'PUBLISHED' },
78-
}
79-
)
80-
);
81-
8217
return (
8318
<main className="bg-baseGraySlateSolid2">
8419
<BreadCrumbs
85-
data={[
86-
{ href: '/', label: 'Home' },
87-
{ href: '#', label: 'Use Cases' },
88-
]}
20+
data={breadcrumbData}
8921
/>
9022
<div className=" bg-primaryBlue ">
9123
<div className="container flex flex-col-reverse justify-center gap-8 p-10 lg:flex-row ">
@@ -117,62 +49,9 @@ const UseCasesListingPage = () => {
11749
<div>
11850
<Text variant="heading2xl" fontWeight='bold'>Explore Use Cases</Text>
11951
</div>
120-
{getUseCasesList.isLoading ? (
121-
<div className=" mt-8 flex justify-center">
122-
<Spinner />
123-
</div>
124-
) : (
125-
<div
126-
className={cn(
127-
'grid w-full grid-cols-1 gap-6 pt-6 lg:pt-10 md:grid-cols-2 lg:grid-cols-3',
128-
Styles.Card
129-
)}
130-
>
131-
{getUseCasesList &&
132-
getUseCasesList?.data?.publishedUseCases.length > 0 &&
133-
getUseCasesList?.data?.publishedUseCases.map((item: any, index: any) => (
134-
<Card
135-
title={item.title}
136-
key={index}
137-
href={`/usecases/${item.id}`}
138-
metadataContent={[
139-
{
140-
icon: Icons.calendar,
141-
label: 'Date',
142-
value: formatDate(item.modified),
143-
},
144-
{
145-
icon: Icons.globe,
146-
label: 'Geography',
147-
value: item.metadata?.find(
148-
(meta: any) => meta.metadataItem?.label === 'Geography'
149-
)?.value,
150-
},
151-
]}
152-
footerContent={[
153-
{
154-
icon: `/Sectors/${item?.sectors[0]?.name}.svg`,
155-
label: 'Sectors',
156-
},
157-
{
158-
icon: item.isIndividualUsecase
159-
? item?.user?.profilePicture
160-
? `${process.env.NEXT_PUBLIC_BACKEND_URL}/${item.user.profilePicture.url}`
161-
: '/profile.png'
162-
: item?.organization?.logo
163-
? `${process.env.NEXT_PUBLIC_BACKEND_URL}/${item.organization.logo.url}`
164-
: '/org.png',
165-
label: 'Published by',
166-
},
167-
]}
168-
imageUrl={`${process.env.NEXT_PUBLIC_BACKEND_URL}/${item.logo?.path.replace('/code/files/', '')}`}
169-
description={item.summary}
170-
iconColor="warning"
171-
variation={'collapsed'}
172-
/>
173-
))}
174-
</div>
175-
)}
52+
<ListingComponent
53+
fetchDatasets={fetchUseCases}
54+
/>
17655
</div>
17756
</main>
17857
);

‎fetch.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,3 +5,11 @@ export const fetchDatasets = async (variables: any) => {
55
const data = await response.json();
66
return data;
77
};
8+
9+
export const fetchUseCases = async (variables: any) => {
10+
const response = await fetch(
11+
`${process.env.NEXT_PUBLIC_BACKEND_URL}/api/search/usecase/${variables}`
12+
);
13+
const data = await response.json();
14+
return data;
15+
};

0 commit comments

Comments
 (0)