Merge pull request #174 from CivicDataLab/171-restructure-dashboard-to-reuse-organization-features-for-dataspace

171 restructure dashboard to reuse organization features for dataspace

Author: bhavabhuthi

app/[locale]/(user)/categories/[categorySlug]/page.tsx

@@ -1,18 +1,18 @@
 'use client';
 
+import { useEffect, useReducer, useState } from 'react';
+import Image from 'next/image';
+import { useRouter } from 'next/navigation';
 import GraphqlPagination from '@/app/[locale]/dashboard/components/GraphqlPagination/graphqlPagination';
 import { fetchDatasets } from '@/fetch';
 import { graphql } from '@/gql';
 import { useQuery } from '@tanstack/react-query';
-import Image from 'next/image';
-import { useRouter } from 'next/navigation';
 import { Pill, SearchInput, Select, Text } from 'opub-ui';
-import { useEffect, useReducer, useState } from 'react';
 
+import { GraphQL } from '@/lib/api';
 import BreadCrumbs from '@/components/BreadCrumbs';
 import { ErrorPage } from '@/components/error';
 import { Loading } from '@/components/loading';
-import { GraphQL } from '@/lib/api';
 import Card from '../../datasets/components/Card';
 import Filter from '../../datasets/components/FIlter/Filter';
 
