Skip to content

Commit 53d27e6

Browse files
sanjaypinnasanjaypinna
authored
Merge pull request #266 from CivicDataLab/265-update-org-and-publisher-details-in-usecases
Update Landing page and org details in Usecase card
2 parents ef198d2 + d858b86 commit 53d27e6

File tree

12 files changed

+329
-172
lines changed

12 files changed

+329
-172
lines changed

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

Lines changed: 60 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,43 @@
33
import Image from 'next/image';
44
import Link from 'next/link';
55
import { useRouter } from 'next/navigation';
6-
import { SearchInput, Tag, Text } from 'opub-ui';
6+
import { graphql } from '@/gql';
7+
import { useQuery } from '@tanstack/react-query';
8+
import { SearchInput, Spinner, Tag, Text } from 'opub-ui';
79

10+
import { GraphQL } from '@/lib/api';
811
import { cn } from '@/lib/utils';
912
import Styles from '../page.module.scss';
1013

14+
const statsInfo: any = graphql(`
15+
query StatsList {
16+
stats {
17+
totalUsers
18+
totalPublishedDatasets
19+
totalPublishers
20+
totalPublishedUsecases
21+
}
22+
}
23+
`);
24+
25+
// const tagsInfo: any = graphql(`
26+
// query TagsData {
27+
// tags {
28+
// id
29+
// value
30+
// }
31+
// }
32+
// `);
33+
1134
export const Content = () => {
1235
const router = useRouter();
36+
const Stats: { data: any; isLoading: any } = useQuery([`statsDetails`], () =>
37+
GraphQL(statsInfo, {}, [])
38+
);
39+
// const Tags: { data: any; isLoading: any } = useQuery([`tagDetails`], () =>
40+
// GraphQL(tagsInfo, {}, [])
41+
// );
42+
1343
const handleSearch = (value: string) => {
1444
if (value) {
1545
router.push(`/datasets?query=${encodeURIComponent(value)}`);
@@ -18,20 +48,20 @@ export const Content = () => {
1848
const Metrics = [
1949
{
2050
label: 'Datasets',
21-
count: '2k',
51+
count: Stats?.data?.stats?.totalPublishedDatasets,
2252
},
2353
{
2454
label: 'Use Cases',
25-
count: '15',
55+
count: Stats?.data?.stats?.totalPublishedUsecases,
2656
},
2757

2858
{
29-
label: 'Consumers',
30-
count: '24k',
59+
label: 'Publishers',
60+
count: Stats?.data?.stats?.totalPublishers,
3161
},
3262
{
33-
label: 'Publishers',
34-
count: '56',
63+
label: 'Users',
64+
count: Stats?.data?.stats?.totalUsers,
3565
},
3666
];
3767

@@ -44,8 +74,8 @@ export const Content = () => {
4474
'Urban Development',
4575
];
4676
return (
47-
<main className="bg-primaryBlue py-6 md:py-10 md:px-8 lg:py-20">
48-
<div className="container md:px-12 px-10 lg:px-8 flex items-center justify-around gap-20 ">
77+
<main className="bg-primaryBlue py-6 md:px-8 md:py-10 lg:py-20">
78+
<div className="container flex items-center justify-around gap-20 px-10 md:px-12 lg:px-8 ">
4979
<div className="flex flex-col gap-11 lg:w-[49%]">
5080
<div className="flex flex-col">
5181
<Text variant="heading3xl" color="onBgDefault">
@@ -62,21 +92,27 @@ export const Content = () => {
6292
with CivicDataLab{' '}
6393
</Text>
6494
</div>
65-
<div className="flex flex-wrap items-center gap-4 md:gap-0 lg:gap-0 ">
66-
{Metrics.map((item, index) => (
67-
<div
68-
key={index}
69-
className="flex flex-col border-x-[1px] border-solid border-tertiaryAccent px-4"
70-
>
71-
<Text variant="heading3xl" className=" text-secondaryOrange">
72-
{item.count}
73-
</Text>
74-
<Text color="onBgDefault" className=" w-20">
75-
{item.label}
76-
</Text>
77-
</div>
78-
))}
79-
</div>
95+
{Stats.isLoading ? (
96+
<div className=" flex w-fit justify-center rounded-2 bg-surfaceDefault p-4">
97+
<Spinner />
98+
</div>
99+
) : (
100+
<div className="flex flex-wrap items-center gap-4 md:gap-0 lg:gap-0 ">
101+
{Metrics.map((item, index) => (
102+
<div
103+
key={index}
104+
className="flex flex-col border-x-[1px] border-solid border-tertiaryAccent px-4"
105+
>
106+
<Text variant="heading3xl" className=" text-secondaryOrange">
107+
{item.count}
108+
</Text>
109+
<Text color="onBgDefault" className=" w-20 ">
110+
{item.label}
111+
</Text>
112+
</div>
113+
))}
114+
</div>
115+
)}
80116
<div className="w-full">
81117
<SearchInput
82118
className={cn(Styles.Search)}

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

Lines changed: 25 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,19 @@ const useCasesListDoc: any = graphql(`
3131
summary
3232
slug
3333
datasetCount
34+
isIndividualUsecase
35+
user {
36+
fullName
37+
profilePicture {
38+
url
39+
}
40+
}
41+
organization {
42+
name
43+
logo {
44+
url
45+
}
46+
}
3447
logo {
3548
path
3649
}
@@ -81,7 +94,7 @@ const UseCasesListingPage = () => {
8194

8295
return (
8396
<div className=" container pt-10 md:px-8 lg:pt-20">
84-
<div className="flex flex-col gap-2 md:px-12 px-4 lg:px-12 ">
97+
<div className="flex flex-col gap-2 px-4 md:px-12 lg:px-12 ">
8598
<Text variant="heading3xl">Recent UseCases</Text>
8699
<div className="flex flex-wrap justify-between gap-2 ">
87100
<Text variant="headingLg" fontWeight="medium">
@@ -99,7 +112,7 @@ const UseCasesListingPage = () => {
99112
</Button>
100113
</div>
101114
</div>
102-
<div className='mt-12'>
115+
<div className="mt-12">
103116
<Carousel className="flex w-full justify-between">
104117
<CarouselPrevious />
105118

@@ -143,7 +156,16 @@ const UseCasesListingPage = () => {
143156
icon: `/Sectors/${item?.sectors[0]?.name}.svg`,
144157
label: 'Sectors',
145158
},
146-
{ icon: '/fallback.svg', label: 'Published by' },
159+
{
160+
icon: item.isIndividualUsecase
161+
? item?.user?.profilePicture
162+
? `${process.env.NEXT_PUBLIC_BACKEND_URL}/${item.user.profilePicture.url}`
163+
: '/profile.png'
164+
: item?.organization?.logo
165+
? `${process.env.NEXT_PUBLIC_BACKEND_URL}/${item.organization.logo.url}`
166+
: '/org.png',
167+
label: 'Published by',
168+
},
147169
]}
148170
imageUrl={`${process.env.NEXT_PUBLIC_BACKEND_URL}/${item.logo?.path.replace('/code/files/', '')}`}
149171
description={item.summary}

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,6 @@ const SimilarDatasets: React.FC<Props> = ({ showCharts }) => {
9494
)
9595
);
9696

97-
console.log(SimilatDatasetdetails?.data?.getDataset);
9897

9998
return (
10099
<div className="py-4 md:py-10 lg:py-20">

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

Lines changed: 22 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,14 @@
1+
import React from 'react';
12
import Image from 'next/image';
23
import Link from 'next/link';
3-
import { Text } from 'opub-ui';
4-
import React from 'react';
5-
4+
import { Text, Tooltip } from 'opub-ui';
65

76
interface CardProps {
87
data: any;
98
}
109

1110
const PublisherCard: React.FC<CardProps> = ({ data }) => {
12-
return (
11+
return (
1312
<div className="my-10">
1413
<div className=" grid w-full grid-cols-1 gap-10 md:grid-cols-2 lg:grid-cols-3 lg:gap-16">
1514
{data.map((item: any, index: any) => (
@@ -62,12 +61,29 @@ const PublisherCard: React.FC<CardProps> = ({ data }) => {
6261
{item.publishedDatasetsCount} Datasets
6362
</Text>
6463
</div>
65-
<div className=" flex w-fit rounded-full border-1 border-solid border-[#D5E1EA] px-3 py-1">
64+
{/* <div className=" flex w-fit rounded-full border-1 border-solid border-[#D5E1EA] px-3 py-1">
6665
<Text variant="bodySm" className=" text-primaryBlue">
6766
3 Followers{' '}
6867
</Text>
69-
</div>
68+
</div> */}
7069
</div>
70+
{(item?.bio || item?.description) && (
71+
<div>
72+
<Tooltip
73+
content={
74+
item.__typename === 'TypeUser'
75+
? item?.bio
76+
: item?.description
77+
}
78+
>
79+
<Text>
80+
{item.__typename === 'TypeUser'
81+
? item.bio.slice(0, 100) + '...'
82+
: item.description.slice(0, 100) + '...'}
83+
</Text>
84+
</Tooltip>
85+
</div>
86+
)}
7187
</Link>
7288
))}
7389
</div>

‎app/[locale]/(user)/publishers/components/Datasets.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -137,7 +137,7 @@ const Datasets = ({ type }: { type: 'organization' | 'Publisher' }) => {
137137
)}
138138
>
139139
{PublishedDatasetsList.isLoading ? (
140-
<div className=" mt-8 flex justify-center">
140+
<div className=" flex w-fit justify-center rounded-2 bg-surfaceDefault p-4">
141141
<Spinner />
142142
</div>
143143
) : (

‎app/[locale]/(user)/publishers/components/UseCases.tsx‎

Lines changed: 24 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,19 @@ const userPublishedUseCasesDoc: any = graphql(`
1515
title
1616
summary
1717
slug
18+
isIndividualUsecase
19+
user {
20+
fullName
21+
profilePicture {
22+
url
23+
}
24+
}
25+
organization {
26+
name
27+
logo {
28+
url
29+
}
30+
}
1831
metadata {
1932
metadataItem {
2033
id
@@ -100,7 +113,6 @@ const UseCases = ({ type }: { type: 'organization' | 'Publisher' }) => {
100113
? PublishedUseCasesList.data?.organizationPublishedUseCases
101114
: PublishedUseCasesList.data?.userPublishedUseCases;
102115

103-
104116
return (
105117
<div>
106118
<div
@@ -109,7 +121,7 @@ const UseCases = ({ type }: { type: 'organization' | 'Publisher' }) => {
109121
)}
110122
>
111123
{PublishedUseCasesList.isLoading ? (
112-
<div className=" mt-8 flex justify-center">
124+
<div className=" flex w-fit justify-center rounded-2 bg-surfaceDefault p-4">
113125
<Spinner />
114126
</div>
115127
) : (
@@ -145,7 +157,16 @@ const UseCases = ({ type }: { type: 'organization' | 'Publisher' }) => {
145157
icon: `/Sectors/${item?.sectors[0]?.name}.svg`,
146158
label: 'Sectors',
147159
},
148-
{ icon: '/fallback.svg', label: 'Published by' },
160+
{
161+
icon: item.isIndividualUsecase
162+
? item?.user?.profilePicture
163+
? `${process.env.NEXT_PUBLIC_BACKEND_URL}/${item.user.profilePicture.url}`
164+
: '/profile.png'
165+
: item?.organization?.logo
166+
? `${process.env.NEXT_PUBLIC_BACKEND_URL}/${item.organization.logo.url}`
167+
: '/org.png',
168+
label: 'Published by',
169+
},
149170
]}
150171
description={item.summary}
151172
iconColor="warning"

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ const getAllPublishers: any = graphql(`
1818
... on TypeOrganization {
1919
name
2020
id
21+
description
2122
logo {
2223
url
2324
}
@@ -28,6 +29,7 @@ const getAllPublishers: any = graphql(`
2829
... on TypeUser {
2930
fullName
3031
id
32+
bio
3133
profilePicture {
3234
url
3335
}

0 commit comments

Comments
 (0)