Closes #723 - Conclusion screen for not ranked

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";

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,
+    },
+  });
+}

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;
+}

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);