Move previous App component to AppView

src/components/AppView/AppView.js

@@ -0,0 +1,133 @@
+import React, { useState, useEffect } from "react";
+import PropTypes from "prop-types";
+import { Box, makeStyles, Paper, useTheme } from "@material-ui/core";
+import { Route } from "react-router-dom";
+import clsx from "clsx";
+import ItemTableAppBar from "../ItemTableAppBar/";
+import ItemTable from "../ItemTable/";
+import ItemViewAppBar from "../ItemViewAppBar/";
+import ItemView from "../ItemView/";
+import QueueSelector from "../QueueSelector/";
+
+export default function AppView({ setDarkMode }){
+	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 = useTheme();
+	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(
+		<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>
+	);
+};
+
+AppView.propTypes = {};
+
+AppView.defaultProps = {};

src/components/AppView/AppView.md

@@ -0,0 +1,10 @@
+The primary view for webqueue2.
+
+---
+```jsx
+import AppView from "./AppView";
+<AppView />
+```
+```jsx static
+<AppView />
+```

src/components/AppView/index.js

@@ -0,0 +1 @@
+export { default } from "./AppView";