Merge pull request #1989 from kleros/feat/more-descriptive-latest-cases-in-court-and-personalized-link-to-court

feat: more descriptive latest cases in court and personalized link to…

Author: alcercu

web/src/components/AllCasesButton.tsx

@@ -4,20 +4,39 @@ import styled from "styled-components";
 
 import DocIcon from "svgs/icons/doc.svg";
 
+import { encodeURIFilter } from "utils/uri";
+import { getDescriptiveCourtName } from "utils/getDescriptiveCourtName";
+
 import { BlueIconTextButtonContainer } from "./BlueIconTextButtonContainer";
 import { InternalLink } from "./InternalLink";
 
 const StyledDocIcon = styled(DocIcon)`
   width: 16px;
   height: 16px;
+  margin-right: 8px;
+`;
+
+const IconAndTextContainer = styled.div`
+  display: inline-block;
 `;
 
-const AllCasesButton: React.FC = () => {
+interface IAllCasesButton {
+  courtId?: string;
+  courtName?: string;
+}
+
+const AllCasesButton: React.FC<IAllCasesButton> = ({ courtId, courtName }) => {
+  const filter = courtId ? { court: courtId } : {};
+  const link = `/cases/display/1/desc/${encodeURIFilter(filter)}`;
+  const labelText = courtId ? `All Cases in ${getDescriptiveCourtName(courtName)}` : "All Cases";
+
   return (
-    <InternalLink to={"/cases/display/1/desc/all"}>
+    <InternalLink to={link}>
       <BlueIconTextButtonContainer>
-        <StyledDocIcon />
-        <label>All Cases</label>
+        <IconAndTextContainer>
+          <StyledDocIcon />
+          {labelText}
+        </IconAndTextContainer>
       </BlueIconTextButtonContainer>
     </InternalLink>
   );

web/src/components/BlueIconTextButtonContainer.tsx

@@ -5,6 +5,7 @@ export const BlueIconTextButtonContainer = styled.div`
   ${hoverShortTransitionTiming}
   display: flex;
   align-items: center;
+  text-align: center;
   font-size: 14px;
   font-weight: 400;
   gap: 8px;

web/src/components/LatestCases.tsx

@@ -36,20 +36,27 @@ const ButtonContainer = styled.div`
   justify-content: center;
 `;
 
-const LatestCases: React.FC<{ filters?: Dispute_Filter }> = ({ filters }) => {
+interface ILatestCases {
+  title?: string;
+  filters?: Dispute_Filter;
+  courtName?: string;
+}
+
+const LatestCases: React.FC<ILatestCases> = ({ title = "Latest Cases", filters, courtName }) => {
   const { data } = useCasesQuery(0, 3, filters);
   const disputes: DisputeDetailsFragment[] = useMemo(() => data?.disputes as DisputeDetailsFragment[], [data]);
+  const courtId = typeof filters?.court === "string" ? filters?.court : undefined;
 
   return isUndefined(disputes) || disputes.length > 0 ? (
     <Container>
-      <Title>Latest Cases</Title>
+      <Title>{title}</Title>
       <DisputeContainer>
         {isUndefined(disputes)
           ? Array.from({ length: 3 }).map((_, index) => <SkeletonDisputeCard key={index} />)
           : disputes.map((dispute) => <DisputeView key={dispute.id} {...dispute} overrideIsList />)}
       </DisputeContainer>
       <ButtonContainer>
-        <AllCasesButton />
+        <AllCasesButton {...{ courtId, courtName }} />
       </ButtonContainer>
     </Container>
   ) : null;

web/src/pages/Courts/CourtDetails/JurorsStakedByCourt/index.tsx

@@ -2,6 +2,9 @@ import React from "react";
 import styled from "styled-components";
 
 import { responsiveSize } from "styles/responsiveSize";
+
+import { getDescriptiveCourtName } from "utils/getDescriptiveCourtName";
+
 import Search from "./Search";
 import DisplayJurors from "./DisplayJurors";
 
@@ -18,10 +21,7 @@ const Title = styled.h1`
 const JurorsStakedByCourt: React.FC<{ courtName: string | undefined }> = ({ courtName }) => {
   return (
     <Container>
-      <Title>
-        Jurors Staked in {courtName}
-        {courtName?.toLowerCase().endsWith("court") || courtName?.toLowerCase().startsWith("corte") ? null : " Court"}
-      </Title>
+      <Title>Jurors Staked in {getDescriptiveCourtName(courtName)}</Title>
       <Search />
       <DisplayJurors />
     </Container>

web/src/pages/Courts/CourtDetails/index.tsx

@@ -8,6 +8,8 @@ import { Card, Breadcrumb } from "@kleros/ui-components-library";
 
 import { isProductionDeployment } from "consts/index";
 
+import { getDescriptiveCourtName } from "utils/getDescriptiveCourtName";
+
 import { useCourtTree, CourtTreeQuery } from "queries/useCourtTree";
 
 import { landscapeStyle } from "styles/landscapeStyle";
@@ -147,7 +149,11 @@ const CourtDetails: React.FC = () => {
       <StyledCard>
         <Description />
       </StyledCard>
-      <LatestCases filters={{ court: id }} />
+      <LatestCases
+        {...{ courtName }}
+        title={`Latest Cases in ${getDescriptiveCourtName(courtName)}`}
+        filters={{ court: id }}
+      />
       <JurorsStakedByCourt {...{ courtName }} />
       <ScrollTop />
     </Container>

web/src/utils/getDescriptiveCourtName.ts

@@ -0,0 +1,5 @@
+export const getDescriptiveCourtName = (courtName?: string): string => {
+  if (!courtName) return "";
+  const lc = courtName.toLowerCase();
+  return lc.endsWith("court") || lc.startsWith("corte") ? courtName : `${courtName} Court`;
+};