queue creation logic

frontend/app/src/App.css

@@ -1,9 +1,14 @@
+::selection {
+  background: #00d8a4;
+  color: white;
+}
+
 body {
   margin: 0;
   color: #fff;
   font-family: "Comfortaa", sans-serif;
   background-image: linear-gradient(to bottom, #020917, #101725);
-  background-color: #001529
+  background-color: #001529;
 }
 
 .content {

frontend/app/src/components/HeaderComponent.tsx

@@ -26,6 +26,13 @@ const HeaderComponent = () => {
 
   const [authModalOpen, setAuthModalOpen] = useState(false);
   const [drawerOpen, setDrawerOpen] = useState(false);
+  // const [screenOrientation, setScreenOrientation] = useState<OrientationType>(
+  //   window.screen.orientation.type
+  // );
+
+  // window.addEventListener("orientationchange", () =>
+  //   setScreenOrientation(window.screen.orientation.type)
+  // );
 
   const currentLanguage = useSelector(
     (state: StorePrototype) => state.settings.language
@@ -156,7 +163,11 @@ const HeaderComponent = () => {
         <Menu
           theme="dark"
           mode="horizontal"
-          items={isMobile ? mobileItems : items}
+          items={
+            isMobile && window.screen.orientation.type === "portrait-primary"
+              ? mobileItems
+              : items
+          }
           style={{ flex: 1, minWidth: 0 }}
           selectedKeys={selectedKeys}
           className="header-container"

frontend/app/src/components/queue/CreateQueueCard.tsx

@@ -0,0 +1,72 @@
+import React, { useContext } from "react";
+import {
+  CreateQueueRequest,
+  Queue,
+  useCreateQueueMutation,
+  useGetQueuesQuery,
+} from "../../slice/QueueApi";
+import "../styles.css";
+import { Button, Form, Input, Spin } from "antd";
+import Title from "antd/es/typography/Title";
+import tr from "../../config/translation";
+import { MessageContext } from "../../App";
+import { useNavigate } from "react-router-dom";
+import { PlusCircleOutlined } from "@ant-design/icons";
+
+const CreateQueueCard = (): JSX.Element => {
+  const messageApi = useContext(MessageContext);
+  const navigate = useNavigate();
+
+  const [form] = Form.useForm();
+  const [createQueue, { isLoading }] = useCreateQueueMutation();
+
+  const submit = (formData: CreateQueueRequest) => {
+    createQueue(formData)
+      .unwrap()
+      .then((data: Queue) => navigate(`/dashboard/queue/${data.id}`))
+      .then(() => messageApi.success(tr("Queue created")))
+      .catch(() => messageApi.error(tr("Failed to create queue")));
+  };
+
+  return (
+    <div className="card">
+      <Spin spinning={isLoading}>
+        <Title level={2}>{tr("New queue")}</Title>
+        <Form
+          form={form}
+          layout="vertical"
+          requiredMark={false}
+          onFinish={(formData: CreateQueueRequest) => submit(formData)}
+        >
+          <Form.Item
+            name={"name"}
+            label={tr("Name")}
+            rules={[
+              {
+                required: true,
+                message: tr("Please input queue name!"),
+              },
+            ]}
+          >
+            <Input />
+          </Form.Item>
+          <Form.Item
+            name={"description"}
+            label={tr("Description") + " " + tr("(optional)")}
+          >
+            <Input />
+          </Form.Item>
+          <Button
+            style={{ width: "100%" }}
+            icon={<PlusCircleOutlined />}
+            type="primary"
+            onClick={() => form.submit()}
+          >
+            {tr("Create")}
+          </Button>
+        </Form>
+      </Spin>
+    </div>
+  );
+};
+export default CreateQueueCard;

frontend/app/src/components/queue/QueuesList.tsx

@@ -9,6 +9,7 @@ import {
 } from "@ant-design/icons";
 import Title from "antd/es/typography/Title";
 import tr from "../../config/translation";
+import { Link } from "react-router-dom";
 
 type Queue = {
   id: string;
@@ -19,13 +20,15 @@ const QueuesList = (): JSX.Element => {
   const { data, isLoading } = useGetQueuesQuery({});
   return (
     <div className="card">
-      <Button
+      <Link to="/dashboard/new">
-        type="primary"
+        <Button
-        style={{ width: "100%" }}
+          type="primary"
-        icon={<PlusCircleOutlined />}
+          style={{ width: "100%" }}
-      >
+          icon={<PlusCircleOutlined />}
-        {tr("Create queue")}
+        >
-      </Button>
+          {tr("Create queue")}
+        </Button>
+      </Link>
       <Title level={2}>{tr("My queues")}</Title>
       <Spin
         indicator={<LoadingOutlined style={{ fontSize: 36 }} spin />}

frontend/app/src/components/styles.css

@@ -42,7 +42,6 @@
   flex-flow: row;
   justify-content: space-between;
   align-items: flex-start;
-  width: 100%;
   margin-top: 1rem;
   margin-bottom: 1rem;
 }

frontend/app/src/config/style.ts

@@ -11,4 +11,9 @@ export const theme: ThemeConfig = {
     borderRadius: 5,
     fontFamily: "Comfortaa",
   },
+  components: {
+    Input: {
+      activeBorderColor: "#001529",
+    },
+  },
 };

frontend/app/src/pages/AppRoutes.tsx

@@ -11,6 +11,8 @@ import DashboardPage from "./DashboardPage";
 import PropTypes from "prop-types";
 import { useSelector } from "react-redux";
 import NotFoundPage from "./NotFoundPage";
+import CreateQueueCard from "../components/queue/CreateQueueCard";
+import NewQueuePage from "./NewQueuePage";
 
 const AppRoutes = ({ children }: { children: ReactNode }) => {
   store.dispatch(getLocalToken());
@@ -22,6 +24,7 @@ const AppRoutes = ({ children }: { children: ReactNode }) => {
       <Routes>
         <Route path="/" element={<MainPage />} />
         <Route path="/dashboard" element={<DashboardPage />} />
+        <Route path="/dashboard/new" element={<NewQueuePage />} />
         <Route path="*" element={<NotFoundPage />} />
       </Routes>
     </BrowserRouter>

frontend/app/src/pages/MainPage.tsx

@@ -3,6 +3,7 @@ import "./styles.css";
 import logo from "../../static/logo-full.png";
 import { Button } from "antd";
 import tr from "../config/translation";
+import { isMobile } from "react-device-detect";
 
 const MainPage = () => {
   return (
@@ -13,7 +14,9 @@ const MainPage = () => {
       </p>
       <div className="button-box">
         <Button size="large">{tr("Join a queue")}</Button>
-        <div style={{ width: "3rem" }} />
+        {!(
+          isMobile && window.screen.orientation.type === "portrait-primary"
+        ) && <div style={{ width: "3rem" }} />}
         <Button size="large">{tr("Take a tour")}</Button>
       </div>
     </div>

frontend/app/src/pages/NewQueuePage.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import "./styles.css";
+import { useSelector } from "react-redux";
+import { StorePrototype } from "../config/store";
+import tr from "../config/translation";
+import Title from "antd/es/typography/Title";
+import CreateQueueCard from "../components/queue/CreateQueueCard";
+
+const NewQueuePage = () => {
+  const user = useSelector((state: StorePrototype) => state.auth.user);
+  return user ? (
+    <CreateQueueCard />
+  ) : (
+    <Title level={2}>{tr("Log in first")}</Title>
+  );
+};
+
+export default NewQueuePage;

frontend/app/src/pages/styles.css

@@ -1,46 +1,45 @@
-
 @keyframes cardPopup {
-    0% {
+  0% {
-      transform: translateY(20%);
+    transform: translateY(20%);
-      opacity: 0%;
+    opacity: 0%;
-    }
-    50% {
-      transform: translateY(3%);
-    }
-    100% {
-      transform: translateY(0);
-      opacity: 100%;
-    }
   }
+  50% {
+    transform: translateY(3%);
+  }
+  100% {
+    transform: translateY(0);
+    opacity: 100%;
+  }
+}
 
 .card {
-    animation: 0.5s ease-out 0s 1 cardPopup;
+  animation: 0.5s ease-out 0s 1 cardPopup;
-    background: #001529;
+  background: #001529;
-    margin-top: 0.5rem;
+  margin-top: 0.5rem;
-    margin-right: 1rem;
+  margin-right: 1rem;
-    margin-left: 1rem;
+  margin-left: 1rem;
-    border-radius: 10px;
+  border-radius: 10px;
-  }
+}
 
 .main {
-    font-family: "Comfortaa", sans-serif;
+  user-select: none;
-    padding: 3rem;
+  padding: 3rem;
-    display: flex;
+  display: flex;
-    flex-flow: column;
+  flex-flow: column;
-    justify-items: center;
+  justify-items: center;
-    align-items: center;
+  align-items: center;
-    align-content: space-between;
+  align-content: space-between;
 }
 
 .image {
-    height: 100px;
+  height: 100px;
-    width: auto;
+  width: auto;
 }
 
 .button-box {
-    width: 100%;
+  width: 100%;
-    display: flex;
+  display: flex;
-    justify-content: center;
+  justify-content: center;
-    align-items: center;
+  align-items: center;
-    flex-wrap: wrap;
+  flex-wrap: wrap;
 }

frontend/app/src/slice/QueueApi.ts

@@ -7,6 +7,12 @@ export type CreateQueueRequest = {
   description: string | null;
 };
 
+export type Queue = {
+  id: string;
+  name: string;
+  description: string | null;
+};
+
 export const QueueApi = createApi({
   reducerPath: "QueueApi",
   baseQuery: fetchBaseQuery({