Skip to content

Commit 5dde989

Browse files
bhavabhuthibhavabhuthi
committed
integrate queries in dashboard for dataspaces and organizations listing
1 parent 28c2089 commit 5dde989

File tree

2 files changed

+115
-50
lines changed

2 files changed

+115
-50
lines changed

‎app/[locale]/dashboard/[entityType]/page.tsx‎

Lines changed: 78 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -3,36 +3,60 @@
33
import Image from 'next/image';
44
import Link from 'next/link';
55
import { useParams, usePathname } from 'next/navigation';
6+
import { useQuery } from '@tanstack/react-query';
67
import { Icon, Text } from 'opub-ui';
78

9+
import { GraphQL } from '@/lib/api';
810
import { cn } from '@/lib/utils';
911
import BreadCrumbs from '@/components/BreadCrumbs';
1012
import { Icons } from '@/components/icons';
1113
import { DashboardHeader } from '../components/dashboard-header';
14+
import LoadingPage from '../loading';
1215
import styles from './../components/styles.module.scss';
16+
import { allDataSpacesListingDoc, allOrganizationsListingDoc } from './schema';
1317

1418
const Page = () => {
1519
const pathname = usePathname();
1620

17-
const params = useParams();
21+
const params = useParams<{ entityType: string }>();
1822

19-
const dataspacesList = [
20-
{
21-
name: 'Open Budgets India',
22-
slug: 'open-budgets-india',
23-
},
24-
];
23+
const allOrganizationsList: {
24+
data: any;
25+
isLoading: boolean;
26+
error: any;
27+
isError: boolean;
28+
} = useQuery([`all_organizations_list_page`], () =>
29+
GraphQL(
30+
allOrganizationsListingDoc,
31+
{
32+
// Entity Headers if present
33+
},
34+
{
35+
options: {
36+
skip: params.entityType !== 'organization',
37+
},
38+
}
39+
)
40+
);
2541

26-
const organizationsList = [
27-
{
28-
name: 'CBGA',
29-
slug: 'civicdatalab',
30-
},
31-
{
32-
name: 'Assam Finance Department',
33-
slug: 'civicdatalab',
34-
},
35-
];
42+
const allDataSpacesList: {
43+
data: any;
44+
isLoading: boolean;
45+
error: any;
46+
isError: boolean;
47+
} = useQuery([`all_dataspaces_list_page`], () =>
48+
GraphQL(
49+
allDataSpacesListingDoc,
50+
{
51+
// Entity Headers if present
52+
},
53+
{
54+
options: {
55+
skip: params.entityType !== 'dataspace',
56+
},
57+
}
58+
)
59+
);
3660

3761
return (
3862
<div className=" bg-surfaceDefault">
@@ -57,31 +81,34 @@ const Page = () => {
5781
</div>
5882
<div className="m-auto flex w-11/12 flex-col">
5983
<DashboardHeader currentPath={pathname} />
60-
<div className={cn(styles.Main)}>
61-
<div className="flex flex-wrap gap-24">
62-
{[
63-
...(params.entityType === 'organization'
64-
? organizationsList
65-
: dataspacesList),
66-
]?.map((orgItem) => (
67-
<div
68-
key={orgItem.slug}
69-
className="flex max-w-64 flex-col items-center gap-3 rounded-2 border-2 border-solid border-baseGraySlateSolid4 px-4 py-5 text-center"
70-
>
71-
<Link
72-
href={`/dashboard/${params.entityType}/${orgItem.slug}/dataset`}
73-
id={orgItem.slug}
84+
{allDataSpacesList.isLoading || allOrganizationsList.isLoading ? (
85+
<LoadingPage />
86+
) : (
87+
<div className={cn(styles.Main)}>
88+
<div className="flex flex-wrap gap-24">
89+
{[
90+
...(params.entityType === 'organization'
91+
? allOrganizationsList.data.organisations
92+
: allDataSpacesList.data.dataspaces),
93+
]?.map((orgItem) => (
94+
<div
95+
key={orgItem.slug}
96+
className="flex max-w-64 flex-col items-center gap-3 rounded-2 border-2 border-solid border-baseGraySlateSolid4 px-4 py-5 text-center"
7497
>
75-
<div className="border-var(--border-radius-5) rounded-2 ">
76-
<Image
77-
src={'/obi.jpg'}
78-
width={200}
79-
height={200}
80-
alt={'Organization Logo'}
81-
/>
82-
</div>
98+
<Link
99+
href={`/dashboard/${params.entityType}/${orgItem.slug}/dataset`}
100+
id={orgItem.slug}
101+
>
102+
<div className="border-var(--border-radius-5) rounded-2 ">
103+
<Image
104+
src={'/obi.jpg'}
105+
width={200}
106+
height={200}
107+
alt={'Organization Logo'}
108+
/>
109+
</div>
83110

84-
{/* <LinkButton
111+
{/* <LinkButton
85112
href={`/dashboard/organization/${orgItem.slug}/dataset`}
86113
>
87114
Manage Datasets
@@ -91,20 +118,21 @@ const Page = () => {
91118
>
92119
Manage Consumers
93120
</LinkButton> */}
94-
</Link>
95-
<div>
96-
<Text variant="headingMd">{orgItem.name}</Text>
121+
</Link>
122+
<div>
123+
<Text variant="headingMd">{orgItem.name}</Text>
124+
</div>
97125
</div>
126+
))}
127+
<div className="flex h-72 w-56 flex-col items-center justify-center gap-3 rounded-2 bg-baseGraySlateSolid6 p-4">
128+
<Icon source={Icons.plus} size={40} color="success" />
129+
<Text alignment="center" variant="headingMd">
130+
{`Add New ${params.entityType === 'organization' ? 'Organization' : 'Data Space'}`}
131+
</Text>
98132
</div>
99-
))}
100-
<div className="flex h-72 w-56 flex-col items-center justify-center gap-3 rounded-2 bg-baseGraySlateSolid6 p-4">
101-
<Icon source={Icons.plus} size={40} color="success" />
102-
<Text alignment="center" variant="headingMd">
103-
{`Add New ${params.entityType === 'organization' ? 'Organization' : 'Data Space'}`}
104-
</Text>
105133
</div>
106134
</div>
107-
</div>
135+
)}
108136
</div>
109137
</div>
110138
);

‎app/[locale]/dashboard/[entityType]/schema.ts‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import { graphql } from '@/gql';
2+
3+
export const allOrganizationsListingDoc: any = graphql(`
4+
query allOrganizationsListingDoc {
5+
organisations {
6+
id
7+
name
8+
logo {
9+
name
10+
path
11+
size
12+
url
13+
width
14+
height
15+
}
16+
slug
17+
}
18+
}
19+
`);
20+
21+
export const allDataSpacesListingDoc: any = graphql(`
22+
query AllDataSpacesListDoc {
23+
dataspaces {
24+
id
25+
name
26+
logo {
27+
name
28+
path
29+
size
30+
url
31+
width
32+
height
33+
}
34+
slug
35+
}
36+
}
37+
`);

0 commit comments

Comments
 (0)