Feature item routing

package.json

@@ -16,6 +16,7 @@
     "material-table": "^1.63.1",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
+    "react-router-dom": "^5.2.0",
     "react-scripts": "3.4.1"
   },
   "scripts": {

src/App.js

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import { ThemeProvider } from "@material-ui/core/styles";
 import webqueueTheme from "./theme";
 import { Box, makeStyles } from "@material-ui/core";
@@ -7,16 +7,28 @@ import ItemTable from "./components/ItemTable/";
 import ItemViewAppBar from "./components/ItemViewAppBar/";
 import ItemView from "./components/ItemView/";
 import clsx from "clsx";
+import { Route, useHistory } from "react-router-dom";
 
-const testItem = {"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 testItem = { "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" }
 
-function App(){
+function App() {
 	const [darkMode, setDarkMode] = useState(false);
 	const [activeItem, setActiveItem] = useState(testItem);
-	const [sidebarOpen, setSidebarOpen] = useState(true);
+	const [sidebarOpen, setSidebarOpen] = useState(false);
+
+	const history = useHistory({ forceRefresh: true })
 
 	const theme = webqueueTheme(darkMode);
 
+	const [data, setData] = useState([])
+
+	useEffect(() => {
+		fetch("/api/ce").then(res => res.json()).then(queue => {
+			setData(queue.items)
+			console.log(queue.items)
+		})
+	}, [])
+
 	const transitionWidth = theme.transitions.create(["width"], {
 		duration: theme.transitions.duration.enteringScreen,
 		easing: theme.transitions.easing.easeInOut
@@ -52,19 +64,55 @@ function App(){
 	const classes = useStyles();
 
 	return (
+
 		<ThemeProvider theme={theme}>
 			<Box display="flex">
+
 				<Box className={classes.leftCol}>
-					<ItemTableAppBar title="webqueue2" darkMode={darkMode} setDarkMode={setDarkMode} theme={theme}/>
-					<ItemTable setActiveItem={setActiveItem} setSidebarOpen={setSidebarOpen}/>
+					<ItemTableAppBar title="webqueue2" darkMode={darkMode} setDarkMode={setDarkMode} theme={theme} />
+					<ItemTable data={data} history={history} />
 				</Box>
+
 				<Box className={clsx(classes.rightCol, sidebarOpen && classes.rightColShift)}>
-					<ItemViewAppBar title={activeItem["queue"] + " " + activeItem["number"]} setSidebarOpen={setSidebarOpen} />
-					<ItemView activeItem={activeItem} setActiveItem={setActiveItem} setSidebarOpen={setSidebarOpen}/>
+					{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) {
+								setSidebarOpen(true);
+								return "Item doesn't exist :(";
+							}
+
+							setActiveItem(item);
+							setSidebarOpen(true);
+
+							return (
+								<>
+									<ItemViewAppBar title={activeItem["queue"] + " " + activeItem["number"]} setSidebarOpen={setSidebarOpen} theme={theme} />
+									<ItemView activeItem={activeItem} />
+								</>
+							);
+						}} 
+					/>}
 				</Box>
 			</Box>
 		</ThemeProvider>
 	);
 }
 
-export default App;
+export default App;
+
+/**
+ * 							setActiveItem(item);
+							setSidebarOpen(true);
+
+							return (
+								<>
+									<ItemViewAppBar title={activeItem["queue"] + " " + activeItem["number"]} setSidebarOpen={setSidebarOpen} />
+									<ItemView activeItem={activeItem} />
+								</>
+							);
+ */

src/components/ItemTable/ItemTable.js

@@ -1,8 +1,8 @@
-import React, { useState, useEffect } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types'
 import MaterialTable from "material-table";
 
-export default function ItemTable({ setActiveItem, setSidebarOpen }) {
+export default function ItemTable({ data, history }) {
 
 	const columns = [
 		{ title: 'Queue', field: 'queue', filterPlaceholder: "Ex: \"ME\"" },
@@ -18,14 +18,6 @@ export default function ItemTable({ setActiveItem, setSidebarOpen }) {
 		{ title: 'Date Received', field: 'dateReceived', filterPlaceholder: "Ex: \"07-20-20 03:32 AM\"" },
 	]
 
-	const [data, setData] = useState([])
-
-	useEffect(() => {
-		fetch("/api/ce").then(res => res.json()).then(queue => {
-			setData(queue.items)
-		})
-	}, [])
-
 	const options = {
 		"filtering": true,
 		"paging": false,
@@ -40,17 +32,18 @@ export default function ItemTable({ 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
+
 }

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>

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}/>
 ```

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>

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} />
 ```

src/index.js

@@ -4,6 +4,7 @@ import App from './App';
 import * as serviceWorker from './serviceWorker';
 import { createBrowserHistory } from 'history';
 import { CssBaseline } from '@material-ui/core';
+import { BrowserRouter as Router} from 'react-router-dom';
 
 export const history = createBrowserHistory({
   basename: process.env.PUBLIC_URL
@@ -12,7 +13,9 @@ export const history = createBrowserHistory({
 ReactDOM.render(
   <React.StrictMode>
     <CssBaseline />
-    <App />
+    <Router>
+      <App />
+    </Router>
   </React.StrictMode>,
   document.getElementById('root')
 );