diff --git a/components/Answer.js b/components/Answer.jsx similarity index 100% rename from components/Answer.js rename to components/Answer.jsx diff --git a/components/Books.js b/components/Books.jsx similarity index 100% rename from components/Books.js rename to components/Books.jsx diff --git a/components/ChangeIdentifier.js b/components/ChangeIdentifier.jsx similarity index 100% rename from components/ChangeIdentifier.js rename to components/ChangeIdentifier.jsx diff --git a/components/FaqsSection.js b/components/FaqsSection.jsx similarity index 100% rename from components/FaqsSection.js rename to components/FaqsSection.jsx diff --git a/components/Footer.js b/components/Footer.jsx similarity index 100% rename from components/Footer.js rename to components/Footer.jsx diff --git a/components/Header.js b/components/Header.jsx similarity index 100% rename from components/Header.js rename to components/Header.jsx diff --git a/components/Question.js b/components/Question.jsx similarity index 100% rename from components/Question.js rename to components/Question.jsx diff --git a/components/QueueSection.js b/components/QueueSection.jsx similarity index 100% rename from components/QueueSection.js rename to components/QueueSection.jsx diff --git a/components/QueueTable.js b/components/QueueTable.jsx similarity index 98% rename from components/QueueTable.js rename to components/QueueTable.jsx index 6494f36..991753a 100644 --- a/components/QueueTable.js +++ b/components/QueueTable.jsx @@ -12,7 +12,7 @@ import { Backdrop, } from "@mui/material"; import { host } from "../utils/constants"; -import ShowJobInformation from "../components/ShowJobInformation"; +import ShowJobInformation from "./ShowJobInformation"; const ShowUploadQueue = (props) => { const styles = { diff --git a/components/ShowJobInformation.js b/components/ShowJobInformation.jsx similarity index 100% rename from components/ShowJobInformation.js rename to components/ShowJobInformation.jsx diff --git a/components/ShowQueue.js b/components/ShowQueue.jsx similarity index 100% rename from components/ShowQueue.js rename to components/ShowQueue.jsx diff --git a/components/UploadedItems.js b/components/UploadedItems.jsx similarity index 100% rename from components/UploadedItems.js rename to components/UploadedItems.jsx diff --git a/pages/faqs.jsx b/pages/faqs.jsx new file mode 100644 index 0000000..0a375f3 --- /dev/null +++ b/pages/faqs.jsx @@ -0,0 +1,33 @@ +import Header from "../components/Header"; +import FaqsSection from "../components/FaqsSection"; +import { faq_data } from "../utils/constants"; + +const Faqs = () => { + return ( +
+ +
+
+
+
+

Frequently Asked Questions

+
+ +
+
+
+
+
+ ); +}; + +export default Faqs; diff --git a/pages/index.jsx b/pages/index.jsx new file mode 100644 index 0000000..d736e90 --- /dev/null +++ b/pages/index.jsx @@ -0,0 +1,14 @@ +import Header from "../components/Header"; +import Books from "../components/Books"; +const init = () => ( +
+
+
+
+ +
+
+
+); + +export default init; diff --git a/pages/queue.jsx b/pages/queue.jsx new file mode 100644 index 0000000..9f2c359 --- /dev/null +++ b/pages/queue.jsx @@ -0,0 +1,115 @@ +import Header from "../components/Header"; +import QueueSection from "../components/QueueSection"; +import QueueTable from "../components/QueueTable"; +import { host, queue_data_endpoint } from "../utils/constants"; +import { useEffect, useState } from "react"; + +const Queue = ({ data }) => { + const [queueName, setQueueName] = useState("gb"); + const [tableDataArchive, setTableDataArchive] = useState([]); + const [searchResult, setSearchResult] = useState([]); + const [isSearch, setIsSearch] = useState(false); + const onChange = (event) => { + setQueueName(event.target.value); + }; + + /** + * The `onSearch` function filters the table data based on a search parameter(Book-title, username or status) and updates the + * searchResult state which then gets passed to the QueueTable Component. If the search parameter is empty, all the table data is set to the searchResult state and returned to the QueueTable Component without filtering. + * The unfiltered tableData is stored in the tableDataArchive state and is used to reset the search if the search parameter is empty. + */ + const onSearch = (e) => { + const searchParam = e.target.value.toLowerCase(); + + if (searchParam === "") { + setIsSearch(false); + setSearchResult(tableDataArchive); + return; + } + + setIsSearch(true); + const filteredData = tableDataArchive.filter((item) => { + return ( + item.title.toLowerCase().includes(searchParam) || + item.userName.toLowerCase().includes(searchParam) || + item.status.toLowerCase().includes(searchParam) || + item.id.toString().includes(searchParam) + ); + }); + setSearchResult(filteredData); + }; + + useEffect(() => { + if (queueName) + fetch(`${host}/allJobs?queue_name=${queueName}`) + .then((resp) => resp.json()) + .then((resp) => { + setTableDataArchive(resp); + setSearchResult(resp); + }); + }, [queueName]); + + return ( +
+
+
+
+

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%", + }} + /> + +
+
+
+
+ +
+
+
+ ); +}; + +export async function getServerSideProps() { + const resp = await fetch(queue_data_endpoint); + const data = await resp.json(); + return { props: { data } }; + // Pass data to the page via props +} + +export default Queue; diff --git a/pages/stats.jsx b/pages/stats.jsx new file mode 100644 index 0000000..fff7810 --- /dev/null +++ b/pages/stats.jsx @@ -0,0 +1,88 @@ +import Header from "../components/Header"; +import ShowQueue from "../components/ShowQueue"; +import fetch from "isomorphic-fetch"; +import UploadedItems from "../components/UploadedItems"; +import { stats_data_endpoint, library } from "../utils/constants"; +import { useState } from "react"; +import Link from "next/link"; + +const emptyObject = { + waiting: 0, + active: 0, + failed: 0, + completed: 0, + delayed: 0, +}; +const Stats = (props) => { + const [queueName, setQueueName] = useState("gb"); + const onChange = (event) => { + setQueueName(event.target.value); + }; + return ( +
+ +
+
+
+
+

Select a Queue

+ + + +
+
+
+
+ ); +}; + +export async function getServerSideProps() { + const resp = await fetch(stats_data_endpoint); + if (resp.status !== 200) { + return {}; + } + const data = await resp.json(); + return { props: { data } }; + // Pass data to the page via props +} + +export default Stats;