Skip to content

Commit 6be683e

Browse files
sanjaypinnasanjaypinna
authored
Merge pull request #285 from CivicDataLab/usecase_filter
Add filters, pagination and search to usecases
2 parents 51bd33e + e543d24 commit 6be683e

File tree

5 files changed

+42
-146
lines changed

5 files changed

+42
-146
lines changed

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

Lines changed: 18 additions & 9 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) && (
@@ -488,13 +488,17 @@ const ListingComponent: React.FC<ListingProps> = ({
488488
value: formatDate(item.modified),
489489
tooltip: 'Date',
490490
},
491-
{
491+
];
492+
493+
if (item.download_count > 0) {
494+
MetadataContent.push({
492495
icon: Icons.download,
493496
label: 'Download',
494-
value: item.download_count.toString(),
497+
value: item.download_count?.toString() || '0',
495498
tooltip: 'Download',
496-
},
497-
];
499+
});
500+
}
501+
498502
if (Geography) {
499503
MetadataContent.push({
500504
icon: Icons.globe,
@@ -513,11 +517,11 @@ const ListingComponent: React.FC<ListingProps> = ({
513517
});
514518
}
515519

516-
const FooterContent = [
520+
const FooterContent = [
517521
{
518-
icon: `/Sectors/${item.sectors[0]}.svg`,
522+
icon: `/Sectors/${item.sectors?.[0]}.svg`,
519523
label: 'Sectors',
520-
tooltip: `${item.sectors[0]}`,
524+
tooltip: `${item.sectors?.[0]}`,
521525
},
522526
...(item.has_charts && view !== 'expanded'
523527
? [
@@ -542,8 +546,13 @@ const ListingComponent: React.FC<ListingProps> = ({
542546
tag: item.tags,
543547
formats: item.formats,
544548
footerContent: FooterContent,
549+
imageUrl: '',
545550
};
546551

552+
if (item.logo) {
553+
commonProps.imageUrl = `${process.env.NEXT_PUBLIC_BACKEND_URL}/${item.logo}`;
554+
}
555+
547556
return (
548557
<Card
549558
{...commonProps}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ const PublishersListingPage = () => {
6868
);
6969

7070
return (
71-
<main className="bg-baseGraySlateSolid2">
71+
<main >
7272
<BreadCrumbs
7373
data={[
7474
{ href: '/', label: 'Home' },

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ const SectorsListingPage = () => {
6464
};
6565

6666
return (
67-
<main className="bg-baseGraySlateSolid2">
67+
<main >
6868
<BreadCrumbs
6969
data={[
7070
{ href: '/', label: 'Home' },

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

Lines changed: 14 additions & 135 deletions
Original file line numberDiff line numberDiff line change
@@ -1,92 +1,24 @@
11
'use client';
22

33
import Image from 'next/image';
4+
import { fetchUseCases } from '@/fetch';
45
import { graphql } from '@/gql';
56
import { useQuery } from '@tanstack/react-query';
67
import { Card, Spinner, Text } from 'opub-ui';
78

89
import { GraphQL } from '@/lib/api';
9-
import { cn, formatDate } from '@/lib/utils';
1010
import BreadCrumbs from '@/components/BreadCrumbs';
11-
import { Icons } from '@/components/icons';
12-
import { Loading } from '@/components/loading';
13-
import Styles from '../page.module.scss';
11+
import ListingComponent from '../components/ListingComponent';
1412

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-
`);
13+
const breadcrumbData = [
14+
{ href: '/', label: 'Home' },
15+
{ href: '#', label: 'Use Cases' },
16+
];
6517

6618
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-
8219
return (
83-
<main className="bg-baseGraySlateSolid2">
84-
<BreadCrumbs
85-
data={[
86-
{ href: '/', label: 'Home' },
87-
{ href: '#', label: 'Use Cases' },
88-
]}
89-
/>
20+
<main>
21+
<BreadCrumbs data={breadcrumbData} />
9022
<div className=" bg-primaryBlue ">
9123
<div className="container flex flex-col-reverse justify-center gap-8 p-10 lg:flex-row ">
9224
<div className="flex flex-col justify-center gap-6">
@@ -96,7 +28,7 @@ const UseCasesListingPage = () => {
9628
<Text
9729
variant="headingLg"
9830
fontWeight="regular"
99-
className=" text-surfaceDefault leading-3 lg:leading-5"
31+
className=" leading-3 text-surfaceDefault lg:leading-5"
10032
>
10133
By Use case we mean any specific sector or domain data led
10234
interventions that can be applied to address some of the most
@@ -113,66 +45,13 @@ const UseCasesListingPage = () => {
11345
/>
11446
</div>
11547
</div>
116-
<div className="container p-6 lg:pb-20 lg:p-10">
48+
<div className="container p-6 lg:p-10 lg:pb-20">
11749
<div>
118-
<Text variant="heading2xl" fontWeight='bold'>Explore Use Cases</Text>
50+
<Text variant="heading2xl" fontWeight="bold">
51+
Explore Use Cases
52+
</Text>
11953
</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-
)}
54+
<ListingComponent fetchDatasets={fetchUseCases} />
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)