diff --git a/pages/queue.js b/pages/queue.js index 7326253..5b9978e 100644 --- a/pages/queue.js +++ b/pages/queue.js @@ -4,10 +4,19 @@ import QueueSection from "../components/QueueSection"; import QueueTable from "../components/QueueTable"; import { host, queue_data_endpoint } from "../utils/constants"; import { useEffect, useState } from "react"; +import { library } from "../utils/constants"; const Queue = ({ data }) => { const router = useRouter(); - const [queueName, setQueueName] = useState("gb"); + // queueTypeFromQuery can be "gb" || "pdl" || "trove" + let queueTypeFromQuery = router.query["queue"] || ""; + // get valid library codes used in the application + let libraryKeys = Object.keys(library); + // check and assign if the queue is valid + const [isValidQueue, _] = useState(libraryKeys.includes(queueTypeFromQuery)); + const [queueName, setQueueName] = useState( + isValidQueue ? queueTypeFromQuery : "gb" + ); const [tableDataArchive, setTableDataArchive] = useState([]); const [searchResult, setSearchResult] = useState([]); const [isSearch, setIsSearch] = useState(false); @@ -15,8 +24,8 @@ const Queue = ({ data }) => { const [refreshSSPropsInterval, setSSPropsInterval] = useState(15000); const onChange = (event) => { setQueueName(event.target.value); - // refresh server side props on queue change - router.replace(router.asPath); + // update query parameter on queue change; also refreshes server side props + router.replace(router.pathname + ("?queue=" + event.target.value)); // This time interval has been chosed based on speed of upload // For GB Queue, refresh server side props every 15 seconds // For PDL, refresh server side props every 50 seconds @@ -81,7 +90,8 @@ const Queue = ({ data }) => { // Condition: only when queueName changes useEffect(() => { const intervalId = setInterval(() => { - router.replace(router.asPath); + // update query parameter on queue change + router.replace(router.pathname + ("?queue=" + queueName)); }, refreshSSPropsInterval); // clear the setInterval return () => clearInterval(intervalId); @@ -116,51 +126,64 @@ const Queue = ({ data }) => {
-

Select a Queue

- - + {isValidQueue || queueName !== "" ? ( + <> +

Select a Queue

+ + -
-
-
+
- onSearch(e)} - className="cdx-text-input__input" - type="search" - placeholder="Search by Job ID, Title, Username or Status" - style={{ - height: "48px", - width: "100%", - }} - /> - +
+
+ onSearch(e)} + className="cdx-text-input__input" + type="search" + placeholder="Search by Job ID, Title, Username or Status" + style={{ + height: "48px", + width: "100%", + }} + /> + +
+
+ + + ) : ( +
+

No such queue was found

+

+ Go back to the queues page +

-
- + )}