Skip to content

Commit

Permalink
Implement loading UI
Browse files Browse the repository at this point in the history
  • Loading branch information
@campb303
campb303 committed Feb 23, 2021
1 parent b0173b9 commit 5fcb7d7
Show file tree
Hide file tree
Showing 3 changed files with 85 additions and 71 deletions.
4 changes: 3 additions & 1 deletion src/components/AppView/AppView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ export default function AppView({ setDarkMode }){
const [items, setItems] = useState([]);
const [selectedQueues, setSelectedQueues] = useState([]);
const [queueSelectorOpen, setQueueSelectorOpen] = useState(false);
const [isLoading, setIsLoading] = useState(true);
const [isLoading, setIsLoading] = useState(false);

// Create contextual variables.
const activeItem = useItem();
Expand All @@ -41,6 +41,7 @@ export default function AppView({ setDarkMode }){
return undefined;
}

setIsLoading(true);
let queuesToLoad = "";

if (selectedQueues.length === 1){
Expand All @@ -62,6 +63,7 @@ export default function AppView({ setDarkMode }){
const queueJson = await apiResponse.json();

setQueues(queueJson);
setIsLoading(false)
})();
}, [selectedQueues, access_token, queueSelectorOpen]);

Expand Down
152 changes: 82 additions & 70 deletions src/components/ItemTable/ItemTable.js
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,25 @@
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, Paper, Grid, ButtonGroup, IconButton, makeStyles, useTheme } from "@material-ui/core";
import { Table, TableBody, TableCell, TableHead, TableRow, TableContainer, Box, Grid, ButtonGroup, IconButton, 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 ItemTableCell from "../ItemTableCell";
import LastUpdatedCell from "../LastUpdatedCell/";
import { Skeleton } from "@material-ui/lab";
import jester from "./loading-annimation.gif";

export default function ItemTable({ data, rowCanBeSelected, loading }) {
const [selectedRow, setSelectedRow] = useState({ queue: null, number: null });

const theme = useTheme();
const useStyles = makeStyles({
loadingAnnimation: {
display: "flex",
justifyContent: "center",
width: "100%"
},
hoverBackgroundColor: {
"&:hover": {
// The !important is placed here to enforce CSS specificity.
Expand Down Expand Up @@ -85,64 +90,69 @@ export default function ItemTable({ data, rowCanBeSelected, loading }) {
const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow, } = tableInstance;

return (
<TableContainer>
<Table
{...getTableProps}
aria-label="Table of Queue Items"
size="small"
>
<TableHead>
{headerGroups.map(headerGroup => (
<TableRow {...headerGroup.getHeaderGroupProps()}>
{headerGroup.headers.map(column => (
<Grid container spacing={1}>
<TableCell {...column.getHeaderProps()}>
<Grid container spacing={0}>
<Grid item sm={10} >
{column.render("Filter")}
</Grid>
<Grid item sm={2} alignItems='center' justify='center'>
<ButtonGroup orientation="vertical" size="small">
<IconButton
size="small"
onClick={(_ => {
const isSortedAsc = column.isSorted && !column.isSortedDesc;
isSortedAsc ? column.clearSortBy() : column.toggleSortBy(false)
})}
>
<ArrowUpward {...column.getSortByToggleProps()}
fontSize="inherit"
color={column.isSorted && column.isSortedDesc === false ? "default" : "disabled"}
/>
</IconButton>
<IconButton
size="small"
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 ? "default" : "disabled"}
/>
</IconButton>
</ButtonGroup>
loading
? (
<Box className={classes.loadingAnnimation}>
<img src={jester} alt="Items are loading." />
</Box>
)
: (
<TableContainer>
<Table
{...getTableProps}
aria-label="Table of Queue Items"
size="small"
>
<TableHead>
{headerGroups.map(headerGroup => (
<TableRow {...headerGroup.getHeaderGroupProps()}>
{headerGroup.headers.map(column => (
<Grid container spacing={1}>
<TableCell {...column.getHeaderProps()}>
<Grid container spacing={0}>
<Grid item sm={10} >
{column.render("Filter")}
</Grid>
<Grid item sm={2} alignItems='center' justify='center'>
<ButtonGroup orientation="vertical" size="small">
<IconButton
size="small"
onClick={(_ => {
const isSortedAsc = column.isSorted && !column.isSortedDesc;
isSortedAsc ? column.clearSortBy() : column.toggleSortBy(false)
})}
>
<ArrowUpward {...column.getSortByToggleProps()}
fontSize="inherit"
color={column.isSorted && column.isSortedDesc === false ? "default" : "disabled"}
/>
</IconButton>
<IconButton
size="small"
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 ? "default" : "disabled"}
/>
</IconButton>
</ButtonGroup>
</Grid>
</Grid>
</Grid>
</TableCell>
</Grid>
))}
</TableRow>
))}
</TableHead>
<TableBody {...getTableBodyProps()}>
{rows.map((row) => {
prepareRow(row);
let isSelected = selectedRow.queue === row.original.queue && selectedRow.number === row.original.number
return (
loading ? <Skeleton /> :

</TableCell>
</Grid>
))}
</TableRow>
))}
</TableHead>
<TableBody {...getTableBodyProps()}>
{rows.map((row) => {
prepareRow(row);
let isSelected = selectedRow.queue === row.original.queue && selectedRow.number === row.original.number
return (
<TableRow
hover
onClick={() => {
Expand Down Expand Up @@ -183,25 +193,27 @@ export default function ItemTable({ data, rowCanBeSelected, loading }) {
}
})
))};
</TableRow>
);
})}
</TableBody>
</Table>
</TableContainer>
</TableRow>
);
})}
</TableBody>
</Table>
</TableContainer>
)
);
};

ItemTable.propTypes = {
/** Array of items from all active queues to display in table. */
"items": PropTypes.array,
/** State variable indicating if rows can be selected. When false, all rows are deselected. */
"rowCanBeSelected": PropTypes.bool
/** If true, rows can be selected. */
"rowCanBeSelected": PropTypes.bool,
/** If true, ItemTable displays loading screen. */
"loading": PropTypes.bool
};

ItemTable.defaultProps = {
/** The items to display in the table. */
"items": [],
/** A state variable determining whether a row can be selected or not. */
"rowCanBeSelected": true
"rowCanBeSelected": true,
"loading": false
};
Binary file added src/components/ItemTable/loading-annimation.gif
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 5fcb7d7

Please sign in to comment.