fix(web): wrong count and bad filter encoding

Author: alcercu

web/src/components/CasesDisplay/Search.tsx

@@ -4,7 +4,7 @@ import { useDebounce } from "react-use";
 import styled from "styled-components";
 import Skeleton from "react-loading-skeleton";
 import { Searchbar, DropdownCascader } from "@kleros/ui-components-library";
-import { rootCourtToItems, useCourtTree } from "hooks/queries/useCourtTree";
+import { rootCourtToItems, useCourtTree } from "queries/useCourtTree";
 import { isUndefined } from "utils/index";
 import { decodeURIFilter, encodeURIFilter, useRootPath } from "utils/uri";
 
@@ -44,10 +44,14 @@ const Search: React.FC = () => {
     [search]
   );
   const { data: courtTreeData } = useCourtTree();
-  const items = useMemo(
-    () => !isUndefined(courtTreeData) && [rootCourtToItems(courtTreeData.court, "id")],
-    [courtTreeData]
-  );
+  const items = useMemo(() => {
+    if (!isUndefined(courtTreeData)) {
+      const items = [rootCourtToItems(courtTreeData.court!, "id")];
+      items.push({ label: "All Courts", value: "all" });
+      return items;
+    }
+    return undefined;
+  }, [courtTreeData]);
 
   return (
     <div>
@@ -63,7 +67,11 @@ const Search: React.FC = () => {
         <DropdownCascader
           items={items}
           placeholder={"Select Court"}
-          onSelect={(value) => navigate(`${location}/${page}/${order}/${{ ...filterObject, court: value }}`)}
+          onSelect={(value) => {
+            const { court: _, ...filterWithoutCourt } = decodedFilter;
+            const newFilter = value === "all" ? filterWithoutCourt : { ...decodedFilter, court: value.toString() };
+            navigate(`${location}/${page}/${order}/${encodeURIFilter(newFilter)}`);
+          }}
         />
       ) : (
         <Skeleton width={240} height={42} />

web/src/hooks/queries/useCourtTree.ts

@@ -46,8 +46,11 @@ interface IItem {
   children?: IItem[];
 }
 
-export const rootCourtToItems = (court: NonNullable<CourtTreeQuery["court"]>, value?: "id" | "path"): IItem => ({
+export const rootCourtToItems = (
+  court: NonNullable<CourtTreeQuery["court"]>,
+  value: "id" | "path" = "path"
+): IItem => ({
   label: court.name ? court.name : "Unnamed Court",
   value: value === "id" ? court.id : `/courts/${court.id}`,
-  children: court.children.length > 0 ? court.children.map((child) => rootCourtToItems(child)) : undefined,
+  children: court.children.length > 0 ? court.children.map((child) => rootCourtToItems(child, value)) : undefined,
 });

web/src/pages/Cases/CasesFetcher.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useMemo } from "react";
 import { useWindowSize } from "react-use";
 import { useParams, useNavigate } from "react-router-dom";
 import { DisputeDetailsFragment, Dispute_Filter, OrderDirection } from "src/graphql/graphql";
@@ -24,7 +24,7 @@ const calculateStats = (
     totalCases = isCourtFilter ? courtData?.numberDisputes : counters?.cases;
     ruledCases = isCourtFilter ? courtData?.numberClosedDisputes : counters?.casesRuled;
   } else if (filter?.ruled) {
-    totalCases = isCourtFilter ? courtData?.numberClosedDisputes : counters?.casesAppealing;
+    totalCases = isCourtFilter ? courtData?.numberClosedDisputes : counters?.casesRuled;
     ruledCases = totalCases;
   } else {
     totalCases = isCourtFilter
@@ -57,11 +57,9 @@ const CasesFetcher: React.FC = () => {
     decodedFilter,
     order === "asc" ? OrderDirection.Asc : OrderDirection.Desc
   );
-  const { totalCases, ruledCases } = calculateStats(
-    isCourtFilter,
-    courtData?.court,
-    counterData?.counter,
-    decodedFilter
+  const { totalCases, ruledCases } = useMemo(
+    () => calculateStats(isCourtFilter, courtData?.court, counterData?.counter, decodedFilter),
+    [isCourtFilter, courtData?.court, counterData?.counter, decodedFilter]
   );
 
   return (