Merge branch 'Feature-Load-Item-Headers-Only' of github.itap.purdue.e…

…du:ECN/webqueue2 into Feature-Load-Item-Headers-Only

src/components/AppView/AppView.js

@@ -9,9 +9,11 @@ import ItemViewAppBar from "../ItemViewAppBar/";
 import ItemView from "../ItemView/";
 import QueueSelector from "../QueueSelector/";
 import { useToken } from "../AuthProvider/";
+import { useItem, useItemSetter } from "../ItemProvider/";
 
 export default function AppView({ setDarkMode }){
-	const [activeItem, setActiveItem] = useState({});
+	const activeItem = useItem();
+	const setActiveItem = useItemSetter();
 	const [sidebarOpen, setSidebarOpen] = useState(false);
 	const [queues, setQueues] = useState([]);
 	const [items, setItems] = useState([]);

src/components/ItemProvider/ItemProvider.js

@@ -0,0 +1,29 @@
+import React, { useState, createContext, useContext, useEffect } from "react";
+
+const ItemContext = createContext();
+const ItemSetterContext = createContext();
+
+export const useItem = () => useContext(ItemContext);
+export const useItemSetter = () => useContext(ItemSetterContext);
+
+
+
+export default function ItemProvider({ children }) {
+	const [item, setItem] = useState( {} );
+
+	useEffect( _ => console.log("Current Item is: ", item));
+
+	const setItemWrapper = (newItem) => {
+		console.log("Old Item: ", item);
+		setItem(newItem);
+		console.log("Set new item.");
+	}
+
+	return (
+		<ItemContext.Provider value={item}>
+			<ItemSetterContext.Provider value={setItemWrapper}>
+				{children}
+			</ItemSetterContext.Provider>
+		</ItemContext.Provider>
+	);
+};

src/components/ItemProvider/ItemProvider.md

@@ -0,0 +1,41 @@
+Utility component that uses [React Contexts](https://reactjs.org/docs/context.html) [React Stateful Variables](https://reactjs.org/docs/hooks-state.html) to provide global access to the active item object. 
+
+Two functions are exported:
+
+Function | Descrioption
+- | -
+`useItem` | Returns a reference to the state variable holding the current Item. Defaults to `false`.
+`useItemSetter` | Returns a reference to the state variable update function.
+
+For an in depth explanation of this pattern, see [this GitHub comment](https://github.itap.purdue.edu/ECN/webqueue2/issues/15#issuecomment-341).
+
+
+## Usage
+```jsx static
+// App
+<ItemProvider>
+    <SomeComponent />
+</ItemProvider>
+```
+
+```jsx static
+// SomeComponent
+import { useEffect } from "react";
+import { useItem, useItemSetter } from "ItemProvider";
+
+const activeItem = useItem();
+const setActiveItem = useItemSetter();
+
+useEffect(
+    let item = someFuncToGetItem();
+    setActiveItem(item);
+);
+
+return(
+    {
+        item
+            ? <p>{`${activeItem.queue} ${activeItem.number} was last updated ${activeItem.lastUpdated}.`}</p>
+            : <p>No item is currently loaded.</p>
+    }
+);
+```

src/components/ItemProvider/index.js

@@ -0,0 +1 @@
+export {default, useItem, useItemSetter } from "./ItemProvider";

src/index.js

@@ -7,6 +7,8 @@ import { CssBaseline } from '@material-ui/core';
 import { BrowserRouter as Router } from 'react-router-dom';
 import { CookiesProvider } from "react-cookie";
 import AuthProvider from "./components/AuthProvider/";
+import ItemProvider from "./components/ItemProvider/";
+
 
 export const history = createBrowserHistory({
   basename: process.env.PUBLIC_URL
@@ -17,9 +19,11 @@ ReactDOM.render(
     <CssBaseline />
       <CookiesProvider>
         <AuthProvider>
-          <Router>
-            <App />
-          </Router>
+          <ItemProvider>
+            <Router>
+              <App />
+            </Router>
+          </ItemProvider>
         </AuthProvider>
       </CookiesProvider>
   </React.StrictMode>,