Skip to content

Commit d7e37be

Browse files
imnasnainaecimnasnainaec
authored
[Statistics] Migrate from deprecated Grid and use a Table (#3855)
1 parent 1ecd39a commit d7e37be

File tree

7 files changed

+89
-128
lines changed

7 files changed

+89
-128
lines changed

‎src/components/Statistics/DomainStatistics.tsx‎

Lines changed: 28 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,17 @@
1-
import { Card, Grid, ListItem, List } from "@mui/material";
1+
import {
2+
Paper,
3+
Table,
4+
TableBody,
5+
TableContainer,
6+
TableHead,
7+
TableRow,
8+
} from "@mui/material";
29
import { ReactElement, useState, useEffect } from "react";
310

4-
import { SemanticDomainCount, SemanticDomainTreeNode } from "api/models";
11+
import { SemanticDomainCount } from "api/models";
512
import { getSemanticDomainCounts } from "backend";
613
import * as LocalStorage from "backend/localStorage";
7-
import { ColumnHead, TableCell } from "components/Statistics/TableCells";
14+
import { Cell, HeadCell } from "components/Statistics/TableCells";
815

916
interface DomainStatisticsProps {
1017
lang: string;
@@ -38,40 +45,25 @@ export default function DomainStatistics(
3845
}
3946

4047
return (
41-
<Grid container justifyContent="center">
42-
<Card style={{ width: 600 }}>
43-
<List>
44-
<Grid container wrap="nowrap" justifyContent="space-around">
45-
<ColumnHead titleId={"statistics.column.domainNumber"} />
46-
<ColumnHead titleId={"statistics.column.domainName"} />
47-
<ColumnHead titleId={"statistics.column.senseCount"} />
48-
</Grid>
49-
</List>
50-
<List>
48+
<TableContainer component={Paper} sx={{ maxWidth: 700 }}>
49+
<Table size="small">
50+
<TableHead>
51+
<TableRow>
52+
<HeadCell titleId={"statistics.column.domainNumber"} />
53+
<HeadCell titleId={"statistics.column.domainName"} />
54+
<HeadCell titleId={"statistics.column.senseCount"} />
55+
</TableRow>
56+
</TableHead>
57+
<TableBody>
5158
{statisticsList.map((t) => (
52-
<TableRow
53-
key={t.semanticDomainTreeNode.id}
54-
dom={t.semanticDomainTreeNode}
55-
count={t.count}
56-
/>
59+
<TableRow key={t.semanticDomainTreeNode.id}>
60+
<Cell text={t.semanticDomainTreeNode.id} />
61+
<Cell text={t.semanticDomainTreeNode.name} />
62+
<Cell text={t.count} />
63+
</TableRow>
5764
))}
58-
</List>
59-
</Card>
60-
</Grid>
61-
);
62-
}
63-
64-
function TableRow(props: {
65-
dom: SemanticDomainTreeNode;
66-
count: number;
67-
}): ReactElement {
68-
return (
69-
<ListItem style={{ minWidth: "600px" }}>
70-
<Grid container wrap="nowrap" justifyContent="space-around">
71-
<TableCell text={props.dom.id} />
72-
<TableCell text={props.dom.name} />
73-
<TableCell text={props.count} />
74-
</Grid>
75-
</ListItem>
65+
</TableBody>
66+
</Table>
67+
</TableContainer>
7668
);
7769
}

‎src/components/Statistics/Statistics.tsx‎

Lines changed: 19 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import {
22
Divider,
3-
Grid,
3+
Grid2,
44
ListItemButton,
55
ListItemText,
66
Typography,
@@ -65,24 +65,6 @@ export default function Statistics(): ReactElement {
6565
}
6666
}
6767

68-
function handleDisplay(): ReactElement[] {
69-
return [
70-
<Grid item key={"statistics-title"}>
71-
<Typography variant="h4" align="center">
72-
{t("statistics.title", { val: currentProject?.name })}
73-
</Typography>
74-
</Grid>,
75-
<Grid item key={"statistics-subtitle"}>
76-
<Typography variant="h5" align="center">
77-
{t(`statistics.view.${viewName}`)}
78-
</Typography>
79-
</Grid>,
80-
<Grid item key={"statistics-view"}>
81-
{componentToDisplay(viewName as viewEnum)}
82-
</Grid>,
83-
];
84-
}
85-
8668
function handleButton(): ReactElement {
8769
return (
8870
<StyledList>
@@ -118,23 +100,28 @@ export default function Statistics(): ReactElement {
118100
}
119101

120102
return (
121-
<Grid container direction="row" spacing={1}>
122-
<Grid item xs={2}>
123-
{handleButton()}
124-
</Grid>
125-
<Grid
126-
item
127-
xs={8}
103+
<Grid2 container direction="row" spacing={1}>
104+
<Grid2 size={2}>{handleButton()}</Grid2>
105+
106+
<Grid2
107+
alignContent="space-around"
128108
container
129109
direction="column"
130-
justifyContent="center"
110+
size={8}
131111
spacing={2}
132112
>
133-
{handleDisplay()}
134-
</Grid>
135-
<Grid item xs={2}>
113+
<Typography align="center" variant="h4">
114+
{t("statistics.title", { val: currentProject?.name })}
115+
</Typography>
116+
<Typography align="center" variant="h5">
117+
{t(`statistics.view.${viewName}`)}
118+
</Typography>
119+
{componentToDisplay(viewName as viewEnum)}
120+
</Grid2>
121+
122+
<Grid2 size={2}>
136123
<ProgressBarComponent />
137-
</Grid>
138-
</Grid>
124+
</Grid2>
125+
</Grid2>
139126
);
140127
}

‎src/components/Statistics/TableCells.tsx‎

Lines changed: 8 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,21 @@
1-
import { Grid, Typography } from "@mui/material";
1+
import { TableCell, Typography } from "@mui/material";
22
import { ReactElement } from "react";
33
import { useTranslation } from "react-i18next";
44

5-
export function ColumnHead(props: { titleId: string }): ReactElement {
5+
export function HeadCell(props: { titleId: string }): ReactElement {
66
const { t } = useTranslation();
7+
78
return (
8-
<Grid
9-
item
10-
xs={5}
11-
style={{
12-
borderBottomStyle: "dotted",
13-
borderBottomWidth: 1,
14-
position: "relative",
15-
}}
16-
>
9+
<TableCell sx={{ borderBottomWidth: 1 }}>
1710
<Typography variant="subtitle1">{t(props.titleId)}</Typography>
18-
</Grid>
11+
</TableCell>
1912
);
2013
}
2114

22-
export function TableCell(props: {
23-
text?: string | number | null;
24-
}): ReactElement {
15+
export function Cell(props: { text?: string | number | null }): ReactElement {
2516
return (
26-
<Grid
27-
item
28-
xs={5}
29-
style={{
30-
borderBottomStyle: "dotted",
31-
borderBottomWidth: 1,
32-
position: "relative",
33-
}}
34-
>
17+
<TableCell sx={{ borderBottomStyle: "dotted", borderBottomWidth: 1 }}>
3518
<Typography variant="body1">{props.text}</Typography>
36-
</Grid>
19+
</TableCell>
3720
);
3821
}

‎src/components/Statistics/UserStatistics.tsx‎

Lines changed: 27 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,17 @@
1-
import { Card, Grid, ListItem, List } from "@mui/material";
1+
import {
2+
Paper,
3+
Table,
4+
TableBody,
5+
TableContainer,
6+
TableHead,
7+
TableRow,
8+
} from "@mui/material";
29
import { ReactElement, useState, useEffect } from "react";
310

411
import { SemanticDomainUserCount } from "api/models";
512
import { getSemanticDomainUserCount } from "backend";
613
import * as LocalStorage from "backend/localStorage";
7-
import { ColumnHead, TableCell } from "components/Statistics/TableCells";
14+
import { Cell, HeadCell } from "components/Statistics/TableCells";
815

916
export default function UserStatistics(): ReactElement {
1017
const [domainUserCountList, setDomainUserCountList] = useState<
@@ -28,33 +35,25 @@ export default function UserStatistics(): ReactElement {
2835
}
2936

3037
return (
31-
<Grid container justifyContent="center">
32-
<Card style={{ width: 600 }}>
33-
<List>
34-
<Grid container wrap="nowrap" justifyContent="space-around">
35-
<ColumnHead titleId={"statistics.column.username"} />
36-
<ColumnHead titleId={"statistics.column.domainCount"} />
37-
<ColumnHead titleId={"statistics.column.senseCount"} />
38-
</Grid>
39-
</List>
40-
<List>
38+
<TableContainer component={Paper} sx={{ maxWidth: 700 }}>
39+
<Table size="small">
40+
<TableHead>
41+
<TableRow>
42+
<HeadCell titleId={"statistics.column.username"} />
43+
<HeadCell titleId={"statistics.column.domainCount"} />
44+
<HeadCell titleId={"statistics.column.senseCount"} />
45+
</TableRow>
46+
</TableHead>
47+
<TableBody>
4148
{domainUserCountList.map((t) => (
42-
<TableRow key={t.id} counts={t} />
49+
<TableRow key={t.id}>
50+
<Cell text={t.username} />
51+
<Cell text={t.domainCount} />
52+
<Cell text={t.wordCount} />
53+
</TableRow>
4354
))}
44-
</List>
45-
</Card>
46-
</Grid>
47-
);
48-
}
49-
50-
function TableRow(props: { counts: SemanticDomainUserCount }): ReactElement {
51-
return (
52-
<ListItem style={{ minWidth: "600px" }}>
53-
<Grid container wrap="nowrap" justifyContent="space-around">
54-
<TableCell text={props.counts.username} />
55-
<TableCell text={props.counts.domainCount} />
56-
<TableCell text={props.counts.wordCount} />
57-
</Grid>
58-
</ListItem>
55+
</TableBody>
56+
</Table>
57+
</TableContainer>
5958
);
6059
}

‎src/components/Statistics/tests/DomainStatistics.test.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -43,8 +43,8 @@ describe("DomainStatistics", () => {
4343
expect(mockGetProjectId).toHaveBeenCalled();
4444
});
4545

46-
test("all list items are present", async () => {
47-
const listItems = screen.queryAllByRole("listitem");
48-
expect(listItems.length).toEqual(mockSemanticDomainCountArray.length);
46+
test("all rows are present", async () => {
47+
const expectedRowCount = mockSemanticDomainCountArray.length + 1; // +1 for the header row
48+
expect(screen.queryAllByRole("row")).toHaveLength(expectedRowCount);
4949
});
5050
});

‎src/components/Statistics/tests/Statistics.test.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ beforeEach(async () => {
3535
render(
3636
<StyledEngineProvider injectFirst>
3737
<ThemeProvider theme={theme}>
38-
<Statistics />{" "}
38+
<Statistics />
3939
</ThemeProvider>
4040
</StyledEngineProvider>
4141
);

‎src/components/Statistics/tests/UserStatistics.test.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -42,8 +42,8 @@ describe("UserStatistics", () => {
4242
expect(mockGetProjectId).toHaveBeenCalled();
4343
});
4444

45-
test("all list items are present", async () => {
46-
const listItems = screen.queryAllByRole("listitem");
47-
expect(listItems.length).toEqual(mockSemanticDomainUserCountArray.length);
45+
test("all rows are present", async () => {
46+
const expectedRowCount = mockSemanticDomainUserCountArray.length + 1; // +1 for the header row
47+
expect(screen.queryAllByRole("row")).toHaveLength(expectedRowCount);
4848
});
4949
});

0 commit comments

Comments
 (0)