feat(web): all lists page, refactors, styling

Author: kemuru

web/src/app.tsx

@@ -10,6 +10,7 @@ import StyledComponentsProvider from "context/StyledComponentsProvider";
 import RefetchOnBlock from "context/RefetchOnBlock";
 import Layout from "layout/index";
 import Home from "./pages/Home";
+import AllLists from "./pages/AllLists";
 
 const App: React.FC = () => {
   return (
@@ -21,6 +22,7 @@ const App: React.FC = () => {
             <SentryRoutes>
               <Route path="/" element={<Layout />}>
                 <Route index element={<Home />} />
+                <Route path="lists/*" element={<AllLists />} />
                 <Route path="*" element={<h1>404 not found</h1>} />
               </Route>
             </SentryRoutes>

web/src/assets/svgs/chains/ethereum.svg

@@ -0,0 +1,98 @@
+import React from "react";
+import styled, { useTheme } from "styled-components";
+import { useNavigate, useParams } from "react-router-dom";
+import { useWindowSize } from "react-use";
+import { DropdownSelect } from "@kleros/ui-components-library";
+import { useIsList } from "context/IsListProvider";
+import ListIcon from "svgs/icons/list.svg";
+import GridIcon from "svgs/icons/grid.svg";
+import { BREAKPOINT_LANDSCAPE } from "styles/landscapeStyle";
+import { decodeURIFilter, encodeURIFilter, useRootPath } from "utils/uri";
+
+const Container = styled.div`
+  display: flex;
+  justify-content: end;
+  gap: 12px;
+  width: fit-content;
+`;
+
+const StyledGridIcon = styled(GridIcon)`
+  cursor: pointer;
+  transition: filter 0.2s ease;
+  fill: ${({ theme }) => theme.primaryBlue};
+  width: 16px;
+  height: 16px;
+  overflow: hidden;
+`;
+
+const IconsContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 4px;
+`;
+
+const StyledListIcon = styled(ListIcon)`
+  cursor: pointer;
+  transition: filter 0.2s ease;
+  fill: ${({ theme }) => theme.primaryBlue};
+  width: 16px;
+  height: 16px;
+  overflow: hidden;
+`;
+
+const Filters: React.FC = () => {
+  const theme = useTheme();
+  const { order, filter } = useParams();
+  const { ruled, period, ...filterObject } = decodeURIFilter(filter ?? "all");
+  const navigate = useNavigate();
+  const location = useRootPath();
+
+  const handleStatusChange = (value: string | number) => {
+    const parsedValue = JSON.parse(value as string);
+    const encodedFilter = encodeURIFilter({ ...filterObject, ...parsedValue });
+    navigate(`${location}/1/${order}/${encodedFilter}`);
+  };
+
+  const handleOrderChange = (value: string | number) => {
+    const encodedFilter = encodeURIFilter({ ruled, period, ...filterObject });
+    navigate(`${location}/1/${value}/${encodedFilter}`);
+  };
+
+  const { width } = useWindowSize();
+  const { isList, setIsList } = useIsList();
+  const screenIsBig = width > BREAKPOINT_LANDSCAPE;
+
+  return (
+    <Container>
+      <DropdownSelect
+        smallButton
+        simpleButton
+        items={[
+          { value: "desc", text: "Most Active" },
+          { value: "desc", text: "Newest" },
+          { value: "asc", text: "Oldest" },
+        ]}
+        defaultValue={order}
+        callback={handleOrderChange}
+      />
+      {screenIsBig ? (
+        <IconsContainer>
+          {isList ? (
+            <StyledGridIcon onClick={() => setIsList(false)} />
+          ) : (
+            <StyledListIcon
+              onClick={() => {
+                if (screenIsBig) {
+                  setIsList(true);
+                }
+              }}
+            />
+          )}
+        </IconsContainer>
+      ) : null}
+    </Container>
+  );
+};
+
+export default Filters;

web/src/assets/svgs/chains/globe.svg

@@ -0,0 +1,88 @@
+import React, { useMemo } from "react";
+import styled from "styled-components";
+import { useWindowSize } from "react-use";
+import { useParams } from "react-router-dom";
+import { SkeletonRegistryCard, SkeletonRegistryListItem } from "../StyledSkeleton";
+import { StandardPagination } from "@kleros/ui-components-library";
+import { BREAKPOINT_LANDSCAPE } from "styles/landscapeStyle";
+import { useIsList } from "context/IsListProvider";
+import { isUndefined } from "utils/index";
+import { decodeURIFilter } from "utils/uri";
+// import { RegistryDetailsFragment } from "queries/useCasesQuery";
+import RegistryCard from "components/RegistryCard";
+
+const GridContainer = styled.div`
+  --gap: 24px;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(min(100%, max(348px, (100% - var(--gap) * 2)/3)), 1fr));
+  align-items: center;
+  gap: var(--gap);
+`;
+
+const ListContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 8px;
+`;
+
+const StyledPagination = styled(StandardPagination)`
+  margin-top: 24px;
+  margin-left: auto;
+  margin-right: auto;
+`;
+
+export interface IRegistriesGrid {
+  registries?: [];
+  currentPage: number;
+  setCurrentPage: (newPage: number) => void;
+  registriesPerPage: number;
+  totalPages: number;
+}
+
+const RegistriesGrid: React.FC<IRegistriesGrid> = ({
+  registries,
+  registriesPerPage,
+  totalPages,
+  currentPage,
+  setCurrentPage,
+}) => {
+  const { filter } = useParams();
+  const decodedFilter = decodeURIFilter(filter ?? "all");
+  const { id: searchValue } = decodedFilter;
+  const { isList } = useIsList();
+  const { width } = useWindowSize();
+  const screenIsBig = useMemo(() => width > BREAKPOINT_LANDSCAPE, [width]);
+
+  return (
+    <>
+      {isList && screenIsBig ? (
+        <ListContainer>
+          {isUndefined(registries)
+            ? [...Array(registriesPerPage)].map((_, i) => <SkeletonRegistryListItem key={i} />)
+            : registries.map((registry) => {
+                return <RegistryCard key={registry.id} {...registry} />;
+              })}
+        </ListContainer>
+      ) : (
+        <GridContainer>
+          {isUndefined(registries)
+            ? [...Array(registriesPerPage)].map((_, i) => <SkeletonRegistryCard key={i} />)
+            : registries.map((registry) => {
+                return <RegistryCard key={registry.id} {...registry} overrideIsList />;
+              })}
+        </GridContainer>
+      )}
+
+      {isUndefined(searchValue) ? (
+        <StyledPagination
+          currentPage={currentPage}
+          numPages={Math.ceil(totalPages ?? 0)}
+          callback={(page: number) => setCurrentPage(page)}
+        />
+      ) : null}
+    </>
+  );
+};
+
+export default RegistriesGrid;

web/src/assets/svgs/chains/gnosis.svg

@@ -0,0 +1,98 @@
+import React, { useState } from "react";
+import styled, { css } from "styled-components";
+import { landscapeStyle } from "styles/landscapeStyle";
+import { useNavigate, useParams } from "react-router-dom";
+import { useDebounce } from "react-use";
+import { Searchbar, DropdownSelect } from "@kleros/ui-components-library";
+import { decodeURIFilter, encodeURIFilter, useRootPath } from "utils/uri";
+import { StyledGlobeIcon } from "../StyledIcons/GlobeIcon";
+import { StyledEthereumIcon } from "../StyledIcons/EthereumIcon";
+import { StyledGnosisIcon } from "../StyledIcons/GnosisIcon";
+import { StyledPolygonIcon } from "../StyledIcons/PolygonIcon";
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  margin-bottom: 16px;
+
+  ${landscapeStyle(
+    () =>
+      css`
+        flex-direction: row;
+      `
+  )}
+`;
+
+const SearchBarContainer = styled.div`
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  z-index: 0;
+`;
+
+const StyledSearchbar = styled(Searchbar)`
+  flex: 1;
+  flex-basis: 310px;
+  input {
+    font-size: 16px;
+    height: 45px;
+    padding-top: 0px;
+    padding-bottom: 0px;
+  }
+`;
+
+const Search: React.FC = () => {
+  const { page, order, filter } = useParams();
+  const location = useRootPath();
+  const decodedFilter = decodeURIFilter(filter ?? "all");
+  const { id: searchValue, ...filterObject } = decodedFilter;
+  const [search, setSearch] = useState(searchValue ?? "");
+  const navigate = useNavigate();
+  useDebounce(
+    () => {
+      const newFilters = search === "" ? { ...filterObject } : { ...filterObject, id: search };
+      const encodedFilter = encodeURIFilter(newFilters);
+      navigate(`${location}/${page}/${order}/${encodedFilter}`);
+    },
+    500,
+    [search]
+  );
+
+  return (
+    <Container>
+      <SearchBarContainer>
+        <StyledSearchbar
+          type="text"
+          placeholder="Search By ID"
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+        />
+      </SearchBarContainer>
+      <DropdownSelect
+        items={[
+          { text: "All Networks", value: 1, Icon: StyledGlobeIcon },
+          { text: "Ethereum", value: 2, Icon: StyledEthereumIcon },
+          { text: "Gnosis", value: 3, Icon: StyledGnosisIcon },
+          { text: "Polygon", value: 4, Icon: StyledPolygonIcon },
+        ]}
+        defaultValue={1}
+        callback={() => {}}
+      />
+      <DropdownSelect
+        items={[
+          { text: "All Status", dot: "grey", value: 1 },
+          { text: "Pending", dot: "blue", value: 2 },
+          { text: "Disputed", dot: "purple", value: 3 },
+          { text: "Included", dot: "green", value: 4 },
+          { text: "Removed", dot: "red", value: 5 },
+        ]}
+        defaultValue={1}
+        callback={() => {}}
+      />
+    </Container>
+  );
+};
+
+export default Search;