diff --git a/src/components/AppView/AppView.js b/src/components/AppView/AppView.js index abcc5ed..3eed7ec 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/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 ( + + + {children} + + + ); +}; \ 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 + + + +``` + +```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 + ?

{`${activeItem.queue} ${activeItem.number} was last updated ${activeItem.lastUpdated}.`}

+ :

No item is currently loaded.

+ } +); +``` \ 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 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( - - - + + + + + ,