;
+ return
;
});
Graph.displayName = 'Graph';
diff --git a/src/app/components/List.tsx b/src/app/components/List.tsx
index 2c156a5..235a62a 100644
--- a/src/app/components/List.tsx
+++ b/src/app/components/List.tsx
@@ -1,9 +1,8 @@
/* eslint-disable no-magic-numbers */
-import type {FC, ElementType, ReactElement} from 'react';
-import type {Theme} from '@material-ui/core/styles';
-import React, {memo, useEffect} from 'react';
-import {makeStyles, createStyles} from '@material-ui/core/styles';
+import type { FC, ElementType, ReactElement } from 'react';
+import React, { memo, useEffect } from 'react';
import {
+ Box,
Table,
TableBody,
TableCell,
@@ -13,49 +12,35 @@ import {
TableRow,
Paper,
IconButton,
-} from '@material-ui/core';
-import {TablePaginationActionsProps} from '@material-ui/core/TablePagination/TablePaginationActions';
+} from '@mui/material';
+import { TablePaginationActionsProps } from '@mui/material/TablePagination/TablePaginationActions';
import {
FirstPage as FirstPageIcon,
KeyboardArrowLeft,
KeyboardArrowRight,
LastPage as LastPageIcon,
-} from '@material-ui/icons';
-import {useStoreContext, useDispatchContext} from '@/Store';
-
-const useStyles1 = makeStyles((theme: Theme) => createStyles({
- root: {
- flexShrink: 0,
- marginLeft: theme.spacing(2),
- },
-}));
-const useStyles2 = makeStyles({
- table: {
- minWidth: 500,
- },
-});
-
-const TablePaginationActions: ElementType = ({count, page, rowsPerPage, onChangePage}) => {
- const classes = useStyles1();
+} from '@mui/icons-material';
+import { useStoreContext, useDispatchContext } from '@/Store';
+const TablePaginationActions: ElementType = ({ count, page, rowsPerPage, onPageChange }) => {
const handleFirstPageButtonClick = (event): void => {
- onChangePage(event, 0);
+ onPageChange(event, 0);
};
const handleBackButtonClick = (event): void => {
- onChangePage(event, page - 1);
+ onPageChange(event, page - 1);
};
const handleNextButtonClick = (event): void => {
- onChangePage(event, page + 1);
+ onPageChange(event, page + 1);
};
const handleLastPageButtonClick = (event): void => {
- onChangePage(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1));
+ onPageChange(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1));
};
return (
-
+
);
};
@@ -90,36 +75,35 @@ const List: FC<{
render: (any, index: number) => ReactElement;
rowsPerPageOptions?: Array
;
defaultPerPage?: number;
-}> = memo(({population, render, rowsPerPageOptions, defaultPerPage}) => {
- const classes = useStyles2();
- const {store: {pagination: {page, rowsPerPage, initialized}}} = useStoreContext();
- const {dispatch} = useDispatchContext();
+}> = memo(({ population, render, rowsPerPageOptions, defaultPerPage }) => {
+ const { store: { pagination: { page, rowsPerPage, initialized } } } = useStoreContext();
+ const { dispatch } = useDispatchContext();
const emptyRows = rowsPerPage - Math.min(rowsPerPage, population.length - page * rowsPerPage);
const handlePageChange = (event, newPage) => {
- dispatch({type: 'PAGINATION_PAGE', page: newPage});
+ dispatch({ type: 'PAGINATION_PAGE', page: newPage });
};
const handleRowsPerPageChange = (event) => {
- dispatch({type: 'PAGINATION_PER_PAGE', rowsPerPage: parseInt(event.target.value, 10)});
- dispatch({type: 'PAGINATION_PAGE', page: 0});
+ dispatch({ type: 'PAGINATION_PER_PAGE', rowsPerPage: parseInt(event.target.value, 10) });
+ dispatch({ type: 'PAGINATION_PAGE', page: 0 });
};
useEffect(() => {
if (!initialized) {
if (defaultPerPage) {
if (defaultPerPage !== rowsPerPage) {
- dispatch({type: 'PAGINATION_PER_PAGE', rowsPerPage: defaultPerPage});
+ dispatch({ type: 'PAGINATION_PER_PAGE', rowsPerPage: defaultPerPage });
}
} else if (rowsPerPageOptions && rowsPerPageOptions[0] !== rowsPerPage) {
- dispatch({type: 'PAGINATION_PER_PAGE', rowsPerPage: rowsPerPageOptions[0]});
+ dispatch({ type: 'PAGINATION_PER_PAGE', rowsPerPage: rowsPerPageOptions[0] });
}
- dispatch({type: 'PAGINATION_INITIALIZED'});
+ dispatch({ type: 'PAGINATION_INITIALIZED' });
}
}, []);
return
-
+
{(rowsPerPage > 0 ? population.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage) : population).map((row, index) => (
@@ -128,7 +112,7 @@ const List: FC<{
))}
{emptyRows > 0 && (
-
+
)}
@@ -142,7 +126,7 @@ const List: FC<{
rowsPerPage={rowsPerPage}
page={page}
SelectProps={{
- inputProps: {'aria-label': 'rows per page'},
+ inputProps: { 'aria-label': 'rows per page' },
native: true,
}}
onPageChange={handlePageChange}
diff --git a/src/app/components/LoadingAnimation.tsx b/src/app/components/LoadingAnimation.tsx
index 03a5adc..6fb2c8c 100644
--- a/src/app/components/LoadingAnimation.tsx
+++ b/src/app/components/LoadingAnimation.tsx
@@ -1,19 +1,11 @@
-import type {FC} from 'react';
-import React, {memo} from 'react';
-import {makeStyles} from '@material-ui/core/styles';
-
-const useStyles = makeStyles(() => ({
- loading: {
- textAlign: 'center',
- },
-}));
+import type { FC } from 'react';
+import React, { memo } from 'react';
+import Box from '@mui/material/Box';
const LoadingAnimation: FC = memo(() => {
- const classes = useStyles();
-
- return
+ return
-