From 1e06378320adbc0f41d8e5b2649434cb2de63749 Mon Sep 17 00:00:00 2001
From: Justin Campbell <campb303@w2vm4.ecn.purdue.edu>
Date: Fri, 27 Nov 2020 17:55:56 -0500
Subject: [PATCH] Add clarifying comments

---
 src/components/QueueSelector/QueueSelector.js | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/components/QueueSelector/QueueSelector.js b/src/components/QueueSelector/QueueSelector.js
index 4395d02..b836b2c 100644
--- a/src/components/QueueSelector/QueueSelector.js
+++ b/src/components/QueueSelector/QueueSelector.js
@@ -14,6 +14,7 @@ export default function QueueSelector({ queueSelectorOpen, setQueueSelectorOpen,
     const access_token = useToken();
     const loading = open && queueCounts.length === 0;
 
+    // Get queue counts if QueueSelector is open
     useEffect( _ => {
         const getQueueCounts = async  _ => {
 			if (access_token === null){
@@ -35,6 +36,7 @@ export default function QueueSelector({ queueSelectorOpen, setQueueSelectorOpen,
 
     }, [loading, access_token]);
 
+    // Delete queue counts if QueueSelector is closed
     useEffect(() => {
         if (!open) {
             setQueueCounts([]);
@@ -47,6 +49,8 @@ export default function QueueSelector({ queueSelectorOpen, setQueueSelectorOpen,
         setSelectedQueues(newValue)
     };
 
+    // Function to render checkboxes in dropdown
+    // See `renderOptions` prop at https://material-ui.com/api/autocomplete/#props
     const optionRenderer = (option, { selected }) => (
         <>
             <Checkbox
@@ -60,6 +64,7 @@ export default function QueueSelector({ queueSelectorOpen, setQueueSelectorOpen,
     );
 
     return(
+        // Box is used for margin because Autocomplete CSS overrides don't work as expected.
         <Box margin={`${theme.spacing(1)}px`}>
             <Autocomplete
                 renderInput={(params) => (