Update app entrypoint for auth routing

src/App.js

@@ -1,134 +1,26 @@
-import React, { useState, useEffect } from "react";
+import React, { useState } from "react";
 import { ThemeProvider } from "@material-ui/core/styles";
-import { Box, makeStyles, Paper } from "@material-ui/core";
-import { Route } from "react-router-dom";
-import clsx from "clsx";
 import webqueueTheme from "./theme";
-import ItemTableAppBar from "./components/ItemTableAppBar/";
-import ItemTable from "./components/ItemTable/";
-import ItemViewAppBar from "./components/ItemViewAppBar/";
-import ItemView from "./components/ItemView/";
-import QueueSelector from "./components/QueueSelector/";
+import { Switch, Route } from "react-router-dom";
+import PrivateRoute from "./components/PrivateRoute/";
+import AppView from "./components/AppView/";
+import LoginForm from "./components/LoginForm/";
 
 function App() {
 	const [darkMode, setDarkMode] = useState(false);
-	const [activeItem, setActiveItem] = useState({});
-	const [sidebarOpen, setSidebarOpen] = useState(false);
-	const [queues, setQueues] = useState([]);
-	const [items, setItems] = useState([]);
-	const [selectedQueues, setSelectedQueues] = useState([]);
-	const [queueCounts, setQueueCounts] = useState([]);
-
-	useEffect( _ => {
-		async function getQueues(){
-			if (selectedQueues.length > 0){
-				let queuesToLoad = "";
-
-				for (let selectedQueue of selectedQueues){
-					queuesToLoad += `+${selectedQueue.name}`;
-				}
-
-				const apiResponse = await fetch(`/api/${queuesToLoad}`);
-				const queueJson = await apiResponse.json();
-				setQueues(queueJson);
-			} else {
-				setQueues([])
-			}
-		}
-		getQueues();
-	}, [selectedQueues]);
-
-	useEffect( _ => {
-		let tempItems = [];
-		for (let queue of queues){
-			tempItems = tempItems.concat(queue.items);
-		}
-		setItems(tempItems);
-	}, [queues]);
-
-	useEffect( _ => {
-		async function getQueueCounts(){
-			const apiResponse = await fetch(`/api/get_queues`);
-			const queueCountJson = await apiResponse.json();
-			setQueueCounts(queueCountJson);
-		};
-		getQueueCounts();
-		return _ => setQueueCounts([]);
-	}, [selectedQueues]);
 
 	const theme = webqueueTheme(darkMode);
-	const transitionWidth = theme.transitions.create(["width"], {
-		duration: theme.transitions.duration.enteringScreen,
-		easing: theme.transitions.easing.easeInOut
-	});
-	const useStyles = makeStyles({
-		"leftCol": {
-			overflow: "auto",
-			width: "100vw",
-			height: "100vh",
-			transition: transitionWidth,
-		},
-		"rightCol": {
-			overflow: "auto",
-			width: "0",
-			height: "100vh",
-			transition: transitionWidth,
-			scrollbarWidth: 0,
-		},
-		"rightColShift": {
-			overflowY: "auto",
-			width: "100vw",
-			flexShrink: "0",
-			transition: transitionWidth
-		},
-		[theme.breakpoints.up("md")]: {
-			"rightColShift": {
-				width: "40vw",
-			}
-		},
-	});
-	const classes = useStyles();
-
-	return (
 
+	return (
 		<ThemeProvider theme={theme}>
-			<Box component={Paper} display="flex" square elevation={0}>
-
-				<Box className={classes.leftCol}>
-					<ItemTableAppBar title="webqueue2" setDarkMode={setDarkMode} />
-					<QueueSelector queues={queueCounts} selectedQueues={selectedQueues} setSelectedQueues={setSelectedQueues} />
-					<ItemTable data={items} onRowClick={ _ => console.log("Clicked!") }/>
-				</Box>
-
-				<Box className={clsx(classes.rightCol, sidebarOpen && classes.rightColShift)}>
-					{items.length === 0 ? null :
-						<Route
-							path="/:queue/:number"
-							render={({ match }) => {
-								const item = items.find((item) => {
-									return item.queue === match.params.queue && item.number === Number(match.params.number);
-								});
-
-								if (item === undefined) {
-									return (
-										<ItemViewAppBar title="Item Not Found" setSidebarOpen={setSidebarOpen} />
-									);
-								}
-
-								setActiveItem(item);
-
-								return (
-									<>
-										<ItemViewAppBar title={activeItem["queue"] + " " + activeItem["number"]} setSidebarOpen={setSidebarOpen} />
-										<ItemView activeItem={activeItem} />
-									</>
-								);
-							}
-							}
-						/>
-					}
-				</Box>
-			</Box>
+			<Switch>
+				<Route path="/login">
+					<LoginForm />
+				</Route>
+				<PrivateRoute path="/">
+					<AppView setDarkMode={setDarkMode} />
+				</PrivateRoute>
+			</Switch>
 		</ThemeProvider>
 	);
 }