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>
           ))}