design & shits

frontend/app/src/components/AuthModal.tsx

@@ -1,5 +1,4 @@
 import { Form, Input, Menu, MenuProps, Modal, Spin } from "antd";
-import "./styles.css";
 import {
   KeyOutlined,
   LoadingOutlined,

frontend/app/src/components/HeaderComponent.tsx

@@ -11,13 +11,16 @@ import "./styles.css";
 import { StorePrototype, logOut, store } from "../config/store";
 import { useSelector } from "react-redux";
 import tr from "../config/translation";
-import { Link } from "react-router-dom";
+import { Link, useLocation, useNavigate } from "react-router-dom";
+import logo from "../../static/android-chrome-192x192.png";
 
 const { Header } = Layout;
 
 type NullableUser = { name: string | null; username: string } | null;
 
 const HeaderComponent = () => {
+  const navigate = useNavigate();
+
   const [authModalOpen, setAuthModalOpen] = useState(false);
   const [userMenuOpen, setUserMenuOpen] = useState(false);
 
@@ -41,6 +44,15 @@ const HeaderComponent = () => {
   ];
 
   const items: MenuProps["items"] = [
+    {
+      label: (
+        <div className="header-logo">
+          <img className="logo" src={logo} alt="logo" />
+        </div>
+      ),
+      key: "logo",
+      onClick: () => navigate("/"),
+    },
     {
       label: <Link to={user ? "/dashboard" : "#"}>{tr("Dashboard")}</Link>,
       key: "dashboard",
@@ -69,15 +81,14 @@ const HeaderComponent = () => {
   return (
     <>
       <AuthModal open={authModalOpen} setOpen={setAuthModalOpen} />
-      <Header>
-        <div className="demo-logo" />
+      <Header className="header">
         <Menu
           theme="dark"
           mode="horizontal"
           items={items}
           style={{ flex: 1, minWidth: 0 }}
           selectedKeys={[]}
-          className="menubar"
+          className="header-container"
         />
       </Header>
     </>

frontend/app/src/components/authProvider.ts

@@ -1,14 +0,0 @@
-import { useEffect } from "react";
-import { useGetUserQuery } from "../slice/AuthApi";
-import { store, updateUser } from "../config/store";
-
-const authProvider = () => {
-  const { data, isFetching, isError } = useGetUserQuery({});
-  useEffect(() => {
-    if (!isFetching && !isError) {
-      store.dispatch(updateUser(data));
-    }
-  }, [data, isFetching, useGetUserQuery]);
-};
-
-export default authProvider;

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

@@ -0,0 +1,50 @@
+import React from "react";
+import { useGetQueuesQuery } from "../../slice/QueueApi";
+import "../styles.css";
+import { Button, Spin } from "antd";
+import {
+  ArrowUpOutlined,
+  LoadingOutlined,
+  PlusCircleOutlined,
+} from "@ant-design/icons";
+import Title from "antd/es/typography/Title";
+import tr from "../../config/translation";
+
+type Queue = {
+  id: string;
+  name: string;
+};
+
+const QueuesList = (): JSX.Element => {
+  const { data, isLoading } = useGetQueuesQuery({});
+  console.log(isLoading);
+  return (
+    <div className="card">
+      <Button
+        type="primary"
+        style={{ width: "100%" }}
+        icon={<PlusCircleOutlined />}
+      >
+        {tr("Create queue")}
+      </Button>
+      <Title level={2}>{tr("My queues")}</Title>
+      <Spin
+        indicator={<LoadingOutlined style={{ fontSize: 36 }} spin />}
+        spinning={isLoading}
+      >
+        {data?.length ? (
+          data?.map((ele: Queue) => (
+            <div className="card secondary queue-in-list" key={ele.id}>
+              <Title level={4}>{ele.name}</Title>
+            </div>
+          ))
+        ) : (
+          <Title level={3}>
+            {tr("You have no queues! Create one here")} <ArrowUpOutlined />
+          </Title>
+        )}
+      </Spin>
+    </div>
+  );
+};
+export default QueuesList;

frontend/app/src/components/styles.css

@@ -1,9 +1,79 @@
-.menubar {
+/* .menubar {
     display: flex;
     justify-content: space-between;
     align-items: center;
-  }
+  } */
 
 .antd-modal-content {
   background-color: #001529;
 }
+
+.card {
+  background: #001529;
+  margin-top: 0.5rem;
+  margin-right: 1rem;
+  margin-left: 1rem;
+  border-radius: 10px;
+  padding: 1rem;
+}
+
+.secondary {
+  background: white;
+  padding: 0.5rem;
+}
+
+.queue-in-list {
+  display: flex;
+  flex-flow: row;
+  justify-content: space-between;
+  align-items: flex-start;
+  width: 100%;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+}
+
+@keyframes headerDrop {
+  0% {
+    transform: translateY(-50%);
+    opacity: 0%;
+  }
+  60% {
+    opacity: 50%;
+  }
+  100% {
+    transform: translateY(0);
+    opacity: 100%;
+  }
+}
+
+.header {
+  animation: 0.3s ease-out 0s 1 headerDrop;
+  margin-top: 0.5rem;
+  margin-right: 1rem;
+  margin-left: 1rem;
+  border-radius: 10px;
+}
+
+.header-container {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.header-logo {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.logo {
+  width: 36px;
+  height: auto;
+  transition-duration: 0.2s;
+}
+
+.logo:hover {
+  transform: rotate(0.05turn);
+  transition-duration: 0.2s;
+}

frontend/app/src/pages/AppRoutes.tsx

@@ -1,20 +1,33 @@
 import React, { ReactNode } from "react";
 import { BrowserRouter, Route, Routes } from "react-router-dom";
 import MainPage from "./MainPage";
-import { getLocalToken, loadLanguage, store } from "../config/store";
+import {
+  StorePrototype,
+  getLocalToken,
+  loadLanguage,
+  store,
+} from "../config/store";
 import DashboardPage from "./DashboardPage";
 import PropTypes from "prop-types";
+import { useSelector } from "react-redux";
+import NotFoundPage from "./NotFoundPage";
 
 const AppRoutes = ({ children }: { children: ReactNode }) => {
   store.dispatch(getLocalToken());
   store.dispatch(loadLanguage());
 
+  const user = useSelector((state: StorePrototype) => state.auth.user);
+
   return (
     <BrowserRouter>
       {children}
       <Routes>
         <Route path="/" element={<MainPage />} />
-        <Route path="/dashboard" element={<DashboardPage />} />
+        <Route
+          path="/dashboard"
+          element={user ? <DashboardPage /> : <NotFoundPage />}
+        />
+        <Route path="*" element={<NotFoundPage />} />
       </Routes>
     </BrowserRouter>
   );

frontend/app/src/pages/DashboardPage.tsx

@@ -1,22 +1,9 @@
 import React from "react";
 import "./styles.css";
-import logoSquare from "../../static/logo-square.png";
-import { Button } from "antd";
-import tr from "../config/translation";
+import QueuesList from "../components/queue/QueuesList";
 
 const DashboardPage = () => {
-  return (
-    <div className="card main">
-      <img src={logoSquare} alt="logo" className="image" />
-      <p style={{ fontSize: "2rem" }}>
-        {tr("Queuing has never been so simple")}
-      </p>
-      <div className="button-box">
-        <Button>{tr("Join a queue")}</Button>
-        <Button>{tr("Take a tour")}</Button>
-      </div>
-    </div>
-  );
+  return <QueuesList />;
 };
 
 export default DashboardPage;

frontend/app/src/pages/NotFoundPage.tsx

@@ -0,0 +1,17 @@
+import { QuestionCircleOutlined } from "@ant-design/icons";
+import React from "react";
+import tr from "../config/translation";
+import Title from "antd/es/typography/Title";
+
+const NotFoundPage = () => {
+  return (
+    <>
+      <div style={{ width: "100%", marginTop: "3rem" }}>
+        <QuestionCircleOutlined style={{ fontSize: "5rem" }} />
+      </div>
+      <Title>{tr("Not found")}</Title>
+    </>
+  );
+};
+
+export default NotFoundPage;

frontend/app/src/pages/styles.css

@@ -1,6 +1,8 @@
 .card {
     background: #001529;
-    margin: 10px;
+    margin-top: 0.5rem;
+    margin-right: 1rem;
+    margin-left: 1rem;
     border-radius: 10px;
   }
 

frontend/app/src/slice/QueueApi.ts

@@ -2,6 +2,11 @@ import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
 import { baseUrl } from "../config/baseUrl";
 import { RootState } from "../config/store";
 
+export type CreateQueueRequest = {
+  name: string;
+  description: string | null;
+};
+
 export const QueueApi = createApi({
   reducerPath: "QueueApi",
   baseQuery: fetchBaseQuery({
@@ -18,7 +23,14 @@ export const QueueApi = createApi({
     getQueues: builder.query({
       query: () => "/",
     }),
+    createQueue: builder.mutation({
+      query: (data: CreateQueueRequest) => ({
+        url: "/",
+        method: "POST",
+        body: data,
+      }),
+    }),
   }),
 });
 
-export const { useGetQueuesQuery } = QueueApi;
+export const { useGetQueuesQuery, useCreateQueueMutation } = QueueApi;