updated component calls to match new properties, renamed data hooks, …

…removed debugging lines, updated matching function, and removed useHistory
ECN · Oct 19, 2020 · c4a28a3 · c4a28a3
1 parent 2359520
commit c4a28a3
Showing 1 changed file with 21 additions and 24 deletions.
diff --git a/src/App.js b/src/App.js
@@ -1,13 +1,13 @@
 import React, { useState, useEffect } from "react";
+import { Route } from "react-router-dom";
+import clsx from "clsx";
 import { ThemeProvider } from "@material-ui/core/styles";
 import webqueueTheme from "./theme";
 import { Box, makeStyles } from "@material-ui/core";
 import ItemTableAppBar from "./components/ItemTableAppBar/";
 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" }
 
@@ -16,16 +16,13 @@ function App() {
 	const [activeItem, setActiveItem] = useState(testItem);
 	const [sidebarOpen, setSidebarOpen] = useState(false);
 
-	const history = useHistory({ forceRefresh: true })
-
 	const theme = webqueueTheme(darkMode);
 
-	const [data, setData] = useState([])
+	const [itemQueue, setItemQueue] = useState([])
 
 	useEffect(() => {
 		fetch("/api/ce").then(res => res.json()).then(queue => {
-			setData(queue.items)
-			console.log(queue.items)
+			setItemQueue(queue.items)
 		})
 	}, [])
 
@@ -69,17 +66,29 @@ function App() {
 			<Box display="flex">
 
 				<Box className={classes.leftCol}>
-					<ItemTableAppBar title="webqueue2" darkMode={darkMode} setDarkMode={setDarkMode} theme={theme} />
-					<ItemTable data={data} history={history} />
+					<ItemTableAppBar title="webqueue2" darkMode={darkMode} setDarkMode={setDarkMode} />
+					<ItemTable items={itemQueue} />
 				</Box>
 
 				<Box className={clsx(classes.rightCol, sidebarOpen && classes.rightColShift)}>
-					{data.length === 0 ? null : 
+					{itemQueue.length === 0 ? null : 
 					<Route 
 						path="/:queue/:number" 
 						render={({ match }) => {
 
-							let item = data.find(item => item.queue === match.params.queue && item.number === match.params.number);
+							/**
+							* Returns true if an item matches the URL parameters.
+							* @param item {Object} The item to compare.
+							* @param match {Object} The match parameters.
+							* @returns {boolean} 
+							*/
+							function itemMatchesURL(item, match){
+								let queueMatches = item.queue === match.params.queue;
+								let numberMatches = item.number === match.params.number;
+								return queueMatches && numberMatches;
+							}
+
+							let item = itemQueue.find( item =>  itemMatchesURL(item, match) );
 
 							if (item === undefined) {
 								setSidebarOpen(true);
@@ -91,7 +100,7 @@ function App() {
 
 							return (
 								<>
-									<ItemViewAppBar title={activeItem["queue"] + " " + activeItem["number"]} setSidebarOpen={setSidebarOpen} theme={theme} />
+									<ItemViewAppBar title={activeItem["queue"] + " " + activeItem["number"]} setSidebarOpen={setSidebarOpen} />
 									<ItemView activeItem={activeItem} />
 								</>
 							);
@@ -104,15 +113,3 @@ function App() {
 }
 
 export default App;
-
-/**
- * 							setActiveItem(item);
-							setSidebarOpen(true);
-
-							return (
-								<>
-									<ItemViewAppBar title={activeItem["queue"] + " " + activeItem["number"]} setSidebarOpen={setSidebarOpen} />
-									<ItemView activeItem={activeItem} />
-								</>
-							);
- */