+
{tr("My queues")}
-
}
- >
+
}>
{tr("Create queue")}
-
{tr("My queues")}
+
+
}
spinning={isLoading}
@@ -38,6 +43,14 @@ const QueuesList = (): JSX.Element => {
data?.map((ele: Queue) => (
{ele.name}
+
+ }
+ type="primary"
+ size="large"
+ style={{ height: "100%", width: "4rem" }}
+ />
+
))
) : (
diff --git a/frontend/app/src/components/styles.css b/frontend/app/src/components/styles.css
index a6595d5..c7769db 100644
--- a/frontend/app/src/components/styles.css
+++ b/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;
+}
diff --git a/frontend/app/src/pages/AppRoutes.tsx b/frontend/app/src/pages/AppRoutes.tsx
index 950cc70..99e30e1 100644
--- a/frontend/app/src/pages/AppRoutes.tsx
+++ b/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 }) => {
} />
} />
+ } />
} />
} />
} />
diff --git a/frontend/app/src/slice/QueueApi.ts b/frontend/app/src/slice/QueueApi.ts
index b3d2813..d78809c 100644
--- a/frontend/app/src/slice/QueueApi.ts
+++ b/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;