Skip to content

Commit a06d9dd

Browse files
bhavabhuthibhavabhuthi
committed
Add links for organization and individuals in use case details page
1 parent 00859f8 commit a06d9dd

2 files changed

Lines changed: 91 additions & 50 deletions

File tree

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

Lines changed: 46 additions & 31 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';
@@ -29,12 +30,15 @@ const UseCasedetails: any = graphql(`
2930
user {
3031
fullName
3132
email
33+
id
3234
profilePicture {
3335
url
3436
}
3537
}
3638
organization {
3739
name
40+
slug
41+
id
3842
contactEmail
3943
logo {
4044
url
@@ -117,13 +121,15 @@ const UseCasedetails: any = graphql(`
117121
}
118122
supportingOrganizations {
119123
id
124+
slug
120125
name
121126
logo {
122127
url
123128
}
124129
}
125130
partnerOrganizations {
126131
id
132+
slug
127133
name
128134
logo {
129135
url
@@ -281,18 +287,20 @@ const UseCaseDetailClient = () => {
281287
<div className="mt-8 flex h-fit w-fit flex-wrap items-center justify-start gap-6 ">
282288
{UseCaseDetails?.useCase?.supportingOrganizations?.map(
283289
(org: any) => (
284-
<div
290+
<Link
291+
href={`/publishers/organization/${org.slug + '_' + org.id}`}
285292
key={org.id}
286-
className=" rounded-4 bg-surfaceDefault p-4"
287293
>
288-
<Image
289-
src={`${process.env.NEXT_PUBLIC_BACKEND_URL}/${org.logo?.url}`}
290-
alt={org.name}
291-
width={140}
292-
height={100}
293-
className=" object-contain"
294-
/>
295-
</div>
294+
<div className=" rounded-4 bg-surfaceDefault p-4">
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+
</Link>
296304
)
297305
)}
298306
</div>
@@ -306,18 +314,20 @@ const UseCaseDetailClient = () => {
306314
<div className="mt-8 flex h-fit w-fit flex-wrap items-center justify-start gap-6 ">
307315
{UseCaseDetails?.useCase?.partnerOrganizations?.map(
308316
(org: any) => (
309-
<div
317+
<Link
318+
href={`/publishers/organization/${org.slug + '_' + org.id}`}
310319
key={org.id}
311-
className=" rounded-4 bg-surfaceDefault p-4"
312320
>
313-
<Image
314-
src={`${process.env.NEXT_PUBLIC_BACKEND_URL}/${org.logo?.url}`}
315-
alt={org.name}
316-
width={140}
317-
height={100}
318-
className=" object-contain"
319-
/>
320-
</div>
321+
<div className=" rounded-4 bg-surfaceDefault p-4">
322+
<Image
323+
src={`${process.env.NEXT_PUBLIC_BACKEND_URL}/${org.logo?.url}`}
324+
alt={org.name}
325+
width={140}
326+
height={100}
327+
className=" object-contain"
328+
/>
329+
</div>
330+
</Link>
321331
)
322332
)}
323333
</div>
@@ -338,18 +348,23 @@ const UseCaseDetailClient = () => {
338348
<div className="mt-8 flex flex-wrap items-center justify-start gap-8">
339349
{UseCaseDetails?.useCase?.contributors?.map(
340350
(contributor: any) => (
341-
<Image
342-
alt={contributor.fullName}
343-
width={120}
344-
height={120}
345-
className="rounded-full object-cover"
351+
<Link
352+
href={`/publishers/${contributor.fullName + '_' + contributor.id}`}
346353
key={contributor.id}
347-
src={
348-
contributor.profilePicture?.url
349-
? `${process.env.NEXT_PUBLIC_BACKEND_URL}/${contributor.profilePicture?.url}`
350-
: '/profile.png'
351-
}
352-
/>
354+
>
355+
<Image
356+
alt={contributor.fullName}
357+
width={120}
358+
height={120}
359+
className="rounded-full object-cover"
360+
key={contributor.id}
361+
src={
362+
contributor.profilePicture?.url
363+
? `${process.env.NEXT_PUBLIC_BACKEND_URL}/${contributor.profilePicture?.url}`
364+
: '/profile.png'
365+
}
366+
/>
367+
</Link>
353368
)
354369
)}
355370
</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)