Skip to content

Commit 7a568aa

Browse files
sanjaypinnasanjaypinna
committed
feat: create OrgPageClient component for organization details and metadata generation
1 parent 73f7236 commit 7a568aa

File tree

2 files changed

+129
-72
lines changed

2 files changed

+129
-72
lines changed

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

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
'use client';
2+
3+
import React from 'react';
4+
import { useQuery } from '@tanstack/react-query';
5+
import { graphql } from '@/gql';
6+
import { GraphQL } from '@/lib/api';
7+
import BreadCrumbs from '@/components/BreadCrumbs';
8+
import SidebarCard from '../../components/SidebarCard';
9+
import ProfileDetails from '../../components/ProfileDetails';
10+
import { Spinner } from 'opub-ui';
11+
12+
const orgInfoQuery = graphql(`
13+
query organizationData($id: String!) {
14+
organization(id: $id) {
15+
id
16+
created
17+
description
18+
contributedSectorsCount
19+
location
20+
twitterProfile
21+
githubProfile
22+
name
23+
logo {
24+
url
25+
}
26+
publishedUseCasesCount
27+
publishedDatasetsCount
28+
linkedinProfile
29+
}
30+
}
31+
`);
32+
33+
const OrgPageClient = ({ organizationSlug }: { organizationSlug: string }) => {
34+
const { data, isLoading } = useQuery(
35+
[`org_details_${organizationSlug}`],
36+
() =>
37+
GraphQL(orgInfoQuery, {}, {
38+
id: organizationSlug,
39+
}),
40+
{ refetchOnMount: true }
41+
);
42+
43+
const org = data?.organization;
44+
45+
return (
46+
<main className="bg-primaryBlue">
47+
<BreadCrumbs
48+
data={[
49+
{ href: '/', label: 'Home' },
50+
{ href: '/publishers', label: 'Publishers' },
51+
{
52+
href: '#',
53+
label: org?.name || organizationSlug,
54+
},
55+
]}
56+
/>
57+
<div className="container py-10 text-surfaceDefault">
58+
<div className="flex flex-wrap gap-10 lg:flex-nowrap">
59+
<div className="w-full lg:w-1/4">
60+
{isLoading ? (
61+
<div className="m-4 flex justify-center rounded-2 bg-surfaceDefault p-4">
62+
<Spinner color="highlight" />
63+
</div>
64+
) : (
65+
<SidebarCard data={org} type="organization" />
66+
)}
67+
</div>
68+
<div className="w-full">
69+
{isLoading ? (
70+
<div className="m-4 flex justify-center rounded-2 bg-surfaceDefault p-4">
71+
<Spinner color="highlight" />
72+
</div>
73+
) : (
74+
<ProfileDetails data={org} type="organization" />
75+
)}
76+
</div>
77+
</div>
78+
</div>
79+
</main>
80+
);
81+
};
82+
83+
export default OrgPageClient;

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

Lines changed: 46 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -1,89 +1,63 @@
1-
'use client';
2-
3-
import React from 'react';
4-
import { useParams } from 'next/navigation';
1+
import { Metadata } from 'next';
52
import { graphql } from '@/gql';
6-
import { useQuery } from '@tanstack/react-query';
73

84
import { GraphQL } from '@/lib/api';
9-
import { Loading } from '@/components/loading';
10-
import ProfileDetails from '../../components/ProfileDetails';
11-
import { Spinner } from 'opub-ui';
12-
import SidebarCard from '../../components/SidebarCard';
13-
import BreadCrumbs from '@/components/BreadCrumbs';
5+
import { generatePageMetadata } from '@/lib/utils';
6+
import OrgPageClient from './OrgPageClient';
147

15-
const orgInfoQuery: any = graphql(`
16-
query organizationData($id: String!) {
8+
const orgDataQuery = graphql(`
9+
query orgData($id: String!) {
1710
organization(id: $id) {
1811
id
19-
created
20-
description
21-
contributedSectorsCount
22-
location
23-
twitterProfile
24-
githubProfile
2512
name
13+
description
2614
logo {
2715
url
2816
}
29-
publishedUseCasesCount
30-
publishedDatasetsCount
31-
linkedinProfile
3217
}
3318
}
3419
`);
3520

36-
const OrgPage = () => {
37-
const params = useParams();
38-
const organizationInfo: any = useQuery([`${params.publisherSlug}`], () =>
39-
GraphQL(
40-
orgInfoQuery,
41-
{
42-
// Entity Headers if present
43-
},
44-
{ id: params.organizationSlug }
45-
)
46-
);
21+
export async function generateMetadata({
22+
params,
23+
}: {
24+
params: { organizationSlug: string };
25+
}): Promise<Metadata> {
26+
const data = await GraphQL(orgDataQuery, {}, { id: params.organizationSlug });
4727

48-
return (
49-
<main className="bg-primaryBlue">
50-
<BreadCrumbs
51-
data={[
52-
{ href: '/', label: 'Home' },
53-
{ href: '/publishers', label: 'Publishers' },
54-
{
55-
href: '#',
56-
label: `${organizationInfo?.data?.organization?.name || ''} `,
57-
},
58-
]}
59-
/>
60-
{
61-
<div className="container py-10 text-surfaceDefault">
62-
<div className="flex flex-wrap gap-10 lg:flex-nowrap">
63-
<div className="w-full lg:w-1/4">
64-
{organizationInfo?.isLoading ? (
65-
<div className="m-4 flex justify-center rounded-2 bg-surfaceDefault p-4">
66-
<Spinner color="highlight" />
67-
</div>
68-
) : (
69-
<SidebarCard data={organizationInfo?.data?.organization} type={'organization'}/>
70-
)}
71-
</div>
72-
<div className="w-full">
73-
{organizationInfo?.isLoading ? (
74-
<div className="m-4 flex justify-center rounded-2 bg-surfaceDefault p-4">
75-
<Spinner color="highlight" />
76-
</div>
77-
) : (
78-
<ProfileDetails data={organizationInfo?.data?.organization} type={'organization'}/>
28+
const org = data.organization;
7929

80-
)}
81-
</div>
82-
</div>
83-
</div>
84-
}
85-
</main>
86-
);
87-
};
30+
return generatePageMetadata({
31+
title: `${org?.name} | Publisher on CivicDataSpace`,
32+
description:
33+
org?.description || 'Explore datasets and use cases by this publisher.',
34+
keywords: [
35+
'CivicDataSpace Publisher',
36+
'Open Data Contributor',
37+
'Use Case Publisher',
38+
'Dataset Publisher',
39+
'CivicTech',
40+
'Open Government Data',
41+
],
42+
openGraph: {
43+
title: `${org?.name} | Publisher on CivicDataSpace`,
44+
description:
45+
org?.description || 'Explore datasets and use cases by this publisher.',
46+
type: 'profile',
47+
siteName: 'CivicDataSpace',
48+
url: `${process.env.NEXT_PUBLIC_PLATFORM_URL}/publishers/${params.organizationSlug}`,
49+
image: org?.logo?.url
50+
? `${process.env.NEXT_PUBLIC_BACKEND_URL}/${org.logo.url}`
51+
: `${process.env.NEXT_PUBLIC_PLATFORM_URL}/og.png`,
52+
locale: 'en_US',
53+
},
54+
});
55+
}
8856

89-
export default OrgPage;
57+
export default function OrgPage({
58+
params,
59+
}: {
60+
params: { organizationSlug: string };
61+
}) {
62+
return <OrgPageClient organizationSlug={params.organizationSlug} />;
63+
}

0 commit comments

Comments
 (0)