Skip to content

Commit fa7bab4

Browse files
Deepthi-ChandDeepthi-Chand
authored
Merge pull request #305 from CivicDataLab/303-clickable-contributors-in-all-the-details-pages
2 parents 67ae62b + a06d9dd commit fa7bab4

File tree

6 files changed

+175
-75
lines changed

6 files changed

+175
-75
lines changed

‎app/[locale]/(user)/datasets/[datasetIdentifier]/components/Metadata/index.tsx‎

Lines changed: 39 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,10 @@ import React, { useEffect, useState } from 'react';
22
import Image from 'next/image';
33
import Link from 'next/link';
44
import { Button, Divider, Icon, Tag, Text, Tooltip } from 'opub-ui';
5-
import Styles from '../../../dataset.module.scss'
5+
66
import { cn, formatDate, getWebsiteTitle } from '@/lib/utils';
77
import { Icons } from '@/components/icons';
8+
import Styles from '../../../dataset.module.scss';
89

910
interface MetadataProps {
1011
data: any;
@@ -77,6 +78,19 @@ const MetadataComponent: React.FC<MetadataProps> = ({ data, setOpen }) => {
7778
: data?.organization?.logo
7879
? `${process.env.NEXT_PUBLIC_BACKEND_URL}/${data.organization.logo.url}`
7980
: '/org.png';
81+
const getPublisherURL = (data: any) => {
82+
if (!data) return '/publishers';
83+
84+
if (data.isIndividualDataset && data.user) {
85+
return `/publishers/${data.user.fullName + '_' + data.user.id}`;
86+
}
87+
88+
if (data.organization) {
89+
return `/publishers/organization/${data.organization.slug + '_' + data.organization.id}`;
90+
}
91+
92+
return '/publishers';
93+
};
8094

8195
return (
8296
<div className="flex flex-col gap-5 lg:gap-10">
@@ -102,15 +116,19 @@ const MetadataComponent: React.FC<MetadataProps> = ({ data, setOpen }) => {
102116
<Divider />
103117
<div className=" flex flex-col gap-8">
104118
<div className=" hidden rounded-2 border-1 border-solid border-greyExtralight p-2 lg:block">
105-
<Image
106-
height={140}
107-
width={100}
108-
src={image}
109-
alt={
110-
data.isIndividualDataset ? 'Publisher logo' : 'Organization logo'
111-
}
112-
className="w-full object-contain"
113-
/>
119+
<Link href={getPublisherURL(data)}>
120+
<Image
121+
height={140}
122+
width={100}
123+
src={image}
124+
alt={
125+
data.isIndividualDataset
126+
? 'Publisher logo'
127+
: 'Organization logo'
128+
}
129+
className="w-full object-contain"
130+
/>
131+
</Link>
114132
</div>
115133
<div className="flex items-center gap-2 ">
116134
<Text className="min-w-[120px] basis-1/4 uppercase" variant="bodyMd">
@@ -123,15 +141,17 @@ const MetadataComponent: React.FC<MetadataProps> = ({ data, setOpen }) => {
123141
: data.organization.name
124142
}
125143
>
126-
<Text
127-
className="line-clamp-2 "
128-
variant="bodyLg"
129-
fontWeight="medium"
130-
>
131-
{data.isIndividualDataset
132-
? data.user.fullName
133-
: data.organization.name}
134-
</Text>
144+
<Link href={getPublisherURL(data)}>
145+
<Text
146+
className="line-clamp-2 "
147+
variant="bodyLg"
148+
fontWeight="medium"
149+
>
150+
{data.isIndividualDataset
151+
? data.user.fullName
152+
: data.organization.name}
153+
</Text>
154+
</Link>
135155
</Tooltip>
136156
</div>
137157
<div className="flex gap-2 ">

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

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { Metadata } from 'next';
22
import { graphql } from '@/gql';
33

44
import { GraphQL } from '@/lib/api';
5-
import { generatePageMetadata } from '@/lib/utils';
5+
import { extractPublisherId, generatePageMetadata } from '@/lib/utils';
66
import PublisherPageClient from './PublisherPageClient';
77

88
const userInfo = graphql(`
@@ -17,12 +17,17 @@ const userInfo = graphql(`
1717
}
1818
}
1919
`);
20+
2021
export async function generateMetadata({
2122
params,
2223
}: {
2324
params: { publisherSlug: string };
2425
}): Promise<Metadata> {
25-
const data = await GraphQL(userInfo, {}, { userId: params.publisherSlug });
26+
const data = await GraphQL(
27+
userInfo,
28+
{},
29+
{ userId: extractPublisherId(params.publisherSlug) }
30+
);
2631

2732
const user = data.userById;
2833

@@ -58,5 +63,9 @@ export default function PublisherPage({
5863
}: {
5964
params: { publisherSlug: string };
6065
}) {
61-
return <PublisherPageClient publisherSlug={params.publisherSlug} />;
66+
return (
67+
<PublisherPageClient
68+
publisherSlug={extractPublisherId(params.publisherSlug)}
69+
/>
70+
);
6271
}

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

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { Metadata } from 'next';
22
import { graphql } from '@/gql';
33

44
import { GraphQL } from '@/lib/api';
5-
import { generatePageMetadata } from '@/lib/utils';
5+
import { extractPublisherId, generatePageMetadata } from '@/lib/utils';
66
import OrgPageClient from './OrgPageClient';
77

88
const orgDataQuery = graphql(`
@@ -23,7 +23,11 @@ export async function generateMetadata({
2323
}: {
2424
params: { organizationSlug: string };
2525
}): Promise<Metadata> {
26-
const data = await GraphQL(orgDataQuery, {}, { id: params.organizationSlug });
26+
const data = await GraphQL(
27+
orgDataQuery,
28+
{},
29+
{ id: extractPublisherId(params.organizationSlug) }
30+
);
2731

2832
const org = data.organization;
2933

@@ -59,5 +63,9 @@ export default function OrgPage({
5963
}: {
6064
params: { organizationSlug: string };
6165
}) {
62-
return <OrgPageClient organizationSlug={params.organizationSlug} />;
66+
return (
67+
<OrgPageClient
68+
organizationSlug={extractPublisherId(params.organizationSlug)}
69+
/>
70+
);
6371
}

‎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)