fix(web): few fixable code smells

Author: kemuru

web/src/pages/Courts/TopSearch.tsx

@@ -2,12 +2,13 @@ import React, { useMemo } from "react";
 import { useNavigate } from "react-router-dom";
 import { DropdownCascader } from "@kleros/ui-components-library";
 import { StyledSkeleton } from "components/StyledSkeleton";
+import { isUndefined } from "utils/index";
 import { useCourtTree, CourtTreeQuery } from "queries/useCourtTree";
 
 const TopSearch: React.FC = () => {
   const { data } = useCourtTree();
   const navigate = useNavigate();
-  const items = useMemo(() => typeof data !== "undefined" && [rootToItems(data.court)], [data]);
+  const items = useMemo(() => !isUndefined(data) && [rootToItems(data.court)], [data]);
   return items ? (
     <DropdownCascader items={items} onSelect={(path: string) => navigate(path)} placeholder="Select Court" />
   ) : (

web/src/pages/Dashboard/JurorInfo/TokenRewards.tsx

@@ -24,10 +24,10 @@ const TokenRewards: React.FC<ITokenRewards> = ({ token, amount, value }) => {
   return (
     <RewardContainer>
       {token && <GradientTokenIcons icon={token} />}
-      <StyledH1>{amount ? amount : <StyledSkeleton width={76} />}</StyledH1>
+      <StyledH1>{amount || <StyledSkeleton width={76} />}</StyledH1>
       <StyledH1>{token}</StyledH1>
       <label>$ </label>
-      <label>{value ? value : <StyledSkeleton width={32} />}</label>
+      <label>{value || <StyledSkeleton width={32} />}</label>
     </RewardContainer>
   );
 };

web/src/pages/Home/LatestCases.tsx

@@ -21,7 +21,7 @@ const LatestCases: React.FC = () => {
       <h1>Latest Cases</h1>
       <div className="disputes-container">
         {data
-          ? data.disputes.map((dispute, i) => <DisputeCard key={i} {...dispute} />)
+          ? data.disputes.map((dispute) => <DisputeCard key={dispute.id} {...dispute} />)
           : Array.from({ length: 3 }).map((_, index) => <StyledSkeleton key={index} width={312} height={260} />)}
       </div>
     </Container>