From abb9a7976e503a5ceeb4e8da2014595084999831 Mon Sep 17 00:00:00 2001 From: wrigh393 Date: Mon, 22 Feb 2021 17:57:14 -0500 Subject: [PATCH 1/2] Implement code for testing skeleton view UI in ItemBodyView --- src/components/ItemBodyView/ItemBodyView.js | 36 +++++++++++++++++---- 1 file changed, 30 insertions(+), 6 deletions(-) diff --git a/src/components/ItemBodyView/ItemBodyView.js b/src/components/ItemBodyView/ItemBodyView.js index 08a57f9..eda0813 100644 --- a/src/components/ItemBodyView/ItemBodyView.js +++ b/src/components/ItemBodyView/ItemBodyView.js @@ -1,6 +1,6 @@ import React from "react"; import PropTypes from "prop-types"; -import { Timeline, TimelineItem, TimelineSeparator, TimelineConnector, TimelineContent, TimelineDot } from '@material-ui/lab'; +import { Timeline, TimelineItem, TimelineSeparator, TimelineConnector, TimelineContent, TimelineDot, Skeleton } from '@material-ui/lab'; import { makeStyles } from "@material-ui/core"; import DirectoryInformation from "../DirectoryInformation/"; import Assignment from "../Assignment/"; @@ -41,11 +41,11 @@ export default function ItemBodyView({ item }) { case "status": return case "assignment": - return + return case "reply_to_user": return case "reply_from_user": - return + return case "parse_error": return default: @@ -53,9 +53,14 @@ export default function ItemBodyView({ item }) { }; }; + const testing = true; + return ( - {objectIsEmpty(item) ? "" : item.content.map((section) => ( + {/* Below is the original ternary operation for the map fucntion for future reference */} + {/* {objectIsEmpty(item) ? "" : item.content.map((section) */} + + {testing ? Object.keys(item).map((section) => ( - {generateTimelineItem(section)} + - ))} + )) + : item.content.map((section) => ( + + + + + + {item === undefined + ? + : generateTimelineItem(section) + } + + + ))} ); }; From c73fb0e21b96a15268667e812f250b14d5f084c9 Mon Sep 17 00:00:00 2001 From: wrigh393 Date: Mon, 22 Feb 2021 21:55:19 -0500 Subject: [PATCH 2/2] WIP Skeleton view for ItemTable --- src/components/AppView/AppView.js | 5 +- src/components/ItemTable/ItemTable.js | 89 ++++++++++++++------------- 2 files changed, 50 insertions(+), 44 deletions(-) diff --git a/src/components/AppView/AppView.js b/src/components/AppView/AppView.js index 75c7c60..abcc5ed 100644 --- a/src/components/AppView/AppView.js +++ b/src/components/AppView/AppView.js @@ -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(); @@ -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([]) } } @@ -103,7 +106,7 @@ export default function AppView({ setDarkMode }){ value={selectedQueues} setValue={setSelectedQueues} /> - + diff --git a/src/components/ItemTable/ItemTable.js b/src/components/ItemTable/ItemTable.js index 497296d..0cc18b9 100644 --- a/src/components/ItemTable/ItemTable.js +++ b/src/components/ItemTable/ItemTable.js @@ -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(); @@ -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', }, @@ -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 }) => }, - + ], []); const tableInstance = useTable( { @@ -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 ( - { - 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 ( - - - - ); - case "lastUpdated": - return ( - - ); - default: - return ( - - {cell.value} - - ); - } - }) - ))}; + loading ? : + + { + 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 ( + + + + ); + case "lastUpdated": + return ( + + ); + default: + return ( + + {cell.value} + + ); + } + }) + ))}; ); })}