Skip to content

Commit 3a66819

Browse files
sanjaypinnasanjaypinna
authored
Merge pull request #276 from CivicDataLab/dev
Update main with latest dev
2 parents 8f684cc + dc74ea5 commit 3a66819

62 files changed

Lines changed: 1736 additions & 1140 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

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

Lines changed: 67 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useEffect, useReducer, useState } from 'react';
1+
import React, { useEffect, useReducer, useRef, useState } from 'react';
22
import Image from 'next/image';
33
import { useRouter } from 'next/navigation';
44
import GraphqlPagination from '@/app/[locale]/dashboard/components/GraphqlPagination/graphqlPagination';
@@ -219,12 +219,18 @@ const ListingComponent: React.FC<ListingProps> = ({
219219
const datasetDetails = facets?.results ?? [];
220220

221221
useUrlParams(queryParams, setQueryParams, setVariables);
222+
const latestFetchId = useRef(0);
222223

223224
useEffect(() => {
224225
if (variables) {
226+
const currentFetchId = ++latestFetchId.current;
227+
225228
fetchDatasets(variables)
226229
.then((res) => {
227-
setFacets(res);
230+
// Only set if this is the latest call
231+
if (currentFetchId === latestFetchId.current) {
232+
setFacets(res);
233+
}
228234
})
229235
.catch((err) => {
230236
console.error(err);
@@ -471,36 +477,71 @@ const ListingComponent: React.FC<ListingProps> = ({
471477
: item?.organization?.logo
472478
? `${process.env.NEXT_PUBLIC_BACKEND_URL}/${item.organization.logo}`
473479
: '/org.png';
480+
const Geography = item.metadata.filter(
481+
(item: any) => item.metadata_item.label === 'Geography'
482+
)[0]?.value;
483+
484+
const MetadataContent = [
485+
{
486+
icon: Icons.calendar,
487+
label: 'Date',
488+
value: formatDate(item.modified),
489+
tooltip: 'Date',
490+
},
491+
{
492+
icon: Icons.download,
493+
label: 'Download',
494+
value: item.download_count.toString(),
495+
tooltip: 'Download',
496+
},
497+
];
498+
if (Geography) {
499+
MetadataContent.push({
500+
icon: Icons.globe,
501+
label: 'Geography',
502+
value: Geography,
503+
tooltip: 'Geography',
504+
});
505+
}
506+
507+
if (item.has_charts && view === 'expanded') {
508+
MetadataContent.push({
509+
icon: Icons.chart,
510+
label: '',
511+
value: 'With Charts',
512+
tooltip: 'Charts',
513+
});
514+
}
515+
516+
const FooterContent = [
517+
{
518+
icon: `/Sectors/${item.sectors[0]}.svg`,
519+
label: 'Sectors',
520+
tooltip: `${item.sectors[0]}`,
521+
},
522+
...(item.has_charts && view !== 'expanded'
523+
? [
524+
{
525+
icon: `/chart-bar.svg`,
526+
label: 'Charts',
527+
tooltip: 'Charts',
528+
},
529+
]
530+
: []),
531+
{
532+
icon: image,
533+
label: 'Published by',
534+
tooltip: `${item.is_individual_dataset ? item.user?.name : item.organization?.name}`,
535+
},
536+
];
474537

475538
const commonProps = {
476539
title: item.title,
477540
description: item.description,
478-
metadataContent: [
479-
{
480-
icon: Icons.calendar,
481-
label: 'Date',
482-
value: formatDate(item.modified),
483-
},
484-
{
485-
icon: Icons.download,
486-
label: 'Download',
487-
value: item.download_count.toString(),
488-
},
489-
{
490-
icon: Icons.globe,
491-
label: 'Geography',
492-
value: 'India',
493-
},
494-
],
541+
metadataContent: MetadataContent,
495542
tag: item.tags,
496543
formats: item.formats,
497-
footerContent: [
498-
{
499-
icon: `/Sectors/${item.sectors[0]}.svg`,
500-
label: 'Sectors',
501-
},
502-
{ icon: image, label: 'Published by' },
503-
],
544+
footerContent: FooterContent,
504545
};
505546

506547
return (

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

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
'use client';
2+
3+
import { useEffect, useState } from 'react';
4+
5+
interface PdfPreviewProps {
6+
url: string;
7+
}
8+
9+
export default function PdfPreview({ url }: PdfPreviewProps) {
10+
const [previewUrl, setPreviewUrl] = useState<string | null>(null);
11+
12+
useEffect(() => {
13+
const fetchPdf = async () => {
14+
try {
15+
const response = await fetch(url);
16+
const blobData = await response.blob();
17+
18+
// Manually set MIME type to PDF (in case it's sent as octet-stream)
19+
const pdfBlob = new Blob([blobData], { type: 'application/pdf' });
20+
const objectUrl = URL.createObjectURL(pdfBlob);
21+
setPreviewUrl(objectUrl);
22+
} catch (error) {
23+
console.error('Failed to load PDF:', error);
24+
}
25+
};
26+
27+
fetchPdf();
28+
29+
return () => {
30+
if (previewUrl) {
31+
URL.revokeObjectURL(previewUrl);
32+
}
33+
};
34+
}, [url]);
35+
36+
if (!previewUrl) return <p>Loading PDF preview...</p>;
37+
38+
return (
39+
<object
40+
data={previewUrl}
41+
type="application/pdf"
42+
width="100%"
43+
height="500px"
44+
>
45+
<p>PDF preview not available</p>
46+
</object>
47+
);
48+
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ const Sectors = () => {
6363
<div className="mt-12 grid w-full grid-cols-1 gap-6 px-4 md:grid-cols-2 md:px-12 lg:grid-cols-3 lg:px-12">
6464
{data?.sectors.map((sectors: any) => (
6565
<Link
66-
href={`/sectors/${sectors.slug}?sectors=${capitalizeWords(sectors.slug)}`}
66+
href={`/sectors/${sectors.slug}?size=9&page=1&sort=recent&sectors=${capitalizeWords(sectors.slug)}`}
6767
key={sectors.id}
6868
>
6969
<div className="flex w-full items-center gap-5 rounded-4 bg-surfaceDefault p-7 shadow-card">

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

Lines changed: 21 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -49,11 +49,7 @@ const DetailsQuery: any = graphql(`
4949
}
5050
`);
5151

52-
interface DetailsProps {
53-
setShowcharts: (vars: boolean) => void;
54-
}
55-
56-
const Details: React.FC<DetailsProps> = ({ setShowcharts }) => {
52+
const Details: React.FC = () => {
5753
const params = useParams();
5854
const chartRef = useRef<ReactECharts>(null);
5955

@@ -62,12 +58,6 @@ const Details: React.FC<DetailsProps> = ({ setShowcharts }) => {
6258
() => GraphQL(DetailsQuery, {}, { datasetId: params.datasetIdentifier })
6359
);
6460

65-
useEffect(() => {
66-
if (data && data?.getChartData.length <= 0) {
67-
setShowcharts(false);
68-
}
69-
}, [data]);
70-
7161
const renderChart = (item: any) => {
7262
if (item.chartType === 'ASSAM_DISTRICT' || item.chartType === 'ASSAM_RC') {
7363
// Register the map
@@ -84,35 +74,20 @@ const Details: React.FC<DetailsProps> = ({ setShowcharts }) => {
8474
const toggleDescription = () => setIsexpanded(!isexpanded);
8575

8676
return (
87-
<div className=" flex w-full flex-col gap-4 p-2">
77+
<>
8878
{isLoading ? (
8979
<div className=" mt-8 flex justify-center">
9080
<Spinner />
9181
</div>
9282
) : data?.getChartData?.length > 0 ? (
93-
<>
83+
<div className=" flex w-full flex-col gap-4 py-10">
9484
<div className="relative w-full ">
9585
<Carousel className="w-full">
9686
<div className=" px-12">
9787
<CarouselContent className="flex-grow">
9888
{data?.getChartData.map((item: any, index: any) => (
9989
<CarouselItem key={index} className="m-auto">
10090
<div className="w-full border-2 border-solid border-baseGraySlateSolid4 bg-surfaceDefault p-6 text-center shadow-basicLg max-sm:p-2">
101-
<div className="lg:p-10">
102-
{item.__typename === 'TypeResourceChart' &&
103-
item?.chart?.options ? (
104-
renderChart(item)
105-
) : (
106-
<Image
107-
src={`${process.env.NEXT_PUBLIC_BACKEND_URL}/api/download/chart_image/${item.id}`}
108-
alt={''}
109-
width={300}
110-
height={300}
111-
unoptimized
112-
/>
113-
)}
114-
{/* Call the renderChart function */}
115-
</div>
11691
<div className="flex items-center justify-between gap-2 max-sm:flex-wrap">
11792
<div className="flex flex-col gap-1 py-2 text-start">
11893
<Text className="font-semi-bold">{item.name}</Text>
@@ -133,13 +108,6 @@ const Details: React.FC<DetailsProps> = ({ setShowcharts }) => {
133108
</Text>
134109
</div>
135110
<div className="flex gap-2">
136-
<Button kind="secondary" className="p-2">
137-
<Icon
138-
source={Icons.diagonal}
139-
size={20}
140-
color="default"
141-
/>
142-
</Button>
143111
<Link
144112
href={`${process.env.NEXT_PUBLIC_BACKEND_URL}/api/download/chart/${item.id}`}
145113
target="_blank"
@@ -155,6 +123,22 @@ const Details: React.FC<DetailsProps> = ({ setShowcharts }) => {
155123
</Link>
156124
</div>
157125
</div>
126+
<div className="p-4 lg:p-10">
127+
{item.__typename === 'TypeResourceChart' &&
128+
item?.chart?.options ? (
129+
renderChart(item)
130+
) : (
131+
<Image
132+
src={`${process.env.NEXT_PUBLIC_BACKEND_URL}/api/download/chart_image/${item.id}`}
133+
alt={''}
134+
width={100}
135+
height={100}
136+
unoptimized
137+
className=" h-full w-full object-contain"
138+
/>
139+
)}
140+
{/* Call the renderChart function */}
141+
</div>
158142
</div>
159143
</CarouselItem>
160144
))}
@@ -168,11 +152,11 @@ const Details: React.FC<DetailsProps> = ({ setShowcharts }) => {
168152
</div>
169153
</Carousel>
170154
</div>
171-
</>
155+
</div>
172156
) : (
173157
''
174158
)}
175-
</div>
159+
</>
176160
);
177161
};
178162

0 commit comments

Comments
 (0)