Skip to content

Commit 2e8782e

Browse files
bhavabhuthibhavabhuthi
committed
Add links for organization and individuals in use case details page
1 parent b3ab525 commit 2e8782e

File tree

2 files changed

+93
-52
lines changed

2 files changed

+93
-52
lines changed

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

Lines changed: 48 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
'use client';
22

33
import Image from 'next/image';
4+
import Link from 'next/link';
45
import { useParams } from 'next/navigation';
56
import { graphql } from '@/gql';
67
import { TypeDataset, TypeUseCase } from '@/gql/generated/graphql';
@@ -28,12 +29,15 @@ const UseCasedetails: any = graphql(`
2829
user {
2930
fullName
3031
email
32+
id
3133
profilePicture {
3234
url
3335
}
3436
}
3537
organization {
3638
name
39+
slug
40+
id
3741
contactEmail
3842
logo {
3943
url
@@ -116,13 +120,15 @@ const UseCasedetails: any = graphql(`
116120
}
117121
supportingOrganizations {
118122
id
123+
slug
119124
name
120125
logo {
121126
url
122127
}
123128
}
124129
partnerOrganizations {
125130
id
131+
slug
126132
name
127133
logo {
128134
url
@@ -164,7 +170,6 @@ const UseCaseDetailClient = () => {
164170
const hasContributors =
165171
UseCaseDetails?.useCase?.contributors &&
166172
UseCaseDetails?.useCase?.contributors?.length > 0;
167-
console.log(UseCaseDetails);
168173

169174
return (
170175
<div>
@@ -194,7 +199,8 @@ const UseCaseDetailClient = () => {
194199
<div className=" flex flex-col gap-1 ">
195200
<Text variant="headingXl">Datasets in this Use Case</Text>
196201
<Text variant="bodyLg" fontWeight="regular">
197-
Explore datasets related to this use case </Text>
202+
Explore datasets related to this use case{' '}
203+
</Text>
198204
</div>
199205
<div className="grid grid-cols-1 gap-6 pt-10 md:grid-cols-2 lg:grid-cols-3 ">
200206
{/* <div className="grid grid-cols-1 p-4 gap-6 overflow-y-auto md:grid-cols-2 lg:grid-cols-3 max-h-[calc(100vh-250px)]"> */}
@@ -263,18 +269,20 @@ const UseCaseDetailClient = () => {
263269
<div className="mt-8 flex h-fit w-fit flex-wrap items-center justify-start gap-6 ">
264270
{UseCaseDetails?.useCase?.supportingOrganizations?.map(
265271
(org: any) => (
266-
<div
272+
<Link
273+
href={`/publishers/organization/${org.slug + '_' + org.id}`}
267274
key={org.id}
268-
className=" rounded-4 bg-surfaceDefault p-4"
269275
>
270-
<Image
271-
src={`${process.env.NEXT_PUBLIC_BACKEND_URL}/${org.logo?.url}`}
272-
alt={org.name}
273-
width={140}
274-
height={100}
275-
className=" object-contain"
276-
/>
277-
</div>
276+
<div className=" rounded-4 bg-surfaceDefault p-4">
277+
<Image
278+
src={`${process.env.NEXT_PUBLIC_BACKEND_URL}/${org.logo?.url}`}
279+
alt={org.name}
280+
width={140}
281+
height={100}
282+
className=" object-contain"
283+
/>
284+
</div>
285+
</Link>
278286
)
279287
)}
280288
</div>
@@ -288,18 +296,20 @@ const UseCaseDetailClient = () => {
288296
<div className="mt-8 flex h-fit w-fit flex-wrap items-center justify-start gap-6 ">
289297
{UseCaseDetails?.useCase?.partnerOrganizations?.map(
290298
(org: any) => (
291-
<div
299+
<Link
300+
href={`/publishers/organization/${org.slug + '_' + org.id}`}
292301
key={org.id}
293-
className=" rounded-4 bg-surfaceDefault p-4"
294302
>
295-
<Image
296-
src={`${process.env.NEXT_PUBLIC_BACKEND_URL}/${org.logo?.url}`}
297-
alt={org.name}
298-
width={140}
299-
height={100}
300-
className=" object-contain"
301-
/>
302-
</div>
303+
<div className=" rounded-4 bg-surfaceDefault p-4">
304+
<Image
305+
src={`${process.env.NEXT_PUBLIC_BACKEND_URL}/${org.logo?.url}`}
306+
alt={org.name}
307+
width={140}
308+
height={100}
309+
className=" object-contain"
310+
/>
311+
</div>
312+
</Link>
303313
)
304314
)}
305315
</div>
@@ -319,18 +329,23 @@ const UseCaseDetailClient = () => {
319329
<div className="mt-8 flex flex-wrap items-center justify-start gap-8">
320330
{UseCaseDetails?.useCase?.contributors?.map(
321331
(contributor: any) => (
322-
<Image
323-
alt={contributor.fullName}
324-
width={120}
325-
height={120}
326-
className="rounded-full object-cover"
332+
<Link
333+
href={`/publishers/${contributor.fullName + '_' + contributor.id}`}
327334
key={contributor.id}
328-
src={
329-
contributor.profilePicture?.url
330-
? `${process.env.NEXT_PUBLIC_BACKEND_URL}/${contributor.profilePicture?.url}`
331-
: '/profile.png'
332-
}
333-
/>
335+
>
336+
<Image
337+
alt={contributor.fullName}
338+
width={120}
339+
height={120}
340+
className="rounded-full object-cover"
341+
key={contributor.id}
342+
src={
343+
contributor.profilePicture?.url
344+
? `${process.env.NEXT_PUBLIC_BACKEND_URL}/${contributor.profilePicture?.url}`
345+
: '/profile.png'
346+
}
347+
/>
348+
</Link>
334349
)
335350
)}
336351
</div>

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

Lines changed: 45 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -29,15 +29,39 @@ const Metadata = ({ data, setOpen }: { data: any; setOpen?: any }) => {
2929
fetchTitle();
3030
}
3131
}, [data.useCase.platformUrl]);
32+
33+
const getOrganizationLink = () => {
34+
if (!data) return '/publishers';
35+
36+
if (data.useCase.isIndividualUsecase && data.useCase.user) {
37+
return `/publishers/${data.useCase.user.fullName + '_' + data.useCase.user.id}`;
38+
}
39+
40+
if (data.useCase.organization) {
41+
return `/publishers/organization/${data.useCase.organization.slug + '_' + data.useCase.organization.id}`;
42+
}
43+
44+
return '/publishers';
45+
};
46+
3247
const metadata = [
3348
{
3449
label: data.useCase.isIndividualUsecase ? 'Publisher' : 'Organization',
35-
value: data.useCase.isIndividualUsecase
36-
? data.useCase.user.fullName
37-
: data?.useCase.organization?.name,
38-
tooltipContent: data.useCase.isIndividualUsecase
39-
? data.useCase.user.fullName
40-
: data?.useCase.organization?.name,
50+
value: (
51+
<Tooltip
52+
content={
53+
data.useCase.isIndividualUsecase
54+
? data.useCase.user.fullName
55+
: data.useCase.organization.name
56+
}
57+
>
58+
<Link href={getOrganizationLink()}>
59+
{data.useCase.isIndividualUsecase
60+
? data.useCase.user.fullName
61+
: data?.useCase.organization?.name}
62+
</Link>
63+
</Tooltip>
64+
),
4165
},
4266
{
4367
label: 'Contact',
@@ -162,19 +186,21 @@ const Metadata = ({ data, setOpen }: { data: any; setOpen?: any }) => {
162186
</div>
163187
<Divider />
164188
<div className=" flex flex-col gap-8">
165-
<div className=" hidden rounded-2 border-1 border-solid border-greyExtralight p-2 lg:block">
166-
<Image
167-
height={140}
168-
width={100}
169-
src={image}
170-
alt={
171-
data.useCase.isIndividualUsecase
172-
? 'Publisher logo'
173-
: 'Organization logo'
174-
}
175-
className="w-full object-contain"
176-
/>
177-
</div>
189+
<Link href={getOrganizationLink()}>
190+
<div className="hidden rounded-2 border-1 border-solid border-greyExtralight p-2 lg:block">
191+
<Image
192+
height={140}
193+
width={100}
194+
src={image}
195+
alt={
196+
data.useCase.isIndividualUsecase
197+
? 'Publisher logo'
198+
: 'Organization logo'
199+
}
200+
className="w-full object-contain"
201+
/>
202+
</div>
203+
</Link>
178204
<div className="flex flex-col gap-8">
179205
{metadata.map((item, index) => (
180206
<div key={index} className="flex gap-2">

0 commit comments

Comments
 (0)