updated style guide documentation

ECN · Oct 13, 2020 · 4d7c3f4 · 4d7c3f4
1 parent 17a9860
commit 4d7c3f4
Show file tree

Hide file tree

Showing 7 changed files with 60 additions and 34 deletions.
diff --git a/src/App.js b/src/App.js
@@ -25,6 +25,7 @@ function App() {
 	useEffect(() => {
 		fetch("/api/ce").then(res => res.json()).then(queue => {
 			setData(queue.items)
+			console.log(queue.items)
 		})
 	}, [])
 
@@ -69,35 +70,49 @@ function App() {
 
 				<Box className={classes.leftCol}>
 					<ItemTableAppBar title="webqueue2" darkMode={darkMode} setDarkMode={setDarkMode} theme={theme} />
-					<ItemTable data={data} history={history} setSidebarOpen={setSidebarOpen} setActiveItem={setActiveItem} />
+					<ItemTable data={data} history={history} />
 				</Box>
 
 				<Box className={clsx(classes.rightCol, sidebarOpen && classes.rightColShift)}>
+					{data.length === 0 ? null : 
 					<Route 
 						path="/:queue/:number" 
 						render={({ match }) => {
 
 							let item = data.find(item => item.queue === match.params.queue && item.number === match.params.number);
 
 							if (item === undefined) {
-								return null;
+								setSidebarOpen(true);
+								return "Item doesn't exist :(";
 							}
 
 							setActiveItem(item);
 							setSidebarOpen(true);
 
 							return (
 								<>
-									<ItemViewAppBar title={activeItem["queue"] + " " + activeItem["number"]} setSidebarOpen={setSidebarOpen} />
-									<ItemView activeItem={activeItem} setActiveItem={setActiveItem} setSidebarOpen={setSidebarOpen} />
+									<ItemViewAppBar title={activeItem["queue"] + " " + activeItem["number"]} setSidebarOpen={setSidebarOpen} theme={theme} />
+									<ItemView activeItem={activeItem} />
 								</>
 							);
 						}} 
-					/>
+					/>}
 				</Box>
 			</Box>
 		</ThemeProvider>
 	);
 }
 
 export default App;
+
+/**
+ * 							setActiveItem(item);
+							setSidebarOpen(true);
+
+							return (
+								<>
+									<ItemViewAppBar title={activeItem["queue"] + " " + activeItem["number"]} setSidebarOpen={setSidebarOpen} />
+									<ItemView activeItem={activeItem} />
+								</>
+							);
+ */
diff --git a/src/components/ItemTable/ItemTable.js b/src/components/ItemTable/ItemTable.js
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types'
 import MaterialTable from "material-table";
 
