Skip to content

Migrating BaseList and its skeletons #1793

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
thesocialdev merged 2 commits into from
Jan 22, 2025
Merged

Migrating BaseList and its skeletons #1793

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d00c51f
BaseList and where it is called
LuizFNJ Jan 22, 2025
d686142
page skeletons
LuizFNJ Jan 22, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions public/locales/en/history.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@
"create": "created",
"update": "updated",
"delete": "deleted",
"hide": "hide",
"unhide": "unhide",
"personality": "profile",
"claim": "claim",
"historyItem": "{{username}} {{type}} {{title}} {{targetModel}}"
Expand Down
2 changes: 2 additions & 0 deletions public/locales/pt/history.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@
"create": "criou",
"update": "atualizou",
"delete": "deletou",
"hide": "ocultou",
"unhide": "exibiu",
"personality": "o perfil de",
"claim": "a afirmação",
"historyItem": "{{username}} {{type}} {{targetModel}} {{title}}"
Expand Down
10 changes: 3 additions & 7 deletions src/components/Claim/ClaimList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import { currentNameSpace } from "../../atoms/namespace";
import { useAtom } from "jotai";
import ClaimListEmptyFallBack from "./ClaimListEmptyFallBack";

const ClaimList = ({ personality, columns = 2 }) => {
const ClaimList = ({ personality, columns = 6 }) => {
const { i18n, t } = useTranslation();
const [nameSpace] = useAtom(currentNameSpace);

Expand All @@ -21,12 +21,8 @@ const ClaimList = ({ personality, columns = 2 }) => {
showDividers={false}
bluePrimary={true}
grid={{
gutter: 20,
// sizes not declared will show 1 column (xs and sm)
md: columns,
lg: columns,
xl: columns,
xxl: columns,
xs: 12,
sm: columns,
}}
emptyFallback={<ClaimListEmptyFallBack personality={personality} />}
renderItem={(claim) =>
Expand Down
8 changes: 4 additions & 4 deletions src/components/Claim/ClaimListView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,16 +9,16 @@ const ClaimListView = () => {
return (
<>
<Grid container style={{ marginTop: "64px", justifyContent:"center" }}>
<Grid item sm={11} md={7} lg={10.5}>
<Grid item sm={7} md={7} lg={10.5}>
<h1 style={{ fontSize: 32 }}>
{t("claim:claimListTitle")}
</h1>
</Grid>
<Grid item sm={11} md={7} lg={6}>
<Grid item sm={7} md={7} lg={6}>
<SourceList />
</Grid>
<Grid item style={{margin:"0 20px"}} sm={11} md={7} lg={4}>
<ClaimList columns={1} personality={{ _id: null }} />
<Grid item style={{ margin: "0 20px" }} sm={7} md={7} lg={4}>
<ClaimList columns={12} personality={{ _id: null }} />
</Grid>
</Grid>
</>
Expand Down
1 change: 1 addition & 0 deletions src/components/Claim/ClaimSourceList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ const ClaimSourceList = ({ claimId }) => {
<BaseList
apiCall={SourceApi.getByTargetId}
filter={{ targetId: claimId, i18n }}
style={{ fontSize: 14, padding: 5 }}
renderItem={(source) =>
source && (
<LinkPreview
Expand Down
3 changes: 3 additions & 0 deletions src/components/Dashboard/DashboardView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ const DashboardView = () => {
i18n,
isHidden: true,
}}
showDividers={false}
emptyFallback={<></>}
renderItem={(p) =>
p && (
Expand All @@ -47,6 +48,7 @@ const DashboardView = () => {
i18n,
isHidden: true,
}}
showDividers={false}
emptyFallback={<></>}
renderItem={(claim) =>
claim && (
Expand All @@ -66,6 +68,7 @@ const DashboardView = () => {
title={t("admin:dashboardHiddenReviews")}
apiCall={claimReviewApi.get}
filter={{ isHidden: true }}
showDividers={false}
emptyFallback={<></>}
renderItem={(review) =>
review && (
Expand Down
2 changes: 1 addition & 1 deletion src/components/Kanban/KanbanGrid.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ const KanbanGrid = ({
}
showDividers={false}
skeleton={<KanbanSkeleton />}
style={{ textTransform: "capitalize" }}
style={{ textTransform: "capitalize", padding: "4px 0" }}
/>
</StyledColumn>
);
Expand Down
117 changes: 70 additions & 47 deletions src/components/List/BaseList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import { CircularProgress, Button, Grid } from "@mui/material";
import { List } from "antd";
import { CircularProgress, Button, Grid, List, ListItem } from "@mui/material";
import { useTranslation } from "next-i18next";
import React, { useEffect, useState } from "react";
import colors from "../../styles/colors";
Expand Down Expand Up @@ -103,62 +102,86 @@ const BaseList = ({

const loadMoreButton =
totalPages > query.page ? (
<div
<Button
variant="outlined"
onClick={loadMoreData}
style={{
textAlign: "center",
marginTop: 12,
height: 32,
lineHeight: "32px",
color: colors.primary,
fontSize: 14
}}
>
<Button onClick={loadMoreData}>
{t("list:loadMoreButton")}
</Button>
</div>
{t("list:loadMoreButton")}
</Button>
) : null;

if (items && Array.isArray(items) && (items.length > 0 || !emptyFallback)) {
return (
<>
<Grid container
style={{
alignContent: "middle",
justifyContent: "space-between",
padding: "12px 0",
borderBottom: "1px solid #eee"
}}
>
<Grid item>
<h2
style={{
fontSize: "24px",
lineHeight: "32px",
color: bluePrimary
? colors.primary
: colors.black,
marginBottom: 0,
}}
>
{title}
</h2>
<p
style={{
fontSize: "14px",
marginBottom: 0,
}}
>
{t("list:totalItems", {
total: totalItems,
})}
</p>
</Grid>
<Grid item>
<SortByButton
refreshListItems={refreshListItems}
/>
</Grid>
</Grid>
<List
itemLayout="horizontal"
grid={grid}
split={showDividers}
header={
<Grid container style={{alignContent:"middle", justifyContent:"space-between"}}>
<Grid item>
<h2
style={{
fontSize: "24px",
lineHeight: "32px",
color: bluePrimary
? colors.primary
: colors.black,
marginBottom: 0,
}}
>
{title}
</h2>

{t("list:totalItems", {
total: totalItems,
})}
</Grid>
<Grid item>
<SortByButton
refreshListItems={refreshListItems}
/>
style={{
display: "flex",
flexDirection: "row",
flexWrap: "wrap",
padding: 0,
}}
>
{loading && loadingProps ? (
<Grid container style={{ display: "flex", justifyContent: "center", padding: 2 }}>
{loadingIcon}
</Grid>
) : (
items.map((item) => (
<Grid container item {...grid}>
<ListItem key={item} style={{ borderBottom: showDividers ? "1px solid #eee" : "none", padding: "0 10px", ...style }}>
{renderItem(item)}
</ListItem>
</Grid>
))
)}
{loadMoreButton && (
<Grid item style={{ width: "100%", display: "flex", justifyContent: "center" }}>
{loadMoreButton}
</Grid>
}
style={style || {}}
loadMore={loadMoreButton}
loading={loading && loadingProps}
dataSource={items}
renderItem={(item) => {
return <List.Item>{renderItem(item)}</List.Item>;
}}
/>
)}
</List >
<Grid container
style={{
textAlign: "center",
Expand Down
7 changes: 4 additions & 3 deletions src/components/Personality/PersonalityList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Row } from "antd";
import { Grid } from "@mui/material";
import { useTranslation } from "next-i18next";
import React from "react";

Expand All @@ -16,7 +16,7 @@ const PersonalityList = () => {
const { i18n, t } = useTranslation();
const [nameSpace] = useAtom(currentNameSpace);
const createPersonalityCTA = (
<Row
<Grid container
style={{
flexDirection: "column",
alignItems: "center",
Expand All @@ -30,7 +30,7 @@ const PersonalityList = () => {
: "/personality/search"
}
/>
</Row>
</Grid>
);
return (
<>
Expand All @@ -44,6 +44,7 @@ const PersonalityList = () => {
i18n,
nameSpace,
}}
style={{ paddingTop: 10 }}
emptyFallback={createPersonalityCTA}
renderItem={(p) =>
p && (
Expand Down
38 changes: 19 additions & 19 deletions src/components/Skeleton/ClaimSkeleton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,35 +1,35 @@
import { Col, Skeleton } from "antd";
import { Grid, Skeleton } from "@mui/material";
import React from "react";

const ClaimSkeleton = () => {
return (
<Col
sm={22}
md={14}
lg={12}
<Grid item
sm={11}
md={7}
lg={6}
style={{
marginBottom: "10px",
}}
>
<Skeleton
active
paragraph={{ rows: 5 }}
round={true}
style={{
width: "100%",
}}
/>
<Col
<Skeleton variant="text" width="30%" animation="wave" />
<Skeleton variant="text" width="100%" animation="wave" />
<Skeleton variant="text" width="100%" animation="wave" />
<Skeleton variant="text" width="100%" animation="wave" />
<Skeleton variant="text" width="100%" animation="wave" />
<Skeleton variant="text" width="100%" animation="wave" />
<Skeleton variant="text" width="60%" animation="wave" />

<Grid item
style={{
display: "flex",
justifyContent: "flex-end",
justifyContent: "space-between",
padding: "10px 0",
}}
>
<Skeleton title={false} paragraph={{ rows: 1 }} />
<Skeleton.Button active />
</Col>
</Col>
<Skeleton variant="text" width="50%" animation="wave" />
<Skeleton variant="rectangular" width={60} height={30} animation="wave" />
</Grid>
</Grid>
);
};

Expand Down
10 changes: 5 additions & 5 deletions src/components/Skeleton/HistorySkeleton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
import { Skeleton } from "antd";
import { Skeleton } from "@mui/material";
import React from "react";

const HistorySkeleton = () => {
return (
<Skeleton
style={{ marginTop: 16 }}
title={false}
paragraph={{ rows: 1, width: "100%" }}
active
variant="text"
width="100%"
animation="wave"
style={{ marginBottom: 15 }}
/>
);
};
Expand Down
19 changes: 8 additions & 11 deletions src/components/Skeleton/KanbanSkeleton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,24 +1,21 @@
import { Col, Skeleton } from "antd";
import { Grid, Skeleton } from "@mui/material";
import React from "react";

const KanbanSkeleton = () => {
return (
<Col style={{ width: "95%" }}>
<Skeleton
style={{ marginTop: 16 }}
paragraph={{ rows: 1, width: "100%" }}
active
/>
<Col
<Grid item style={{ width: "95%" }}>
<Skeleton variant="text" width="40%" animation="wave" />
<Skeleton variant="text" width="100%" animation="wave" />
<Grid item
style={{
display: "flex",
justifyContent: "flex-end",
padding: "10px 0",
}}
>
<Skeleton.Button active style={{ height: 16, width: 150 }} />
</Col>
</Col>
<Skeleton variant="text" width="50%" animation="wave" />
</Grid>
</Grid>
);
};

Expand Down
Loading
Loading