From 84fbcbf24f1d8aa94071c9f38137f9b04e2548e8 Mon Sep 17 00:00:00 2001
From: Kalle <38327916+Sendouc@users.noreply.github.com>
Date: Tue, 1 Feb 2022 17:48:01 +0200
Subject: [PATCH] Fix ranked/unranked appearing in looking

---
 app/components/play/GroupCard.tsx |  1 +
 app/models/LFGGroup.server.ts     |  5 ++---
 app/routes/play/looking.tsx       | 15 ++++++++++-----
 app/styles/play-looking.css       |  6 +++++-
 4 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/app/components/play/GroupCard.tsx b/app/components/play/GroupCard.tsx
index 876ef3cca..08790d925 100644
--- a/app/components/play/GroupCard.tsx
+++ b/app/components/play/GroupCard.tsx
@@ -63,6 +63,7 @@ export function GroupCard({
         )}
         {isCaptain && (
           <Button
+            className="play-looking__card__button"
             type="submit"
             name="_action"
             value={buttonValue()}
diff --git a/app/models/LFGGroup.server.ts b/app/models/LFGGroup.server.ts
index 4c45ba44d..2a21216b1 100644
--- a/app/models/LFGGroup.server.ts
+++ b/app/models/LFGGroup.server.ts
@@ -130,13 +130,12 @@ export function findActiveByMember(user: { id: string }) {
   });
 }
 
-export function findLookingByType(type: LfgGroupType, ranked: boolean | null) {
+export function findLookingByType(type: LfgGroupType, ranked?: boolean) {
   return db.lfgGroup.findMany({
     where: {
       type,
       looking: true,
-      // For ranked groups we show both ranked and unranked options
-      ranked: ranked === false ? false : undefined,
+      ranked,
     },
     select: {
       id: true,
diff --git a/app/routes/play/looking.tsx b/app/routes/play/looking.tsx
index 8478f678f..b0f341a45 100644
--- a/app/routes/play/looking.tsx
+++ b/app/routes/play/looking.tsx
@@ -160,14 +160,19 @@ export const loader: LoaderFunction = async ({ context }) => {
   if (!ownGroup) return redirect("/play");
   if (!ownGroup.looking) return redirect("/play/add-players");
 
-  const groups = await LFGGroup.findLookingByType(
-    ownGroup.type,
-    ownGroup.ranked
-  );
-
   const lookingForMatch =
     ownGroup.type === "VERSUS" &&
     ownGroup.members.length === LFG_GROUP_FULL_SIZE;
+
+  const groups = await LFGGroup.findLookingByType(
+    ownGroup.type,
+    // before we are looking for a match show both ranked and unranked
+    // groups and allow that status to change
+    lookingForMatch && typeof ownGroup.ranked === "boolean"
+      ? ownGroup.ranked
+      : undefined
+  );
+
   const likesGiven = ownGroup.likedGroups.reduce(
     (acc, lg) => acc.add(lg.targetId),
     new Set<string>()
diff --git a/app/styles/play-looking.css b/app/styles/play-looking.css
index 82734720e..28a3f29c8 100644
--- a/app/styles/play-looking.css
+++ b/app/styles/play-looking.css
@@ -72,10 +72,14 @@
   flex-wrap: wrap;
   justify-content: center;
   gap: var(--s-2);
-  margin-block-end: var(--s-3);
+  margin-block-end: var(--s-1);
   margin-block-start: var(--s-1-5);
 }
 
+.play-looking__card__button {
+  margin-block-start: var(--s-2);
+}
+
 .play-looking__member-card {
   display: flex;
   min-width: calc(50% - var(--s-4));