Merge pull request #103 from CivicDataLab/102-revamp-graphqltable-component-to-graphqlpagination

102 revamp graphqltable component to graphqlpagination

Author: bhavabhuthi

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

@@ -15,7 +15,8 @@ import {
 
 import { cn } from '@/lib/utils';
 import BreadCrumbs from '@/components/BreadCrumbs';
-import DatasetCards from './components/DatasetCards';
+import GraphqlPagination from '../../dashboard/components/GraphqlPagination/graphqlPagination';
+import Card from './components/Card';
 import Filter from './components/FIlter/Filter';
 import Styles from './dataset.module.scss';
 
@@ -313,14 +314,17 @@ const DatasetsListing = () => {
 
               <div className="flex flex-col gap-6">
                 {facets && datasetDetails?.length > 0 && (
-                  <DatasetCards
-                    data={datasetDetails}
-                    totalCount={count}
+                  <GraphqlPagination
+                    totalRows={count}
                     pageSize={queryParams.pageSize}
                     currentPage={queryParams.currentPage}
                     onPageChange={handlePageChange}
                     onPageSizeChange={handlePageSizeChange}
-                  />
+                  >
+                    {datasetDetails.map((item: any, index: any) => (
+                      <Card key={index} data={item} />
+                    ))}
+                  </GraphqlPagination>
                 )}
               </div>
             </div>

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

@@ -1,37 +1,27 @@
 import React from 'react';
-import { DataTable, Text } from 'opub-ui';
 
 import Footer from './footer';
 
 interface GraphqlTableProps {
-  table: {
-    columns: any[];
-    rows: any[];
-  };
   totalRows: number;
   pageSize: number;
   currentPage: number;
   onPageChange: (newPage: number) => void;
   onPageSizeChange: (newSize: number) => void;
+  children: React.ReactNode;
 }
 
-const GraphqlTable: React.FC<GraphqlTableProps> = ({
-  table,
+const GraphqlPagination: React.FC<GraphqlTableProps> = ({
   totalRows,
   pageSize,
   currentPage,
   onPageChange,
   onPageSizeChange,
+  children,
 }) => {
   return (
     <div>
-      <DataTable
-        columns={table.columns}
-        rows={table.rows}
-        hideFooter={true}
-        hideSelection={true}
-        defaultRowCount={100}
-      />
+      {children}
       <Footer
         totalRows={totalRows}
         pageSize={pageSize}
@@ -43,4 +33,4 @@ const GraphqlTable: React.FC<GraphqlTableProps> = ({
   );
 };
 
-export default GraphqlTable;
+export default GraphqlPagination;

…board/components/GraphqlTable/footer.tsx …/components/GraphqlPagination/footer.tsxapp/[locale]/dashboard/components/GraphqlTable/footer.tsx renamed to app/[locale]/dashboard/components/GraphqlPagination/footer.tsx app/[locale]/dashboard/components/GraphqlTable/footer.tsx renamed to app/[locale]/dashboard/components/GraphqlPagination/footer.tsx

@@ -1,30 +1,15 @@
 import React from 'react';
-import Link from 'next/link';
-import {
-  useParams,
-  usePathname,
-  useRouter,
-  useSearchParams,
-} from 'next/navigation';
-import GraphqlTable from '@/app/[locale]/dashboard/components/GraphqlTable/graphqlTable';
+import { useParams, useRouter } from 'next/navigation';
 import { graphql } from '@/gql';
 import {
   CreateFileResourceInput,
   UpdateFileResourceInput,
 } from '@/gql/generated/graphql';
-import { IconTrash } from '@tabler/icons-react';
-import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
-import {
-  parseAsBoolean,
-  parseAsString,
-  useQueryState,
-} from 'next-usequerystate';
+import { useMutation } from '@tanstack/react-query';
+import { parseAsString, useQueryState } from 'next-usequerystate';
 import {
   Button,
-  ButtonGroup,
-  Checkbox,
   Combobox,
-  DataTable,
   Dialog,
   Divider,
   DropZone,
@@ -49,7 +34,6 @@ interface TListItem {
 }
 
 export const EditResource = ({ reload, data }: any) => {
-
   const updateResourceDoc: any = graphql(`
     mutation updateFileResource($fileResourceInput: UpdateFileResourceInput!) {
       updateFileResource(fileResourceInput: $fileResourceInput) {
@@ -163,12 +147,12 @@ export const EditResource = ({ reload, data }: any) => {
 
   const ResourceList: TListItem[] =
     data.map((item: any) => ({
-        label: item.name,
-        value: item.id,
-        description: item.description,
-        dataset: item.dataset?.pk,
-        fileDetails: item.fileDetails,
-      })) || [];
+      label: item.name,
+      value: item.id,
+      description: item.description,
+      dataset: item.dataset?.pk,
+      fileDetails: item.fileDetails,
+    })) || [];
 
   const getResourceObject = (resourceId: string) => {
     return ResourceList.find((item) => item.value === resourceId);
@@ -245,18 +229,21 @@ export const EditResource = ({ reload, data }: any) => {
     </div>
   );
 
-
   const listViewFunction = () => {
-    setResourceId('')
+    setResourceId('');
   };
 
   const saveResource = () => {
     mutate({
       fileResourceInput: {
         id: resourceId,
-        description: resourceDesc ? resourceDesc :getResourceObject(resourceId)?.description,
-        name: resourceName ? resourceName: getResourceObject(resourceId)?.label,
-         file: resourceFile
+        description: resourceDesc
+          ? resourceDesc
+          : getResourceObject(resourceId)?.description,
+        name: resourceName
+          ? resourceName
+          : getResourceObject(resourceId)?.label,
+        file: resourceFile,
       },
     });
   };

…components/GraphqlTable/graphqlTable.tsx …/GraphqlPagination/graphqlPagination.tsxapp/[locale]/dashboard/components/GraphqlTable/graphqlTable.tsx renamed to app/[locale]/dashboard/components/GraphqlPagination/graphqlPagination.tsx app/[locale]/dashboard/components/GraphqlTable/graphqlTable.tsx renamed to app/[locale]/dashboard/components/GraphqlPagination/graphqlPagination.tsx

@@ -2,8 +2,9 @@
 
 import { useEffect, useState } from 'react';
 import { useRouter } from 'next/navigation';
+import { DataTable } from 'opub-ui';
 
-import GraphqlTable from '../../components/GraphqlTable/graphqlTable';
+import GraphqlPagination from '../../components/GraphqlPagination/graphqlPagination';
 import ListingHeader from '../../components/ListingHeader';
 
 const Page = () => {
@@ -97,9 +98,15 @@ const Page = () => {
         count={120}
         label={'datasets'}
       />
-      <GraphqlTable
-        table={{
-          columns: [
+      <GraphqlPagination
+        totalRows={totalRows}
+        pageSize={queryParams.pageSize}
+        currentPage={queryParams.currentPage}
+        onPageChange={handlePageChange}
+        onPageSizeChange={handlePageSizeChange}
+      >
+        <DataTable
+          columns={[
             {
               accessorKey: 'dataset_title',
               header: 'Dataset',
@@ -112,19 +119,17 @@ const Page = () => {
               accessorKey: 'org_types',
               header: '0rg Type',
             },
-          ],
-          rows: rowData.map((item: any) => ({
+          ]}
+          rows={rowData.map((item: any) => ({
             dataset_title: item._source.dataset_title,
             org_title: item._source.org_title,
             org_types: item._source.org_types,
-          })),
-        }}
-        totalRows={totalRows}
-        pageSize={queryParams.pageSize}
-        currentPage={queryParams.currentPage}
-        onPageChange={handlePageChange}
-        onPageSizeChange={handlePageSizeChange}
-      />
+          }))}
+          hideFooter={true}
+          hideSelection={true}
+          defaultRowCount={100}
+        />
+      </GraphqlPagination>
     </div>
   );
 };