From 19855ebc3da19c41c1e99d578c30dedff12e757d Mon Sep 17 00:00:00 2001
From: Kalle <38327916+Sendouc@users.noreply.github.com>
Date: Sun, 30 Jan 2022 11:50:52 +0200
Subject: [PATCH] Can undo likes

---
 app/routes/play/looking.tsx | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/app/routes/play/looking.tsx b/app/routes/play/looking.tsx
index a991140b2..d1a8a3af7 100644
--- a/app/routes/play/looking.tsx
+++ b/app/routes/play/looking.tsx
@@ -20,6 +20,7 @@ export const links: LinksFunction = () => {
   return [{ rel: "stylesheet", href: styles }];
 };
 
+type ActionSchema = z.infer<typeof actionSchema>;
 const actionSchema = z.object({
   _action: z.enum(["LIKE", "UNLIKE", "UNITE_GROUP", "MATCH_UP"]),
   targetGroupId: z.string().uuid(),
@@ -201,11 +202,17 @@ function GroupCard({
   type: "LIKES_GIVEN" | "NEUTRAL" | "LIKES_RECEIVED";
 }) {
   const buttonText = () => {
-    if (type === "LIKES_GIVEN") return "idk";
+    if (type === "LIKES_GIVEN") return "Undo";
     if (type === "NEUTRAL") return "Let's play!";
 
     return "Group up";
   };
+  const buttonValue = (): ActionSchema["_action"] => {
+    if (type === "LIKES_GIVEN") return "UNLIKE";
+    if (type === "NEUTRAL") return "LIKE";
+
+    return "MATCH_UP";
+  };
 
   return (
     <Form method="post">
@@ -224,7 +231,13 @@ function GroupCard({
         </div>
         <input type="hidden" name="targetGroupId" value={group.id} />
         {isGroupAdmin && (
-          <Button type="submit" name="_action" value="LIKE" tiny>
+          <Button
+            type="submit"
+            name="_action"
+            value={buttonValue()}
+            tiny
+            variant={type === "LIKES_GIVEN" ? "destructive" : undefined}
+          >
             {buttonText()}
           </Button>
         )}