Skip to content

Commit 1d2bf3e

Browse files
thesocialdevthesocialdev
authored
Merge pull request #1793 from AletheiaFact/migrating-baseList-and-its-skeletons
2 parents 8185cd9 + d686142 commit 1d2bf3e

20 files changed

+182
-145
lines changed

‎public/locales/en/history.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@
33
"create": "created",
44
"update": "updated",
55
"delete": "deleted",
6+
"hide": "hide",
7+
"unhide": "unhide",
68
"personality": "profile",
79
"claim": "claim",
810
"historyItem": "{{username}} {{type}} {{title}} {{targetModel}}"

‎public/locales/pt/history.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@
33
"create": "criou",
44
"update": "atualizou",
55
"delete": "deletou",
6+
"hide": "ocultou",
7+
"unhide": "exibiu",
68
"personality": "o perfil de",
79
"claim": "a afirmação",
810
"historyItem": "{{username}} {{type}} {{targetModel}} {{title}}"

‎src/components/Claim/ClaimList.tsx‎

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import { currentNameSpace } from "../../atoms/namespace";
99
import { useAtom } from "jotai";
1010
import ClaimListEmptyFallBack from "./ClaimListEmptyFallBack";
1111

12-
const ClaimList = ({ personality, columns = 2 }) => {
12+
const ClaimList = ({ personality, columns = 6 }) => {
1313
const { i18n, t } = useTranslation();
1414
const [nameSpace] = useAtom(currentNameSpace);
1515

@@ -21,12 +21,8 @@ const ClaimList = ({ personality, columns = 2 }) => {
2121
showDividers={false}
2222
bluePrimary={true}
2323
grid={{
24-
gutter: 20,
25-
// sizes not declared will show 1 column (xs and sm)
26-
md: columns,
27-
lg: columns,
28-
xl: columns,
29-
xxl: columns,
24+
xs: 12,
25+
sm: columns,
3026
}}
3127
emptyFallback={<ClaimListEmptyFallBack personality={personality} />}
3228
renderItem={(claim) =>

‎src/components/Claim/ClaimListView.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,16 +9,16 @@ const ClaimListView = () => {
99
return (
1010
<>
1111
<Grid container style={{ marginTop: "64px", justifyContent:"center" }}>
12-
<Grid item sm={11} md={7} lg={10.5}>
12+
<Grid item sm={7} md={7} lg={10.5}>
1313
<h1 style={{ fontSize: 32 }}>
1414
{t("claim:claimListTitle")}
1515
</h1>
1616
</Grid>
17-
<Grid item sm={11} md={7} lg={6}>
17+
<Grid item sm={7} md={7} lg={6}>
1818
<SourceList />
1919
</Grid>
20-
<Grid item style={{margin:"0 20px"}} sm={11} md={7} lg={4}>
21-
<ClaimList columns={1} personality={{ _id: null }} />
20+
<Grid item style={{ margin: "0 20px" }} sm={7} md={7} lg={4}>
21+
<ClaimList columns={12} personality={{ _id: null }} />
2222
</Grid>
2323
</Grid>
2424
</>

‎src/components/Claim/ClaimSourceList.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ const ClaimSourceList = ({ claimId }) => {
1313
<BaseList
1414
apiCall={SourceApi.getByTargetId}
1515
filter={{ targetId: claimId, i18n }}
16+
style={{ fontSize: 14, padding: 5 }}
1617
renderItem={(source) =>
1718
source && (
1819
<LinkPreview

‎src/components/Dashboard/DashboardView.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ const DashboardView = () => {
2525
i18n,
2626
isHidden: true,
2727
}}
28+
showDividers={false}
2829
emptyFallback={<></>}
2930
renderItem={(p) =>
3031
p && (
@@ -47,6 +48,7 @@ const DashboardView = () => {
4748
i18n,
4849
isHidden: true,
4950
}}
51+
showDividers={false}
5052
emptyFallback={<></>}
5153
renderItem={(claim) =>
5254
claim && (
@@ -66,6 +68,7 @@ const DashboardView = () => {
6668
title={t("admin:dashboardHiddenReviews")}
6769
apiCall={claimReviewApi.get}
6870
filter={{ isHidden: true }}
71+
showDividers={false}
6972
emptyFallback={<></>}
7073
renderItem={(review) =>
7174
review && (

‎src/components/Kanban/KanbanGrid.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@ const KanbanGrid = ({
6262
}
6363
showDividers={false}
6464
skeleton={<KanbanSkeleton />}
65-
style={{ textTransform: "capitalize" }}
65+
style={{ textTransform: "capitalize", padding: "4px 0" }}
6666
/>
6767
</StyledColumn>
6868
);

‎src/components/List/BaseList.tsx‎

Lines changed: 70 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
import { CircularProgress, Button, Grid } from "@mui/material";
2-
import { List } from "antd";
1+
import { CircularProgress, Button, Grid, List, ListItem } from "@mui/material";
32
import { useTranslation } from "next-i18next";
43
import React, { useEffect, useState } from "react";
54
import colors from "../../styles/colors";
@@ -103,62 +102,86 @@ const BaseList = ({
103102

104103
const loadMoreButton =
105104
totalPages > query.page ? (
106-
<div
105+
<Button
106+
variant="outlined"
107+
onClick={loadMoreData}
107108
style={{
108-
textAlign: "center",
109-
marginTop: 12,
110-
height: 32,
111-
lineHeight: "32px",
109+
color: colors.primary,
110+
fontSize: 14
112111
}}
113112
>
114-
<Button onClick={loadMoreData}>
115-
{t("list:loadMoreButton")}
116-
</Button>
117-
</div>
113+
{t("list:loadMoreButton")}
114+
</Button>
118115
) : null;
119116

120117
if (items && Array.isArray(items) && (items.length > 0 || !emptyFallback)) {
121118
return (
122119
<>
120+
<Grid container
121+
style={{
122+
alignContent: "middle",
123+
justifyContent: "space-between",
124+
padding: "12px 0",
125+
borderBottom: "1px solid #eee"
126+
}}
127+
>
128+
<Grid item>
129+
<h2
130+
style={{
131+
fontSize: "24px",
132+
lineHeight: "32px",
133+
color: bluePrimary
134+
? colors.primary
135+
: colors.black,
136+
marginBottom: 0,
137+
}}
138+
>
139+
{title}
140+
</h2>
141+
<p
142+
style={{
143+
fontSize: "14px",
144+
marginBottom: 0,
145+
}}
146+
>
147+
{t("list:totalItems", {
148+
total: totalItems,
149+
})}
150+
</p>
151+
</Grid>
152+
<Grid item>
153+
<SortByButton
154+
refreshListItems={refreshListItems}
155+
/>
156+
</Grid>
157+
</Grid>
123158
<List
124-
itemLayout="horizontal"
125-
grid={grid}
126-
split={showDividers}
127-
header={
128-
<Grid container style={{alignContent:"middle", justifyContent:"space-between"}}>
129-
<Grid item>
130-
<h2
131-
style={{
132-
fontSize: "24px",
133-
lineHeight: "32px",
134-
color: bluePrimary
135-
? colors.primary
136-
: colors.black,
137-
marginBottom: 0,
138-
}}
139-
>
140-
{title}
141-
</h2>
142-
143-
{t("list:totalItems", {
144-
total: totalItems,
145-
})}
146-
</Grid>
147-
<Grid item>
148-
<SortByButton
149-
refreshListItems={refreshListItems}
150-
/>
159+
style={{
160+
display: "flex",
161+
flexDirection: "row",
162+
flexWrap: "wrap",
163+
padding: 0,
164+
}}
165+
>
166+
{loading && loadingProps ? (
167+
<Grid container style={{ display: "flex", justifyContent: "center", padding: 2 }}>
168+
{loadingIcon}
169+
</Grid>
170+
) : (
171+
items.map((item) => (
172+
<Grid container item {...grid}>
173+
<ListItem key={item} style={{ borderBottom: showDividers ? "1px solid #eee" : "none", padding: "0 10px", ...style }}>
174+
{renderItem(item)}
175+
</ListItem>
151176
</Grid>
177+
))
178+
)}
179+
{loadMoreButton && (
180+
<Grid item style={{ width: "100%", display: "flex", justifyContent: "center" }}>
181+
{loadMoreButton}
152182
</Grid>
153-
}
154-
style={style || {}}
155-
loadMore={loadMoreButton}
156-
loading={loading && loadingProps}
157-
dataSource={items}
158-
renderItem={(item) => {
159-
return <List.Item>{renderItem(item)}</List.Item>;
160-
}}
161-
/>
183+
)}
184+
</List >
162185
<Grid container
163186
style={{
164187
textAlign: "center",

‎src/components/Personality/PersonalityList.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Row } from "antd";
1+
import { Grid } from "@mui/material";
22
import { useTranslation } from "next-i18next";
33
import React from "react";
44

@@ -16,7 +16,7 @@ const PersonalityList = () => {
1616
const { i18n, t } = useTranslation();
1717
const [nameSpace] = useAtom(currentNameSpace);
1818
const createPersonalityCTA = (
19-
<Row
19+
<Grid container
2020
style={{
2121
flexDirection: "column",
2222
alignItems: "center",
@@ -30,7 +30,7 @@ const PersonalityList = () => {
3030
: "/personality/search"
3131
}
3232
/>
33-
</Row>
33+
</Grid>
3434
);
3535
return (
3636
<>
@@ -44,6 +44,7 @@ const PersonalityList = () => {
4444
i18n,
4545
nameSpace,
4646
}}
47+
style={{ paddingTop: 10 }}
4748
emptyFallback={createPersonalityCTA}
4849
renderItem={(p) =>
4950
p && (

‎src/components/Skeleton/ClaimSkeleton.tsx‎

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,35 @@
1-
import { Col, Skeleton } from "antd";
1+
import { Grid, Skeleton } from "@mui/material";
22
import React from "react";
33

44
const ClaimSkeleton = () => {
55
return (
6-
<Col
7-
sm={22}
8-
md={14}
9-
lg={12}
6+
<Grid item
7+
sm={11}
8+
md={7}
9+
lg={6}
1010
style={{
1111
marginBottom: "10px",
1212
}}
1313
>
14-
<Skeleton
15-
active
16-
paragraph={{ rows: 5 }}
17-
round={true}
18-
style={{
19-
width: "100%",
20-
}}
21-
/>
22-
<Col
14+
<Skeleton variant="text" width="30%" animation="wave" />
15+
<Skeleton variant="text" width="100%" animation="wave" />
16+
<Skeleton variant="text" width="100%" animation="wave" />
17+
<Skeleton variant="text" width="100%" animation="wave" />
18+
<Skeleton variant="text" width="100%" animation="wave" />
19+
<Skeleton variant="text" width="100%" animation="wave" />
20+
<Skeleton variant="text" width="60%" animation="wave" />
21+
22+
<Grid item
2323
style={{
2424
display: "flex",
25-
justifyContent: "flex-end",
25+
justifyContent: "space-between",
2626
padding: "10px 0",
2727
}}
2828
>
29-
<Skeleton title={false} paragraph={{ rows: 1 }} />
30-
<Skeleton.Button active />
31-
</Col>
32-
</Col>
29+
<Skeleton variant="text" width="50%" animation="wave" />
30+
<Skeleton variant="rectangular" width={60} height={30} animation="wave" />
31+
</Grid>
32+
</Grid>
3333
);
3434
};
3535

0 commit comments

Comments
 (0)