@@ -171,7 +171,13 @@ const CategoryDetailsPage = ({ params }: { params: { categorySlug: any } }) => {
     isLoading: boolean;
     isError: boolean;
   } = useQuery([`get_category_details_${params.categorySlug}`], () =>
-    GraphQL(categoryQueryDoc, { filters: { slug: params.categorySlug } })
+    GraphQL(
+      categoryQueryDoc,
+      {
+        // Entity Headers if present
+      },
+      { filters: { slug: params.categorySlug } }
+    )
   );
 
   const [facets, setFacets] = useState<{

app/[locale]/(user)/categories/page.tsx

@@ -1,15 +1,15 @@
 'use client';
 
-import { graphql } from '@/gql';
-import { useQuery } from '@tanstack/react-query';
 import Image from 'next/image';
 import Link from 'next/link';
+import { graphql } from '@/gql';
+import { useQuery } from '@tanstack/react-query';
 import { Text } from 'opub-ui';
 
+import { GraphQL } from '@/lib/api';
 import BreadCrumbs from '@/components/BreadCrumbs';
 import { ErrorPage } from '@/components/error';
 import { Loading } from '@/components/loading';
-import { GraphQL } from '@/lib/api';
 
 const categoriesListQueryDoc: any = graphql(`
   query CategoriesList {
@@ -30,7 +30,13 @@ const CategoriesListingPage = () => {
     error: any;
     isError: boolean;
   } = useQuery([`categories_list_page`], () =>
-    GraphQL(categoriesListQueryDoc, [])
+    GraphQL(
+      categoriesListQueryDoc,
+      {
+        // Entity Headers if present
+      },
+      []
+    )
   );
 
   return (

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

@@ -124,9 +124,15 @@ const AccessModels = () => {
   const { data, error, isLoading } = useQuery(
     [`accessmodel_${params.datasetIdentifier}`],
     () =>
-      GraphQL(accessModelResourcesQuery, {
-        datasetId: params.datasetIdentifier,
-      })
+      GraphQL(
+        accessModelResourcesQuery,
+        {
+          // Entity Headers if present
+        },
+        {
+          datasetId: params.datasetIdentifier,
+        }
+      )
   );
 
   return (

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

@@ -45,9 +45,15 @@ const Details = () => {
   }: { data: any; isLoading: boolean; refetch: any } = useQuery(
     [`chartdata_${params.datasetIdentifier}`],
     () =>
-      GraphQL(charts, {
-        datasetId: params.datasetIdentifier,
-      })
+      GraphQL(
+        charts,
+        {
+          // Entity Headers if present
+        },
+        {
+          datasetId: params.datasetIdentifier,
+        }
+      )
   );
 
   return (

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

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useEffect, useRef } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import Link from 'next/link';
 import { useParams } from 'next/navigation';
 import { graphql } from '@/gql';
@@ -49,12 +49,21 @@ const Resources = () => {
 
   const { data, isLoading } = useQuery(
     [`resources_${params.datasetIdentifier}`],
-    () => GraphQL(datasetResourceQuery, { datasetId: params.datasetIdentifier })
+    () =>
+      GraphQL(
+        datasetResourceQuery,
+        {
+          // Entity Headers if present
+        },
+        { datasetId: params.datasetIdentifier }
+      )
   );
 
   // Use an object to manage the expanded state for each resource individually
   const [showMore, setShowMore] = useState<{ [key: number]: boolean }>({});
-  const [isDescriptionLong, setIsDescriptionLong] = useState<{ [key: number]: boolean }>({});
+  const [isDescriptionLong, setIsDescriptionLong] = useState<{
+    [key: number]: boolean;
+  }>({});
 
   const descriptionRefs = useRef<(HTMLDivElement | null)[]>([]);
 
@@ -70,7 +79,8 @@ const Resources = () => {
   useEffect(() => {
     descriptionRefs.current.forEach((descriptionElement, index) => {
       if (descriptionElement) {
-        const isLong = descriptionElement.scrollHeight > descriptionElement.clientHeight;
+        const isLong =
+          descriptionElement.scrollHeight > descriptionElement.clientHeight;
         setIsDescriptionLong((prevState) => ({
           ...prevState,
           [index]: isLong,
@@ -90,11 +100,11 @@ const Resources = () => {
           <Text variant="bodyLg" className="mx-6 lg:mx-0">
             Downloadable Resources
           </Text>
-          <div className="mx-6 lg:mx-0 mt-5 flex flex-col gap-8 bg-surfaceDefault p-6">
+          <div className="mx-6 mt-5 flex flex-col gap-8 bg-surfaceDefault p-6 lg:mx-0">
             {data?.datasetResources.map((item: any, index: number) => (
               <div key={index} className="flex flex-wrap justify-between gap-4">
                 <div className="gap flex flex-col lg:w-4/5">
-                  <div className="item flex gap-2 items-center">
+                  <div className="item flex items-center gap-2">
                     <Text variant="headingMd">{item.name}</Text>
                     <Tag>{item.fileDetails.format}</Tag>
                   </div>

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

@@ -55,7 +55,13 @@ const DatasetDetailsPage = () => {
   const params = useParams();
 
   const { data, isLoading } = useQuery([`${params.datasetIdentifier}`], () =>
-    GraphQL(datasetQuery, { filters: { id: params.datasetIdentifier } })
+    GraphQL(
+      datasetQuery,
+      {
+        // Entity Headers if present
+      },
+      { filters: { id: params.datasetIdentifier } }
+    )
   );
 
   return (

…tion/[organizationId]/consumers/page.tsx …ityType]/[entitySlug]/consumers/page.tsxapp/[locale]/dashboard/organization/[organizationId]/consumers/page.tsx renamed to app/[locale]/dashboard/[entityType]/[entitySlug]/consumers/page.tsx app/[locale]/dashboard/organization/[organizationId]/consumers/page.tsx renamed to app/[locale]/dashboard/[entityType]/[entitySlug]/consumers/page.tsx

@@ -53,9 +53,15 @@ const ChartsList: React.FC<ChartsListProps> = ({
   }: { data: any; isLoading: boolean; refetch: any } = useQuery(
     [`chartDetails_${params.id}`],
     () =>
-      GraphQL(chartDetailsQuery, {
-        datasetId: params.id,
-      })
+      GraphQL(
+        chartDetailsQuery,
+        {
+          // Entity Headers if present
+        },
+        {
+          datasetId: params.id,
+        }
+      )
   );
 
   const [filteredRows, setFilteredRows] = useState<any[]>([]);
@@ -68,7 +74,14 @@ const ChartsList: React.FC<ChartsListProps> = ({
   }, [data, type]);
 
   const { mutate, isLoading: deleteLoading } = useMutation(
-    (data: { chartId: UUID }) => GraphQL(deleteResourceChart, data),
+    (data: { chartId: UUID }) =>
+      GraphQL(
+        deleteResourceChart,
+        {
+          // Entity Headers if present
+        },
+        data
+      ),
     {
       onSuccess: () => {
         toast('Chart Deleted Successfully');