feat(web): cases search by disputeId

web/src/components/CasesDisplay/CasesGrid.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import styled from "styled-components";
 import { StandardPagination } from "@kleros/ui-components-library";
 import { CasesPageQuery } from "queries/useCasesQuery";
+import { CasesPageQueryId } from "queries/useCasesQuerybyId";
 import DisputeCard from "components/DisputeCard";
 
 const Container = styled.div`
@@ -20,6 +21,7 @@ const StyledPagination = styled(StandardPagination)`
 
 export interface ICasesGrid {
   disputes: CasesPageQuery["disputes"];
+  CaseIdData?: CasesPageQueryId["dispute"];
   currentPage: number;
   setCurrentPage: (newPage: number) => void;
   numberDisputes: number;
@@ -32,13 +34,24 @@ const CasesGrid: React.FC<ICasesGrid> = ({
   setCurrentPage,
   numberDisputes,
   casesPerPage,
+  CaseIdData,
 }) => {
   return (
     <>
       <Container>
-        {disputes.map((dispute, i) => {
-          return <DisputeCard key={i} {...dispute} />;
-        })}
+        {CaseIdData ? (
+          <>
+            {[CaseIdData].map((dispute, i) => {
+              return <DisputeCard key={i} {...dispute} />;
+            })}
+          </>
+        ) : (
+          <>
+            {disputes.map((dispute, i) => {
+              return <DisputeCard key={i} {...dispute} />;
+            })}
+          </>
+        )}
       </Container>
       <StyledPagination
         {...{ currentPage }}

web/src/components/CasesDisplay/Search.tsx

@@ -19,46 +19,51 @@ const StyledSearchbar = styled(Searchbar)`
   }
 `;
 
-const Search: React.FC = () => (
-  <Container>
-    <StyledSearchbar />
-    <DropdownCascader
-      placeholder={"Select Court"}
-      onSelect={() => {
-        // Called with the item value when select is clicked
-      }}
-      items={[
-        {
-          label: "General Court",
-          value: 0,
-          children: [
-            {
-              label: "Blockchain",
-              value: 1,
-              children: [
-                {
-                  label: "Technical",
-                  value: 2,
-                },
-                {
-                  label: "Non-technical",
-                  value: 3,
-                },
-                {
-                  label: "Other",
-                  value: 4,
-                },
-              ],
-            },
-            {
-              label: "Marketing Services",
-              value: 5,
-            },
-          ],
-        },
-      ]}
-    />
-  </Container>
-);
+const Search = ({ getDisputeId }: any) => {
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    getDisputeId(e.target.value);
+  };
+  return (
+    <Container>
+      <StyledSearchbar onChange={handleChange} />
+      <DropdownCascader
+        placeholder={"Select Court"}
+        onSelect={() => {
+          // Called with the item value when select is clicked
+        }}
+        items={[
+          {
+            label: "General Court",
+            value: 0,
+            children: [
+              {
+                label: "Blockchain",
+                value: 1,
+                children: [
+                  {
+                    label: "Technical",
+                    value: 2,
+                  },
+                  {
+                    label: "Non-technical",
+                    value: 3,
+                  },
+                  {
+                    label: "Other",
+                    value: 4,
+                  },
+                ],
+              },
+              {
+                label: "Marketing Services",
+                value: 5,
+              },
+            ],
+          },
+        ]}
+      />
+    </Container>
+  );
+};
 
 export default Search;

web/src/components/CasesDisplay/index.tsx

@@ -1,9 +1,10 @@
-import React from "react";
+import React, { useState } from "react";
 import styled from "styled-components";
 import Search from "./Search";
 import StatsAndFilters from "./StatsAndFilters";
 import CasesGrid, { ICasesGrid } from "./CasesGrid";
-
+import { useCasesQueryById } from "hooks/queries/useCasesQuerybyId";
+// import { CasesPageQueryId } from "queries/useCasesQuerybyId";
 const StyledHR = styled.hr`
   margin-top: 24px;
   margin-bottom: 24px;
@@ -22,26 +23,32 @@ const CasesDisplay: React.FC<ICasesDisplay> = ({
   casesPerPage,
   title = "Cases",
   className,
-}) => (
-  <div {...{ className }}>
-    <h1>{title}</h1>
-    <Search />
-    <StatsAndFilters />
-    <StyledHR />
-    {disputes.length > 0 ? (
-      <CasesGrid
-        {...{
-          disputes,
-          currentPage,
-          setCurrentPage,
-          numberDisputes,
-          casesPerPage,
-        }}
-      />
-    ) : (
-      <h1>wow no cases</h1>
-    )}
-  </div>
-);
+}) => {
+  const [query, setQuery] = useState<string>("");
+  const { data } = useCasesQueryById(query);
+  const CaseIdData = data?.dispute;
+  return (
+    <div {...{ className }}>
+      <h1>{title}</h1>
+      <Search getDisputeId={setQuery} />
+      <StatsAndFilters />
+      <StyledHR />
+      {disputes.length > 0 ? (
+        <CasesGrid
+          {...{
+            CaseIdData,
+            disputes,
+            currentPage,
+            setCurrentPage,
+            numberDisputes,
+            casesPerPage,
+          }}
+        />
+      ) : (
+        <h1>wow no cases</h1>
+      )}
+    </div>
+  );
+};
 
 export default CasesDisplay;

web/src/graphql/generated.ts

@@ -3064,6 +3064,25 @@ export type CasesPageQuery = {
   counter?: { __typename?: "Counter"; cases: any } | null;
 };
 
+export type CasesPageQueryId = {
+  __typename?: "Query";
+  dispute: {
+    __typename?: "Dispute";
+    id: string;
+    period: Period;
+    lastPeriodChange: any;
+    arbitrated: { __typename?: "Arbitrable"; id: string };
+    court: {
+      __typename?: "Court";
+      id: string;
+      policy?: string | null;
+      feeForJuror: any;
+      timesPerPeriod: Array<any>;
+    };
+  };
+  counter?: { __typename?: "Counter"; cases: any } | null;
+};
+
 export type ClassicAppealQueryVariables = Exact<{
   disputeID: Scalars["ID"];
 }>;

web/src/hooks/queries/useCasesQuerybyId.tsx

@@ -0,0 +1,40 @@
+/* eslint-disable prettier/prettier */
+import useSWR from "swr";
+import { gql } from "graphql-request";
+import { CasesPageQueryId } from "src/graphql/generated";
+export type { CasesPageQueryId };
+
+const casesQuery = gql`
+  query DisputeById($disputeID: ID!) {
+    dispute(id: $disputeID) {
+      id
+      arbitrated {
+        id
+      }
+      court {
+        id
+        policy
+        feeForJuror
+        timesPerPeriod
+      }
+      period
+      lastPeriodChange
+    }
+    counter(id: "0") {
+      cases
+    }
+  }
+`;
+
+export const useCasesQueryById = (id?: string | number) => {
+  const { data, error, isValidating } = useSWR(() =>
+    typeof id !== "undefined"
+      ? {
+          query: casesQuery,
+          variables: { disputeID: id?.toString() },
+        }
+      : false
+  );
+  const result = data ? (data as CasesPageQueryId) : undefined;
+  return { data: result, error, isValidating };
+};