Merge pull request #1332 from kleros/fix(web)/cases-in-progress-and-pagination-overflow

fix(web)/cases-in-progress-and-pagination-overflow

Author: alcercu

web/src/pages/Cases/CasesFetcher.tsx

@@ -61,6 +61,10 @@ const CasesFetcher: React.FC = () => {
     () => calculateStats(isCourtFilter, courtData?.court, counterData?.counter, decodedFilter),
     [isCourtFilter, courtData?.court, counterData?.counter, decodedFilter]
   );
+  const totalPages = useMemo(
+    () => (!isUndefined(totalCases) ? Math.ceil(totalCases / casesPerPage) : 1),
+    [totalCases, casesPerPage]
+  );
 
   return (
     <CasesDisplay
@@ -69,7 +73,7 @@ const CasesFetcher: React.FC = () => {
       numberClosedDisputes={ruledCases}
       currentPage={pageNumber}
       setCurrentPage={(newPage: number) => navigate(`${location}/${newPage}/${order}/${filter}`)}
-      totalPages={!isUndefined(totalCases) ? Math.ceil(totalCases / casesPerPage) : 1}
+      totalPages={totalPages}
       {...{ casesPerPage }}
     />
   );

web/src/pages/Courts/CourtDetails/Stats.tsx

@@ -87,7 +87,7 @@ const stats: IStat[] = [
   },
   {
     title: "In Progress",
-    getText: (data) => data?.numberDisputes,
+    getText: (data) => data?.numberDisputes - data?.numberClosedDisputes,
     color: "orange",
     icon: BalanceIcon,
   },

web/src/pages/Dashboard/index.tsx

@@ -1,11 +1,12 @@
-import React from "react";
+import React, { useMemo } from "react";
 import styled from "styled-components";
 import { useNavigate, useParams } from "react-router-dom";
 import { useAccount } from "wagmi";
 import { OrderDirection } from "src/graphql/graphql";
 import { DisputeDetailsFragment, useMyCasesQuery } from "queries/useCasesQuery";
 import { useUserQuery } from "queries/useUser";
 import { decodeURIFilter, useRootPath } from "utils/uri";
+import { isUndefined } from "utils/index";
 import CasesDisplay from "components/CasesDisplay";
 import ConnectWallet from "components/ConnectWallet";
 import JurorInfo from "./JurorInfo";
@@ -54,6 +55,10 @@ const Dashboard: React.FC = () => {
   );
   const { data: userData } = useUserQuery(address, decodedFilter);
   const totalCases = userData?.user?.disputes.length;
+  const totalPages = useMemo(
+    () => (!isUndefined(totalCases) ? Math.ceil(totalCases / casesPerPage) : 1),
+    [totalCases, casesPerPage]
+  );
 
   return (
     <Container>
@@ -63,10 +68,10 @@ const Dashboard: React.FC = () => {
           <Courts />
           <StyledCasesDisplay
             title="My Cases"
-            disputes={disputesData?.user?.disputes as DisputeDetailsFragment[]}
+            disputes={userData?.user !== null ? (disputesData?.user?.disputes as DisputeDetailsFragment[]) : []}
             numberDisputes={totalCases}
             numberClosedDisputes={0}
-            totalPages={10}
+            totalPages={totalPages}
             currentPage={pageNumber}
             setCurrentPage={(newPage: number) => navigate(`${location}/${newPage}/${order}/${filter}`)}
             {...{ casesPerPage }}