Refactored sorting to its own component

ECN · Dec 17, 2020 · 3effeb7 · 3effeb7
1 parent 561d435
commit 3effeb7
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 34 deletions.
diff --git a/src/components/ItemTable/ItemTable.js b/src/components/ItemTable/ItemTable.js
@@ -1,17 +1,16 @@
 import React, { useState } from "react";
 import PropTypes from "prop-types";
 import { useTable, useFilters, useFlexLayout, useSortBy } from "react-table";
-import { Table, TableBody, TableCell, TableHead, TableRow, TableContainer, Grid, ButtonGroup, IconButton, makeStyles, useTheme } from "@material-ui/core";
+import { Table, TableBody, TableCell, TableHead, TableRow, TableContainer, Grid, makeStyles, useTheme } from "@material-ui/core";
 import { useHistory } from "react-router-dom";
 import RelativeTime from "react-relative-time";
-import ItemTableFilter from "../ItemTableFilter/"
-import { ArrowDownward, ArrowUpward } from "@material-ui/icons";
-
+import ItemTableFilter from "../ItemTableFilter/";
+import ItemtTableSortButtons from "../ItemTableSortButtons.js";
 
 export default function ItemTable({ data, rowCanBeSelected }) {
-    const [selectedRow, setSelectedRow] = useState({ queue: null, number: null});
+    const [selectedRow, setSelectedRow] = useState({ queue: null, number: null });
 
-    const theme = useTheme(); 
+    const theme = useTheme();
     const useStyles = makeStyles({
         // Fully visible for active icons
         activeSortIcon: {
@@ -74,7 +73,12 @@ export default function ItemTable({ data, rowCanBeSelected }) {
 
     return (
         <TableContainer>
-            <Table {...getTableProps} aria-label="Table of Queue Items"  size="small">
+            <Table
+                {...getTableProps}
+                aria-label="Table of Queue Items"
+                size="small"
+                stickyHeader
+            >
                 <TableHead>
                     {headerGroups.map(headerGroup => (
                         <TableRow {...headerGroup.getHeaderGroupProps()}>
@@ -86,32 +90,20 @@ export default function ItemTable({ data, rowCanBeSelected }) {
                                                 {column.render("Filter")}
                                             </Grid>
                                             <Grid item sm={2} alignItems='center' justify='center'>
-                                                <ButtonGroup orientation="vertical" size="small">
-                                                    <IconButton
-                                                        edge="start"
-                                                        onClick={(_ => {
-                                                            const isSortedAsc = column.isSorted && !column.isSortedDesc;
-                                                            isSortedAsc ? column.clearSortBy() : column.toggleSortBy(false)
-                                                        })}
-                                                    >
-                                                        <ArrowUpward {...column.getSortByToggleProps()}
-                                                            fontSize="inherit"
-                                                            color={column.isSorted && column.isSortedDesc === false ? "secondary" : "default"}
-                                                        />
-                                                    </IconButton>
-                                                    <IconButton
-                                                        edge="start"
-                                                        onClick={(_ => {
-                                                            const isSortedDesc = column.isSorted && column.isSortedDesc;
-                                                            isSortedDesc ? column.clearSortBy() : column.toggleSortBy(true)
-                                                        })}
-                                                    >
-                                                        <ArrowDownward {...column.getSortByToggleProps(column.isSortedDesc)}
-                                                            fontSize="inherit"
-                                                            color={column.isSorted && column.isSortedDesc ? "secondary" : "default"}
-                                                        />
-                                                    </IconButton>
-                                                </ButtonGroup>
+                                                <ItemtTableSortButtons
+                                                    onClickAsc={_ => {
+                                                        const isSortedAsc = column.isSorted && !column.isSortedDesc;
+                                                        isSortedAsc ? column.clearSortBy() : column.toggleSortBy(false);
+                                                    }}
+                                                    onClickDesc={_ => {
+                                                        const isSortedDesc = column.isSorted && column.isSortedDesc;
+                                                        isSortedDesc ? column.clearSortBy() : column.toggleSortBy(true)
+                                                    }}
+                                                    colorAsc={column.isSorted && column.isSortedDesc === false ? "secondary" : "default"}
+                                                    colorDesc={column.isSorted && column.isSortedDesc ? "secondary" : "default"}
+                                                    columnSortAscProps={column.getSortByToggleProps()}
+                                                    columnSortDescProps={column.getSortByToggleProps(column.isSortedDesc)}
+                                                />
                                             </Grid>
                                         </Grid>
                                     </TableCell>
@@ -136,7 +128,7 @@ export default function ItemTable({ data, rowCanBeSelected }) {
                                 classes={{ root: (isSelected && rowCanBeSelected) ? classes.rowSelected : classes.bandedRows }}
                                 {...row.getRowProps()} >
                                 {row.cells.map(cell => (
-                                    <TableCell 
+                                    <TableCell
                                         classes={{ root: classes.columnBorders }}
                                         {...cell.getCellProps()}
                                     >

diff --git a/src/components/ItemTableSortButtons.js/ItemTableSortButtons.js b/src/components/ItemTableSortButtons.js/ItemTableSortButtons.js
@@ -0,0 +1,31 @@
+import React from 'react';
+import PropTypes from "prop-types";
+import { ButtonGroup, IconButton } from "@material-ui/core";
+import { ArrowDownward, ArrowUpward } from "@material-ui/icons";
+
+export default function ItemTableSortButtons({ onClickAsc, onClickDesc, colorAsc, colorDesc, columnSortAscProps, columnSortDescProps }) {
+    return (
+        <ButtonGroup orientation="vertical" size="small">
+            <IconButton
+                edge="start"
+                onClick={onClickAsc}
+            >
+                <ArrowUpward {...columnSortAscProps}
+                    fontSize="inherit"
+                    color={colorAsc}
+                />
+            </IconButton>
+            <IconButton
+                edge="start"
+                onClick={onClickDesc}
+            >
+                <ArrowDownward {...columnSortDescProps}
+                    fontSize="inherit"
+                    color={colorDesc}
+                />
+            </IconButton>
+        </ButtonGroup>
+    )
+}
+
+
diff --git a/src/components/ItemTableSortButtons.js/ItemTableSortButtons.md b/src/components/ItemTableSortButtons.js/ItemTableSortButtons.md
diff --git a/src/components/ItemTableSortButtons.js/index.js b/src/components/ItemTableSortButtons.js/index.js
@@ -0,0 +1,3 @@
+import ItemtTableSortButtons from './ItemTableSortButtons'
+
+export default ItemtTableSortButtons;