fix schema listing

Author: aashimgarg

app/[locale]/dashboard/organization/[organizationId]/dataset/[id]/edit/components/EditResource.tsx

@@ -71,6 +71,25 @@ export const EditResource = ({ reload, data }: any) => {
     }
   );
 
+  const fetchSchema: any = graphql(`
+    query datasetSchema($datasetId: UUID!) {
+      datasetResources(datasetId: $datasetId) {
+        schema {
+          id
+          fieldName
+          format
+          description
+        }
+        id
+      }
+    }
+  `);
+
+  const { data: payload, refetch, isLoading: isPending,} = useQuery<any>(
+    [`fetch_schema_${params.id}`], 
+    () => GraphQL(fetchSchema, { datasetId: params.id })
+  );
+
   const { mutate: transform } = useMutation(
     (data: { fileResourceInput: CreateFileResourceInput }) =>
       GraphQL(createResourceFilesDoc, data),
@@ -361,9 +380,17 @@ export const EditResource = ({ reload, data }: any) => {
           <Text>See Preview</Text>
         </div>
       </div>*/}
-      {resourceId &&
-      data?.find((item: any) => item.id === resourceId).schema.length > 0 ? (
-        <ResourceSchema resourceId={resourceId} data={data} />
+      {resourceId && payload && Object.keys(payload).length > 0 ? (
+        <ResourceSchema
+          resourceId={resourceId}
+          isPending={isPending}
+          refetch={refetch}
+          data={
+            payload?.datasetResources?.filter(
+              (item: any) => item.id === resourceId
+            )[0]?.schema
+          }
+        />
       ) : null}
     </div>
   );

app/[locale]/dashboard/organization/[organizationId]/dataset/[id]/edit/components/ResourceSchema.tsx

@@ -1,48 +1,19 @@
 import React from 'react';
+import { useParams } from 'next/navigation';
 import { graphql } from '@/gql';
-import { useMutation } from '@tanstack/react-query';
-import { Button, DataTable, Icon, IconButton, Spinner, Text } from 'opub-ui';
+import { useMutation, useQuery } from '@tanstack/react-query';
+import { Button, Table, Icon, IconButton, Spinner, Text } from 'opub-ui';
+
 import { GraphQL } from '@/lib/api';
 import { Icons } from '@/components/icons';
 
-export const ResourceSchema = ({ resourceId, data }: any) => {
-  const table = {
-    columns: [
-      {
-        accessorKey: 'fieldName',
-        header: 'FIELD NAME',
-      },
-      {
-        accessorKey: 'description',
-        header: 'DESCRIPTION',
-      },
-      {
-        accessorKey: 'format',
-        header: 'FORMAT',
-      },
-      {
-        header: 'DELETE',
-        cell: ({ row }: any) => (
-          <IconButton
-            size="medium"
-            icon={Icons.delete}
-            color="interactive"
-            onClick={(e) => console.log(row.original)}
-          >
-            Delete
-          </IconButton>
-        ),
-      },
-    ],
-    rows: data
-      .find((item: any) => item.id === resourceId)
-      .schema.map((item: any) => ({
-        fieldName: item.fieldName,
-        description: item.description,
-        format: item.format,
-      })),
-  };
-
+export const ResourceSchema = ({
+  resourceId,
+  isPending,
+  data,
+  refetch,
+}: any) => {
+  
   const resetSchema: any = graphql(`
     mutation resetFileResourceSchema($resourceId: UUID!) {
       resetFileResourceSchema(resourceId: $resourceId) {
@@ -62,15 +33,40 @@ export const ResourceSchema = ({ resourceId, data }: any) => {
   const { mutate, isLoading } = useMutation(
     (data: { resourceId: string }) => GraphQL(resetSchema, data),
     {
-      onSuccess: (data) => {
-        console.log(data, '-data');
+      onSuccess: () => {
+        refetch();
       },
       onError: (err: any) => {
         console.log('Error ::: ', err);
       },
     }
   );
 
+  const generateColumnData = () => {
+    return [
+      {
+        accessorKey: 'fieldName',
+        header: 'FIELD NAME',
+      },
+      {
+        accessorKey: 'description',
+        header: 'DESCRIPTION',
+      },
+      {
+        accessorKey: 'format',
+        header: 'FORMAT',
+      },
+    ];
+  };
+
+  const generateTableData = (data: any[]) => {
+    return data.map((item: any) => ({
+      fieldName: item.fieldName,
+      description: item.description,
+      format: item.format,
+    }));
+  };
+
   const setFields = () => {
     mutate({
       resourceId: resourceId,
@@ -100,17 +96,18 @@ export const ResourceSchema = ({ resourceId, data }: any) => {
         be changed in Access Models.
       </Text>
       <div className="mt-3">
-        {isLoading ? (
+        {isPending || isLoading ? (
           <div className=" mt-8 flex justify-center">
             <Spinner size={30} />
           </div>
-        ) : (
-          <DataTable
-            columns={table.columns}
-            rows={table.rows}
+        ) : data && data.length > 0 ? (
+          <Table
+            columns={generateColumnData()}
+            rows={generateTableData(data)}
             hideFooter={true}
-            defaultRowCount={10}
           />
+        ) : (
+          <div className="flex justify-center mt-8">Click on Reset Fields</div>
         )}
       </div>
     </>