Skip to content

Commit

Permalink
WIP Skeleton view for ItemTable
Browse files Browse the repository at this point in the history
  • Loading branch information
@wrigh393
wrigh393 committed Feb 23, 2021
1 parent abb9a79 commit c73fb0e
Show file tree
Hide file tree
Showing 2 changed files with 50 additions and 44 deletions.
5 changes: 4 additions & 1 deletion src/components/AppView/AppView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,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 access_token = useToken();

Expand All @@ -43,8 +44,10 @@ export default function AppView({ setDarkMode }){

const apiResponse = await fetch(`/api/${queuesToLoad}`, requestOptions);
const queueJson = await apiResponse.json();
setIsLoading(false);
setQueues(queueJson);
} else {
setIsLoading(true)
setQueues([])
}
}
Expand Down Expand Up @@ -103,7 +106,7 @@ export default function AppView({ setDarkMode }){
value={selectedQueues}
setValue={setSelectedQueues}
/>
<ItemTable data={items} rowCanBeSelected={sidebarOpen}/>
<ItemTable data={items} rowCanBeSelected={sidebarOpen} loading={isLoading}/>
</Box>

<Box className={clsx(classes.rightCol, sidebarOpen && classes.rightColShift)}>
Expand Down
89 changes: 46 additions & 43 deletions src/components/ItemTable/ItemTable.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,9 @@ 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";

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

const theme = useTheme();
Expand Down Expand Up @@ -44,7 +45,7 @@ export default function ItemTable({ data, rowCanBeSelected }) {
() => [
{ Header: 'Queue', accessor: 'queue', },
{ Header: 'Item #', accessor: 'number' },
{ Header: 'From', accessor: 'userAlias'},
{ Header: 'From', accessor: 'userAlias' },
{ Header: 'Assigned To', accessor: 'assignedTo' },
{ Header: 'Subject', accessor: 'subject' },
{ Header: 'Status', accessor: 'status', },
Expand All @@ -53,7 +54,7 @@ export default function ItemTable({ data, rowCanBeSelected }) {
{ Header: 'Department', accessor: 'department' },
{ Header: 'Building', accessor: 'building' },
{ Header: 'Date Received', accessor: 'dateReceived', sortInverted: true, Cell: ({ value }) => <RelativeTime value={value} /> },

], []);
const tableInstance = useTable(
{
Expand Down Expand Up @@ -140,46 +141,48 @@ export default function ItemTable({ data, rowCanBeSelected }) {
prepareRow(row);
let isSelected = selectedRow.queue === row.original.queue && selectedRow.number === row.original.number
return (
<TableRow
hover
onClick={() => {
history.push(`/${row.original.queue}/${row.original.number}`);
setSelectedRow({ queue: row.original.queue, number: row.original.number });
}}
// This functionality should be achieved by using the selected prop and
// overriding the selected class but this applied the secondary color at 0.08% opacity.
// Overridding the root class is a workaround.
classes={{
root: (isSelected && rowCanBeSelected) ? classes.rowSelected : classes.bandedRows,
hover: classes.hoverBackgroundColor
}}
{...row.getRowProps()}
>
{row.cells.map(cell => (
cell.render(_ => {
switch (cell.column.id) {
case "dateReceived":
return (
<ItemTableCell TableCellProps={cell.getCellProps()}>
<RelativeTime value={cell.value} />
</ItemTableCell>
);
case "lastUpdated":
return (
<LastUpdatedCell
time={cell.value}
ItemTableCellProps={cell.getCellProps()}
/>
);
default:
return (
<ItemTableCell TableCellProps={cell.getCellProps()}>
{cell.value}
</ItemTableCell>
);
}
})
))};
loading ? <Skeleton /> :

<TableRow
hover
onClick={() => {
history.push(`/${row.original.queue}/${row.original.number}`);
setSelectedRow({ queue: row.original.queue, number: row.original.number });
}}
// This functionality should be achieved by using the selected prop and
// overriding the selected class but this applied the secondary color at 0.08% opacity.
// Overridding the root class is a workaround.
classes={{
root: (isSelected && rowCanBeSelected) ? classes.rowSelected : classes.bandedRows,
hover: classes.hoverBackgroundColor
}}
{...row.getRowProps()}
>
{row.cells.map(cell => (
cell.render(_ => {
switch (cell.column.id) {
case "dateReceived":
return (
<ItemTableCell TableCellProps={cell.getCellProps()}>
<RelativeTime value={cell.value} />
</ItemTableCell>
);
case "lastUpdated":
return (
<LastUpdatedCell
time={cell.value}
ItemTableCellProps={cell.getCellProps()}
/>
);
default:
return (
<ItemTableCell TableCellProps={cell.getCellProps()}>
{cell.value}
</ItemTableCell>
);
}
})
))};
</TableRow>
);
})}
Expand Down

0 comments on commit c73fb0e

Please sign in to comment.