Refactor UseCases component to support conditional rendering based on type prop for organization and publisher use cases

Author: sanjaypinna

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

@@ -40,20 +40,67 @@ const userPublishedUseCasesDoc: any = graphql(`
   }
 `);
 
-const UseCases = () => {
+const orgPublishedUseCasesDoc: any = graphql(`
+  query orgPublishedUseCasesList($organizationId: ID!) {
+    organizationPublishedUseCases(organizationId: $organizationId) {
+      id
+      title
+      summary
+      slug
+      metadata {
+        metadataItem {
+          id
+          label
+          dataType
+        }
+        id
+        value
+      }
+      publishers {
+        logo {
+          path
+        }
+        name
+      }
+      sectors {
+        id
+        name
+      }
+      created
+      modified
+    }
+  }
+`);
+
+const UseCases = ({ type }: { type: 'organization' | 'Publisher' }) => {
   const params = useParams();
+
   const PublishedUseCasesList: any = useQuery(
-    [`userPublishedUseCase_${params.publisherSlug}`],
+    [`userPublishedDataset_${params.publisherSlug}`],
     () =>
-      GraphQL(
-        userPublishedUseCasesDoc,
-        {
-          // Entity Headers if present
-        },
-        { userId: params.publisherSlug }
-      )
+      type === 'organization'
+        ? GraphQL(
+            orgPublishedUseCasesDoc,
+            {
+              // Entity Headers
+            },
+            { organizationId: params.organizationSlug } // ✅ exact match for expected shape
+          )
+        : GraphQL(
+            userPublishedUseCasesDoc,
+            {
+              // Entity Headers
+            },
+            { userId: params.publisherSlug } // ✅ exact match for expected shape
+          )
   );
 
+  const UseCaseData =
+    type === 'organization'
+      ? PublishedUseCasesList.data?.organizationPublishedUseCases
+      : PublishedUseCasesList.data?.userPublishedUseCases;
+
+
   return (
     <div>
       <div
@@ -66,47 +113,45 @@ const UseCases = () => {
             <Spinner />
           </div>
         ) : (
-          PublishedUseCasesList.data.userPublishedUseCases.length > 0 &&
-          PublishedUseCasesList.data.userPublishedUseCases.map(
-            (item: any, index: any) => (
-              <Card
-               type={[
-                  {
-                    label: 'Use Case',
-                    fillColor: '#FEF7E5',
-                    borderColor: '#F9C74F',
-                  },
-                ]}
-                title={item.title}
-                key={index}
-                href={`/usecases/${item.id}`}
-                metadataContent={[
-                  {
-                    icon: Icons.calendar,
-                    label: 'Date',
-                    value: formatDate(item.modified),
-                  },
-                  {
-                    icon: Icons.globe,
-                    label: 'Geography',
-                    value: item.metadata?.find(
-                      (meta: any) => meta.metadataItem?.label === 'Geography'
-                    )?.value,
-                  },
-                ]}
-                footerContent={[
-                  {
-                    icon: `/Sectors/${item?.sectors[0]?.name}.svg`,
-                    label: 'Sectors',
-                  },
-                  { icon: '/fallback.svg', label: 'Published by' },
-                ]}
-                description={item.summary}
-                iconColor="warning"
-                variation={'collapsed'}
-              />
-            )
-          )
+          UseCaseData?.length > 0 &&
+          UseCaseData?.map((item: any, index: any) => (
+            <Card
+              type={[
+                {
+                  label: 'Use Case',
+                  fillColor: '#FEF7E5',
+                  borderColor: '#F9C74F',
+                },
+              ]}
+              title={item.title}
+              key={index}
+              href={`/usecases/${item.id}`}
+              metadataContent={[
+                {
+                  icon: Icons.calendar,
+                  label: 'Date',
+                  value: formatDate(item.modified),
+                },
+                {
+                  icon: Icons.globe,
+                  label: 'Geography',
+                  value: item.metadata?.find(
+                    (meta: any) => meta.metadataItem?.label === 'Geography'
+                  )?.value,
+                },
+              ]}
+              footerContent={[
+                {
+                  icon: `/Sectors/${item?.sectors[0]?.name}.svg`,
+                  label: 'Sectors',
+                },
+                { icon: '/fallback.svg', label: 'Published by' },
+              ]}
+              description={item.summary}
+              iconColor="warning"
+              variation={'collapsed'}
+            />
+          ))
         )}
       </div>
     </div>