diff --git a/src/components/ItemBodyView/ItemBodyView.js b/src/components/ItemBodyView/ItemBodyView.js index eda0813..950f7ca 100644 --- a/src/components/ItemBodyView/ItemBodyView.js +++ b/src/components/ItemBodyView/ItemBodyView.js @@ -1,15 +1,15 @@ import React from "react"; import PropTypes from "prop-types"; -import { Timeline, TimelineItem, TimelineSeparator, TimelineConnector, TimelineContent, TimelineDot, Skeleton } from '@material-ui/lab'; +import { Timeline, TimelineItem, TimelineSeparator, TimelineConnector, TimelineContent, TimelineDot } from '@material-ui/lab'; import { makeStyles } from "@material-ui/core"; import DirectoryInformation from "../DirectoryInformation/"; import Assignment from "../Assignment/"; import TimelineActionCard from "../TimelineActionCard/"; import MessageView from "../MessageView/"; import ParseError from "../ParseError/"; -import { objectIsEmpty } from "../../utilities"; +import TimelineSkeleton from "../TimelineSkeleton/"; -export default function ItemBodyView({ item }) { +export default function ItemBodyView({ sections, loading }) { const useStyles = makeStyles(() => ({ "Timeline-root": { @@ -30,6 +30,11 @@ export default function ItemBodyView({ item }) { })); const classes = useStyles(); + /** + * Returns a section type specific timeline item. + * @param {Object} section The + * @returns {Node} A section type specific timeline item. + */ const generateTimelineItem = (section) => { switch (section.type) { case "directory_information": @@ -41,11 +46,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,54 +58,48 @@ export default function ItemBodyView({ item }) { }; }; - const testing = true; + const TimelineItemTemplate = ({ children }) => ( + + + + + + + {children} + + + ); return ( - {/* 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) => ( - - - - - - - - - - )) - : item.content.map((section) => ( - - - - - - {item === undefined - ? - : generateTimelineItem(section) - } - - - ))} + { loading + ? ( // Generate 3 placeholders. + [...Array(3).keys()].map( (_, index) => ( + + + + )) + ) + : ( // Generate timeline. + sections.map((section) => ( + + {generateTimelineItem(section)} + + )) + ) + } ); }; ItemBodyView.propTypes = { - /** The item to diplay. */ - "item": PropTypes.object.isRequired -}; \ No newline at end of file + /** Section of an item to display. */ + "sections": PropTypes.array, + /** If true, shows loading placeholder. */ + "loading": PropTypes.bool +}; + +ItemBodyView.defaultProps = { + "sections": [], + "loading": false +} \ No newline at end of file diff --git a/src/components/ItemBodyView/ItemBodyView.md b/src/components/ItemBodyView/ItemBodyView.md index 6a741ea..f92f979 100644 --- a/src/components/ItemBodyView/ItemBodyView.md +++ b/src/components/ItemBodyView/ItemBodyView.md @@ -8,15 +8,16 @@ The ItemBodyView displays the seven actions possible in an item: - **Reply To User:** a message sent from an ECN employee to a user. - **Reply To ECN:** a message sent from the user to ECN that has been merged into an existing item. -```jsx -import ItemBodyView from "./ItemBodyView"; +## Default View +![ItemBodyView_Loaded](/ItemBodyView_Loaded.png) -const demoItem = {"queue": "ce", "number": 100, "lastUpdated": "09-28-20 01:26 PM", "headers": [{"type": "Merged-Time", "content": "Tue, 23 Jun 2020 13:31:53 -0400"}, {"type": "Merged-By", "content": "campb303"}, {"type": "QTime", "content": "1"}, {"type": "QTime-Updated-Time", "content": "Tue, 23 Jun 2020 13:28:50 EDT"}, {"type": "QTime-Updated-By", "content": "campb303"}, {"type": "Time", "content": "1"}, {"type": "Time-Updated-Time", "content": "Tue, 23 Jun 2020 13:28:50 EDT"}, {"type": "Time-Updated-By", "content": "campb303"}, {"type": "Replied-Time", "content": "Tue, 23 Jun 2020 13:28:48 -0400"}, {"type": "Replied-By", "content": "campb303"}, {"type": "Edited-Time", "content": "Tue, 23 Jun 2020 13:27:56 -0400"}, {"type": "Edited-By", "content": "campb303"}, {"type": "QAssigned-To", "content": "campb303"}, {"type": "QAssigned-To-Updated-Time", "content": "Tue, 23 Jun 2020 13:27:00 EDT"}, {"type": "QAssigned-To-Updated-By", "content": "campb303"}, {"type": "Assigned-To", "content": "campb303"}, {"type": "Assigned-To-Updated-Time", "content": "Tue, 23 Jun 2020 13:27:00 EDT"}, {"type": "Assigned-To-Updated-By", "content": "campb303"}, {"type": "QStatus", "content": "Dont Delete"}, {"type": "QStatus-Updated-Time", "content": "Tue, 23 Jun 2020 13:26:55 EDT"}, {"type": "QStatus-Updated-By", "content": "campb303"}, {"type": "Status", "content": "Dont Delete"}, {"type": "Status-Updated-Time", "content": "Tue, 23 Jun 2020 13:26:55 EDT"}, {"type": "Status-Updated-By", "content": "campb303"}, {"type": "Date", "content": "Tue, 23 Jun 2020 13:25:51 -0400"}, {"type": "From", "content": "Justin Campbell "}, {"type": "Message-ID", "content": "<911CE050-3240-4980-91DD-9C3EBB8DBCF8@purdue.edu>"}, {"type": "Subject", "content": "Beepboop"}, {"type": "To", "content": "cesite@ecn.purdue.edu"}, {"type": "Content-Type", "content": "text/plain; charset=\"utf-8\""}, {"type": "X-ECN-Queue-Original-Path", "content": "/home/pier/e/queue/Attachments/inbox/2020-06-23/208-original.txt"}, {"type": "X-ECN-Queue-Original-URL", "content": "https://engineering.purdue.edu/webqueue/Attachments/inbox/2020-06-23/208-original.txt"}], "content": [{"type": "directory_information", "Name": "Heyi Feng", "Login": "feng293", "Computer": "civil4147pc2.ecn", "Location": "HAMP 4147", "Email": "feng293@purdue.edu", "Phone": "5039154835", "Office": "", "UNIX Dir": "None", "Zero Dir": "U=\\\\myhome.itap.purdue.edu\\myhome\\%username%", "User ECNDB": "http://eng.purdue.edu/jump/2e29495", "Host ECNDB": "http://eng.purdue.edu/jump/2eccc3f", "Subject": "Upgrade system and Abaqus"}, {"type": "assignment", "datetime": "2020-06-23T13:27:00-0400", "by": "campb303", "to": "campb303"}, {"type": "initial_message", "datetime": "2020-06-23T13:25:51-0400", "from_name": "Justin Campbell", "user_email": "campb303@purdue.edu", "to": [{"name": "", "email": "cesite@ecn.purdue.edu"}], "cc": [], "content": ["Testtest\n"]}, {"type": "status", "datetime": "2020-06-23T13:26:55", "by": "campb303", "content": ["Dont Delete\n"]}, {"type": "edit", "datetime": "2020-06-23T13:27:56", "by": "campb303", "content": ["This be an edit my boy\n"]}, {"type": "reply_to_user", "datetime": "2020-06-23T13:28:18", "by": "campb303", "content": ["This be a reply my son\n", "\n", "Justin\n", "ECN\n"]}, {"type": "reply_from_user", "datetime": "2020-06-23T13:30:45-0400", "from_name": "Justin Campbell", "from_email": "campb303@purdue.edu", "cc": [], "content": ["X-ECN-Queue-Original-Path: /home/pier/e/queue/Attachments/inbox/2020-06-23/212-original.txt\n", "X-ECN-Queue-Original-URL: https://engineering.purdue.edu/webqueue/Attachments/inbox/2020-06-23/212-original.txt\n", "\n", "Huzzah!\n"]}], "isLocked": "ce 100 is locked by knewell using qvi", "userEmail": "campb303@purdue.edu", "userName": "Justin Campbell", "userAlias": "campb303", "assignedTo": "campb303", "subject": "Beepboop", "status": "Dont Delete", "priority": "", "department": "", "building": "", "dateReceived": "2020-06-23T13:25:51-0400"}; -
- -
+```jsx static + ``` +## Loading View +![ItemBodyView_Loaded](/ItemBodyView_Loading.gif) + ```jsx static - + ``` \ No newline at end of file diff --git a/src/components/ItemView/ItemView.js b/src/components/ItemView/ItemView.js index 67da0f7..f511fbf 100644 --- a/src/components/ItemView/ItemView.js +++ b/src/components/ItemView/ItemView.js @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import React, { useState, useEffect } from 'react'; import PropTypes from "prop-types"; import { Paper, AppBar, Tab, makeStyles, useTheme } from '@material-ui/core'; // Import these tab components from @material-ui/lab instead of @material-ui/core for automatic a11y props @@ -7,14 +7,16 @@ import { TabContext, TabList, TabPanel } from '@material-ui/lab'; import ItemMetadataView from "../ItemMetadataView" import ItemBodyView from "../ItemBodyView"; import ItemHeaderView from "../ItemHeaderView"; -import { useItem } from "../ItemProvider"; +import { useItem, useItemSetter } from "../ItemProvider"; export default function ItemView(){ // Set stateful variables const [activeTab, setActiveTab] = useState('Conversation'); + const [isLoading, setIsLoading] = useState(false); // Set contextual variables const activeItem = useItem(); + const setActiveItem = useItemSetter(); const theme = useTheme(); const useStyles = makeStyles({ @@ -44,9 +46,11 @@ export default function ItemView(){ + - + + diff --git a/src/components/TimelineSkeleton/TimelineSkeleton.js b/src/components/TimelineSkeleton/TimelineSkeleton.js index 1dff555..6c2d15d 100644 --- a/src/components/TimelineSkeleton/TimelineSkeleton.js +++ b/src/components/TimelineSkeleton/TimelineSkeleton.js @@ -24,7 +24,10 @@ export default function TimelineSkeleton(){
- {[...Array(2).keys()].map( _ => )} + { + // Generate 2 placeholders. + [...Array(2).keys()].map( (_, index) => ) + }
); diff --git a/styleguidist/assetsDir/ItemBodyView_Loaded.png b/styleguidist/assetsDir/ItemBodyView_Loaded.png new file mode 100644 index 0000000..b99e9f5 Binary files /dev/null and b/styleguidist/assetsDir/ItemBodyView_Loaded.png differ diff --git a/styleguidist/assetsDir/ItemBodyView_Loading.gif b/styleguidist/assetsDir/ItemBodyView_Loading.gif new file mode 100644 index 0000000..3329413 Binary files /dev/null and b/styleguidist/assetsDir/ItemBodyView_Loading.gif differ