From bfb21fe52d3abdbc1311507a95b0f469a5e5de94 Mon Sep 17 00:00:00 2001
From: Maciej Gierada <maciek.gierada@gmail.com>
Date: Thu, 20 Jun 2024 16:31:22 +0200
Subject: [PATCH] feat: add two buttons

---
 ui/src/app/page.js                       | 14 +++++++++++---
 ui/src/components/ActionButton/index.jsx | 21 ++++++++++++++++-----
 ui/src/utils/helper.js                   |  4 ++--
 3 files changed, 29 insertions(+), 10 deletions(-)

diff --git a/ui/src/app/page.js b/ui/src/app/page.js
index ae4cb58..f20b39e 100644
--- a/ui/src/app/page.js
+++ b/ui/src/app/page.js
@@ -68,7 +68,7 @@ const fetchCounter = async (endpoint) => {
       resetedAt: null,
       wasEverReset: null,
       isLocked: false,
-      error: "Failed to fetch current value",
+      error: `Failed to fetch ${endpoint} data.`,
     };
   }
 };
@@ -115,10 +115,18 @@ const Home = async () => {
           Click dates to see the details.
         </p>
       </div>
-      <div className="flex flex-col items-center justify-center">
+      <div className="flex flex-row items-center justify-center gap-20">
+        <ActionButton
+          variant="destructive"
+          toast_message="Ohno event successfully recorded"
+          cta_button="OhNo!"
+          icon="biohazard"
+        />
         <ActionButton
+          variant="outline"
           toast_message="Ohno event successfully recorded"
-          cta_button="Ohno!"
+          cta_button="All good"
+          icon="activity"
         />
       </div>
     </main>
diff --git a/ui/src/components/ActionButton/index.jsx b/ui/src/components/ActionButton/index.jsx
index c9f6f22..6b67633 100644
--- a/ui/src/components/ActionButton/index.jsx
+++ b/ui/src/components/ActionButton/index.jsx
@@ -1,13 +1,16 @@
 "use client";
 import { toast } from "sonner";
+import { Biohazard, Activity } from "lucide-react";
 
 import { Button } from "@/components/ui/button";
-import formatCurrentDate from "@/utils/helper";
+import getAndFormatCurrentDate from "@/utils/helper";
 
 /**
  * @typedef {Object} ActionButtonProps
+ * @property {string} variant - a string that determines the variant of the button
  * @property {string} toast_message - the message to be displayed on on the toast popup
  * @property {string} cta_button - the call to action to be displayed on the button
+ * @property {string} icon - the icon to be displayed on the button
  */
 
 /**
@@ -15,15 +18,23 @@ import formatCurrentDate from "@/utils/helper";
  * @param {ActionButtonProps} actionButtonProps
  * @returns {JSX.Element}
  */
-export function ActionButton({ toast_message, cta_button }) {
+export function ActionButton({ variant, toast_message, cta_button, icon }) {
+  const renderIcon = (icon) => {
+    if (icon === "biohazard") {
+      return <Biohazard className="mr-2 h-4 w-4" />;
+    } else if (icon === "activity") {
+      return <Activity className="mr-2 h-4 w-4" />;
+    }
+    return null;
+  };
   return (
     <Button
-      variant="outline"
+      variant={variant}
       onClick={() =>
         toast(
           toast_message,
           {
-            description: formatCurrentDate(),
+            description: getAndFormatCurrentDate(),
             action: {
               label: "Ok",
               // onClick: () => console.log("Undo"),
@@ -33,7 +44,7 @@ export function ActionButton({ toast_message, cta_button }) {
         )
       }
     >
-      {cta_button}
+      {renderIcon(icon)} {cta_button}
     </Button>
   );
 }
diff --git a/ui/src/utils/helper.js b/ui/src/utils/helper.js
index ae343ce..1ef380b 100644
--- a/ui/src/utils/helper.js
+++ b/ui/src/utils/helper.js
@@ -3,7 +3,7 @@
  * @returns {string} formattedNow - The formatted date and time in the following format
  * Thursday, June 20 at 2024 at 2:41 PM
  */
-const formatCurrentDate = () => {
+const getAndFormatCurrentDate = () => {
   const options = {
     weekday: "long",
     year: "numeric",
@@ -17,4 +17,4 @@ const formatCurrentDate = () => {
   return now.toLocaleString("en-US", options).replace(/,([^,]*)$/, " at$1");
 };
 
-export default formatCurrentDate;
+export default getAndFormatCurrentDate;