diff --git a/src/components/AppView/AppView.js b/src/components/AppView/AppView.js
index 9ba85ef..75c7c60 100644
--- a/src/components/AppView/AppView.js
+++ b/src/components/AppView/AppView.js
@@ -98,10 +98,10 @@ export default function AppView({ setDarkMode }){
diff --git a/src/components/AuthProvider/AuthProvider.js b/src/components/AuthProvider/AuthProvider.js
index 6643208..ae0effe 100644
--- a/src/components/AuthProvider/AuthProvider.js
+++ b/src/components/AuthProvider/AuthProvider.js
@@ -21,7 +21,7 @@ export default function AuthProvider({ children }) {
const [loggedIn, setLoggedIn] = useState( false );
const [token, setToken] = useState( null );
- const [cookies] = useCookies();
+ const [cookies] = useCookies(["csrf_refresh_token"]);
async function tryRefresh(csrf_refresh_token){
if (csrf_refresh_token === undefined){
diff --git a/src/components/QueueSelector/QueueSelector.js b/src/components/QueueSelector/QueueSelector.js
index 4395d02..aa1a816 100644
--- a/src/components/QueueSelector/QueueSelector.js
+++ b/src/components/QueueSelector/QueueSelector.js
@@ -5,48 +5,100 @@ import { Autocomplete } from "@material-ui/lab";
import CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank';
import CheckBoxIcon from '@material-ui/icons/CheckBox';
import CircularProgress from '@material-ui/core/CircularProgress';
+import { useCookies } from "react-cookie";
import { useToken } from "../AuthProvider/";
-export default function QueueSelector({ queueSelectorOpen, setQueueSelectorOpen, selectedQueues, setSelectedQueues }) {
- const open = queueSelectorOpen;
- const setOpen = setQueueSelectorOpen;
+/**
+ * Get queue names and number of items.
+ * @param {String} access_token A valid API access token.
+ * @returns Array of objects containing queue names and item counts.
+ */
+const getQueueCounts = async (access_token) => {
+ if (access_token === null){
+ return undefined
+ }
+
+ let myHeaders = new Headers();
+ myHeaders.append("Authorization", `Bearer ${access_token}`);
+ let requestOptions = { headers: myHeaders };
+
+ const apiResponse = await fetch(`/api/get_queues`, requestOptions);
+ const queueCountJson = await apiResponse.json();
+
+ return queueCountJson;
+};
+
+export default function QueueSelector({ open, setOpen, value, setValue }) {
const [queueCounts, setQueueCounts] = useState([]);
+ const [isFirstRender, setIsFirstRender] = useState(true);
const access_token = useToken();
const loading = open && queueCounts.length === 0;
+ const [cookies, setCookie] = useCookies(["active-queues"]);
+ const activeQueues = cookies['active-queues'] !== undefined ? cookies['active-queues'].split(',') : [];
+
+ const theme = useTheme();
+
+ // Prepopulate Active Queues from Cookies
useEffect( _ => {
- const getQueueCounts = async _ => {
- if (access_token === null){
- return undefined
- }
-
- let myHeaders = new Headers();
- myHeaders.append("Authorization", `Bearer ${access_token}`);
- let requestOptions = { headers: myHeaders };
-
- const apiResponse = await fetch(`/api/get_queues`, requestOptions);
- const queueCountJson = await apiResponse.json();
- setQueueCounts(queueCountJson);
- };
+ if (access_token === null){
+ return undefined;
+ }
- if (loading) {
- getQueueCounts();
+ if (isFirstRender) {
+ ( async _ => {
+ // Get queue counts
+ let queueCountsJson = await getQueueCounts(access_token);
+
+ // Find queue count info for queue names in active queues
+ let activeQueuesInfo = activeQueues.map((queueName) => (
+ queueCountsJson.find( ({ name }) => queueName === name )
+ ));
+
+ // Filter undefined values
+ activeQueuesInfo = activeQueuesInfo.filter( (entry) => entry !== undefined);
+
+ setValue(activeQueuesInfo);
+ setIsFirstRender(false);
+ })();
}
+ }, []);
+ // Get queue counts if QueueSelector is open
+ useEffect( _ => {
+ (async _ => {
+ if (loading) {
+ let queueCountsJson = await getQueueCounts(access_token);
+ setQueueCounts(queueCountsJson);
+ }
+ })()
}, [loading, access_token]);
+ // Delete queue counts if QueueSelector is closed
useEffect(() => {
if (!open) {
setQueueCounts([]);
}
}, [open]);
- const theme = useTheme();
-
const handleChange = (event, newValue) => {
- setSelectedQueues(newValue)
+ setValue(newValue)
+
+ // Set active-queues cookie to csv of selected queue names
+ const activeQueueOptions = {
+ path: "/",
+ expires: (_ => {
+ let expiration_date = new Date();
+ expiration_date.setDate(expiration_date.getDate() + 365);
+ return expiration_date;
+ })()
+ };
+ const activeQueues = newValue.map( (value) => value.name).join(',');
+ setCookie("active-queues", activeQueues, activeQueueOptions);
};
+ // Function to render checkboxes in dropdown
+ // See `renderOptions` prop at https://material-ui.com/api/autocomplete/#props
const optionRenderer = (option, { selected }) => (
<>
(
)}
-
options={queueCounts}
- value={selectedQueues}
+ value={value}
onChange={handleChange}
getOptionLabel={(option) => `${option.name} (${option.number_of_items})`}
renderOption={optionRenderer}
@@ -114,11 +166,11 @@ export default function QueueSelector({ queueSelectorOpen, setQueueSelectorOpen,
QueueSelector.propTypes = {
/** State variable to manage open status. */
- "queueSelectorOpen": PropTypes.bool.isRequired,
+ "open": PropTypes.bool.isRequired,
/** Function to update state variable that manages open status. */
- "setQueueSelectorOpen": PropTypes.func.isRequired,
+ "setOpen": PropTypes.func.isRequired,
/** State variable to manage selected queues. */
- "selectedQueues": PropTypes.array.isRequired,
+ "value": PropTypes.array.isRequired,
/** Function to update state variable that manages selected queues. */
- "setSelectedQueues": PropTypes.func.isRequired,
+ "setValue": PropTypes.func.isRequired,
};
\ No newline at end of file