User page table footer (#108)

* Fix user page footer

* Move styles into its own file

* Make image undraggable

* improved stylings for table footer (#112)

Co-authored-by: Kyler Wong <wsm.kyler@gmail.com>

src/client/components/UserPage/UserLinkTable/UrlTable/MemoTablePagination/PaginationActionComponent/index.jsx

@@ -0,0 +1,56 @@
+import React from 'react'
+import { Grid, IconButton, createStyles, makeStyles } from '@material-ui/core'
+import arrowLeftIcon from '../../../assets/arrow-left-icon.svg'
+import arrowRightIcon from '../../../assets/arrow-right-icon.svg'
+
+const useStyles = makeStyles(() =>
+  createStyles({
+    pageSelectGrid: {
+      fontWeight: 500,
+      color: '#767676',
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      display: 'flex',
+      justifyContent: 'center',
+      width: '100%',
+      height: '100%',
+      zIndex: 1,
+    },
+    gridItemHorizontalPadding: {
+      '&:first-child': {
+        paddingRight: 34,
+      },
+      '&:last-child': {
+        paddingLeft: 34,
+      },
+    },
+  }),
+)
+
+export default ({ pageCount, onChangePage, page }) => {
+  const classes = useStyles()
+  return (
+    <Grid container item alignItems="center" className={classes.pageSelectGrid}>
+      <Grid item className={classes.gridItemHorizontalPadding}>
+        <IconButton
+          onClick={(event) => onChangePage(event, page - 1)}
+          disabled={page <= 0}
+        >
+          <img src={arrowLeftIcon} alt="Previous page" draggable={false} />
+        </IconButton>
+      </Grid>
+      <Grid item className={classes.gridItemHorizontalPadding}>{`Page ${
+        page + 1
+      } of ${pageCount}`}</Grid>
+      <Grid item className={classes.gridItemHorizontalPadding}>
+        <IconButton
+          onClick={(event) => onChangePage(event, page + 1)}
+          disabled={pageCount <= page + 1}
+        >
+          <img src={arrowRightIcon} alt="Next page" draggable={false} />
+        </IconButton>
+      </Grid>
+    </Grid>
+  )
+}

src/client/components/UserPage/UserLinkTable/UrlTable/MemoTablePagination/index.jsx

@@ -1,6 +1,9 @@
 import React from 'react'
 import { TablePagination } from '@material-ui/core'
 import isMatch from 'lodash/isMatch'
+import useAppMargins from '../../../../AppMargins/appMargins'
+import PaginationActionComponent from './PaginationActionComponent'
+import useStyles from './styles'
 
 // Prevents re-render if pagination did not change.
 const paginationInputIsEqual = (prev, next) =>
@@ -10,6 +13,9 @@ const paginationInputIsEqual = (prev, next) =>
 
 const MemoTablePagination = React.memo(
   ({ urlCount, tableConfig, updateUrlTableConfig }) => {
+    const appMargins = useAppMargins()
+    const classes = useStyles({ appMargins })
+
     const updateTableIfChanged = (newConfig) => {
       if (!isMatch(tableConfig, newConfig)) {
         updateUrlTableConfig(newConfig)
@@ -22,8 +28,18 @@ const MemoTablePagination = React.memo(
       updateTableIfChanged({ numberOfRows: event.target.value, pageNumber: 0 })
     }
 
+    const pageCount = Math.ceil(urlCount / tableConfig.numberOfRows)
+
     return (
       <TablePagination
+        ActionsComponent={({ onChangePage, page }) => (
+          <PaginationActionComponent
+            pageCount={pageCount}
+            onChangePage={onChangePage}
+            page={page}
+          />
+        )}
+        labelRowsPerPage="Links per page"
         rowsPerPageOptions={[10, 25, 100]}
         component="div"
         count={urlCount}
@@ -37,6 +53,14 @@ const MemoTablePagination = React.memo(
         }}
         onChangePage={changePageHandler}
         onChangeRowsPerPage={changeRowsPerPageHandler}
+        classes={{
+          spacer: classes.spacer,
+          toolbar: classes.toolbar,
+          caption: classes.caption,
+          select: classes.select,
+          selectIcon: classes.selectIcon,
+        }}
+        labelDisplayedRows={() => {}}
       />
     )
   },

src/client/components/UserPage/UserLinkTable/UrlTable/MemoTablePagination/styles.ts

@@ -0,0 +1,37 @@
+import { createStyles, makeStyles } from '@material-ui/core'
+
+type StyleProps = {
+  appMargins: number
+}
+
+export default makeStyles((theme) =>
+  createStyles({
+    toolbar: {
+      paddingLeft: (props: StyleProps) => props.appMargins,
+      paddingRight: (props: StyleProps) => props.appMargins,
+    },
+    spacer: {
+      flex: 0,
+    },
+    caption: {
+      fontWeight: 400,
+      marginRight: '4px',
+      [theme.breakpoints.down('sm')]: {
+        display: 'none',
+      },
+    },
+    select: {
+      border: 'solid 1px #d8d8d8',
+      zIndex: 2,
+      [theme.breakpoints.down('sm')]: {
+        display: 'none',
+      },
+    },
+    selectIcon: {
+      zIndex: 2,
+      [theme.breakpoints.down('sm')]: {
+        display: 'none',
+      },
+    },
+  }),
+)