finally, queue logic

frontend/app/src/components/news/CreateNewsCard.tsx

@@ -7,6 +7,7 @@ import { MessageContext } from "../../App";
 import { useNavigate } from "react-router-dom";
 import { PlusCircleOutlined } from "@ant-design/icons";
 import { CreateNewsRequest, useCreateNewsMutation } from "../../slice/NewsApi";
+import TextArea from "antd/es/input/TextArea";
 
 const CreateNewsCard = (): JSX.Element => {
   const messageApi = useContext(MessageContext);
@@ -55,7 +56,7 @@ const CreateNewsCard = (): JSX.Element => {
               },
             ]}
           >
-            <Input />
+            <TextArea />
           </Form.Item>
           <Button
             style={{ width: "100%" }}

frontend/app/src/components/news/NewsListCard.tsx

@@ -22,7 +22,13 @@ const NewsListCard = (): JSX.Element => {
               style={{ width: "100%", marginBottom: "1rem" }}
               bordered={false}
             >
-              <p style={{ textAlign: "left", color: "white" }}>
+              <p
+                style={{
+                  textAlign: "left",
+                  color: "#ffffff",
+                  whiteSpace: "break-spaces",
+                }}
+              >
                 {news.content}
               </p>
               <br />

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

@@ -22,7 +22,7 @@ const CreateQueueCard = (): JSX.Element => {
   const submit = (formData: CreateQueueRequest) => {
     createQueue(formData)
       .unwrap()
-      .then((data: Queue) => navigate(`/dashboard/queue/${data.id}`))
+      .then((data: Queue) => navigate(`/queue/${data.id}`))
       .then(() => messageApi.success(tr("Queue created")))
       .catch(() => messageApi.error(tr("Failed to create queue")));
   };

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

@@ -0,0 +1,50 @@
+import React, { useEffect } from "react";
+import {
+  useGetQueueDetailQuery,
+  useGetQueuesQuery,
+} from "../../slice/QueueApi";
+import "../styles.css";
+import { Button, Spin } from "antd";
+import {
+  ArrowUpOutlined,
+  FileTextOutlined,
+  LoadingOutlined,
+  PlusCircleOutlined,
+  UserOutlined,
+} from "@ant-design/icons";
+import Title from "antd/es/typography/Title";
+import tr from "../../config/translation";
+import { Link, useParams } from "react-router-dom";
+import { useSelector } from "react-redux";
+import { StorePrototype } from "../../config/store";
+
+const QueueCard = (): JSX.Element => {
+  const user = useSelector((state: StorePrototype) => state.auth.user);
+  const { queueId } = useParams();
+  const { data, isFetching } = useGetQueueDetailQuery(queueId);
+  return (
+    <div className="card">
+      <Spin
+        indicator={<LoadingOutlined style={{ fontSize: 36 }} spin />}
+        spinning={isFetching}
+      >
+        <div className="queue-info">
+          <Title level={3} style={{ textAlign: "left" }}>
+            {data?.name}
+          </Title>
+          <p>
+            <FileTextOutlined />
+            {"  "}
+            {data?.description}
+          </p>
+          <p>
+            <UserOutlined />
+            {"  "}
+            {data?.participants?.remaining} / {data?.participants?.total}
+          </p>
+        </div>
+      </Spin>
+    </div>
+  );
+};
+export default QueueCard;

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

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect } from "react";
 import { useGetQueuesQuery } from "../../slice/QueueApi";
 import "../styles.css";
 import { Button, Spin } from "antd";
@@ -6,10 +6,13 @@ import {
   ArrowUpOutlined,
   LoadingOutlined,
   PlusCircleOutlined,
+  RightOutlined,
 } from "@ant-design/icons";
 import Title from "antd/es/typography/Title";
 import tr from "../../config/translation";
 import { Link } from "react-router-dom";
+import { useSelector } from "react-redux";
+import { StorePrototype } from "../../config/store";
 
 type Queue = {
   id: string;
@@ -17,19 +20,21 @@ type Queue = {
 };
 
 const QueuesList = (): JSX.Element => {
-  const { data, isLoading } = useGetQueuesQuery({});
+  const user = useSelector((state: StorePrototype) => state.auth.user);
+  const { data, refetch, isLoading } = useGetQueuesQuery({});
+  useEffect(() => {
+    user && refetch();
+  }, [user]);
   return (
     <div className="card">
+      <Title level={2}>{tr("My queues")}</Title>
       <Link to="/dashboard/new">
-        <Button
-          type="primary"
-          style={{ width: "100%" }}
-          icon={<PlusCircleOutlined />}
-        >
+        <Button type="primary" icon={<PlusCircleOutlined />}>
           {tr("Create queue")}
         </Button>
       </Link>
-      <Title level={2}>{tr("My queues")}</Title>
+      <br />
+      <br />
       <Spin
         indicator={<LoadingOutlined style={{ fontSize: 36 }} spin />}
         spinning={isLoading}
@@ -38,6 +43,14 @@ const QueuesList = (): JSX.Element => {
           data?.map((ele: Queue) => (
             <div className="card secondary queue-in-list" key={ele.id}>
               <Title level={4}>{ele.name}</Title>
+              <Link to={`/queue/${ele.id}`}>
+                <Button
+                  icon={<RightOutlined />}
+                  type="primary"
+                  size="large"
+                  style={{ height: "100%", width: "4rem" }}
+                />
+              </Link>
             </div>
           ))
         ) : (

frontend/app/src/components/styles.css

@@ -41,9 +41,9 @@
   display: flex;
   flex-flow: row;
   justify-content: space-between;
-  align-items: flex-start;
   margin-top: 1rem;
   margin-bottom: 1rem;
+  border: 2px solid #00d8a4;
 }
 
 @keyframes headerDrop {
@@ -97,3 +97,7 @@
   display: flex;
   flex-flow: row;
 }
+
+.queue-info > * {
+  text-align: left;
+}

frontend/app/src/pages/AppRoutes.tsx

@@ -8,6 +8,7 @@ import NotFoundPage from "./NotFoundPage";
 import NewQueuePage from "./NewQueuePage";
 import NewsPage from "./NewsPage";
 import CreateNewsPage from "./CreateNewsPage";
+import QueueCard from "../components/queue/QueueCard";
 
 const AppRoutes = ({ children }: { children: ReactNode }) => {
   store.dispatch(getLocalToken());
@@ -19,6 +20,7 @@ const AppRoutes = ({ children }: { children: ReactNode }) => {
       <Routes>
         <Route path="/" element={<MainPage />} />
         <Route path="/dashboard" element={<DashboardPage />} />
+        <Route path="/queue/:queueId" element={<QueueCard />} />
         <Route path="/dashboard/new" element={<NewQueuePage />} />
         <Route path="/news" element={<NewsPage />} />
         <Route path="/news/new" element={<CreateNewsPage />} />

frontend/app/src/slice/QueueApi.ts

@@ -29,6 +29,9 @@ export const QueueApi = createApi({
     getQueues: builder.query({
       query: () => "/",
     }),
+    getQueueDetail: builder.query({
+      query: (queueId: string | undefined) => `/${queueId}`,
+    }),
     createQueue: builder.mutation({
       query: (data: CreateQueueRequest) => ({
         url: "/",
@@ -39,4 +42,8 @@ export const QueueApi = createApi({
   }),
 });
 
-export const { useGetQueuesQuery, useCreateQueueMutation } = QueueApi;
+export const {
+  useGetQueuesQuery,
+  useGetQueueDetailQuery,
+  useCreateQueueMutation,
+} = QueueApi;