Refactor Datasets component to support conditional rendering based on type prop for organization and publisher datasets

Author: sanjaypinna

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

@@ -54,20 +54,81 @@ const userPublishedDatasetsDoc: any = graphql(`
   }
 `);
 
-const Datasets = () => {
+const organizationPublishedDatasetsDoc: any = graphql(`
+  query organizationPublishedDatasetsList($organizationId: ID!) {
+    organizationPublishedDatasets(organizationId: $organizationId) {
+      id
+      title
+      downloadCount
+      id
+      title
+      tags {
+        id
+        value
+      }
+      description
+      created
+      modified
+      isIndividualDataset
+      user {
+        fullName
+        id
+        profilePicture {
+          url
+        }
+      }
+      metadata {
+        metadataItem {
+          id
+          label
+          dataType
+        }
+        value
+      }
+      organization {
+        name
+        logo {
+          url
+        }
+        slug
+        id
+      }
+      sectors {
+        name
+      }
+      formats
+    }
+  }
+`);
+
+const Datasets = ({ type }: { type: 'organization' | 'Publisher' }) => {
   const params = useParams();
+
   const PublishedDatasetsList: any = useQuery(
-    [`userPublishedDataset_${params.publisherSlug}`],
+    [`userDataset_${params.publisherSlug}`],
     () =>
-      GraphQL(
-        userPublishedDatasetsDoc,
-        {
-          // Entity Headers if present
-        },
-        { userId: params.publisherSlug }
-      )
+      type === 'organization'
+        ? GraphQL(
+            organizationPublishedDatasetsDoc,
+            {
+              // Entity Headers
+            },
+            { organizationId: params.organizationSlug } // ✅ exact match for expected shape
+          )
+        : GraphQL(
+            userPublishedDatasetsDoc,
+            {
+              // Entity Headers
+            },
+            { userId: params.publisherSlug } // ✅ exact match for expected shape
+          )
   );
 
+  const DatasetData =
+    type === 'organization'
+      ? PublishedDatasetsList.data?.organizationPublishedDatasets
+      : PublishedDatasetsList.data?.userPublishedDatasets;
+
   return (
     <div>
       <div
@@ -80,61 +141,59 @@ const Datasets = () => {
             <Spinner />
           </div>
         ) : (
-          PublishedDatasetsList?.data?.userPublishedDatasets.length > 0 &&
-          PublishedDatasetsList?.data?.userPublishedDatasets.map(
-            (item: any, index: any) => (
-              <Card
-                type={[
-                  {
-                    label: 'Dataset',
-                    fillColor: '#E9EFF4',
-                    borderColor: '#F9C74F',
-                  },
-                ]}
-                key={index}
-                title={item.title}
-                description={item.description}
-                metadataContent={[
-                  {
-                    icon: Icons.calendar,
-                    label: 'Date',
-                    value: '19 July 2024',
-                  },
-                  {
-                    icon: Icons.download,
-                    label: 'Download',
-                    value: item.downloadCount.toString(),
-                  },
-                  {
-                    icon: Icons.globe,
-                    label: 'Geography',
-                    value: 'India',
-                  },
-                ]}
-                tag={item.tags}
-                formats={item.formats}
-                footerContent={[
-                  {
-                    icon: `/Sectors/${item.sectors[0].name}.svg`,
-                    label: 'Sectors',
-                  },
-                  {
-                    icon: item.isIndividualDataset
-                      ? item?.user?.profilePicture
-                        ? `${process.env.NEXT_PUBLIC_BACKEND_URL}/${item.user.profilePicture.url}`
-                        : '/profile.png'
-                      : item?.organization?.logo
-                        ? `${process.env.NEXT_PUBLIC_BACKEND_URL}/${item.organization.logo.url}`
-                        : '/org.png',
-                    label: 'Published by',
-                  },
-                ]}
-                variation={'collapsed'}
-                iconColor="warning"
-                href={`/datasets/${item.id}`}
-              />
-            )
-          )
+          DatasetData?.length > 0 &&
+          DatasetData?.map((item: any, index: any) => (
+            <Card
+              type={[
+                {
+                  label: 'Dataset',
+                  fillColor: '#E9EFF4',
+                  borderColor: '#F9C74F',
+                },
+              ]}
+              key={index}
+              title={item.title}
+              description={item.description}
+              metadataContent={[
+                {
+                  icon: Icons.calendar,
+                  label: 'Date',
+                  value: '19 July 2024',
+                },
+                {
+                  icon: Icons.download,
+                  label: 'Download',
+                  value: item.downloadCount.toString(),
+                },
+                {
+                  icon: Icons.globe,
+                  label: 'Geography',
+                  value: 'India',
+                },
+              ]}
+              tag={item.tags}
+              formats={item.formats}
+              footerContent={[
+                {
+                  icon: `/Sectors/${item.sectors[0].name}.svg`,
+                  label: 'Sectors',
+                },
+                {
+                  icon: item.isIndividualDataset
+                    ? item?.user?.profilePicture
+                      ? `${process.env.NEXT_PUBLIC_BACKEND_URL}/${item.user.profilePicture.url}`
+                      : '/profile.png'
+                    : item?.organization?.logo
+                      ? `${process.env.NEXT_PUBLIC_BACKEND_URL}/${item.organization.logo.url}`
+                      : '/org.png',
+                  label: 'Published by',
+                },
+              ]}
+              variation={'collapsed'}
+              iconColor="warning"
+              href={`/datasets/${item.id}`}
+            />
+          ))
         )}
       </div>
     </div>