Merge pull request #2023 from kleros/fix/profile-page-not-loading

fix: profile page not loading

Author: alcercu

web/src/components/NumberDisplay.tsx

@@ -1,6 +1,9 @@
 import React from "react";
 
 import { Tooltip } from "@kleros/ui-components-library";
+
+import { commify } from "utils/commify";
+
 interface INumberDisplay {
   value: string | number;
   unit?: string;
@@ -31,10 +34,11 @@ const NumberDisplay: React.FC<INumberDisplay> = ({
   isCurrency = false,
 }) => {
   const parsedValue = Number(value);
-  const formattedValue = getFormattedValue(parsedValue, decimals);
+  const formattedValue = commify(getFormattedValue(parsedValue, decimals));
   const tooltipValue = isCurrency ? `${unit} ${value}` : `${value} ${unit}`;
   const displayUnit = showUnitInDisplay ? unit : "";
   const displayValue = isCurrency ? `${displayUnit} ${formattedValue}` : `${formattedValue} ${displayUnit}`;
+
   return (
     <Tooltip small text={tooltipValue} place={place}>
       {displayValue}

web/src/hooks/queries/useCasesQuery.ts

@@ -3,6 +3,7 @@ import { Address } from "viem";
 
 import { useGraphqlBatcher } from "context/GraphqlBatcher";
 import { isUndefined } from "utils/index";
+import { sanitizeFilter } from "utils/sanitizeFilter";
 
 import { graphql } from "src/graphql";
 import {
@@ -71,38 +72,39 @@ const myCasesQueryWhere = graphql(`
 
 export const useCasesQuery = (skip = 0, first = 3, where?: Dispute_Filter, sortOrder?: OrderDirection) => {
   const { graphqlBatcher } = useGraphqlBatcher();
+  const sanitizedWhere = sanitizeFilter(where);
 
   return useQuery<CasesPageQuery>({
-    queryKey: [`useCasesQuery`, skip, where, sortOrder, first],
+    queryKey: [`useCasesQuery`, skip, sanitizedWhere, sortOrder, first],
     queryFn: async () =>
       await graphqlBatcher.fetch({
         id: crypto.randomUUID(),
-        document: isUndefined(where) ? casesQuery : casesQueryWhere,
+        document: isUndefined(sanitizedWhere) ? casesQuery : casesQueryWhere,
         variables: {
           first,
           skip,
-          where,
+          where: sanitizedWhere,
           orderDirection: sortOrder ?? "desc",
         },
       }),
   });
 };
 
 export const useMyCasesQuery = (user?: Address, skip = 0, where?: Dispute_Filter, sortOrder?: OrderDirection) => {
-  const isEnabled = !isUndefined(user);
   const { graphqlBatcher } = useGraphqlBatcher();
+  const sanitizedWhere = sanitizeFilter(where);
 
   return useQuery<MyCasesQuery>({
-    queryKey: [`useMyCasesQuery`, user, skip, where, sortOrder],
-    enabled: isEnabled,
+    queryKey: ["useMyCasesQuery", user, skip, sanitizedWhere, sortOrder],
+    enabled: !isUndefined(user),
     queryFn: async () =>
       await graphqlBatcher.fetch({
         id: crypto.randomUUID(),
-        document: isUndefined(where) ? myCasesQuery : myCasesQueryWhere,
+        document: isUndefined(sanitizedWhere) ? myCasesQuery : myCasesQueryWhere,
         variables: {
           skip,
           id: user?.toLowerCase(),
-          where,
+          where: sanitizedWhere,
           orderDirection: sortOrder ?? "desc",
         },
       }),

web/src/hooks/queries/useUser.ts

@@ -3,6 +3,7 @@ import { Address } from "viem";
 
 import { useGraphqlBatcher } from "context/GraphqlBatcher";
 
+import { sanitizeFilter } from "utils/sanitizeFilter";
 import { STALE_TIME } from "src/consts";
 import { graphql } from "src/graphql";
 import { UserQuery, Dispute_Filter, UserDisputeFilterQuery, UserDetailsFragment } from "src/graphql/graphql";
@@ -52,19 +53,20 @@ const userQueryDisputeFilter = graphql(`
 `);
 
 export const useUserQuery = (address?: Address, where?: Dispute_Filter) => {
+  const sanitizedWhere = sanitizeFilter(where);
   const isEnabled = address !== undefined;
-  const query = where ? userQueryDisputeFilter : userQuery;
+  const query = sanitizedWhere ? userQueryDisputeFilter : userQuery;
   const { graphqlBatcher } = useGraphqlBatcher();
 
   return useQuery<UserQuery | UserDisputeFilterQuery>({
-    queryKey: [`userQuery${address?.toLowerCase()}`],
+    queryKey: ["userQuery", address?.toLowerCase(), sanitizedWhere],
     enabled: isEnabled,
     staleTime: STALE_TIME,
     queryFn: async () =>
       await graphqlBatcher.fetch({
         id: crypto.randomUUID(),
         document: query,
-        variables: { address: address?.toLowerCase(), where },
+        variables: { address: address?.toLowerCase(), where: sanitizedWhere },
       }),
   });
 };

web/src/pages/Profile/index.tsx

@@ -11,7 +11,7 @@ import { isUndefined } from "utils/index";
 import { decodeURIFilter, useRootPath } from "utils/uri";
 import { DisputeDetailsFragment, useMyCasesQuery } from "queries/useCasesQuery";
 import { useUserQuery } from "queries/useUser";
-import { OrderDirection } from "src/graphql/graphql";
+import { Dispute_Filter, OrderDirection, UserDetailsFragment } from "src/graphql/graphql";
 
 import CasesDisplay from "components/CasesDisplay";
 import ConnectWallet from "components/ConnectWallet";
@@ -50,6 +50,33 @@ const ConnectWalletContainer = styled.div`
   color: ${({ theme }) => theme.primaryText};
 `;
 
+const calculateStats = (user: UserDetailsFragment, filter: Dispute_Filter) => {
+  const toInt = (v) => Number(v) || 0;
+  let totalCases, ruledCases;
+
+  if (!user) {
+    totalCases = 0;
+    ruledCases = 0;
+  } else if (filter?.period === "appeal") {
+    totalCases = toInt(user.totalAppealingDisputes);
+    ruledCases = 0;
+  } else if (filter?.ruled === true) {
+    totalCases = toInt(user.totalResolvedDisputes);
+    ruledCases = totalCases;
+  } else if (filter?.ruled === false) {
+    totalCases = toInt(user.disputes?.length);
+    ruledCases = 0;
+  } else {
+    totalCases = toInt(user.disputes?.length);
+    ruledCases = toInt(user.totalResolvedDisputes);
+  }
+
+  return {
+    totalCases,
+    ruledCases,
+  };
+};
+
 const Profile: React.FC = () => {
   const { isConnected, address: connectedAddress } = useAccount();
   const { page, order, filter } = useParams();
@@ -69,8 +96,10 @@ const Profile: React.FC = () => {
     order === "asc" ? OrderDirection.Asc : OrderDirection.Desc
   );
   const { data: userData } = useUserQuery(addressToQuery, decodedFilter);
-  const totalCases = userData?.user?.disputes.length;
-  const totalResolvedCases = parseInt(userData?.user?.totalResolvedDisputes);
+  const { totalCases, ruledCases: totalResolvedCases } = useMemo(
+    () => calculateStats(userData?.user, decodedFilter),
+    [userData?.user, decodedFilter]
+  );
   const totalPages = useMemo(
     () => (!isUndefined(totalCases) ? Math.ceil(totalCases / casesPerPage) : 1),
     [totalCases, casesPerPage]

web/src/utils/sanitizeFilter.ts

@@ -0,0 +1,5 @@
+export const sanitizeFilter = <T extends Record<string, any>>(f?: T) => {
+  if (!f) return undefined as unknown as T;
+  const cleaned = Object.fromEntries(Object.entries(f).filter(([_, v]) => !(Array.isArray(v) && v.length === 0)));
+  return Object.keys(cleaned).length ? (cleaned as T) : undefined;
+};