feat: improve home

src/app/[locale]/(home)/actions.ts

@@ -33,3 +33,15 @@ export const switchLeagueAction = createAuthenticatedServerAction(
     };
   },
 );
+
+export const createMatchAction = createAuthenticatedServerAction(
+  zfd.formData({
+    team1: zfd.text(),
+    score1: zfd.numeric(),
+  }),
+  async () => {
+    return {
+      status: "success",
+    }
+  }
+);

src/app/[locale]/(home)/home.tsx

@@ -1,29 +1,16 @@
-import { MatchCreationForm } from "@/components/match-creation-form";
-import { getCurrentUser, getUserLeagues } from "@/lib/session";
-import { LeagueHeader } from "@/app/[locale]/(home)/league-header";
-import { Container } from "@/components/container";
-import { LeagueFeed } from "@/app/[locale]/(home)/league-feed";
+import { MatchCreationForm } from "@/app/[locale]/(home)/match-creation-form";
+import { getCurrentUser } from "@/lib/session";
+import {
+  getLeaguesForCurrentUser,
+  getLeagueTeamsForCurrentUser,
+} from "@/db/model/league";
 
 export async function Home() {
-  const leagues = await getUserLeagues();
-  const user = await getCurrentUser();
-
-  if (!leagues || !user) {
-    return null; // TODO
-  }
+  const teams = await getLeagueTeamsForCurrentUser();
 
   return (
-    <Container>
-      <div className="grid grid-cols-4 mt-5">
-        <div className="col-span-3">
-          <LeagueHeader
-            leagues={leagues}
-            selectedLeagueId={user.selectedLeagueId}
-          />
-          <MatchCreationForm />
-          <LeagueFeed />
-        </div>
-      </div>
-    </Container>
+    <MatchCreationForm
+      teams={teams}
+    />
   );
 }

src/app/[locale]/(home)/layout.tsx

@@ -0,0 +1,40 @@
+import React, { ReactNode } from "react";
+import "@/styles/globals.css";
+import { getLeaguesForCurrentUser } from "@/db/model/league";
+import { getCurrentUser } from "@/lib/session";
+import { LeagueHeader } from "@/app/[locale]/(home)/league-header";
+import { Container } from "@/components/container";
+
+export const metadata = {
+  title: "Hilde - Platform",
+  description: "Hilde.",
+};
+
+export default async function HomeLayout({
+  children,
+  params: { locale, ...params },
+}: {
+  children: ReactNode;
+  params: { locale: string };
+}) {
+  const leagues = await getLeaguesForCurrentUser();
+  const user = await getCurrentUser();
+
+  if (!user || !leagues) {
+    return <>{children}</>;
+  }
+
+  return (
+    <Container>
+      <div className="grid grid-cols-4 mt-5">
+        <div className="col-span-3">
+          <LeagueHeader
+            leagues={leagues}
+            selectedLeagueId={user.selectedLeagueId}
+          />
+        </div>
+      </div>
+      {children}
+    </Container>
+  );
+}

src/app/[locale]/(home)/leaderboards/page.tsx

@@ -0,0 +1,9 @@
+import { Container } from "@/components/container";
+
+export default async function Matches() {
+  return (
+    <Container>
+      leaderboards
+    </Container>
+  );
+}

src/app/[locale]/(home)/league-header.tsx

@@ -15,7 +15,6 @@ import { Link } from "@/lib/navigation";
 import { useFormState } from "react-dom";
 import { switchLeagueAction } from "@/app/[locale]/(home)/actions";
 import { useRef } from "react";
-import { useSession } from "next-auth/react";
 
 interface LeagueHeaderProps {
   leagues: League[];
@@ -82,16 +81,16 @@ export function LeagueHeader({ leagues, selectedLeagueId }: LeagueHeaderProps) {
       <nav>
         <ul className="flex gap-6">
           <li>
-            <Link href="#">Dashboard</Link>
+            <Link href="/">Dashboard</Link>
           </li>
           <li>
-            <Link href="#">Matches</Link>
+            <Link href="/matches">Matches</Link>
           </li>
           <li>
-            <Link href="#">Team</Link>
+            <Link href="/teams">Teams</Link>
           </li>
           <li>
-            <Link href="#">Leaderboards</Link>
+            <Link href="/leaderboards">Leaderboards</Link>
           </li>
         </ul>
       </nav>

src/app/[locale]/(home)/match-creation-form.tsx

@@ -0,0 +1,105 @@
+"use client";
+
+import { Card, CardBody, CardFooter } from "@nextui-org/card";
+import { MatchTeamSelector } from "@/app/[locale]/(home)/match-team-selector";
+import { Button, Divider, Input } from "@nextui-org/react";
+import { League } from "@/db/schema";
+import { getLeagueTeamsForCurrentUser } from "@/db/model/league";
+import { Controller, useForm } from "react-hook-form";
+import { useFormState } from "react-dom";
+import { createMatchAction } from "@/app/[locale]/(home)/actions";
+import { useRef } from "react";
+
+interface MatchCreationFormProps {
+  teams: Awaited<ReturnType<typeof getLeagueTeamsForCurrentUser>>;
+}
+
+interface FormValues {
+  team1: string[];
+  score1: string;
+  team2: string[];
+  score2: string;
+  comment: string;
+}
+
+export function MatchCreationForm({ teams }: MatchCreationFormProps) {
+  const { register, control } = useForm<FormValues>({
+    defaultValues: {
+      team1: [],
+      score1: "",
+      team2: [],
+      score2: "",
+      comment: "",
+    },
+  });
+  const [state, formAction] = useFormState(createMatchAction, null);
+  const team1Ref = useRef<HTMLInputElement>(null);
+
+  return (
+    <Card className="overflow-visible">
+      <form action={formAction}>
+        <CardBody className="overflow-y-visible">
+          <div className="p-6">
+            <div className="grid grid-cols-12">
+              <div className="col-span-5">
+                <div className="grid grid-cols-12 gap-3">
+                  <div className="col-span-8">
+                    <input type="hidden" name="team1" ref={team1Ref} />
+                    <Controller
+                      control={control}
+                      name="team1"
+                      render={({ field: { onChange } }) => (
+                        <MatchTeamSelector
+                          teams={teams}
+                          onChange={data => {
+                            onChange(data);
+                            if (!team1Ref.current) {
+                              return;
+                            }
+                            return (team1Ref.current.value = data.join(","));
+                          }}
+                        />
+                      )}
+                    />
+                    {/*<p className="text-xs">Suggestions: [self] others</p>*/}
+                  </div>
+                  <div className="col-span-4">
+                    <Input
+                      type="number"
+                      placeholder="2"
+                      label="Score"
+                      labelPlacement="outside"
+                      {...register("score1")}
+                    />
+                  </div>
+                </div>
+              </div>
+              <div className="col-span-2 text-center self-center">
+                <h3 className="font-bold text-3xl">vs</h3>
+              </div>
+              <div className="col-span-5">
+                <div className="grid grid-cols-12 gap-3">
+                  <div className="col-span-8">{/*<MatchTeamSelector />*/}</div>
+                  <div className="col-span-4">
+                    <Input
+                      type="number"
+                      placeholder="3"
+                      label="Score"
+                      labelPlacement="outside"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </CardBody>
+        <Divider />
+        <CardFooter>
+          <Button type="submit" color="primary">
+            Save
+          </Button>
+        </CardFooter>
+      </form>
+    </Card>
+  );
+}