chore: attempt to improve admin page performance

latticexyz · Jan 8, 2024 · f44d931 · f44d931
1 parent 36a9c12
commit f44d931
Showing 1 changed file with 17 additions and 24 deletions.
diff --git a/packages/client/src/app/ui/AdminPage.tsx b/packages/client/src/app/ui/AdminPage.tsx
@@ -4,9 +4,7 @@ import { Entity, Has, getComponentValue, getComponentValueStrict } from "@lattic
 import { useComponentValue, useEntityQuery } from "@latticexyz/react";
 import { CreateMatch } from "./CreateMatch";
 import { Button } from "./Theme/SkyStrife/Button";
-import { Hex, formatEther, hexToString } from "viem";
-import { useMatchRewards } from "../amalgema-ui/hooks/useMatchRewards";
-import { ordinalSuffix } from "../amalgema-ui/MatchRewardsFooter";
+import { Hex, hexToString } from "viem";
 import { MatchNumber } from "./MatchNumber";
 import { getMatchUrl } from "../../getMatchUrl";
 import { decodeEntity } from "@latticexyz/store-sync/recs";
@@ -18,6 +16,7 @@ import { Templates } from "./Templates";
 import { Delegations } from "./Delegations";
 import { DateTime } from "luxon";
 import { SEASON_PASS_ONLY_SYSTEM_ID } from "../../constants";
+import { usePagination } from "../amalgema-ui/hooks/usePagination";
 
 const CopyButton = ({ matchEntity }: { matchEntity: Entity }) => {
   const {
@@ -29,7 +28,7 @@ const CopyButton = ({ matchEntity }: { matchEntity: Entity }) => {
 
   const progress = useComponentValue(MatchMapCopyProgress, matchEntity);
   const { levelId } = getComponentValueStrict(MatchConfig, matchEntity);
-  const templateIds = useComponentValue(LevelTemplates, levelId as Entity);
+  const templateIds = getComponentValue(LevelTemplates, levelId as Entity);
 
   const fraction = progress && templateIds ? Math.round(Number(progress.value * 100n) / templateIds.value.length) : 0;
 
@@ -57,18 +56,17 @@ const Row = ({ matchEntity }: { matchEntity: Entity }) => {
   const spawns = matchConfig ? getLevelSpawns(matchConfig.levelId) : [];
 
   const readyTime = useComponentValue(MatchReady, matchEntity);
-  const finished = useComponentValue(MatchFinished, matchEntity);
+  const finished = getComponentValue(MatchFinished, matchEntity);
   const reserved = useEntityQuery([Has(SpawnReservedBy)]).filter((entity) => {
     const key = decodeEntity(SpawnReservedBy.metadata.keySchema, entity);
 
     return key.matchEntity === matchEntity;
   });
   const levelName = matchConfig?.levelId ? hexToString(matchConfig.levelId as Hex, { size: 32 }) : "N/A";
-  const matchName = useComponentValue(MatchName, matchEntity)?.value ?? "";
+  const matchName = getComponentValue(MatchName, matchEntity)?.value ?? "";
 
-  const rewards = useMatchRewards(matchEntity).totalRewards;
   const registrationTime = DateTime.fromSeconds(Number(matchConfig?.registrationTime ?? 0n));
-  const matchAccessControl = useComponentValue(MatchAccessControl, matchEntity);
+  const matchAccessControl = getComponentValue(MatchAccessControl, matchEntity);
   const isSeasonPassOnly = matchAccessControl && matchAccessControl.systemId === SEASON_PASS_ONLY_SYSTEM_ID;
 
   return (
@@ -80,15 +78,6 @@ const Row = ({ matchEntity }: { matchEntity: Entity }) => {
       <td>
         {reserved.length} / {spawns.length}
       </td>
-      <td>
-        {rewards.length > 0
-          ? rewards.map((reward) => (
-              <div key={reward.rank.toString()}>
-                {ordinalSuffix(Number(reward.rank + 1))}: 🔮 {formatEther(reward.value)}
-              </div>
-            ))
-          : "None"}
-      </td>
       <td>{finished ? "Yes" : "No"}</td>
       <td>{isSeasonPassOnly ? "Yes" : "No"}</td>
       <td>
@@ -129,7 +118,6 @@ const Matches = () => {
   } = useAmalgema();
 
   const [visible, setVisible] = useState(false);
-  const [limit, setLimit] = useState(10);
 
   const matches = useEntityQuery([Has(MatchConfig)]);
   matches.sort((a, b) => {
@@ -139,6 +127,14 @@ const Matches = () => {
     return Number(bIndex) - Number(aIndex);
   });
 
+  const pageSize = 10;
+  const { form: paginationForm, page } = usePagination({
+    totalItems: matches.length,
+    pageSize,
+  });
+
+  const visibleMatches = matches.slice((page - 1) * pageSize, page * pageSize);
+
   return (
     <div>
       <div className="flex flex-row">
@@ -147,13 +143,14 @@ const Matches = () => {
           Create match
         </Button>
       </div>
+
+      {paginationForm}
       <table className="w-full text-lg text-left text-gray-500 dark:text-gray-400">
         <thead className="text-xl text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
           <tr>
             <th>Lobby</th>
             <th>Map</th>
             <th>Players</th>
-            <th>Rewards</th>
             <th>Finished?</th>
             <th>Season Pass Only?</th>
             <th>Registration Time</th>
@@ -162,15 +159,11 @@ const Matches = () => {
           </tr>
         </thead>
         <tbody>
-          {matches.slice(0, limit).map((match) => (
+          {visibleMatches.map((match) => (
             <Row key={match} matchEntity={match} />
           ))}
         </tbody>
       </table>
-
-      <Button buttonType="primary" onClick={() => setLimit(limit + 10)}>
-        Load more
-      </Button>
       {visible && <CreateMatch close={() => setVisible(false)} />}
     </div>
   );