chore: cleanup

next.config.js

@@ -1,4 +1,4 @@
-const withNextIntl = require('next-intl/plugin')();
+const withNextIntl = require("next-intl/plugin")();
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nehalist/hilde",
-  "version": "1.0.0",
+  "version": "1.0.0-beta1",
   "private": true,
   "scripts": {
     "dev": "next dev",

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

@@ -49,12 +49,12 @@ export const createMatchAction = authAction(
 
     const team1Entity = await getOrCreateTeam(
       selectedUserLeague,
-      team1.join(","),
+      team1,
       user.id,
     );
     const team2Entity = await getOrCreateTeam(
       selectedUserLeague,
-      team2.join(","),
+      team2,
       user.id,
     );
 

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

@@ -1,6 +1,8 @@
 "use client";
 
 import { Container } from "@/components/container";
+import { useRouter } from "@/lib/navigation";
+import { Button } from "@nextui-org/react";
 import { getProviders } from "next-auth/react";
 import { useTranslations } from "next-intl";
 import { FaChartLine, FaHistory, FaTrophy } from "react-icons/fa";
@@ -12,6 +14,7 @@ interface LandingPageProps {
 
 function Hero() {
   const t = useTranslations("landingPage");
+  const router = useRouter();
 
   return (
     <header className="py-20 sm:py-32 lg:pb-20">
@@ -39,18 +42,9 @@ function Hero() {
             })}
           </p>
           <div className="mt-10 flex items-center justify-center gap-x-6">
-            <a
-              href="#"
-              className="rounded-md bg-green-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-green-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
-            >
+            <Button color="primary" onClick={() => router.push("?signin=1")}>
               Start tracking
-            </a>
-            <a
-              href="#"
-              className="rounded-md px-3.5 py-2.5 text-sm font-semibold shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
-            >
-              Read the blog
-            </a>
+            </Button>
           </div>
         </div>
       </div>
@@ -88,9 +82,6 @@ function Features() {
       <Container>
         <div className="grid grid-cols-2">
           <div>
-            <h2 className="text-base font-semibold leading-7 text-green-400">
-              What can Hilde do for you?
-            </h2>
             <p className="mt-2 text-3xl font-bold tracking-tight text-gray-900 dark:text-gray-200 sm:text-4xl">
               Features
             </p>
@@ -116,7 +107,8 @@ function Features() {
           </div>
           <div>
             <div className="mt-16 flow-root sm:mt-24">
-              {/*<img*/}
+              <div className="rounded-md shadow-2xl ring-1 ring-gray-900/10 z-0 relative w-full h-80" />
+              {/*<Image*/}
               {/*  src="https://placehold.co/500x300?text=Slide+1"*/}
               {/*  alt="App screenshot"*/}
               {/*  width={2432}*/}

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

@@ -1,7 +1,6 @@
 "use client";
 
 import { createMatchAction } from "@/app/[locale]/(home)/actions";
-import { MatchTeamSelector } from "@/app/[locale]/(home)/match-team-selector";
 import { matchCreationSchema } from "@/app/[locale]/(home)/validation";
 import { getLeagueTeamsForCurrentUser } from "@/db/model/league";
 import { User } from "@/db/schema";
@@ -10,7 +9,7 @@ import { Card, CardBody, CardFooter } from "@nextui-org/card";
 import { Button, Divider, Input } from "@nextui-org/react";
 import { useAction } from "next-safe-action/hooks";
 import { isExecuting } from "next-safe-action/status";
-import { Controller, useForm } from "react-hook-form";
+import { useForm } from "react-hook-form";
 import { toast } from "react-toastify";
 
 interface MatchCreationFormProps {
@@ -19,9 +18,9 @@ interface MatchCreationFormProps {
 }
 
 interface FormValues {
-  team1: string[];
+  team1: string;
   score1: string;
-  team2: string[];
+  team2: string;
   score2: string;
   comment: string;
 }
@@ -33,15 +32,14 @@ export function MatchCreator({ teams, user }: MatchCreationFormProps) {
   const {
     handleSubmit,
     register,
-    control,
     reset,
     formState: { isValid },
   } = useForm<FormValues>({
     resolver: zodResolver(matchCreationSchema),
     defaultValues: {
-      team1: userTeam ? [userTeam.name] : [],
+      team1: userTeam ? userTeam.name : "",
       score1: "",
-      team2: [],
+      team2: "",
       score2: "",
       comment: "",
     },
@@ -74,19 +72,26 @@ export function MatchCreator({ teams, user }: MatchCreationFormProps) {
             <div className="col-span-5">
               <div className="grid grid-cols-12 gap-3 items-start">
                 <div className="col-span-8">
-                  <Controller
-                    control={control}
-                    name="team1"
-                    render={({ field: { onChange, value } }) => (
-                      <MatchTeamSelector
-                        autoFocus={true}
-                        value={value}
-                        teams={teams}
-                        onChange={onChange}
-                        label="Home"
-                      />
-                    )}
+                  <Input
+                    type="text"
+                    label="Team 1"
+                    labelPlacement="outside"
+                    defaultValue={userTeam ? userTeam.name : ""}
+                    {...register("team1")}
                   />
+                  {/*<Controller*/}
+                  {/*  control={control}*/}
+                  {/*  name="team1"*/}
+                  {/*  render={({ field: { onChange, value } }) => (*/}
+                  {/*    <MatchTeamSelector*/}
+                  {/*      autoFocus={true}*/}
+                  {/*      value={value}*/}
+                  {/*      teams={teams}*/}
+                  {/*      onChange={onChange}*/}
+                  {/*      label="Home"*/}
+                  {/*    />*/}
+                  {/*  )}*/}
+                  {/*/>*/}
                 </div>
                 <div className="col-span-4 flex items-end gap-1">
                   <Input
@@ -105,18 +110,25 @@ export function MatchCreator({ teams, user }: MatchCreationFormProps) {
             <div className="col-span-5">
               <div className="grid grid-cols-12 gap-3 items-start">
                 <div className="col-span-8">
-                  <Controller
-                    control={control}
-                    name="team2"
-                    render={({ field: { onChange, value } }) => (
-                      <MatchTeamSelector
-                        value={value}
-                        teams={teams}
-                        onChange={onChange}
-                        label="Away"
-                      />
-                    )}
+                  <Input
+                    type="text"
+                    label="Team 2"
+                    labelPlacement="outside"
+                    placeholder=" "
+                    {...register("team2")}
                   />
+                  {/*<Controller*/}
+                  {/*  control={control}*/}
+                  {/*  name="team2"*/}
+                  {/*  render={({ field: { onChange, value } }) => (*/}
+                  {/*    <MatchTeamSelector*/}
+                  {/*      value={value}*/}
+                  {/*      teams={teams}*/}
+                  {/*      onChange={onChange}*/}
+                  {/*      label="Away"*/}
+                  {/*    />*/}
+                  {/*  )}*/}
+                  {/*/>*/}
                 </div>
                 <div className="col-span-4">
                   <Input

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

@@ -1,3 +1,11 @@
-export default async function MatchDetailsPage() {
-  return <>match</>;
+import { getMatchById } from "@/db/model/match";
+
+export default async function MatchDetailsPage({
+  params,
+}: {
+  params: { id: string };
+}) {
+  const match = await getMatchById(params.id);
+
+  return <>{JSON.stringify(match, null, 2)}</>;
 }

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

@@ -1,21 +1,15 @@
 import { z } from "zod";
 
-export const matchCreationSchema = z
-  .object({
-    team1: z.array(z.string()).transform(v => v.sort()),
-    team2: z.array(z.string()).transform(v => v.sort()),
-    score1: z.preprocess(
-      v => (v !== "" ? Number(v) : undefined),
-      z.number().min(0),
-    ),
-    score2: z.preprocess(
-      v => (v !== "" ? Number(v) : undefined),
-      z.number().min(0),
-    ),
-    comment: z.string().optional(),
-  })
-  .refine(schema => {
-    return (
-      schema.team1.filter(value => schema.team2.includes(value)).length === 0
-    );
-  });
+export const matchCreationSchema = z.object({
+  team1: z.string(),
+  team2: z.string(),
+  score1: z.preprocess(
+    v => (v !== "" ? Number(v) : undefined),
+    z.number().min(0),
+  ),
+  score2: z.preprocess(
+    v => (v !== "" ? Number(v) : undefined),
+    z.number().min(0),
+  ),
+  comment: z.string().optional(),
+});

src/app/[locale]/login/page.tsx

@@ -1,6 +1,6 @@
-import { LoginForm } from "@/app/[locale]/login/form";
-import { getProviders } from "next-auth/react";
+import { ProviderList } from "@/app/[locale]/login/provider-list";
 import { Container } from "@/components/container";
+import { getProviders } from "next-auth/react";
 
 export default async function Login() {
   const providers = await getProviders();
@@ -10,7 +10,7 @@ export default async function Login() {
       <h3 className="text-center text-2xl font-bold leading-8 tracking-tight mt-8 mb-4">
         Sign In
       </h3>
-      <LoginForm providers={providers} />
+      <ProviderList providers={providers} />
     </Container>
   );
 }