From 666135fde5880bb1c4278c25fba088f4f914aa2b Mon Sep 17 00:00:00 2001
From: Justin Campbell <campb303@purdue.edu>
Date: Mon, 22 Feb 2021 15:33:00 -0500
Subject: [PATCH 1/2] Create ItemProvider w/ Docs

---
 src/components/ItemProvider/ItemProvider.js | 29 +++++++++++++++
 src/components/ItemProvider/ItemProvider.md | 41 +++++++++++++++++++++
 src/components/ItemProvider/index.js        |  1 +
 3 files changed, 71 insertions(+)
 create mode 100644 src/components/ItemProvider/ItemProvider.js
 create mode 100644 src/components/ItemProvider/ItemProvider.md
 create mode 100644 src/components/ItemProvider/index.js

diff --git a/src/components/ItemProvider/ItemProvider.js b/src/components/ItemProvider/ItemProvider.js
new file mode 100644
index 0000000..3434aa0
--- /dev/null
+++ b/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>
+	);
+};
\ No newline at end of file
diff --git a/src/components/ItemProvider/ItemProvider.md b/src/components/ItemProvider/ItemProvider.md
new file mode 100644
index 0000000..4653d82
--- /dev/null
+++ b/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>
+    }
+);
+```
\ No newline at end of file
diff --git a/src/components/ItemProvider/index.js b/src/components/ItemProvider/index.js
new file mode 100644
index 0000000..3186bd3
--- /dev/null
+++ b/src/components/ItemProvider/index.js
@@ -0,0 +1 @@
+export {default, useItem, useItemSetter } from "./ItemProvider";
\ No newline at end of file

From 27f9fba335e0c754d89c07d8c845e4a1776b9147 Mon Sep 17 00:00:00 2001
From: Justin Campbell <campb303@purdue.edu>
Date: Mon, 22 Feb 2021 15:33:20 -0500
Subject: [PATCH 2/2] Replace activeItem state variable with context provider
 values

---
 src/components/AppView/AppView.js |  4 +++-
 src/index.js                      | 10 +++++++---
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/components/AppView/AppView.js b/src/components/AppView/AppView.js
index 75c7c60..1f5c459 100644
--- a/src/components/AppView/AppView.js
+++ b/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([]);
diff --git a/src/index.js b/src/index.js
index 799ad12..86dc439 100644
--- a/src/index.js
+++ b/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>,