fix build issues

cartridge-gg · Sep 19, 2023 · 4ef9411 · 4ef9411
1 parent c6b0b91
commit 4ef9411
Show file tree

Hide file tree

Showing 3 changed files with 209 additions and 294 deletions.
diff --git a/web/src/components/Leaderboard.tsx b/web/src/components/Leaderboard.tsx
@@ -45,22 +45,25 @@ const Leaderboard = ({
   const [targetGameId, setTargetGameId] = useState<string>("");
   const [name, setName] = useState<string>("");
 
+  const pageSize = 10
   const [hasNextPage, setHasNextPage] = useState(false);
-  const [visibleScores, setVisibleScores] = useState(10);
+  const [visibleScores, setVisibleScores] = useState(pageSize);
 
-  const listRef = useRef(null);
+  const listRef = useRef<null | HTMLLIElement>(null); 
 
   useEffect(() => {
     setHasNextPage(visibleScores < scores.length);
   }, [scores,visibleScores]);
 
 
   const fetchNextPage = useCallback(() => {
-    setVisibleScores(visibleScores+10)
+    setVisibleScores(visibleScores+pageSize)
     setTimeout(() => {
-      listRef.current?.lastElementChild?.scrollIntoView({ behavior: 'smooth' });
+      if (! listRef.current) return
+      const lastEl = listRef.current['lastElementChild']
+      lastEl && lastEl.scrollIntoView({ behavior: 'smooth' });
     },150)
-  });
+  },[listRef.current]);
 
 
   const onSubmitName = useCallback(async () => {
@@ -80,7 +83,7 @@ const Leaderboard = ({
 
   return (
     <>
-    <VStack {...props} w="full" h="100%">
+    <VStack w="full" h="100%">
       <UnorderedList boxSize="full" variant="dotted" h="auto" maxH="calc(100% - 50px)" overflowY="auto"  sx={{
         overflowY: "scroll",
         "&::-webkit-scrollbar": {
@@ -110,7 +113,7 @@ const Leaderboard = ({
                     setTargetGameId(score.gameId);
                     onOpen();
                   }}
-                  ref={index === visibleScores-1 ? listRef : undefined}
+                  ref={listRef}
                 >
                   <HStack mr={3}>
                     <Text

diff --git a/web/src/dojo/components/useGlobalScores.tsx b/web/src/dojo/components/useGlobalScores.tsx
@@ -68,48 +68,48 @@ export const useGlobalScores = (offset?: number, limit?: number) => {
 };
 
 
-// TODO : use when supported on torii
-export const useGlobalScoresIninite = (offset?: number, limit?: number) => {
-  const [scores, setScores] = useState<Score[]>([]);
-  // Gets top 10
-  // TODO: paginate with cursor for more scores
-  const { data, isFetched, refetch, hasNextPage, fetchNextPage, ...props } =
-    useInfiniteGlobalScoresQuery(
-      {
-        limit: limit || 10,
-      },
-      {
-        getNextPageParam: (lastPage) => {
-          const edgesCount = lastPage.playerComponents?.edges?.length || 0;
-          if ( edgesCount === 0) return undefined
-          const lastItem = lastPage.playerComponents?.edges[edgesCount - 1]
-            return {
-              limit: 10,
-              cursor: lastItem.cursor,
-            };
-          }
-        },
-    );
-
-  useEffect(() => {
-    if (data?.pages.length == 0) return;
-    const pageCount = data?.pages.length || 0;
-    // debugger
-    const new_scores = GlobalScores.create(
-      data?.pages[pageCount - 1].playerComponents?.edges as PlayerEdge[],
-    );
-
-    if (new_scores) {
-      setScores(scores.concat(new_scores));
-    }
-  }, [data?.pages]);
-
-
-  return {
-    scores,
-    isFetched,
-    refetch,
-    hasNextPage,
-    fetchNextPage,
-  };
-};
+// // TODO : use when supported on torii
+// export const useGlobalScoresIninite = (offset?: number, limit?: number) => {
+//   const [scores, setScores] = useState<Score[]>([]);
+//   // Gets top 10
+//   // TODO: paginate with cursor for more scores
+//   const { data, isFetched, refetch, hasNextPage, fetchNextPage, ...props } =
+//     useInfiniteGlobalScoresQuery(
+//       {
+//         limit: limit || 10,
+//       },
+//       {
+//         getNextPageParam: (lastPage) => {
+//           const edgesCount = lastPage.playerComponents?.edges?.length || 0;
+//           if ( edgesCount === 0) return undefined
+//           const lastItem = lastPage.playerComponents?.edges[edgesCount - 1]
+//             return {
+//               limit: 10,
+//               cursor: lastItem.cursor,
+//             };
+//           }
+//         },
+//     );
+
+//   useEffect(() => {
+//     if (data?.pages.length == 0) return;
+//     const pageCount = data?.pages.length || 0;
+//     // debugger
+//     const new_scores = GlobalScores.create(
+//       data?.pages[pageCount - 1].playerComponents?.edges as PlayerEdge[],
+//     );
+
+//     if (new_scores) {
+//       setScores(scores.concat(new_scores));
+//     }
+//   }, [data?.pages]);
+
+
+//   return {
+//     scores,
+//     isFetched,
+//     refetch,
+//     hasNextPage,
+//     fetchNextPage,
+//   };
+// };