join queue

frontend/app/src/pages/AppRoutes.tsx

@@ -15,6 +15,8 @@ import NewQueuePage from "./NewQueuePage";
 import NewsPage from "./NewsPage";
 import CreateNewsPage from "./CreateNewsPage";
 import QueueCard from "../components/queue/QueueCard";
+import JoinQueuePage from "./JoinQueuePage";
+import ApproveQueueJoinPage from "./ApproveQueueJoinPage";
 
 const AppRoutes = ({ children }: { children: ReactNode }) => {
   store.dispatch(getLocalToken());
@@ -29,6 +31,8 @@ const AppRoutes = ({ children }: { children: ReactNode }) => {
         <Route path="/" element={<MainPage />} />
         <Route path="/dashboard" element={<DashboardPage />} />
         <Route path="/queue/:queueId" element={<QueueCard />} />
+        <Route path="/queue/join" element={<JoinQueuePage />} />
+        <Route path="/queue/join/:queueId" element={<ApproveQueueJoinPage />} />
         <Route path="/dashboard/new" element={<NewQueuePage />} />
         <Route path="/news" element={<NewsPage />} />
         <Route path="/news/new" element={<CreateNewsPage />} />

frontend/app/src/pages/ApproveQueueJoinPage.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import "./styles.css";
+import { useSelector } from "react-redux";
+import { StorePrototype } from "../config/store";
+import NotFoundPage from "./NotFoundPage";
+import ApproveQueueJoinCard from "../components/queue/ApproveQueueJoinCard";
+import { useParams } from "react-router-dom";
+
+const ApproveQueueJoinPage = () => {
+  const clientId = useSelector((state: StorePrototype) => state.auth.clientId);
+  const { queueId } = useParams();
+  return clientId && queueId ? (
+    <ApproveQueueJoinCard id={queueId} />
+  ) : (
+    <NotFoundPage />
+  );
+};
+
+export default ApproveQueueJoinPage;

frontend/app/src/pages/JoinQueuePage.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import "./styles.css";
+import { useSelector } from "react-redux";
+import { StorePrototype } from "../config/store";
+import NotFoundPage from "./NotFoundPage";
+import JoinQueueCard from "../components/queue/JoinQueueCard";
+
+const JoinQueuePage = () => {
+  const clientId = useSelector((state: StorePrototype) => state.auth.clientId);
+  return clientId ? <JoinQueueCard /> : <NotFoundPage />;
+};
+
+export default JoinQueuePage;

frontend/app/src/pages/MainPage.tsx

@@ -5,6 +5,7 @@ import { Alert, Button } from "antd";
 import tr from "../config/translation";
 import { isMobile } from "react-device-detect";
 import { WarningOutlined } from "@ant-design/icons";
+import { Link } from "react-router-dom";
 
 const MainPage = () => {
   return (
@@ -23,7 +24,9 @@ const MainPage = () => {
         style={{ marginBottom: "1rem" }}
       />
       <div className="button-box">
-        <Button size="large">{tr("Join a queue")}</Button>
+        <Link to="/queue/join">
+          <Button size="large">{tr("Join a queue")}</Button>
+        </Link>
         {!(
           isMobile && window.screen.orientation.type === "portrait-primary"
         ) && <div style={{ width: "3rem" }} />}