From 4129134bc24d66ed0b4f6aea1e09a140e2edd059 Mon Sep 17 00:00:00 2001
From: Kalle <38327916+Sendouc@users.noreply.github.com>
Date: Sat, 12 Feb 2022 23:29:37 +0200
Subject: [PATCH] Looking columns mapped

---
 app/routes/play/looking.tsx | 83 +++++++++++++++----------------------
 1 file changed, 33 insertions(+), 50 deletions(-)

diff --git a/app/routes/play/looking.tsx b/app/routes/play/looking.tsx
index 19d3ba48b..85315f019 100644
--- a/app/routes/play/looking.tsx
+++ b/app/routes/play/looking.tsx
@@ -331,6 +331,17 @@ export default function LookingPage() {
   }
 
   const lookingForMatch = data.ownGroup.members?.length === LFG_GROUP_FULL_SIZE;
+
+  const columns = [
+    { type: "LIKES_GIVEN", groups: data.likedGroups, title: "Liked" },
+    { type: "NEUTRAL", groups: data.neutralGroups, title: "Neutral" },
+    {
+      type: "LIKES_RECEIVED",
+      groups: data.likerGroups,
+      title: "Likes received",
+    },
+  ] as const;
+
   return (
     <div className="container">
       <GroupCard
@@ -340,57 +351,29 @@ export default function LookingPage() {
       />
       <hr className="my-4" />
       <div className="play-looking__columns">
-        <div>
-          <h2 className="play-looking__column-header">You want to play with</h2>
-          <div className="play-looking__cards">
-            {data.likedGroups.map((group) => {
-              return (
-                <GroupCard
-                  key={group.id}
-                  group={group}
-                  isCaptain={data.isCaptain}
-                  type="LIKES_GIVEN"
-                  ranked={group.ranked}
-                  lookingForMatch={lookingForMatch}
-                />
-              );
-            })}
+        {columns.map((column) => (
+          <div key={column.type}>
+            <h2 className="play-looking__column-header">{column.title}</h2>
+            <div className="play-looking__cards">
+              {column.groups.map((group) => {
+                return (
+                  <GroupCard
+                    key={group.id}
+                    group={group}
+                    isCaptain={data.isCaptain}
+                    type={column.type}
+                    ranked={
+                      column.type === "LIKES_RECEIVED" && !lookingForMatch
+                        ? data.ownGroup.ranked
+                        : group.ranked
+                    }
+                    lookingForMatch={lookingForMatch}
+                  />
+                );
+              })}
+            </div>
           </div>
-        </div>
-        <div>
-          <h2 className="play-looking__column-header invisible">Groups</h2>
-          <div className="play-looking__cards">
-            {data.neutralGroups.map((group) => {
-              return (
-                <GroupCard
-                  key={group.id}
-                  group={group}
-                  isCaptain={data.isCaptain}
-                  type="NEUTRAL"
-                  ranked={group.ranked}
-                  lookingForMatch={lookingForMatch}
-                />
-              );
-            })}
-          </div>
-        </div>
-        <div>
-          <h2 className="play-looking__column-header">Want to play with you</h2>
-          <div className="play-looking__cards">
-            {data.likerGroups.map((group) => {
-              return (
-                <GroupCard
-                  key={group.id}
-                  group={group}
-                  isCaptain={data.isCaptain}
-                  type="LIKES_RECEIVED"
-                  ranked={lookingForMatch ? group.ranked : data.ownGroup.ranked}
-                  lookingForMatch={lookingForMatch}
-                />
-              );
-            })}
-          </div>
-        </div>
+        ))}
       </div>
     </div>
   );