Implement async item loading in ItemView

ECN · Mar 12, 2021 · d0e5649 · d0e5649
1 parent 6e7acf1
commit d0e5649
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 28 deletions.
diff --git 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(
 		<Box component={Paper} display="flex" square elevation={0}>
-
 			<Box className={classes.leftCol}>
 				<ItemTableAppBar title="webqueue2" setDarkMode={setDarkMode} />
 				<QueueSelector 
@@ -122,32 +117,22 @@ export default function AppView({ setDarkMode }){
 				/>
 				<ItemTable data={items} rowCanBeSelected={sidebarOpen} loading={isLoading}/>
 			</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} />
-								</>
-							);
-						}
-						}
+						render={({ match }) => (
+							<>
+								<ItemViewAppBar 
+									title={`${match.params.queue} ${match.params.number}`} 
+									setSidebarOpen={setSidebarOpen}
+								/>
+								<ItemView 
+									queue={match.params.queue} 
+									number={match.params.number} 
+								/>
+							</>
+						)}
 					/>
 				}
 			</Box>

diff --git a/src/components/ItemView/ItemView.js b/src/components/ItemView/ItemView.js
@@ -8,15 +8,48 @@ 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);
 
 	// 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
 };