-export default function ItemTable({ data, history, setActiveItem, setSidebarOpen }) {
+export default function ItemTable({ data, history }) {
 
 	const columns = [
 		{ title: 'Queue', field: 'queue', filterPlaceholder: "Ex: \"ME\"" },
@@ -32,19 +32,18 @@ export default function ItemTable({ data, history, setActiveItem, setSidebarOpen
 			data={data}
 			title={"Demo Table"}
 			options={options}
-			onRowClick={(event, rowData) => {
-				setActiveItem(rowData);
-				setSidebarOpen(true);
+			onRowClick={(_event, rowData) => {
 				history.push(`/${rowData.queue}/${rowData.number}`);
 			}}
 		/>
 	);
 }
 
 ItemTable.propTypes = {
-	/** Function to set active item on row click. */
-	"setActiveItem": PropTypes.func.isRequired,
-	/** Function to toggle sidebar on row click. */
-	"setSidebarOpen": PropTypes.func.isRequired
+
+	/** Array is required to show data in table */
+	"data": PropTypes.array.isRequired,
+	/** Object is require to update URLs */
+	"history": PropTypes.object.isRequired
 
 }
diff --git a/src/components/ItemTable/ItemTable.md b/src/components/ItemTable/ItemTable.md
diff --git a/src/components/ItemView/ItemView.js b/src/components/ItemView/ItemView.js
@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
 import { Paper, Typography, makeStyles } from '@material-ui/core';
 import ItemMetadataView from "../ItemMetadataView/"
 
-export default function ItemView(props){
+export default function ItemView({ activeItem }){
 
 	const useStyles = makeStyles((theme) => ({
 		"paperPadding": {
@@ -16,9 +16,9 @@ export default function ItemView(props){
 return(
 		<Paper classes={{root: classes.paperPadding}} square>
 
-			<ItemMetadataView item={props.activeItem} />
+			<ItemMetadataView item={activeItem} />
 
-			{props.activeItem["content"] ? props.activeItem["content"].map(line => (
+			{activeItem["content"] ? activeItem["content"].map(line => (
 				<Typography variant="body1" paragraph>
 					{line}
 				</Typography>

diff --git a/src/components/ItemView/ItemView.md b/src/components/ItemView/ItemView.md
@@ -1,18 +1,13 @@
-The ItemView is the primary view for an iten. It displays the messages and actions in a timeline view.
+The ItemView is the primary view for an item. It displays the messages and actions in a timeline view.
 
 ```jsx
 import React, { useState } from "react";
 
 const demoItem = {"queue": "ce", "number": 100, "lastUpdated": "07-23-20 10:11 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 <campb303@purdue.edu>"}, {"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"}], "content": ["Testtest\n", "\n", "*** Status updated by: campb303 at: 6/23/2020 13:26:55 ***\n", "Dont Delete\n", "*** Edited by: campb303 at: 06/23/20 13:27:56 ***\n", "\n", "This be an edit my boy\n", "\n", "\n", "\n", "*** Replied by: campb303 at: 06/23/20 13:28:18 ***\n", "\n", "This be a reply my son\n", "\n", "Justin\n", "ECN\n", "\n", "=== Additional information supplied by user ===\n", "\n", "Subject: Re: Beepboop\n", "From: Justin Campbell <campb303@purdue.edu>\n", "Date: Tue, 23 Jun 2020 13:30:45 -0400\n", "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", "\n", "===============================================\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": "Tue, 23 Jun 2020 13:25:51 -0400"};
 
-
-const [activeItem, setActiveItem] = useState({});
-const [sidebarOpen, setSidebarOpen] = useState(false);
-
-
-<ItemView activeItem={demoItem} setActiveItem={setActiveItem} setSidebarOpen={setSidebarOpen}/>
+<ItemView activeItem={demoItem}/>
 ```
 
 ```jsx static
-<ItemView activeItem={activeItem} setActiveItem={setActiveItem} setSidebarOpen={setSidebarOpen}/>
+<ItemView activeItem={activeItem}/>
 ```
diff --git a/src/components/ItemViewAppBar/ItemViewAppBar.js b/src/components/ItemViewAppBar/ItemViewAppBar.js
@@ -1,10 +1,16 @@
-import React from "react";
+import React, { useEffect } from "react";
 import PropTypes from "prop-types";
 import {makeStyles, Tooltip, Typography, AppBar, Toolbar, IconButton, Zoom} from "@material-ui/core"
 import CloseItemViewIcon from '@material-ui/icons/ChevronRight';
 
 
-export default function ItemViewAppBar(props){
+export default function ItemViewAppBar({ title, theme, setSidebarOpen }){
+
+	useEffect(() => {
+		setSidebarOpen(true)
+		return () => setSidebarOpen(false)
+	});
+
 	const useStyles = makeStyles((theme) => ({
 		closeButton: {
 			marginRight: theme.spacing(3),
@@ -13,11 +19,12 @@ export default function ItemViewAppBar(props){
 			flexGrow: "1"
 		},
 		appBarRoot: {
-			width: "inherit"
+			width: "inherit",
+			position: "inherit"
 		}
 	}));
 
-	const classes = useStyles(props.theme);
+	const classes = useStyles(theme);
 
 	return(
 		<>
@@ -26,7 +33,7 @@ export default function ItemViewAppBar(props){
 				<Toolbar variant="dense">
                     <Tooltip title={"Close Item"} 
 						arrow 
-						onClick={() => props.setSidebarOpen(false)}
+						onClick={() => setSidebarOpen(false)}
 						TransitionComponent={Zoom}
 					>
 						<IconButton color="inherit" className={classes.closeButton}>
@@ -35,7 +42,7 @@ export default function ItemViewAppBar(props){
 					</Tooltip>
 
 					<Typography variant="h6" className={classes.title}>
-						{props.title}
+						{title}
 					</Typography>
 				</Toolbar>
 			</AppBar>

diff --git a/src/components/ItemViewAppBar/ItemViewAppBar.md b/src/components/ItemViewAppBar/ItemViewAppBar.md
@@ -13,5 +13,5 @@ const [sidebarOpen, setSidebarOpen] = useState(false);
 ```
 
 ```jsx static
-<ItemViewAppBar title={"ce 100"} setSidebarOpen={someFunc} theme={theme} />
+<ItemViewAppBar  title={"ce 100"} setSidebarOpen={someFunc} theme={theme} />
 ```