forked from humanprotocol/human-protocol
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(app/search-result/role-details/escrows): add escrows table
- Loading branch information
1 parent
23f9973
commit 46a5a9f
Showing
8 changed files
with
391 additions
and
77 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
96 changes: 96 additions & 0 deletions
96
...i-2024/src/pages/SearchResults/RoleDetails/RoleDetailsEscrows/RoleDetailsEscrowsTable.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,96 @@ | ||
| import Card from '@mui/material/Card'; | ||
| import Typography from '@mui/material/Typography'; | ||
| import Box from '@mui/material/Box'; | ||
| import { AddressDetailsLeader } from '@services/api/use-address-details'; | ||
| import TableContainer from '@mui/material/TableContainer'; | ||
| import Table from '@mui/material/Table'; | ||
| import { EscrowsTableBody } from '@pages/SearchResults/RoleDetails/RoleDetailsEscrows/tableComponents/EscrowsTableBody'; | ||
| import TableFooter from '@mui/material/TableFooter'; | ||
| import TablePagination from '@mui/material/TablePagination'; | ||
| import { useEscrowDetailsDto } from '@utils/hooks/use-escrows-details-dto'; | ||
| import TableHead from '@mui/material/TableHead'; | ||
| import TableRow from '@mui/material/TableRow'; | ||
|
|
||
| export const RoleDetailsEscrowsTable = ({ | ||
| role, | ||
| }: { | ||
| role: AddressDetailsLeader['role']; | ||
| }) => { | ||
| const { | ||
| pagination: { page, pageSize, lastPageIndex }, | ||
| setPageSize, | ||
| setNextPage, | ||
| setPrevPage, | ||
| } = useEscrowDetailsDto(); | ||
|
|
||
| return ( | ||
| <Card | ||
| sx={{ | ||
| paddingX: { xs: 2, md: 8 }, | ||
| paddingY: { xs: 4, md: 6 }, | ||
| marginBottom: 4, | ||
| }} | ||
| > | ||
| <Box> | ||
| <Typography | ||
| sx={{ | ||
| marginBottom: 3, | ||
| }} | ||
| variant="h5" | ||
| > | ||
| Escrows | ||
| </Typography> | ||
| <TableContainer> | ||
| <Table | ||
| sx={{ | ||
| minWidth: 800, | ||
| '& .MuiTableCell-root': { | ||
| borderBottom: 'none', | ||
| }, | ||
| }} | ||
| aria-label="simple-table" | ||
| > | ||
| <TableHead> | ||
| <TableRow></TableRow> | ||
| </TableHead> | ||
| <EscrowsTableBody role={role} /> | ||
| <TableFooter> | ||
| <TablePagination | ||
| // count is unknown but required as props | ||
| count={9999} | ||
| // onPageChange is required as props | ||
| onPageChange={() => {}} | ||
| page={page} | ||
| rowsPerPage={pageSize} | ||
| onRowsPerPageChange={(event) => { | ||
| setPageSize(Number(event.target.value)); | ||
| }} | ||
| rowsPerPageOptions={[5, 10]} | ||
| labelDisplayedRows={({ from, to }) => { | ||
| return `${from}–${to}`; | ||
| }} | ||
| slotProps={{ | ||
| actions: { | ||
| nextButton: { | ||
| onClick: () => { | ||
| setNextPage(); | ||
| }, | ||
| disabled: | ||
| lastPageIndex !== undefined && | ||
| (page === lastPageIndex || lastPageIndex - 1 === page), | ||
| }, | ||
| previousButton: { | ||
| onClick: () => { | ||
| setPrevPage(); | ||
| }, | ||
| }, | ||
| }, | ||
| }} | ||
| /> | ||
| </TableFooter> | ||
| </Table> | ||
| </TableContainer> | ||
| </Box> | ||
| </Card> | ||
| ); | ||
| }; |
70 changes: 70 additions & 0 deletions
70
...c/pages/SearchResults/RoleDetails/RoleDetailsEscrows/tableComponents/EscrowsTableBody.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,70 @@ | ||
| import TableRow from '@mui/material/TableRow'; | ||
| import TableCell from '@mui/material/TableCell'; | ||
| import MuiTableBody from '@mui/material/TableBody'; | ||
| import { useEffect } from 'react'; | ||
| import { handleErrorMessage } from '@services/handle-error-message'; | ||
| import CircularProgress from '@mui/material/CircularProgress'; | ||
| import { EscrowsTableBodyContainer } from '@pages/SearchResults/RoleDetails/RoleDetailsEscrows/tableComponents/EscrowsTableBodyContainer'; | ||
| import { useEscrowDetails } from '@services/api/use-escrows-details'; | ||
| import { AddressDetailsLeader } from '@services/api/use-address-details'; | ||
| import { useEscrowDetailsDto } from '@utils/hooks/use-escrows-details-dto'; | ||
|
|
||
| export const EscrowsTableBody = ({ | ||
| role, | ||
| }: { | ||
| role: AddressDetailsLeader['role']; | ||
| }) => { | ||
| const { data, isPending, isError, error } = useEscrowDetails({ role }); | ||
| const { | ||
| setLastPageIndex, | ||
| setPrevPage, | ||
| pagination: { page }, | ||
| } = useEscrowDetailsDto(); | ||
|
|
||
| useEffect(() => { | ||
| if (data?.results.length === 0) { | ||
| setLastPageIndex(page); | ||
| setPrevPage(); | ||
| } | ||
| }, [data?.results, page, setLastPageIndex, setPrevPage]); | ||
|
|
||
| if (isPending) { | ||
| return ( | ||
| <EscrowsTableBodyContainer> | ||
| <CircularProgress /> | ||
| </EscrowsTableBodyContainer> | ||
| ); | ||
| } | ||
|
|
||
| if (isError) { | ||
| return ( | ||
| <EscrowsTableBodyContainer> | ||
| <div>{handleErrorMessage(error)}</div> | ||
| </EscrowsTableBodyContainer> | ||
| ); | ||
| } | ||
|
|
||
| if (!data.results.length) { | ||
| return ( | ||
| <EscrowsTableBodyContainer> | ||
| <div>No data</div> | ||
| </EscrowsTableBodyContainer> | ||
| ); | ||
| } | ||
|
|
||
| return ( | ||
| <MuiTableBody> | ||
| {data.results.map((elem, idx) => ( | ||
| <TableRow key={idx}> | ||
| <TableCell | ||
| sx={{ | ||
| padding: '0 0 24px 0', | ||
| }} | ||
| > | ||
| {elem.address} | ||
| </TableCell> | ||
| </TableRow> | ||
| ))} | ||
| </MuiTableBody> | ||
| ); | ||
| }; |
27 changes: 27 additions & 0 deletions
27
...earchResults/RoleDetails/RoleDetailsEscrows/tableComponents/EscrowsTableBodyContainer.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,27 @@ | ||
| import MuiTableBody from '@mui/material/TableBody'; | ||
| import { Grid } from '@mui/material'; | ||
|
|
||
| export const EscrowsTableBodyContainer = ({ | ||
| children, | ||
| }: { | ||
| children: JSX.Element; | ||
| }) => { | ||
| return ( | ||
| <MuiTableBody sx={{ position: 'relative', height: ' 40vh' }}> | ||
| <Grid | ||
| container | ||
| sx={{ | ||
| justifyContent: 'center', | ||
| alignItems: 'center', | ||
| position: 'absolute', | ||
| top: 0, | ||
| left: 0, | ||
| width: '100%', | ||
| height: '100%', | ||
| }} | ||
| > | ||
| {children} | ||
| </Grid> | ||
| </MuiTableBody> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.