feat: make cases cards links and create new case buttons too

Author: kemuru

web/src/components/CasesDisplay/index.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import styled from "styled-components";
 
-import { useLocation, useNavigate } from "react-router-dom";
+import { Link, useLocation } from "react-router-dom";
 
 import ArrowIcon from "svgs/icons/arrow.svg";
 
@@ -53,14 +53,15 @@ const CasesDisplay: React.FC<ICasesDisplay> = ({
   className,
   totalPages,
 }) => {
-  const navigate = useNavigate();
   const location = useLocation();
   return (
     <div {...{ className }}>
       <TitleContainer className="title">
         <StyledTitle>{title}</StyledTitle>
         {location.pathname.startsWith("/cases/display/1/desc/all") ? (
-          <StyledButton onClick={() => navigate(`/resolver`)} text="Create a case" Icon={ArrowIcon} />
+          <Link to={"/resolver"}>
+            <StyledButton text="Create a case" Icon={ArrowIcon} />
+          </Link>
         ) : null}
       </TitleContainer>
       <Search />

web/src/components/DisputeView/DisputeCardView.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import styled from "styled-components";
 
-import { useNavigate } from "react-router-dom";
+import { Link } from "react-router-dom";
 
 import { Card } from "@kleros/ui-components-library";
 
@@ -54,15 +54,16 @@ interface IDisputeCardView {
 }
 
 const DisputeCardView: React.FC<IDisputeCardView> = ({ isLoading, ...props }) => {
-  const navigate = useNavigate();
   return (
-    <StyledCard hover onClick={() => navigate(`/cases/${props?.disputeID?.toString()}`)}>
-      <PeriodBanner id={parseInt(props?.disputeID)} period={props?.period} />
-      <CardContainer>
-        {isLoading ? <StyledCaseCardTitleSkeleton /> : <TruncatedTitle text={props?.title} maxLength={100} />}
-        <DisputeInfo {...props} />
-      </CardContainer>
-    </StyledCard>
+    <Link to={`/cases/${props?.disputeID?.toString()}`}>
+      <StyledCard hover>
+        <PeriodBanner id={parseInt(props?.disputeID)} period={props?.period} />
+        <CardContainer>
+          {isLoading ? <StyledCaseCardTitleSkeleton /> : <TruncatedTitle text={props?.title} maxLength={100} />}
+          <DisputeInfo {...props} />
+        </CardContainer>
+      </StyledCard>
+    </Link>
   );
 };
 

web/src/components/DisputeView/DisputeListView.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import styled from "styled-components";
 
-import { useNavigate } from "react-router-dom";
+import { Link } from "react-router-dom";
 import { useAccount } from "wagmi";
 
 import { Card } from "@kleros/ui-components-library";
@@ -56,17 +56,18 @@ interface IDisputeListView {
 }
 const DisputeListView: React.FC<IDisputeListView> = (props) => {
   const { isDisconnected } = useAccount();
-  const navigate = useNavigate();
   return (
-    <StyledListItem hover onClick={() => navigate(`/cases/${props?.disputeID?.toString()}`)}>
-      <PeriodBanner isCard={false} id={parseInt(props?.disputeID ?? "0")} period={props.period} />
-      <ListContainer>
-        <TitleContainer isLabel={!isDisconnected}>
-          <TruncatedTitle text={props?.title} maxLength={50} />
-        </TitleContainer>
-        <DisputeInfo {...props} />
-      </ListContainer>
-    </StyledListItem>
+    <Link to={`/cases/${props?.disputeID?.toString()}`}>
+      <StyledListItem hover>
+        <PeriodBanner isCard={false} id={parseInt(props?.disputeID ?? "0")} period={props.period} />
+        <ListContainer>
+          <TitleContainer isLabel={!isDisconnected}>
+            <TruncatedTitle text={props?.title} maxLength={50} />
+          </TitleContainer>
+          <DisputeInfo {...props} />
+        </ListContainer>
+      </StyledListItem>
+    </Link>
   );
 };
 

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

@@ -3,7 +3,7 @@ import styled from "styled-components";
 
 import { responsiveSize } from "styles/responsiveSize";
 
-import { useNavigate } from "react-router-dom";
+import { Link } from "react-router-dom";
 
 import { Button } from "@kleros/ui-components-library";
 
@@ -22,11 +22,12 @@ const StyledH1 = styled.h1`
 `;
 
 const Header: React.FC = () => {
-  const navigate = useNavigate();
   return (
     <StyledHeader>
       <StyledH1>Court Overview</StyledH1>
-      <Button small Icon={Bookmark} text="Create a Case" onClick={() => navigate("/resolver")} />
+      <Link to={"/resolver"}>
+        <Button small Icon={Bookmark} text="Create a Case" />
+      </Link>
     </StyledHeader>
   );
 };