[CFE-309]: Refactor(pages): refactor module details service files

CHANGELOG.md

@@ -43,6 +43,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Improvements
 
+- [#899](https://github.com/alleslabs/celatone-frontend/pull/899) Refactor module details APIs
+
 ### Bug fixes
 
 - [#893](https://github.com/alleslabs/celatone-frontend/pull/893) Fix validator list percent

src/lib/app-provider/env.ts

@@ -67,8 +67,6 @@ export enum CELATONE_QUERY_KEYS {
   PROPOSAL_VALIDATOR_VOTES = "CELATONE_QUERY_PROPOSAL_VALIDATOR_VOTES",
   PROPOSAL_ANSWER_COUNTS = "CELATONE_QUERY_PROPOSAL_ANSWER_COUNTS",
   RELATED_PROPOSALS_BY_CONTRACT_ADDRESS = "CELATONE_QUERY_RELATED_PROPOSALS_BY_CONTRACT_ADDRESS",
-  PROPOSALS_BY_MODULE_ID = "CELATONE_QUERY_PROPOSALS_BY_MODULE_ID",
-  PROPOSALS_COUNT_BY_MODULE_ID = "CELATONE_QUERY_PROPOSALS_COUNT_BY_MODULE_ID",
   PROPOSALS_BY_ADDRESS = "CELATONE_QUERY_PROPOSALS_BY_ADDRESS",
   PROPOSALS = "CELATONE_QUERY_PROPOSALS",
   PROPOSAL_PARAMS = "CELATONE_QUERY_PROPOSAL_PARAMS",
@@ -106,13 +104,12 @@ export enum CELATONE_QUERY_KEYS {
   MODULE_VERIFICATION = "CELATONE_QUERY_MODULE_VERIFICATION",
   FUNCTION_VIEW = "CELATONE_QUERY_FUNCTION_VIEW",
   MODULE_DECODE = "CELATONE_QUERY_MODULE_DECODE",
-  MODULE_ID = "CELATONE_QUERY_MODULE_ID",
   MODULE_TXS = "CELATONE_QUERY_MODULE_TXS",
-  MODULE_TXS_COUNT = "CELATONE_QUERY_MODULE_TXS_COUNT",
   MODULE_HISTORIES = "CELATONE_QUERY_MODULE_HISTORIES",
-  MODULE_HISTORIES_COUNT = "CELATONE_QUERY_MODULE_HISTORIES_COUNT",
-  MODULE_DETAILS = "CELATONE_QUERY_MODULE_DETAILS",
+  MODULE_PROPOSALS = "CELATONE_QUERY_MODULE_PROPOSALS",
   SCRIPT_DECODE = "CELATONE_QUERY_SCRIPT_DECODE",
+  MODULE_INFO = "CELATONE_QUERY_MODULE_INFO",
+  MODULE_TABLE_COUNTS = "CELATONE_QUERY_MODULE_TABLE_COUNTS",
   // RESOURCE
   RESOURCES_BY_ADDRESS = "CELATONE_QUERY_RESOURCES_BY_ADDRESS",
   // NFTS

src/lib/pages/module-details/components/tables/ModuleRelatedProposalsTable.tsx

@@ -1,25 +1,23 @@
-import type { ChangeEvent } from "react";
-
 import { Pagination } from "lib/components/pagination";
 import { usePaginator } from "lib/components/pagination/usePaginator";
 import { EmptyState, ErrorFetching } from "lib/components/state";
 import { ProposalsTable, ViewMore } from "lib/components/table";
-import { useRelatedProposalsByModuleIdPagination } from "lib/services/proposalService";
-import type { Nullish, Option } from "lib/types";
+import { useModuleRelatedProposals } from "lib/services/move";
+import type { HexAddr, Option } from "lib/types";
 
 interface ModuleRelatedProposalsTableProps {
-  moduleId: Nullish<number>;
+  address: HexAddr;
+  moduleName: string;
   scrollComponentId: string;
   relatedProposalsCount: Option<number>;
-  refetchCount: () => void;
   onViewMore?: () => void;
 }
 
 export const ModuleRelatedProposalsTable = ({
-  moduleId,
+  address,
+  moduleName,
   scrollComponentId,
   relatedProposalsCount,
-  refetchCount,
   onViewMore,
 }: ModuleRelatedProposalsTableProps) => {
   const {
@@ -29,6 +27,7 @@ export const ModuleRelatedProposalsTable = ({
     pageSize,
     setPageSize,
     offset,
+    setTotalData,
   } = usePaginator({
     total: relatedProposalsCount,
     initialState: {
@@ -42,28 +41,22 @@ export const ModuleRelatedProposalsTable = ({
     data: relatedProposals,
     isLoading,
     error,
-  } = useRelatedProposalsByModuleIdPagination(
-    moduleId,
+  } = useModuleRelatedProposals(
+    address,
+    moduleName,
     offset,
-    onViewMore ? 5 : pageSize
+    onViewMore ? 5 : pageSize,
+    {
+      onSuccess: (data) => {
+        setTotalData(data.total);
+      },
+    }
   );
 
-  const onPageChange = (nextPage: number) => {
-    refetchCount();
-    setCurrentPage(nextPage);
-  };
-
-  const onPageSizeChange = (e: ChangeEvent<HTMLSelectElement>) => {
-    const size = Number(e.target.value);
-    refetchCount();
-    setPageSize(size);
-    setCurrentPage(1);
-  };
-
   return (
     <>
       <ProposalsTable
-        proposals={relatedProposals}
+        proposals={relatedProposals?.items}
         isLoading={isLoading}
         emptyState={
           error ? (
@@ -87,8 +80,12 @@ export const ModuleRelatedProposalsTable = ({
                 totalData={relatedProposalsCount}
                 scrollComponentId={scrollComponentId}
                 pageSize={pageSize}
-                onPageChange={onPageChange}
-                onPageSizeChange={onPageSizeChange}
+                onPageChange={setCurrentPage}
+                onPageSizeChange={(e) => {
+                  const size = Number(e.target.value);
+                  setPageSize(size);
+                  setCurrentPage(1);
+                }}
               />
             ))}
     </>

src/lib/pages/module-details/components/tables/ModuleTxsTable.tsx

@@ -1,12 +1,11 @@
-import type { ChangeEvent } from "react";
 import { useEffect } from "react";
 
 import { useCelatoneApp } from "lib/app-provider";
 import { Pagination } from "lib/components/pagination";
 import { usePaginator } from "lib/components/pagination/usePaginator";
 import { EmptyState, ErrorFetching } from "lib/components/state";
 import { TransactionsTable, ViewMore } from "lib/components/table";
-import { useTxsByModule } from "lib/services/txService";
+import { useModuleTxs } from "lib/services/move";
 import type { HexAddr, Option } from "lib/types";
 
 interface ModuleTxsTableProps {
@@ -15,7 +14,6 @@ interface ModuleTxsTableProps {
   txCount: Option<number>;
   onViewMore?: () => void;
   scrollComponentId?: string;
-  refetchCount: () => void;
 }
 
 export const ModuleTxsTable = ({
@@ -24,7 +22,6 @@ export const ModuleTxsTable = ({
   txCount,
   onViewMore,
   scrollComponentId,
-  refetchCount,
 }: ModuleTxsTableProps) => {
   const { currentChainId } = useCelatoneApp();
 
@@ -35,6 +32,7 @@ export const ModuleTxsTable = ({
     pageSize,
     setPageSize,
     offset,
+    setTotalData,
   } = usePaginator({
     total: txCount,
     initialState: {
@@ -48,19 +46,9 @@ export const ModuleTxsTable = ({
     data: moduleTxs,
     isLoading,
     error,
-  } = useTxsByModule(address, moduleName, offset, pageSize);
-
-  const onPageChange = (nextPage: number) => {
-    refetchCount();
-    setCurrentPage(nextPage);
-  };
-
-  const onPageSizeChange = (e: ChangeEvent<HTMLSelectElement>) => {
-    const size = Number(e.target.value);
-    refetchCount();
-    setPageSize(size);
-    setCurrentPage(1);
-  };
+  } = useModuleTxs(address, moduleName, offset, pageSize, {
+    onSuccess: ({ total }) => setTotalData(total),
+  });
 
   useEffect(() => {
     if (!onViewMore) setPageSize(10);
@@ -96,8 +84,12 @@ export const ModuleTxsTable = ({
                 offset={offset}
                 totalData={txCount}
                 pageSize={pageSize}
-                onPageChange={onPageChange}
-                onPageSizeChange={onPageSizeChange}
+                onPageChange={setCurrentPage}
+                onPageSizeChange={(e) => {
+                  const size = Number(e.target.value);
+                  setPageSize(size);
+                  setCurrentPage(1);
+                }}
                 scrollComponentId={scrollComponentId}
               />
             ))}

src/lib/pages/module-details/components/tables/history/PublishedEventsTable.tsx

@@ -3,7 +3,8 @@ import { TableContainer } from "@chakra-ui/react";
 import { useMobile } from "lib/app-provider";
 import { Loading } from "lib/components/Loading";
 import { MobileTableContainer } from "lib/components/table";
-import type { ModuleHistory, Option } from "lib/types";
+import type { ModuleHistory } from "lib/services/move/module";
+import type { Option } from "lib/types";
 
 import { PublishedEventsTableHeader } from "./PublishedEventsTableHeader";
 import { PublishedEventsTableMobileCard } from "./PublishedEventsTableMobileCard";

src/lib/pages/module-details/components/tables/history/PublishedEventsTableMobileCard.tsx

@@ -6,7 +6,7 @@ import {
   MobileLabel,
   RemarkRender,
 } from "lib/components/table";
-import type { ModuleHistory } from "lib/types";
+import type { ModuleHistory } from "lib/services/move/module";
 import { dateFromNow, formatUTC } from "lib/utils";
 
 import { PolicyChanges } from "./PublishedEventsTableRow";

src/lib/pages/module-details/components/tables/history/PublishedEventsTableRow.tsx

@@ -5,7 +5,7 @@ import { capitalize } from "lodash";
 import { ExplorerLink } from "lib/components/ExplorerLink";
 import { CustomIcon } from "lib/components/icon";
 import { RemarkRender, TableRow } from "lib/components/table";
-import type { ModuleHistory } from "lib/types";
+import type { ModuleHistory } from "lib/services/move/module";
 import { dateFromNow, formatUTC } from "lib/utils";
 
 interface PublishedEventsTableRowProps {
@@ -39,7 +39,7 @@ export const PolicyChanges = ({ history }: { history: ModuleHistory }) => {
           <Text variant="body2" color="text.dark">
             Changed from{" "}
             <Text as="span" fontWeight={700}>
-              {capitalize(history.previousPolicy)}
+              {capitalize(history.previousPolicy ?? undefined)}
             </Text>
           </Text>
           <CustomIcon

src/lib/pages/module-details/components/tables/history/index.tsx

@@ -1,29 +1,28 @@
-import type { ChangeEvent } from "react";
 import { useEffect } from "react";
 
 import { useCelatoneApp } from "lib/app-provider";
 import { Pagination } from "lib/components/pagination";
 import { usePaginator } from "lib/components/pagination/usePaginator";
 import { EmptyState, ErrorFetching } from "lib/components/state";
 import { ViewMore } from "lib/components/table";
-import { useModuleHistoriesByPagination } from "lib/services/move/moduleService";
-import type { Nullish, Option } from "lib/types";
+import { useModuleHistories } from "lib/services/move/moduleService";
+import type { HexAddr, Option } from "lib/types";
 
 import { PublishedEventsTable } from "./PublishedEventsTable";
 
 interface ModuleHistoryTableProps {
-  moduleId: Nullish<number>;
+  address: HexAddr;
+  moduleName: string;
   historyCount: Option<number>;
   scrollComponentId?: string;
-  refetchCount: () => void;
   onViewMore?: () => void;
 }
 
 export const ModuleHistoryTable = ({
-  moduleId,
+  address,
+  moduleName,
   historyCount,
   scrollComponentId,
-  refetchCount,
   onViewMore,
 }: ModuleHistoryTableProps) => {
   const { currentChainId } = useCelatoneApp();
@@ -35,6 +34,7 @@ export const ModuleHistoryTable = ({
     pageSize,
     setPageSize,
     offset,
+    setTotalData,
   } = usePaginator({
     total: historyCount,
     initialState: {
@@ -48,23 +48,15 @@ export const ModuleHistoryTable = ({
     data: moduleHistories,
     isLoading,
     error,
-  } = useModuleHistoriesByPagination({
-    moduleId,
+  } = useModuleHistories(
+    address,
+    moduleName,
     offset,
-    pageSize: onViewMore ? 5 : pageSize,
-  });
-
-  const onPageChange = (nextPage: number) => {
-    refetchCount();
-    setCurrentPage(nextPage);
-  };
-
-  const onPageSizeChange = (e: ChangeEvent<HTMLSelectElement>) => {
-    const size = Number(e.target.value);
-    refetchCount();
-    setPageSize(size);
-    setCurrentPage(1);
-  };
+    onViewMore ? 5 : pageSize,
+    {
+      onSuccess: ({ total }) => setTotalData(total),
+    }
+  );
 
   useEffect(() => {
     if (!onViewMore) setPageSize(10);
@@ -74,10 +66,10 @@ export const ModuleHistoryTable = ({
   return (
     <>
       <PublishedEventsTable
-        moduleHistories={moduleHistories}
+        moduleHistories={moduleHistories?.items}
         isLoading={isLoading}
         emptyState={
-          !moduleId || error ? (
+          error ? (
             <ErrorFetching dataName="module published events history" />
           ) : (
             <EmptyState
@@ -98,8 +90,12 @@ export const ModuleHistoryTable = ({
                 offset={offset}
                 totalData={historyCount}
                 pageSize={pageSize}
-                onPageChange={onPageChange}
-                onPageSizeChange={onPageSizeChange}
+                onPageChange={setCurrentPage}
+                onPageSizeChange={(e) => {
+                  const size = Number(e.target.value);
+                  setPageSize(size);
+                  setCurrentPage(1);
+                }}
                 scrollComponentId={scrollComponentId}
               />
             ))}