Update main with latest dev

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useReducer, useState } from 'react';
+import React, { useEffect, useReducer, useRef, useState } from 'react';
 import Image from 'next/image';
 import { useRouter } from 'next/navigation';
 import GraphqlPagination from '@/app/[locale]/dashboard/components/GraphqlPagination/graphqlPagination';
@@ -219,12 +219,18 @@ const ListingComponent: React.FC<ListingProps> = ({
   const datasetDetails = facets?.results ?? [];
 
   useUrlParams(queryParams, setQueryParams, setVariables);
+  const latestFetchId = useRef(0);
 
   useEffect(() => {
     if (variables) {
+      const currentFetchId = ++latestFetchId.current;
+
       fetchDatasets(variables)
         .then((res) => {
-          setFacets(res);
+          // Only set if this is the latest call
+          if (currentFetchId === latestFetchId.current) {
+            setFacets(res);
+          }
         })
         .catch((err) => {
           console.error(err);
@@ -471,36 +477,71 @@ const ListingComponent: React.FC<ListingProps> = ({
                       : item?.organization?.logo
                         ? `${process.env.NEXT_PUBLIC_BACKEND_URL}/${item.organization.logo}`
                         : '/org.png';
+                    const Geography = item.metadata.filter(
+                      (item: any) => item.metadata_item.label === 'Geography'
+                    )[0]?.value;
+
+                    const MetadataContent = [
+                      {
+                        icon: Icons.calendar,
+                        label: 'Date',
+                        value: formatDate(item.modified),
+                        tooltip: 'Date',
+                      },
+                      {
+                        icon: Icons.download,
+                        label: 'Download',
+                        value: item.download_count.toString(),
+                        tooltip: 'Download',
+                      },
+                    ];
+                    if (Geography) {
+                      MetadataContent.push({
+                        icon: Icons.globe,
+                        label: 'Geography',
+                        value: Geography,
+                        tooltip: 'Geography',
+                      });
+                    }
+
+                    if (item.has_charts && view === 'expanded') {
+                      MetadataContent.push({
+                        icon: Icons.chart,
+                        label: '',
+                        value: 'With Charts',
+                        tooltip: 'Charts',
+                      });
+                    }
+
+                    const FooterContent =  [
+                      {
+                        icon: `/Sectors/${item.sectors[0]}.svg`,
+                        label: 'Sectors',
+                        tooltip: `${item.sectors[0]}`,
+                      },
+                      ...(item.has_charts && view !== 'expanded'
+                        ? [
+                            {
+                              icon: `/chart-bar.svg`,
+                              label: 'Charts',
+                              tooltip: 'Charts',
+                            },
+                          ]
+                        : []),
+                      {
+                        icon: image,
+                        label: 'Published by',
+                        tooltip: `${item.is_individual_dataset ? item.user?.name : item.organization?.name}`,
+                      },
+                    ];
 
                     const commonProps = {
                       title: item.title,
                       description: item.description,
-                      metadataContent: [
-                        {
-                          icon: Icons.calendar,
-                          label: 'Date',
-                          value: formatDate(item.modified),
-                        },
-                        {
-                          icon: Icons.download,
-                          label: 'Download',
-                          value: item.download_count.toString(),
-                        },
-                        {
-                          icon: Icons.globe,
-                          label: 'Geography',
-                          value: 'India',
-                        },
-                      ],
+                      metadataContent: MetadataContent,
                       tag: item.tags,
                       formats: item.formats,
-                      footerContent: [
-                        {
-                          icon: `/Sectors/${item.sectors[0]}.svg`,
-                          label: 'Sectors',
-                        },
-                        { icon: image, label: 'Published by' },
-                      ],
+                      footerContent: FooterContent,
                     };
 
                     return (

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

@@ -0,0 +1,48 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+interface PdfPreviewProps {
+  url: string;
+}
+
+export default function PdfPreview({ url }: PdfPreviewProps) {
+  const [previewUrl, setPreviewUrl] = useState<string | null>(null);
+
+  useEffect(() => {
+    const fetchPdf = async () => {
+      try {
+        const response = await fetch(url);
+        const blobData = await response.blob();
+
+        // Manually set MIME type to PDF (in case it's sent as octet-stream)
+        const pdfBlob = new Blob([blobData], { type: 'application/pdf' });
+        const objectUrl = URL.createObjectURL(pdfBlob);
+        setPreviewUrl(objectUrl);
+      } catch (error) {
+        console.error('Failed to load PDF:', error);
+      }
+    };
+
+    fetchPdf();
+
+    return () => {
+      if (previewUrl) {
+        URL.revokeObjectURL(previewUrl);
+      }
+    };
+  }, [url]);
+
+  if (!previewUrl) return <p>Loading PDF preview...</p>;
+
+  return (
+    <object
+      data={previewUrl}
+      type="application/pdf"
+      width="100%"
+      height="500px"
+    >
+      <p>PDF preview not available</p>
+    </object>
+  );
+}

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

@@ -63,7 +63,7 @@ const Sectors = () => {
         <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">
           {data?.sectors.map((sectors: any) => (
             <Link
-              href={`/sectors/${sectors.slug}?sectors=${capitalizeWords(sectors.slug)}`}
+              href={`/sectors/${sectors.slug}?size=9&page=1&sort=recent&sectors=${capitalizeWords(sectors.slug)}`}
               key={sectors.id}
             >
               <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

@@ -49,11 +49,7 @@ const DetailsQuery: any = graphql(`
   }
 `);
 
-interface DetailsProps {
-  setShowcharts: (vars: boolean) => void;
-}
-
-const Details: React.FC<DetailsProps> = ({ setShowcharts }) => {
+const Details: React.FC = () => {
   const params = useParams();
   const chartRef = useRef<ReactECharts>(null);
 
@@ -62,12 +58,6 @@ const Details: React.FC<DetailsProps> = ({ setShowcharts }) => {
     () => GraphQL(DetailsQuery, {}, { datasetId: params.datasetIdentifier })
   );
 
-  useEffect(() => {
-    if (data && data?.getChartData.length <= 0) {
-      setShowcharts(false);
-    }
-  }, [data]);
-
   const renderChart = (item: any) => {
     if (item.chartType === 'ASSAM_DISTRICT' || item.chartType === 'ASSAM_RC') {
       // Register the map
@@ -84,35 +74,20 @@ const Details: React.FC<DetailsProps> = ({ setShowcharts }) => {
   const toggleDescription = () => setIsexpanded(!isexpanded);
 
   return (
-    <div className=" flex w-full flex-col gap-4 p-2">
+    <>
       {isLoading ? (
         <div className=" mt-8 flex justify-center">
           <Spinner />
         </div>
       ) : data?.getChartData?.length > 0 ? (
-        <>
+        <div className=" flex w-full flex-col gap-4 py-10">
           <div className="relative w-full ">
             <Carousel className="w-full">
               <div className=" px-12">
                 <CarouselContent className="flex-grow">
                   {data?.getChartData.map((item: any, index: any) => (
                     <CarouselItem key={index} className="m-auto">
                       <div className="w-full border-2 border-solid border-baseGraySlateSolid4 bg-surfaceDefault p-6 text-center shadow-basicLg max-sm:p-2">
-                        <div className="lg:p-10">
-                          {item.__typename === 'TypeResourceChart' &&
-                          item?.chart?.options ? (
-                            renderChart(item)
-                          ) : (
-                            <Image
-                              src={`${process.env.NEXT_PUBLIC_BACKEND_URL}/api/download/chart_image/${item.id}`}
-                              alt={''}
-                              width={300}
-                              height={300}
-                              unoptimized
-                            />
-                          )}
-                          {/* Call the renderChart function */}
-                        </div>
                         <div className="flex items-center justify-between gap-2 max-sm:flex-wrap">
                           <div className="flex flex-col gap-1 py-2 text-start">
                             <Text className="font-semi-bold">{item.name}</Text>
@@ -133,13 +108,6 @@ const Details: React.FC<DetailsProps> = ({ setShowcharts }) => {
                             </Text>
                           </div>
                           <div className="flex gap-2">
-                            <Button kind="secondary" className="p-2">
-                              <Icon
-                                source={Icons.diagonal}
-                                size={20}
-                                color="default"
-                              />
-                            </Button>
                             <Link
                               href={`${process.env.NEXT_PUBLIC_BACKEND_URL}/api/download/chart/${item.id}`}
                               target="_blank"
@@ -155,6 +123,22 @@ const Details: React.FC<DetailsProps> = ({ setShowcharts }) => {
                             </Link>
                           </div>
                         </div>
+                        <div className="p-4 lg:p-10">
+                          {item.__typename === 'TypeResourceChart' &&
+                          item?.chart?.options ? (
+                            renderChart(item)
+                          ) : (
+                            <Image
+                              src={`${process.env.NEXT_PUBLIC_BACKEND_URL}/api/download/chart_image/${item.id}`}
+                              alt={''}
+                              width={100}
+                              height={100}
+                              unoptimized
+                              className=" h-full w-full object-contain"
+                            />
+                          )}
+                          {/* Call the renderChart function */}
+                        </div>
                       </div>
                     </CarouselItem>
                   ))}
@@ -168,11 +152,11 @@ const Details: React.FC<DetailsProps> = ({ setShowcharts }) => {
               </div>
             </Carousel>
           </div>
-        </>
+        </div>
       ) : (
         ''
       )}
-    </div>
+    </>
   );
 };