use new geography fields for usecase and dataset everywhere

Author: Deepthi-Chand

app/[locale]/(user)/collaboratives/[collaborativeSlug]/CollaborativeDetailsClient.tsx

@@ -121,6 +121,12 @@ const CollaborativeDetails = graphql(`
         sectors {
           name
         }
+        geographies {
+          id
+          name
+          code
+          type
+        }
         modified
       }
       useCases {
@@ -154,6 +160,12 @@ const CollaborativeDetails = graphql(`
         sectors {
           name
         }
+        geographies {
+          id
+          name
+          code
+          type
+        }
         tags {
           id
           value
@@ -396,9 +408,9 @@ const CollaborativeDetailClient = () => {
                         ? `${process.env.NEXT_PUBLIC_BACKEND_URL}/${useCase.organization.logo.url}`
                         : '/org.png';
 
-                    const Geography = useCase.metadata?.find(
-                      (meta: any) => meta.metadataItem?.label === 'Geography'
-                    )?.value;
+                    const Geography = useCase.geographies && useCase.geographies.length > 0
+                      ? useCase.geographies.map((geo: any) => geo.name).join(', ')
+                      : null;
 
                     const MetadataContent = [
                       {
@@ -492,10 +504,9 @@ const CollaborativeDetailClient = () => {
                             icon: Icons.globe,
                             label: 'Geography',
                             value:
-                              dataset.metadata?.find(
-                                (meta: any) =>
-                                  meta.metadataItem?.label === 'Geography'
-                              )?.value || '',
+                              dataset.geographies && dataset.geographies.length > 0
+                                ? dataset.geographies.map((geo: any) => geo.name).join(', ')
+                                : '',
                           },
                         ]}
                         href={`/datasets/${dataset.id}`}

app/[locale]/(user)/datasets/[datasetIdentifier]/DatasetDetailsPage.tsx

@@ -1,14 +1,13 @@
 'use client';
 
-import { useEffect, useState } from 'react';
 import { graphql } from '@/gql';
 import { useQuery } from '@tanstack/react-query';
 import { Spinner } from 'opub-ui';
 
-import { GraphQL } from '@/lib/api';
-import { generateJsonLd } from '@/lib/utils';
 import BreadCrumbs from '@/components/BreadCrumbs';
 import JsonLd from '@/components/JsonLd';
+import { GraphQL } from '@/lib/api';
+import { generateJsonLd } from '@/lib/utils';
 import Details from './components/Details';
 import Metadata from './components/Metadata';
 import PrimaryData from './components/PrimaryData';
@@ -64,6 +63,17 @@ const datasetQuery: any = graphql(`
       sectors {
         name
       }
+      geographies {
+        id
+        name
+        code
+        type
+        parentId {
+          id
+          name
+          type
+        }
+      }
       formats
     }
   }

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

@@ -1,10 +1,10 @@
-import React, { useEffect, useState } from 'react';
 import Image from 'next/image';
 import Link from 'next/link';
 import { Button, Divider, Icon, Tag, Text, Tooltip } from 'opub-ui';
+import React, { useEffect, useState } from 'react';
 
-import { cn, formatDate, getWebsiteTitle } from '@/lib/utils';
 import { Icons } from '@/components/icons';
+import { cn, formatDate, getWebsiteTitle } from '@/lib/utils';
 import Styles from '../../../dataset.module.scss';
 
 interface MetadataProps {
@@ -19,8 +19,8 @@ const MetadataComponent: React.FC<MetadataProps> = ({ data, setOpen }) => {
     type: item.metadataItem.dataType,
   }));
 
-  const [isexpanded, setIsexpanded] = useState(false);
-  const toggleDescription = () => setIsexpanded(!isexpanded);
+  // const [isexpanded, setIsexpanded] = useState(false);
+  // const toggleDescription = () => setIsexpanded(!isexpanded);
 
   const licenseOptions = [
     {
@@ -177,6 +177,25 @@ const MetadataComponent: React.FC<MetadataProps> = ({ data, setOpen }) => {
             )}
           </div>
         </div>
+        {data.geographies && data.geographies.length > 0 && (
+          <div className="flex items-center gap-2 ">
+            <Text className="min-w-[120px]  basis-1/4 uppercase" variant="bodyMd">
+              Geography
+            </Text>
+            <div className="flex flex-wrap gap-2">
+              {data.geographies.map((geo: any, index: number) => (
+                <Tag
+                  key={index}
+                  fillColor="var(--blue-secondary-color)"
+                  borderColor="var(--blue-secondary-text)"
+                  textColor="black"
+                >
+                  {geo.name}
+                </Tag>
+              ))}
+            </div>
+          </div>
+        )}
         {Metadata.map((item: any, index: any) => (
           <div className="flex  gap-2 " key={index}>
             <Text

app/[locale]/(user)/usecases/[useCaseSlug]/UsecaseDetailsClient.tsx

@@ -60,6 +60,22 @@ const UseCasedetails = graphql(`
         id
         name
       }
+      geographies {
+        id
+        name
+        code
+        type
+        parentId {
+          id
+          name
+          type
+        }
+      }
+      sdgs {
+        id
+        code
+        name
+      }
       runningStatus
       tags {
         id
@@ -108,6 +124,12 @@ const UseCasedetails = graphql(`
         sectors {
           name
         }
+        geographies {
+          id
+          name
+          code
+          type
+        }
         modified
       }
       contactEmail
@@ -283,10 +305,9 @@ const UseCaseDetailClient = () => {
                             icon: Icons.globe,
                             label: 'Geography',
                             value:
-                              dataset.metadata?.find(
-                                (meta: any) =>
-                                  meta.metadataItem?.label === 'Geography'
-                              )?.value || '',
+                              dataset.geographies && dataset.geographies.length > 0
+                                ? dataset.geographies.map((geo: any) => geo.name).join(', ')
+                                : '',
                           },
                         ]}
                         href={`/datasets/${dataset.id}`}