🐸 Update homepage to display current wave (#468)

Co-authored-by: mazya <[email protected]>

src/app/page.tsx

@@ -1,32 +1,34 @@
-import Link from "next/link";
-import { urls } from "@/constants/urls";
-import { getWaves } from "@/drizzle/queries/waves";
+import { getFirstNotClosedWave } from "@/drizzle/queries/waves";
 
-import { userHasRole, UserPermission } from "@/config/userPermissions";
-import { Button } from "@/components/ui/button";
 import { PageHeader } from "@/components/ui/pageHeader";
-import { WavePreview } from "@/components/ui/wavePreview.tsx/wavePreview";
+import { TimelinePreview } from "@/components/ui/wavesTimelinePreview/timelinePreview";
+
+import { SubmissionsSection } from "./waves/[waveId]/applications/submissions/submissionsSection";
+import { WaveBanner } from "./waves/[waveId]/waveBanner";
 
 export default async function Home() {
-  const isModerator = await userHasRole(UserPermission.moderator);
+  const wave = await getFirstNotClosedWave();
+  if (!wave) {
+    return <NotWaveMessage />;
+  }
+
+  return (
+    <div className="flex flex-col gap-6">
+      <PageHeader title={wave.name} />
+
+      <WaveBanner />
 
-  const waves = await getWaves();
+      <TimelinePreview wave={wave} />
+
+      <SubmissionsSection wave={wave} />
+    </div>
+  );
+}
 
+function NotWaveMessage() {
   return (
-    <div className="flex w-full flex-col gap-4">
-      <PageHeader title="Current waves">
-        {isModerator && (
-          <Button variant="secondary" asChild>
-            <Link href={urls.waves.create}>Create wave</Link>
-          </Button>
-        )}
-      </PageHeader>
-
-      <ol className="flex flex-col gap-8">
-        {waves.map((wave) => (
-          <WavePreview wave={wave} key={wave.id} />
-        ))}
-      </ol>
+    <div className="my-[25vh] flex flex-col items-center">
+      <h2 className="text-xl">No wave has been started yet</h2>
     </div>
   );
 }

src/app/waves/[waveId]/page.tsx

@@ -3,6 +3,7 @@ import { notFound } from "next/navigation";
 import { getWaveWithApplications } from "@/drizzle/queries/waves";
 
 import { parseWaveParams } from "@/lib/paramsValidation";
+import { PageHeader } from "@/components/ui/pageHeader";
 import { TimelinePreview } from "@/components/ui/wavesTimelinePreview/timelinePreview";
 
 import { SubmissionsSection } from "./applications/submissions/submissionsSection";
@@ -36,6 +37,8 @@ export default async function Wave({ params }: { params: unknown }) {
 
   return (
     <div className="flex flex-col gap-6">
+      <PageHeader title={wave.name} />
+
       <WaveBanner />
 
       <TimelinePreview wave={wave} />

src/drizzle/queries/waves.ts

@@ -2,7 +2,7 @@ import { cache } from "react";
 import { QueryError } from "@/constants/errors";
 import { db } from "@/drizzle/db";
 import { Category, Wave } from "@/drizzle/schema";
-import { eq } from "drizzle-orm";
+import { eq, gt, inArray, SQL, sql } from "drizzle-orm";
 
 const imageFragment = {
   columns: {
@@ -56,9 +56,9 @@ export const getWaveDates = cache(async (waveId: number) => {
   return wave;
 });
 
-export const getWaveWithApplications = cache(async (id: number) => {
+const getWave = async (where: SQL) => {
   const wave = await db.query.Wave.findFirst({
-    where: eq(Wave.id, id),
+    where,
     with: {
       applications: {
         with: {
@@ -80,6 +80,20 @@ export const getWaveWithApplications = cache(async (id: number) => {
   });
 
   return wave;
+};
+
+const firstNotClosedWave = db
+  .select({ id: Wave.id })
+  .from(Wave)
+  .where(gt(Wave.closeDate, sql`now()`))
+  .limit(1);
+
+export const getFirstNotClosedWave = cache(async () => {
+  return getWave(inArray(Wave.id, firstNotClosedWave));
+});
+
+export const getWaveWithApplications = cache(async (id: number) => {
+  return getWave(eq(Wave.id, id));
 });
 
 type CategoryInsertData = Omit<typeof Category.$inferInsert, "waveId">;

tests/e2e/createWave.spec.ts

@@ -28,7 +28,7 @@ test("creates a new wave", async ({ browser }) => {
 
   await mockDate(page, new Date("Jun 1 2020 00:00:00"));
 
-  await page.goto(urls.root);
+  await page.goto(urls.moderator.waves);
 
   await page.getByRole("link", { name: "Create wave" }).click();