fix(web): finish merging dev

Author: alcercu

web/src/components/CasesDisplay/index.tsx

@@ -10,6 +10,7 @@ const StyledHR = styled.hr`
 `;
 
 interface ICasesDisplay extends ICasesGrid {
+  numberDisputes?: number;
   numberClosedDisputes?: number;
   title?: string;
   className?: string;
@@ -39,7 +40,6 @@ const CasesDisplay: React.FC<ICasesDisplay> = ({
         <CasesGrid
           disputes={disputes}
           {...{
-            numberDisputes,
             casesPerPage,
             totalPages,
             currentPage,

web/src/components/DisputeCard/DisputeInfo.tsx

@@ -1,13 +1,13 @@
 import React from "react";
 import styled, { css } from "styled-components";
-import { useFiltersContext } from "context/FilterProvider";
 import { Periods } from "consts/periods";
 import BookmarkIcon from "svgs/icons/bookmark.svg";
 import CalendarIcon from "svgs/icons/calendar.svg";
 import LawBalanceIcon from "svgs/icons/law-balance.svg";
 import PileCoinsIcon from "svgs/icons/pile-coins.svg";
 import RoundIcon from "svgs/icons/round.svg";
 import Field from "../Field";
+import { useLocalStorage } from "react-use";
 
 const Container = styled.div<{ isList: boolean }>`
   display: flex;
@@ -56,7 +56,7 @@ const formatDate = (date: number) => {
 };
 
 const DisputeInfo: React.FC<IDisputeInfo> = ({ courtId, court, category, rewards, period, date, round }) => {
-  const { isList } = useFiltersContext();
+  const [isList, _] = useLocalStorage<boolean>("isList", false);
 
   return (
     <Container isList={isList}>

web/src/pages/Cases/CasesFetcher.tsx

@@ -1,11 +1,13 @@
 import React from "react";
+import { useWindowSize } from "react-use";
 import { useParams, useNavigate } from "react-router-dom";
 import { DisputeDetailsFragment, Dispute_Filter, OrderDirection } from "src/graphql/graphql";
-import CasesDisplay from "components/CasesDisplay";
+import { BREAKPOINT_LANDSCAPE } from "styles/landscapeStyle";
 import { useCasesQuery } from "queries/useCasesQuery";
 import { useCounterQuery, CounterQuery } from "queries/useCounter";
 import { useCourtDetails, CourtDetailsQuery } from "queries/useCourtDetails";
 import { decodeURIFilter, useRootPath } from "utils/uri";
+import CasesDisplay from "components/CasesDisplay";
 import { isUndefined } from "utils/index";
 
 const calculateStats = (
@@ -40,7 +42,9 @@ const CasesFetcher: React.FC = () => {
   const { page, order, filter } = useParams();
   const location = useRootPath();
   const navigate = useNavigate();
-  const casesPerPage = 3;
+  const { width } = useWindowSize();
+  const screenIsBig = width > BREAKPOINT_LANDSCAPE;
+  const casesPerPage = screenIsBig ? 9 : 3;
   const pageNumber = parseInt(page ?? "1");
   const disputeSkip = casesPerPage * (pageNumber - 1);
   const { data: counterData } = useCounterQuery();
@@ -49,6 +53,7 @@ const CasesFetcher: React.FC = () => {
   const { data: courtData } = useCourtDetails(decodedFilter?.court?.toString());
   const { data } = useCasesQuery(
     disputeSkip,
+    casesPerPage,
     decodedFilter,
     order === "asc" ? OrderDirection.Asc : OrderDirection.Desc
   );