From ff1806d9fab940ffd4ae92ae02023c9d18664fae Mon Sep 17 00:00:00 2001
From: Kalle <38327916+Sendouc@users.noreply.github.com>
Date: Mon, 31 Jan 2022 09:38:12 +0200
Subject: [PATCH] Closes #723 - Conclusion screen for not ranked

---
 app/components/play/GroupCard.tsx |  2 +-
 app/models/LFGGroup.server.ts     | 12 ++++++
 app/routes/play/looking.tsx       | 63 +++++++++++++++++++++++++++++--
 app/styles/play-looking.css       | 22 +++++++++++
 4 files changed, 95 insertions(+), 4 deletions(-)

diff --git a/app/components/play/GroupCard.tsx b/app/components/play/GroupCard.tsx
index f4c40d6e7..e32ac2713 100644
--- a/app/components/play/GroupCard.tsx
+++ b/app/components/play/GroupCard.tsx
@@ -13,7 +13,7 @@ export function GroupCard({
 }: {
   group: LookingLoaderDataGroup;
   isGroupAdmin?: boolean;
-  type: "LIKES_GIVEN" | "NEUTRAL" | "LIKES_RECEIVED";
+  type?: "LIKES_GIVEN" | "NEUTRAL" | "LIKES_RECEIVED";
 }) {
   const buttonText = () => {
     if (type === "LIKES_GIVEN") return "Undo";
diff --git a/app/models/LFGGroup.server.ts b/app/models/LFGGroup.server.ts
index ecc6bf98d..3658c25fb 100644
--- a/app/models/LFGGroup.server.ts
+++ b/app/models/LFGGroup.server.ts
@@ -158,3 +158,15 @@ export function startLooking(id: string) {
     },
   });
 }
+
+export function setInactive(id: string) {
+  return db.lfgGroup.update({
+    where: {
+      id,
+    },
+    data: {
+      looking: false,
+      active: false,
+    },
+  });
+}
diff --git a/app/routes/play/looking.tsx b/app/routes/play/looking.tsx
index b85a3f03b..d3b5f6401 100644
--- a/app/routes/play/looking.tsx
+++ b/app/routes/play/looking.tsx
@@ -1,5 +1,7 @@
+import { LfgGroupType } from "@prisma/client";
 import {
   ActionFunction,
+  Form,
   json,
   LinksFunction,
   LoaderFunction,
@@ -8,8 +10,9 @@ import {
 } from "remix";
 import invariant from "tiny-invariant";
 import { z } from "zod";
+import { Button } from "~/components/Button";
 import { GroupCard } from "~/components/play/GroupCard";
-import { LFG_GROUP_FULL_SIZE } from "~/constants";
+import { DISCORD_URL, LFG_GROUP_FULL_SIZE } from "~/constants";
 import { uniteGroupInfo } from "~/core/play/utils";
 import { canUniteWithGroup, isGroupAdmin } from "~/core/play/validators";
 import * as LFGGroup from "~/models/LFGGroup.server";
@@ -34,6 +37,9 @@ const lookingActionSchema = z.union([
     // actually is
     targetGroupSize: z.preprocess(Number, z.number().min(1).max(4).int()),
   }),
+  z.object({
+    _action: z.literal("LOOK_AGAIN"),
+  }),
 ]);
 
 export const action: ActionFunction = async ({ request, context }) => {
@@ -102,6 +108,16 @@ export const action: ActionFunction = async ({ request, context }) => {
       });
       break;
     }
+    case "LOOK_AGAIN": {
+      await LFGGroup.setInactive(ownGroup.id);
+      break;
+    }
+    default: {
+      const exhaustive: never = data;
+      throw new Response(`Unknown action: ${JSON.stringify(exhaustive)}`, {
+        status: 400,
+      });
+    }
   }
 
   return { ok: data._action };
@@ -125,6 +141,7 @@ interface LookingLoaderData {
   neutralGroups: LookingLoaderDataGroup[];
   likerGroups: LookingLoaderDataGroup[];
   ownGroup: LookingLoaderDataGroup;
+  type: LfgGroupType;
 }
 
 export const loader: LoaderFunction = async ({ context }) => {
@@ -157,6 +174,7 @@ export const loader: LoaderFunction = async ({ context }) => {
 
   return json<LookingLoaderData>({
     ownGroup: ownGroupForResponse,
+    type: ownGroup.type,
     ...groups
       .filter((group) =>
         canUniteWithGroup({
@@ -176,7 +194,7 @@ export const loader: LoaderFunction = async ({ context }) => {
             : group.members.map((m) => m.user),
       }))
       .reduce(
-        (acc: Omit<LookingLoaderData, "ownGroup">, group) => {
+        (acc: Omit<LookingLoaderData, "ownGroup" | "type">, group) => {
           // likesReceived first so that if both received like and
           // given like then handle this edge case by just displaying the
           // group as waiting like back
@@ -197,9 +215,36 @@ export const loader: LoaderFunction = async ({ context }) => {
 export default function LookingPage() {
   const data = useLoaderData<LookingLoaderData>();
 
+  if (lookingOver(data.type, data.ownGroup)) {
+    return (
+      <div className="container">
+        <div className="play-looking__waves">
+          <GroupCard group={data.ownGroup} />
+          <div className="play-looking__waves-text">
+            This is your group! You can reach out to them on{" "}
+            <a href={DISCORD_URL}>our Discord</a> in the #groups-meetup channel.
+          </div>
+        </div>
+        <div className="play-looking__waves-button">
+          <Form method="post">
+            <Button
+              type="submit"
+              name="_action"
+              value="LOOK_AGAIN"
+              tiny
+              variant="outlined"
+            >
+              Look again
+            </Button>
+          </Form>
+        </div>
+      </div>
+    );
+  }
+
   return (
     <div className="container">
-      <GroupCard group={data.ownGroup} type="LIKES_GIVEN" />
+      <GroupCard group={data.ownGroup} />
       <hr className="my-4" />
       <div className="play-looking__columns">
         <div>
@@ -251,3 +296,15 @@ export default function LookingPage() {
     </div>
   );
 }
+
+function lookingOver(type: LfgGroupType, ownGroup: LookingLoaderDataGroup) {
+  if (type === "TWIN" && ownGroup.members?.length === 2) {
+    return true;
+  }
+
+  if (["QUAD"].includes(type) && ownGroup.members?.length === 4) {
+    return true;
+  }
+
+  return false;
+}
diff --git a/app/styles/play-looking.css b/app/styles/play-looking.css
index 49b74eb78..c67706ac0 100644
--- a/app/styles/play-looking.css
+++ b/app/styles/play-looking.css
@@ -1,3 +1,25 @@
+.play-looking__waves {
+  padding: var(--s-8);
+  background: url("/svg/background-pattern.svg");
+  background-color: var(--bg-lighter);
+  border-radius: var(--rounded);
+}
+
+.play-looking__waves-text {
+  padding: var(--s-4);
+  background-color: var(--bg-darker);
+  border-radius: var(--rounded);
+  font-size: var(--fonts-sm);
+  margin-block-start: var(--s-4);
+  text-align: center;
+}
+
+.play-looking__waves-button {
+  display: flex;
+  justify-content: center;
+  margin-block-start: var(--s-4);
+}
+
 .play-looking__columns {
   display: grid;
   column-gap: var(--s-5);