feat(web): cases search by disputeId

Author: Arun9650

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 };
+};