feat: filter by totalresolvedvotes bigger than 0, types fix

Author: kemuru

web/src/hooks/queries/useTopUsersByCoherenceScore.ts

@@ -9,7 +9,7 @@ export type { TopUsersByCoherenceScoreQuery };
 
 const topUsersByCoherenceScoreQuery = graphql(`
   query TopUsersByCoherenceScore($first: Int!, $orderBy: User_orderBy, $orderDirection: OrderDirection) {
-    users(first: $first, orderBy: $orderBy, orderDirection: $orderDirection) {
+    users(first: $first, orderBy: $orderBy, orderDirection: $orderDirection, where: { totalResolvedVotes_gt: 0 }) {
       id
       coherenceScore
       totalCoherentVotes

web/src/pages/Home/CourtOverview/Stats.tsx

@@ -37,7 +37,7 @@ const StyledCard = styled(Card)`
   )}
 `;
 
-const getLastOrZero = (src: HomePageQuery["counters"], stat: HomePageQueryDataPoints) =>
+export const getLastOrZero = (src: HomePageQuery["counters"], stat: HomePageQueryDataPoints) =>
   src.length > 0 ? src.at(-1)?.[stat] : 0n.toString();
 
 interface IStat {

web/src/pages/Home/TopJurors/JurorCard/Coherence.tsx

@@ -11,21 +11,24 @@ const Container = styled.div`
   justify-content: center;
 `;
 
+const getPercent = (num: number, den: number): string => {
+  if (den === 0) return "0%";
+  return `${Math.floor((num * 100) / den)}%`;
+};
+
 interface ICoherence {
-  totalCoherentVotes: number;
-  totalResolvedVotes: number;
+  totalCoherentVotes: string;
+  totalResolvedVotes: string;
 }
 
 const Coherence: React.FC<ICoherence> = ({ totalCoherentVotes, totalResolvedVotes }) => {
   const coherenceRatio = `${totalCoherentVotes}/${totalResolvedVotes}`;
 
   return (
     <Container>
-      <Tooltip text={coherenceRatio}>{getPercent(totalCoherentVotes, totalResolvedVotes)}</Tooltip>
+      <Tooltip text={coherenceRatio}>{getPercent(Number(totalCoherentVotes), Number(totalResolvedVotes))}</Tooltip>
     </Container>
   );
 };
 
-const getPercent = (num: number, den: number): string => `${Math.floor((num * 100) / den)}%`;
-
 export default Coherence;

web/src/pages/Home/TopJurors/JurorCard/DesktopCard.tsx

@@ -39,10 +39,10 @@ const Container = styled.div`
 interface IDesktopCard {
   rank: number;
   address: string;
-  totalCoherentVotes: number;
-  totalResolvedVotes: number;
-  totalResolvedDisputes: number;
-  coherenceScore: number;
+  totalCoherentVotes: string;
+  totalResolvedVotes: string;
+  totalResolvedDisputes: string;
+  coherenceScore: string;
 }
 
 const DesktopCard: React.FC<IDesktopCard> = ({

web/src/pages/Home/TopJurors/JurorCard/JurorLevel.tsx

@@ -39,12 +39,12 @@ const StyledLabel = styled.label`
 `;
 
 interface IJurorLevel {
-  coherenceScore: number;
-  totalResolvedDisputes: number;
+  coherenceScore: string;
+  totalResolvedDisputes: string;
 }
 
 const JurorLevel: React.FC<IJurorLevel> = ({ coherenceScore, totalResolvedDisputes }) => {
-  const userLevelData = getUserLevelData(coherenceScore, totalResolvedDisputes);
+  const userLevelData = getUserLevelData(Number(coherenceScore), Number(totalResolvedDisputes));
   const level = userLevelData.level;
 
   return (

web/src/pages/Home/TopJurors/JurorCard/MobileCard.tsx

@@ -80,10 +80,10 @@ const HeaderCoherenceAndCoherence = styled.div`
 interface IMobileCard {
   rank: number;
   address: string;
-  coherenceScore: number;
-  totalCoherentVotes: number;
-  totalResolvedVotes: number;
-  totalResolvedDisputes: number;
+  coherenceScore: string;
+  totalCoherentVotes: string;
+  totalResolvedVotes: string;
+  totalResolvedDisputes: string;
 }
 
 const MobileCard: React.FC<IMobileCard> = ({

web/src/pages/Home/TopJurors/JurorCard/index.tsx

@@ -6,10 +6,10 @@ import MobileCard from "./MobileCard";
 interface IJurorCard {
   rank: number;
   address: `0x${string}`;
-  coherenceScore: number;
-  totalCoherentVotes: number;
-  totalResolvedVotes: number;
-  totalResolvedDisputes: number;
+  coherenceScore: string;
+  totalCoherentVotes: string;
+  totalResolvedVotes: string;
+  totalResolvedDisputes: string;
 }
 
 const JurorCard: React.FC<IJurorCard> = ({

web/src/pages/Jurors/index.tsx

@@ -5,15 +5,18 @@ import { MAX_WIDTH_LANDSCAPE, landscapeStyle } from "styles/landscapeStyle";
 import { responsiveSize } from "styles/responsiveSize";
 
 import { isUndefined } from "utils/index";
+import { getOneYearAgoTimestamp } from "utils/date";
 
 import { useTopUsersByCoherenceScore } from "queries/useTopUsersByCoherenceScore";
+import { useHomePageQuery } from "queries/useHomePageQuery";
 
 import { SkeletonDisputeListItem } from "components/StyledSkeleton";
 import Search from "./Search";
 import StatsAndFilters from "./StatsAndFilters";
 import JurorCard from "../Home/TopJurors/JurorCard";
 import { ListContainer, StyledLabel } from "../Home/TopJurors";
 import Header from "../Home/TopJurors/Header";
+import { getLastOrZero } from "../Home/CourtOverview/Stats";
 
 const Container = styled.div`
   width: 100%;
@@ -37,25 +40,28 @@ const StyledTitle = styled.h1`
 const Jurors: React.FC = () => {
   const { data: queryJurors } = useTopUsersByCoherenceScore(1000);
 
-  const topJurors = queryJurors?.users?.map((juror, index) => ({
+  const jurors = queryJurors?.users?.map((juror, index) => ({
     ...juror,
     rank: index + 1,
   }));
 
+  // const { data } = useHomePageQuery(getOneYearAgoTimestamp());
+  // const totalActiveJurors = data && getLastOrZero(data["counters"], "activeJurors");
+
   return (
     <Container>
       <StyledTitle>Jurors Leaderboard</StyledTitle>
       <Search />
       <StatsAndFilters totalJurors={0} />
 
-      {!isUndefined(topJurors) && topJurors.length === 0 ? (
+      {!isUndefined(jurors) && jurors.length === 0 ? (
         <StyledLabel>There are no jurors staked yet.</StyledLabel>
       ) : (
         <ListContainer>
           <Header />
-          {!isUndefined(topJurors)
-            ? topJurors.map((juror) => <JurorCard key={juror.rank} address={juror.id} {...juror} />)
-            : [...Array(5)].map((_, i) => <SkeletonDisputeListItem key={i} />)}
+          {!isUndefined(jurors)
+            ? jurors.map((juror) => <JurorCard key={juror.rank} address={juror.id} {...juror} />)
+            : [...Array(14)].map((_, i) => <SkeletonDisputeListItem key={i} />)}
         </ListContainer>
       )}
     </Container>