diff --git a/src/components/AppView/AppView.js b/src/components/AppView/AppView.js index 8536140..abb7e67 100644 --- a/src/components/AppView/AppView.js +++ b/src/components/AppView/AppView.js @@ -9,7 +9,6 @@ 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 }){ // Create stateful variables. @@ -20,9 +19,6 @@ export default function AppView({ setDarkMode }){ const [queueSelectorOpen, setQueueSelectorOpen] = useState(false); const [isLoading, setIsLoading] = useState(false); - // Create contextual variables. - const activeItem = useItem(); - const setActiveItem = useItemSetter(); const access_token = useToken(); // Get Queues from API. @@ -111,7 +107,6 @@ export default function AppView({ setDarkMode }){ return( - - {items.length === 0 ? null : { - const item = items.find((item) => { - return item.queue === match.params.queue && item.number === Number(match.params.number); - }); - - if (item === undefined) { - return ( - - ); - } - - setActiveItem(item); - - return ( - <> - - - - ); - } - } + render={({ match }) => ( + <> + + + + )} /> } diff --git a/src/components/ItemView/ItemView.js b/src/components/ItemView/ItemView.js index f511fbf..e2650bb 100644 --- a/src/components/ItemView/ItemView.js +++ b/src/components/ItemView/ItemView.js @@ -8,8 +8,9 @@ import ItemMetadataView from "../ItemMetadataView" import ItemBodyView from "../ItemBodyView"; import ItemHeaderView from "../ItemHeaderView"; import { useItem, useItemSetter } from "../ItemProvider"; +import { useToken } from "../AuthProvider/"; -export default function ItemView(){ +export default function ItemView({ queue, number }){ // Set stateful variables const [activeTab, setActiveTab] = useState('Conversation'); const [isLoading, setIsLoading] = useState(false); @@ -17,6 +18,38 @@ export default function ItemView(){ // Set contextual variables const activeItem = useItem(); const setActiveItem = useItemSetter(); + const access_token = useToken(); + + // Get full Item from API + useEffect( _ => { + (async _ => { + if (access_token === null){ + return undefined; + } + + if (activeItem.queue === queue && activeItem.number == number){ + return undefined; + } + + setIsLoading(true); + + let myHeaders = new Headers(); + myHeaders.append("Authorization", `Bearer ${access_token}`); + let requestOptions = { headers: myHeaders }; + + const apiResponse = await fetch(`/api/${queue}/${number}`, requestOptions); + + if (!apiResponse.ok){ + console.error(`Fetching item ${queue}${number}. Got code ${apiResponse.status} (${apiResponse.statusText})`); + return undefined; + } + + const itemJson = await apiResponse.json(); + + setActiveItem(itemJson); + setIsLoading(false) + })(); + }, [access_token, activeItem, setActiveItem, queue, number]); const theme = useTheme(); const useStyles = makeStyles({ @@ -60,4 +93,8 @@ export default function ItemView(){ }; ItemView.propTypes = { + /** The queue of the item to load. */ + "queue": PropTypes.string.isRequired, + /** The number of the item to load. */ + "number": PropTypes.number.isRequired }; \ No newline at end of file