Skip to content

Commit fdf4c0a

Browse files
kyrerskyrers
committed
refactor: migrate AllLists page + registries fetcher and related components
1 parent 4e96cdc commit fdf4c0a

File tree

10 files changed

+105
-239
lines changed

10 files changed

+105
-239
lines changed

‎web/src/components/RegistriesDisplay/RegistriesGrid.tsx‎

Lines changed: 7 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,15 @@
11
import React, { useMemo } from "react";
2-
import styled from "styled-components";
32
import { useWindowSize } from "react-use";
43
import { useParams } from "react-router-dom";
54
import { SkeletonRegistryCard, SkeletonRegistryListItem } from "../StyledSkeleton";
65
import { StandardPagination } from "@kleros/ui-components-library";
7-
import { BREAKPOINT_LANDSCAPE } from "styles/landscapeStyle";
86
import { useIsListView } from "context/IsListViewProvider";
97
import { isUndefined } from "utils/index";
108
import { decodeListURIFilter } from "utils/uri";
119
// import { RegistryDetailsFragment } from "queries/useCasesQuery";
1210
import RegistryCard from "components/RegistryCard";
1311
import { mapFromSubgraphStatus } from "../RegistryCard/StatusBanner";
1412

15-
const GridContainer = styled.div`
16-
--gap: 16px;
17-
display: grid;
18-
grid-template-columns: repeat(auto-fill, minmax(min(100%, max(274px, (100% - var(--gap) * 2)/3)), 1fr));
19-
align-items: center;
20-
gap: var(--gap);
21-
`;
22-
23-
const ListContainer = styled.div`
24-
display: flex;
25-
flex-direction: column;
26-
justify-content: center;
27-
gap: 8px;
28-
`;
29-
30-
const StyledPagination = styled(StandardPagination)`
31-
margin-top: 24px;
32-
margin-left: auto;
33-
margin-right: auto;
34-
`;
35-
3613
export interface IRegistriesGrid {
3714
registries?: [];
3815
registriesLoading?: boolean;
@@ -57,12 +34,12 @@ const RegistriesGrid: React.FC<IRegistriesGrid> = ({
5734
const { id: searchValue } = decodedFilter;
5835
const { isListView } = useIsListView();
5936
const { width } = useWindowSize();
60-
const screenIsBig = useMemo(() => width > BREAKPOINT_LANDSCAPE, [width]);
37+
const screenIsBig = useMemo(() => width > 900, [width]);
6138

6239
return (
6340
<>
6441
{isListView && screenIsBig ? (
65-
<ListContainer>
42+
<div className="flex flex-col justify-center gap-2">
6643
{isUndefined(registries) || registriesLoading
6744
? [...Array(registriesPerPage)].map((_, i) => <SkeletonRegistryListItem key={i} />)
6845
: registries.map((registry) => {
@@ -74,9 +51,9 @@ const RegistriesGrid: React.FC<IRegistriesGrid> = ({
7451
/>
7552
);
7653
})}
77-
</ListContainer>
54+
</div>
7855
) : (
79-
<GridContainer>
56+
<div className="grid grid-cols-[repeat(auto-fill,minmax(min(100%,max(274px,(100%-16px*2)/3)),1fr))] items-center gap-4">
8057
{isUndefined(registries) || registriesLoading
8158
? [...Array(registriesPerPage)].map((_, i) => <SkeletonRegistryCard key={i} />)
8259
: registries.map((registry) => {
@@ -89,11 +66,12 @@ const RegistriesGrid: React.FC<IRegistriesGrid> = ({
8966
/>
9067
);
9168
})}
92-
</GridContainer>
69+
</div>
9370
)}
9471

9572
{isUndefined(searchValue) && showPagination ? (
96-
<StyledPagination
73+
<StandardPagination
74+
className="mt-6 mx-auto"
9775
currentPage={currentPage}
9876
numPages={Math.ceil(totalPages ?? 0)}
9977
callback={(page: number) => setCurrentPage(page)}

‎web/src/components/RegistryCard/RegistryInfo.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ const ListInfo: React.FC<IListInfo> = ({ title, totalItems, logoURI, status, isL
3838
"grid grid-cols-[21px_max-content_1fr_max-content] grid-rows-[repeat(3,min-content)] gap-y-4",
3939
"w-full h-max lg:h-16 p-4",
4040
"[&_h3]:col-span-4 [&_img]:col-span-4",
41-
"lg:justify-between lg:grid-rows-[1fr] lg:px-8",
41+
"lg:justify-between lg:grid-rows-[1fr] lg:px-8 lg:py-0",
4242
"lg:[&_img]:col-span-1 lg:[&_h3]:col-span-2",
4343
landscapeGridColsCalc,
4444
]

‎web/src/components/RegistryCard/StatusBanner.tsx‎

Lines changed: 16 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -39,17 +39,23 @@ export const mapFromSubgraphStatus = (status: string, isDisputed: boolean) => {
3939
}
4040
};
4141

42-
const statusStyles: Record<Status, string> = {
42+
const borderAndBgStyles: Record<Status, string> = {
43+
[Status.RegistrationPending]: "border-t-klerosUIComponentsPrimaryBlue bg-klerosUIComponentsMediumBlue",
44+
[Status.ClearingPending]: "border-t-klerosUIComponentsPrimaryBlue bg-klerosUIComponentsMediumBlue",
45+
[Status.Disputed]: "border-t-klerosUIComponentsSecondaryPurple bg-klerosUIComponentsMediumPurple",
46+
[Status.Included]: "border-t-klerosUIComponentsSuccess bg-klerosUIComponentsSuccessLight",
47+
[Status.Removed]: "border-t-klerosUIComponentsError bg-klerosUIComponentsErrorLight",
48+
};
49+
50+
const dotAndFrontColorStyles: Record<Status, string> = {
4351
[Status.RegistrationPending]:
44-
"border-t-klerosUIComponentsPrimaryBlue bg-klerosUIComponentsMediumBlue [&_.front-color]:text-klerosUIComponentsPrimaryBlue [&_.dot::before]:bg-klerosUIComponentsPrimaryBlue",
52+
"[&_.front-color]:text-klerosUIComponentsPrimaryBlue [&_.dot::before]:bg-klerosUIComponentsPrimaryBlue",
4553
[Status.ClearingPending]:
46-
"border-t-klerosUIComponentsPrimaryBlue bg-klerosUIComponentsMediumBlue [&_.front-color]:text-klerosUIComponentsPrimaryBlue [&_.dot::before]:bg-klerosUIComponentsPrimaryBlue",
54+
"[&_.front-color]:text-klerosUIComponentsPrimaryBlue [&_.dot::before]:bg-klerosUIComponentsPrimaryBlue",
4755
[Status.Disputed]:
48-
"border-t-klerosUIComponentsSecondaryPurple bg-klerosUIComponentsMediumPurple [&_.front-color]:text-klerosUIComponentsSecondaryPurple [&_.dot::before]:bg-klerosUIComponentsSecondaryPurple",
49-
[Status.Included]:
50-
"border-t-klerosUIComponentsSuccess bg-klerosUIComponentsSuccessLight [&_.front-color]:text-klerosUIComponentsSuccess [&_.dot::before]:bg-klerosUIComponentsSuccess",
51-
[Status.Removed]:
52-
"border-t-klerosUIComponentsError bg-klerosUIComponentsErrorLight [&_.front-color]:text-klerosUIComponentsError [&_.dot::before]:bg-klerosUIComponentsError",
56+
"[&_.front-color]:text-klerosUIComponentsSecondaryPurple [&_.dot::before]:bg-klerosUIComponentsSecondaryPurple",
57+
[Status.Included]: "[&_.front-color]:text-klerosUIComponentsSuccess [&_.dot::before]:bg-klerosUIComponentsSuccess",
58+
[Status.Removed]: "[&_.front-color]:text-klerosUIComponentsError [&_.dot::before]:bg-klerosUIComponentsError",
5359
};
5460

5561
const StatusBanner: React.FC<IStatusBanner> = ({ status, isListView = false }) => (
@@ -58,8 +64,9 @@ const StatusBanner: React.FC<IStatusBanner> = ({ status, isListView = false }) =
5864
"flex items-center justify-between px-6 rounded-t-[3px]",
5965
isListView ? "h-min" : "h-11",
6066
isListView && "p-0",
67+
!isListView && ["border-t-[5px]", borderAndBgStyles[status]],
6168
"[&_.dot::before]:content-[''] [&_.dot::before]:inline-block [&_.dot::before]:h-2 [&_.dot::before]:w-2 [&_.dot::before]:rounded-[50%] [&_.dot::before]:mr-2",
62-
!isListView && ["border-t-[5px]", statusStyles[status]]
69+
dotAndFrontColorStyles[status]
6370
)}
6471
>
6572
<label className="front-color dot">{getStatusLabel(status)}</label>

‎web/src/components/Search.tsx‎

Lines changed: 40 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
11
import React, { useState } from "react";
2-
import styled, { css } from "styled-components";
3-
import { landscapeStyle } from "styles/landscapeStyle";
42
import { useNavigate, useParams, useSearchParams } from "react-router-dom";
53
import { useDebounce } from "react-use";
64
import { Searchbar, DropdownSelect, Button } from "@kleros/ui-components-library";
@@ -9,68 +7,14 @@ import PaperIcon from "svgs/icons/paper.svg";
97
import PlusIcon from "svgs/icons/plus.svg";
108
import { List_filters } from "consts/filters";
119

12-
const Container = styled.div`
13-
display: flex;
14-
flex-direction: column;
15-
gap: 16px;
16-
margin-bottom: 16px;
17-
flex-wrap: wrap;
18-
19-
${landscapeStyle(
20-
() =>
21-
css`
22-
flex-direction: row;
23-
`
24-
)}
25-
`;
26-
27-
const SearchBarContainer = styled.div`
28-
display: flex;
29-
flex: 1;
30-
flex-wrap: wrap;
31-
gap: 8px;
32-
z-index: 0;
33-
`;
34-
35-
const StyledSearchbar = styled(Searchbar)`
36-
flex: 1;
37-
flex-basis: 310px;
38-
input {
39-
font-size: 16px;
40-
height: 45px;
41-
padding-top: 0px;
42-
padding-bottom: 0px;
43-
}
44-
`;
45-
46-
const StyledPaperIcon = styled(PaperIcon)`
47-
path {
48-
fill: ${({ theme }) => theme.whiteBackground};
49-
}
50-
`;
51-
52-
const StyledPlusIcon = styled(PlusIcon)`
53-
path {
54-
fill: ${({ theme }) => theme.whiteBackground};
55-
}
56-
`;
57-
58-
const StyledDropdownSelect = styled(DropdownSelect)`
59-
[class*="button__Container"] {
60-
[class*="base-item__Item"] {
61-
border-left: 1px solid transparent;
62-
}
63-
}
64-
`;
65-
6610
const Search: React.FC<{ isList?: Boolean }> = ({ isList }) => {
6711
const { page, order, filter, id } = useParams();
6812
const location = useListRootPath();
6913
const [searchParams] = useSearchParams();
7014
const keywords = searchParams.get("keywords");
7115

7216
const decodedFilter = decodeListURIFilter(filter ?? "all");
73-
const [search, setSearch] = useState(keywords);
17+
const [search, setSearch] = useState(keywords ?? undefined);
7418
const navigate = useNavigate();
7519

7620
useDebounce(
@@ -91,37 +35,59 @@ const Search: React.FC<{ isList?: Boolean }> = ({ isList }) => {
9135
};
9236

9337
return (
94-
<Container>
95-
<SearchBarContainer>
96-
<StyledSearchbar
38+
<div className="flex flex-col flex-wrap gap-4 mb-4 lg:flex-row">
39+
<div className="flex flex-1 flex-wrap gap-2 z-0">
40+
<Searchbar
41+
className="flex-1 basis-[310px] [&_input]:py-0"
9742
type="text"
9843
placeholder="Search by keywords"
9944
value={search}
100-
onChange={(e) => setSearch(e.target.value)}
45+
onChange={(value) => setSearch(value)}
10146
/>
102-
</SearchBarContainer>
103-
<StyledDropdownSelect
47+
</div>
48+
<DropdownSelect
10449
items={[
105-
{ text: "All Status", dot: "grey", value: JSON.stringify({}) },
106-
{ text: "Active", dot: "orange", value: JSON.stringify(List_filters.Active) },
50+
{ id: JSON.stringify({}), text: "All Status", dot: "grey", itemValue: JSON.stringify({}) },
10751
{
52+
id: JSON.stringify(List_filters.Active),
53+
text: "Active",
54+
dot: "orange",
55+
itemValue: JSON.stringify(List_filters.Active),
56+
},
57+
{
58+
id: JSON.stringify(List_filters.Pending),
10859
text: "Pending",
10960
dot: "blue",
110-
value: JSON.stringify(List_filters.Pending),
61+
itemValue: JSON.stringify(List_filters.Pending),
62+
},
63+
{
64+
id: JSON.stringify(List_filters.Disputed),
65+
text: "Disputed",
66+
dot: "purple",
67+
itemValue: JSON.stringify(List_filters.Disputed),
68+
},
69+
{
70+
id: JSON.stringify(List_filters.Included),
71+
text: "Included",
72+
dot: "green",
73+
itemValue: JSON.stringify(List_filters.Included),
74+
},
75+
{
76+
id: JSON.stringify(List_filters.Removed),
77+
text: "Removed",
78+
dot: "red",
79+
itemValue: JSON.stringify(List_filters.Removed),
11180
},
112-
{ text: "Disputed", dot: "purple", value: JSON.stringify(List_filters.Disputed) },
113-
{ text: "Included", dot: "green", value: JSON.stringify(List_filters.Included) },
114-
{ text: "Removed", dot: "red", value: JSON.stringify(List_filters.Removed) },
11581
]}
116-
defaultValue={JSON.stringify(decodedFilter)}
117-
callback={handleStatusChange}
82+
defaultSelectedKey={JSON.stringify(decodedFilter)}
83+
callback={(item) => handleStatusChange(item.itemValue)}
11884
/>
11985
{isList ? (
120-
<Button text="Create New List" Icon={StyledPaperIcon} onClick={() => navigate("/submit-list")} />
86+
<Button text="Create New List" Icon={PaperIcon} onClick={() => navigate("/submit-list")} />
12187
) : (
122-
<Button Icon={StyledPlusIcon} text="Submit Item" onClick={() => navigate(`/submit-item/${id}`)} />
88+
<Button Icon={PlusIcon} text="Submit Item" onClick={() => navigate(`/submit-item/${id}`)} />
12389
)}
124-
</Container>
90+
</div>
12591
);
12692
};
12793

‎web/src/components/StatsAndFilters/Filters.tsx‎

Lines changed: 14 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,6 @@
11
import React from "react";
2-
import styled, { css } from "styled-components";
32
import { useNavigate, useParams, useSearchParams } from "react-router-dom";
43

5-
import { hoverShortTransitionTiming } from "styles/commonStyles";
6-
74
import { DropdownSelect } from "@kleros/ui-components-library";
85

96
import { useIsListView } from "context/IsListViewProvider";
@@ -12,41 +9,6 @@ import GridIcon from "svgs/icons/grid.svg";
129
import { useItemRootPath, useListRootPath } from "utils/uri";
1310
import useIsDesktop from "hooks/useIsDesktop";
1411

15-
const Container = styled.div`
16-
display: flex;
17-
justify-content: end;
18-
gap: 12px;
19-
width: fit-content;
20-
`;
21-
22-
const IconsContainer = styled.div`
23-
display: flex;
24-
justify-content: center;
25-
align-items: center;
26-
gap: 4px;
27-
`;
28-
29-
const BaseIconStyles = css`
30-
${hoverShortTransitionTiming}
31-
cursor: pointer;
32-
fill: ${({ theme }) => theme.primaryBlue};
33-
width: 16px;
34-
height: 16px;
35-
overflow: hidden;
36-
37-
:hover {
38-
fill: ${({ theme }) => theme.secondaryBlue};
39-
}
40-
`;
41-
42-
const StyledGridIcon = styled(GridIcon)`
43-
${BaseIconStyles}
44-
`;
45-
46-
const StyledListIcon = styled(ListIcon)`
47-
${BaseIconStyles}
48-
`;
49-
5012
export interface IFilters {
5113
isListFilter?: boolean;
5214
}
@@ -69,33 +31,37 @@ const Filters: React.FC<IFilters> = ({ isListFilter = false }) => {
6931
const isDesktop = useIsDesktop();
7032

7133
return (
72-
<Container>
34+
<div className="flex justify-end gap-3 w-fit **:focus:shadow-none">
7335
<DropdownSelect
7436
smallButton
7537
simpleButton
7638
items={[
77-
{ value: "desc", text: "Newest" },
78-
{ value: "asc", text: "Oldest" },
39+
{ id: "desc", itemValue: "desc", text: "Newest" },
40+
{ id: "asc", itemValue: "asc", text: "Oldest" },
7941
]}
80-
defaultValue={order}
81-
callback={handleOrderChange}
42+
defaultSelectedKey={order}
43+
callback={(item) => handleOrderChange(item.itemValue)}
8244
/>
8345
{isDesktop && isListFilter ? (
84-
<IconsContainer>
46+
<div className="flex justify-center items-center gap-1">
8547
{isListView ? (
86-
<StyledGridIcon onClick={() => setIsListView(false)} />
48+
<GridIcon
49+
className="w-4 h-4 overflow-hidden cursor-pointer fill-klerosUIComponentsPrimaryBlue hover:fill-klerosUIComponentsSecondaryBlue transition duration-100"
50+
onClick={() => setIsListView(false)}
51+
/>
8752
) : (
88-
<StyledListIcon
53+
<ListIcon
54+
className="w-4 h-4 overflow-hidden cursor-pointer fill-klerosUIComponentsPrimaryBlue hover:fill-klerosUIComponentsSecondaryBlue transition duration-100"
8955
onClick={() => {
9056
if (isDesktop) {
9157
setIsListView(true);
9258
}
9359
}}
9460
/>
9561
)}
96-
</IconsContainer>
62+
</div>
9763
) : null}
98-
</Container>
64+
</div>
9965
);
10066
};
10167

0 commit comments

Comments
 (0)