completely useless tap logic

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

@@ -1,8 +1,8 @@
 import React from "react";
 import "../styles.css";
-import { Card, Spin } from "antd";
-import { News, useGetNewsQuery } from "../../slice/NewsApi";
-import { ClockCircleOutlined } from "@ant-design/icons";
+import { Button, Card, Spin } from "antd";
+import { News, useGetNewsQuery, useTapNewsMutation } from "../../slice/NewsApi";
+import { ClockCircleOutlined, FireOutlined } from "@ant-design/icons";
 
 const formatTime = (s: string) => {
   const d = new Date(s + "Z");
@@ -10,7 +10,8 @@ const formatTime = (s: string) => {
 };
 
 const NewsListCard = (): JSX.Element => {
-  const { data, isLoading } = useGetNewsQuery({});
+  const { data, refetch, isLoading } = useGetNewsQuery({});
+  const [tapNews] = useTapNewsMutation();
   return (
     <div className="card">
       <Spin spinning={isLoading}>
@@ -25,17 +26,48 @@ const NewsListCard = (): JSX.Element => {
               <p
                 style={{
                   textAlign: "left",
-                  color: "#ffffff",
                   whiteSpace: "break-spaces",
                 }}
               >
                 {news.content}
               </p>
               <br />
-              <div className="news-footer">
-                <ClockCircleOutlined />
-                <br />
-                <p style={{ marginLeft: "1rem" }}>{formatTime(news.created)}</p>
+              <div
+                className="news-footer"
+                style={{
+                  width: "100%",
+                  display: "flex",
+                  justifyContent: "space-between",
+                }}
+              >
+                <div
+                  style={{
+                    display: "flex",
+                    flexDirection: "row",
+                  }}
+                >
+                  <ClockCircleOutlined />
+                  <br />
+                  <p style={{ marginLeft: "1rem" }}>
+                    {formatTime(news.created)}
+                  </p>
+                </div>
+                <div
+                  style={{
+                    height: "100% !important",
+                    display: "flex",
+                    flexFlow: "column",
+                    justifyContent: "center",
+                  }}
+                >
+                  <Button
+                    icon={<FireOutlined />}
+                    onClick={() => {
+                      tapNews(news.id);
+                      refetch();
+                    }}
+                  >{` ${news.taps}`}</Button>
+                </div>
               </div>
             </Card>
           ))}

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

@@ -1,15 +1,11 @@
-import React, { useEffect } from "react";
-import {
-  useGetQueueDetailQuery,
-  useGetQueuesQuery,
-} from "../../slice/QueueApi";
+import React from "react";
+import { useGetQueueDetailQuery } 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";

frontend/app/src/slice/NewsApi.ts

@@ -12,6 +12,7 @@ export type News = {
   title: string;
   content: string;
   created: string;
+  taps: number;
 };
 
 export const NewsApi = createApi({
@@ -30,6 +31,12 @@ export const NewsApi = createApi({
     getNews: builder.query({
       query: () => "/",
     }),
+    tapNews: builder.mutation({
+      query: (newsId: string) => ({
+        url: `/${newsId}/tap`,
+        method: "POST",
+      }),
+    }),
     createNews: builder.mutation({
       query: (data: CreateNewsRequest) => ({
         url: "/",
@@ -40,4 +47,5 @@ export const NewsApi = createApi({
   }),
 });
 
-export const { useGetNewsQuery, useCreateNewsMutation } = NewsApi;
+export const { useGetNewsQuery, useTapNewsMutation, useCreateNewsMutation } =
+  NewsApi;