Skip to content

Commit 021a4a3

Browse files
sanjaypinnasanjaypinna
committed
add contributors section to usecase
1 parent 7de9113 commit 021a4a3

File tree

2 files changed

+183
-59
lines changed

2 files changed

+183
-59
lines changed

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

Lines changed: 168 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,19 @@
11
'use client';
22

3+
import Image from 'next/image';
34
import { useParams } from 'next/navigation';
45
import { graphql } from '@/gql';
56
import { TypeDataset, TypeUseCase } from '@/gql/generated/graphql';
67
import { useQuery } from '@tanstack/react-query';
7-
import { Card, Spinner, Text } from 'opub-ui';
8+
import { Avatar, Card, Spinner, Text } from 'opub-ui';
89

910
import { GraphQL } from '@/lib/api';
11+
import { formatDate } from '@/lib/utils';
1012
import BreadCrumbs from '@/components/BreadCrumbs';
11-
import PrimaryDetails from '../components/Details';
12-
import Metadata from '../components/Metadata';
1313
import { Icons } from '@/components/icons';
14-
import { formatDate } from '@/lib/utils';
1514
import { Loading } from '@/components/loading';
15+
import PrimaryDetails from '../components/Details';
16+
import Metadata from '../components/Metadata';
1617

1718
const UseCasedetails: any = graphql(`
1819
query UseCasedetails($pk: ID!) {
@@ -41,6 +42,7 @@ const UseCasedetails: any = graphql(`
4142
}
4243
publishers {
4344
name
45+
contactEmail
4446
logo {
4547
path
4648
}
@@ -78,6 +80,28 @@ const UseCasedetails: any = graphql(`
7880
contactEmail
7981
status
8082
slug
83+
modified
84+
contributors {
85+
id
86+
fullName
87+
profilePicture {
88+
url
89+
}
90+
}
91+
supportingOrganizations {
92+
id
93+
name
94+
logo {
95+
url
96+
}
97+
}
98+
partnerOrganizations {
99+
id
100+
name
101+
logo {
102+
url
103+
}
104+
}
81105
}
82106
}
83107
`);
@@ -105,6 +129,18 @@ const UseCaseDetailPage = () => {
105129
);
106130
const datasets = UseCaseDetails?.useCase?.datasets || []; // Fallback to an empty array
107131

132+
const hasSupportingOrganizations =
133+
UseCaseDetails?.useCase?.supportingOrganizations &&
134+
UseCaseDetails?.useCase?.supportingOrganizations?.length > 0;
135+
const hasPartnerOrganizations =
136+
UseCaseDetails?.useCase?.partnerOrganizations &&
137+
UseCaseDetails?.useCase?.partnerOrganizations?.length > 0;
138+
const hasContributors =
139+
UseCaseDetails?.useCase?.contributors &&
140+
UseCaseDetails?.useCase?.contributors?.length > 0;
141+
142+
143+
108144
return (
109145
<div>
110146
{isLoading ? (
@@ -121,15 +157,15 @@ const UseCaseDetailPage = () => {
121157
]}
122158
/>
123159
<div className=" bg-onSurfaceDefault">
124-
<div className="flex flex-row container">
125-
<div className="w-full lg:border-r-2 border-solid border-greyExtralight py-8 lg:pr-8 pr-8 lg:w-3/4 lg:py-10">
160+
<div className="container flex flex-row">
161+
<div className="w-full border-solid border-greyExtralight py-8 pr-8 lg:w-3/4 lg:border-r-2 lg:py-10 lg:pr-8">
126162
<PrimaryDetails data={UseCaseDetails} isLoading={isLoading} />
127163
</div>
128164
<div className="hidden lg:block lg:w-1/4">
129165
<Metadata data={UseCaseDetails} />
130166
</div>
131167
</div>
132-
<div className="py-8 lg:py-14 container">
168+
<div className="container py-8 lg:py-14">
133169
<div className=" flex flex-col gap-1 ">
134170
<Text variant="heading3xl">Datasets in this Use Case</Text>
135171
<Text variant="headingLg" fontWeight="regular">
@@ -138,47 +174,135 @@ const UseCaseDetailPage = () => {
138174
</div>
139175
<div className="grid grid-cols-1 gap-6 pt-10 md:grid-cols-2 lg:grid-cols-3 ">
140176
{datasets.length > 0 &&
141-
datasets.map(
142-
(dataset: TypeDataset) => (
143-
<Card
144-
key={dataset.id}
145-
title={dataset.title}
146-
variation={'collapsed'}
147-
iconColor={'warning'}
148-
metadataContent={[
149-
{
150-
icon: Icons.calendar,
151-
label: 'Date',
152-
value: formatDate(dataset.modified),
153-
},
154-
{
155-
icon: Icons.download,
156-
label: 'Download',
157-
value: dataset.downloadCount.toString(),
158-
},
159-
{
160-
icon: Icons.globe,
161-
label: 'Geography',
162-
value: dataset.metadata?.find(
163-
(meta: any) => meta.metadataItem?.label === 'Geography'
177+
datasets.map((dataset: TypeDataset) => (
178+
<Card
179+
key={dataset.id}
180+
title={dataset.title}
181+
variation={'collapsed'}
182+
iconColor={'warning'}
183+
metadataContent={[
184+
{
185+
icon: Icons.calendar,
186+
label: 'Date',
187+
value: formatDate(dataset.modified),
188+
},
189+
{
190+
icon: Icons.download,
191+
label: 'Download',
192+
value: dataset.downloadCount.toString(),
193+
},
194+
{
195+
icon: Icons.globe,
196+
label: 'Geography',
197+
value:
198+
dataset.metadata?.find(
199+
(meta: any) =>
200+
meta.metadataItem?.label === 'Geography'
164201
)?.value || '',
165-
},
166-
]}
167-
href={`/datasets/${dataset.id}`}
168-
footerContent={[
169-
{
170-
icon: `/Sectors/${dataset.sectors[0].name}.svg`,
171-
label: 'Sectors',
172-
},
173-
{ icon: '/fallback.svg', label: 'Published by' },
174-
]}
175-
description={dataset.description || ''}
176-
/>
177-
)
178-
)}
202+
},
203+
]}
204+
href={`/datasets/${dataset.id}`}
205+
footerContent={[
206+
{
207+
icon: `/Sectors/${dataset.sectors[0].name}.svg`,
208+
label: 'Sectors',
209+
},
210+
{ icon: '/fallback.svg', label: 'Published by' },
211+
]}
212+
description={dataset.description || ''}
213+
/>
214+
))}
179215
</div>
180216
</div>
181217
</div>
218+
{(hasSupportingOrganizations || hasPartnerOrganizations || hasContributors) && (
219+
<div className=" bg-primaryBlue">
220+
<div className="container flex flex-wrap gap-8 py-10 lg:flex-nowrap ">
221+
{hasSupportingOrganizations && (
222+
<div className="w-full lg:w-2/4">
223+
<Text variant="heading2xl" color="onBgDefault">
224+
Supported by
225+
</Text>
226+
<div className="mt-8 flex h-fit w-fit flex-wrap items-center justify-start gap-6 ">
227+
{UseCaseDetails?.useCase?.supportingOrganizations?.map(
228+
(org: any) => (
229+
<div
230+
key={org.id}
231+
className=" rounded-4 bg-surfaceDefault p-4"
232+
>
233+
<Image
234+
src={`${process.env.NEXT_PUBLIC_BACKEND_URL}/${org.logo?.url}`}
235+
alt={org.name}
236+
width={140}
237+
height={100}
238+
className=" object-contain"
239+
/>
240+
</div>
241+
)
242+
)}
243+
</div>
244+
</div>
245+
)}
246+
{hasPartnerOrganizations && (
247+
<div className="w-full lg:w-2/4">
248+
<Text variant="heading2xl" color="onBgDefault">
249+
Partnered by
250+
</Text>
251+
<div className="mt-8 flex h-fit w-fit flex-wrap items-center justify-start gap-6 ">
252+
{UseCaseDetails?.useCase?.partnerOrganizations?.map(
253+
(org: any) => (
254+
<div
255+
key={org.id}
256+
className=" rounded-4 bg-surfaceDefault p-4"
257+
>
258+
<Image
259+
src={`${process.env.NEXT_PUBLIC_BACKEND_URL}/${org.logo?.url}`}
260+
alt={org.name}
261+
width={140}
262+
height={100}
263+
className=" object-contain"
264+
/>
265+
</div>
266+
)
267+
)}
268+
</div>
269+
</div>
270+
)}
271+
</div>
272+
{hasContributors && (
273+
<div className="container py-10">
274+
<div className="flex flex-col">
275+
<Text variant="heading2xl" color="onBgDefault">
276+
Contributors{' '}
277+
</Text>
278+
<Text color="onBgDefault" variant="headingLg">
279+
Publisher and Contributors who have added to the Use
280+
Case
281+
</Text>
282+
</div>
283+
<div className="mt-8 flex flex-wrap items-center justify-start gap-2">
284+
{UseCaseDetails?.useCase?.contributors?.map(
285+
(contributor: any) => (
286+
<Image
287+
alt={contributor.fullName}
288+
width={120}
289+
height={120}
290+
className="rounded-full"
291+
key={contributor.id}
292+
src={
293+
contributor.profilePicture?.url
294+
? `${process.env.NEXT_PUBLIC_BACKEND_URL}/${contributor.profilePicture?.url}`
295+
: '/profile.png'
296+
}
297+
/>
298+
)
299+
)}
300+
</div>
301+
</div>
302+
)}
303+
</div>
304+
)}
305+
<div className="mt-10 bg-surfaceDefault"></div>
182306
</>
183307
)}
184308
</div>

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

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -12,25 +12,25 @@ const Metadata = ({ data, setOpen }: { data: any; setOpen?: any }) => {
1212
label: 'Publisher',
1313
value: data.useCase.publishers[0]?.name || 'N/A',
1414
},
15-
{
16-
label: 'Website',
17-
value: (
18-
<Link
19-
href={data.useCase.website}
20-
target="_blank"
21-
rel="noopener noreferrer"
22-
className="text-primaryBlue underline"
23-
>
24-
Visit Website
25-
</Link>
26-
),
27-
},
15+
// {
16+
// label: 'Website',
17+
// value: (
18+
// <Link
19+
// href={data.useCase.website}
20+
// target="_blank"
21+
// rel="noopener noreferrer"
22+
// className="text-primaryBlue underline"
23+
// >
24+
// Visit Website
25+
// </Link>
26+
// ),
27+
// },
2828
{
2929
label: 'Contact',
3030
value: (
3131
<Link
3232
className="text-primaryBlue underline"
33-
href={`mailto:${data.useCase.contactEmail}`}
33+
href={`mailto:${data.useCase.publishers[0]?.contactEmail}`}
3434
>
3535
Contact Publisher{' '}
3636
</Link>
@@ -42,7 +42,7 @@ const Metadata = ({ data, setOpen }: { data: any; setOpen?: any }) => {
4242
},
4343
{
4444
label: 'Status',
45-
value: data.useCase.runningStatus || 'N/A',
45+
value: data.useCase.runningStatus.split('_').join('') || 'N/A',
4646
},
4747
{
4848
label: 'Last Updated',

0 commit comments

Comments
 (0)