used typescript, added route handler, removed src directory

.gitignore

@@ -4,6 +4,7 @@
 /node_modules
 /.pnp
 .pnp.js
+.yarn/install-state.gz
 
 # testing
 /coverage
@@ -24,12 +25,12 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
-# env files
-.env
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
+# local env files
+.env*.local
 
 # vercel
 .vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

src/app/(app)/Header.js → app/(app)/Header.tsx

@@ -1,8 +1,7 @@
-const Header = ({ title }) => {
+const Header = ({ title }: { title: string}) => {
     return (
         <header className="bg-white shadow">
             <div className="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
-
                 <h2 className="font-semibold text-xl text-gray-800 leading-tight">
                     {title}
                 </h2>
@@ -11,4 +10,4 @@ const Header = ({ title }) => {
     )
 }
 
-export default Header
+export default Header

src/app/(app)/Navigation.js → app/(app)/Navigation.tsx

@@ -9,8 +9,9 @@ import { DropdownButton } from '@/components/DropdownLink'
 import { useAuth } from '@/hooks/auth'
 import { usePathname } from 'next/navigation'
 import { useState } from 'react'
+import { User } from '@/lib/definitions'
 
-const Navigation = ({ user }) => {
+const Navigation = ({ user }: { user: User }) => {
     const { logout } = useAuth()
 
     const [open, setOpen] = useState(false)
@@ -154,4 +155,4 @@ const Navigation = ({ user }) => {
     )
 }
 
-export default Navigation
+export default Navigation

src/app/(app)/dashboard/page.js → app/(app)/dashboard/page.tsx

@@ -21,4 +21,4 @@ const Dashboard = () => {
     )
 }
 
-export default Dashboard
+export default Dashboard

src/app/(app)/layout.js → app/(app)/layout.tsx

@@ -4,7 +4,11 @@ import { useAuth } from '@/hooks/auth'
 import Navigation from '@/app/(app)/Navigation'
 import Loading from '@/app/(app)/Loading'
 
-const AppLayout = ({ children, header }) => {
+const AppLayout = ({
+    children,
+}: Readonly<{
+    children: React.ReactNode
+}>) => {
     const { user } = useAuth({ middleware: 'auth' })
 
     if (!user) {

src/app/(auth)/AuthCard.js → app/(auth)/AuthCard.tsx

@@ -1,4 +1,10 @@
-const AuthCard = ({ logo, children }) => (
+const AuthCard = ({
+    logo,
+    children,
+}: Readonly<{
+    logo: React.ReactNode,
+    children: React.ReactNode,
+}>) => (
     <div className="min-h-screen flex flex-col sm:justify-center items-center pt-6 sm:pt-0 bg-gray-100">
         <div>{logo}</div>
 

src/app/(auth)/AuthSessionStatus.js → app/(auth)/AuthSessionStatus.tsx

@@ -1,4 +1,11 @@
-const AuthSessionStatus = ({ status, className, ...props }) => (
+const AuthSessionStatus = ({
+    status,
+    className,
+    ...props
+}: {
+    status: string | null
+    className?: string
+} & React.HTMLAttributes<HTMLDivElement>): JSX.Element | null => (
     <>
         {status && (
             <div

app/(auth)/api/csrf/route.ts

@@ -0,0 +1,9 @@
+import { fetchData } from '@/lib/fetch';
+import { type NextRequest } from 'next/server'
+
+export async function GET(request: NextRequest) {
+    return await fetchData({
+        path: '/sanctum/csrf-cookie',
+        request: request,
+    })
+}

app/(auth)/api/forgot-password/route.ts

@@ -0,0 +1,13 @@
+import { fetchData } from '@/lib/fetch'
+import { type NextRequest } from 'next/server'
+
+export async function POST(request: NextRequest) {
+    const formData = await request.json()
+
+    return await fetchData({
+        path: '/forgot-password',
+        request: request,
+        method: 'POST',
+        formData: formData
+    })
+}

app/(auth)/api/login/route.ts

@@ -0,0 +1,12 @@
+import { fetchData } from '@/lib/fetch';
+import { type NextRequest } from 'next/server'
+
+export async function POST(request: NextRequest) {
+    const formData = await request.json();
+    return await fetchData({
+        path: '/login',
+        request: request,
+        method: 'POST',
+        formData: formData
+    });
+}

app/(auth)/api/logout/route.ts

@@ -0,0 +1,10 @@
+import { fetchData } from '@/lib/fetch'
+import { type NextRequest } from 'next/server'
+
+export async function POST(request: NextRequest) {
+    return await fetchData({
+        path: '/logout',
+        request: request,
+        method: 'POST',
+    });
+}

app/(auth)/api/register/route.ts

@@ -0,0 +1,12 @@
+import { fetchData } from '@/lib/fetch'
+import { type NextRequest } from 'next/server'
+
+export async function POST(request: NextRequest) {
+    const formData = await request.json()
+    return await fetchData({
+        path: '/register',
+        request: request,
+        method: 'POST',
+        formData: formData,
+    });
+}

app/(auth)/api/reset-password/route.ts

@@ -0,0 +1,12 @@
+import { fetchData } from '@/lib/fetch'
+import { type NextRequest } from 'next/server'
+
+export async function POST(request: NextRequest) {
+    const formData = await request.json()
+    return await fetchData({
+        path: '/reset-password',
+        request: request,
+        method: 'POST',
+        formData: formData,
+    });
+}

app/(auth)/api/user/route.ts

@@ -0,0 +1,9 @@
+import { fetchData } from '@/lib/fetch'
+import { type NextRequest } from 'next/server'
+
+export async function GET(request: NextRequest) {
+    return await fetchData({
+        path: '/api/user',
+        request: request
+    });
+}

app/(auth)/api/verification/route.ts

@@ -0,0 +1,10 @@
+import { fetchData } from '@/lib/fetch'
+import { type NextRequest } from 'next/server'
+
+export async function POST(request: NextRequest) {
+    return await fetchData({
+        path: '/email/verification-notification',
+        request: request,
+        method: 'POST'
+    });
+}

src/app/(auth)/forgot-password/page.js → app/(auth)/forgot-password/page.tsx

@@ -5,7 +5,7 @@ import Input from '@/components/Input'
 import InputError from '@/components/InputError'
 import Label from '@/components/Label'
 import { useAuth } from '@/hooks/auth'
-import { useState } from 'react'
+import { FormEvent, useState } from 'react'
 import AuthSessionStatus from '@/app/(auth)/AuthSessionStatus'
 
 const Page = () => {
@@ -14,11 +14,11 @@ const Page = () => {
         redirectIfAuthenticated: '/dashboard',
     })
 
-    const [email, setEmail] = useState('')
-    const [errors, setErrors] = useState([])
-    const [status, setStatus] = useState(null)
+    const [email, setEmail] = useState<string>('')
+    const [errors, setErrors] = useState<{ [key: string]: string[] }>({})
+    const [status, setStatus] = useState<string | null>(null)
 
-    const submitForm = event => {
+    const submitForm = (event: FormEvent<HTMLFormElement>) => {
         event.preventDefault()
 
         forgotPassword({ email, setErrors, setStatus })

src/app/(auth)/layout.js → app/(auth)/layout.tsx

@@ -6,7 +6,11 @@ export const metadata = {
     title: 'Laravel',
 }
 
-const Layout = ({ children }) => {
+const Layout = ({
+    children,
+}: Readonly<{
+    children: React.ReactNode
+}>) => {
     return (
         <div>
             <div className="font-sans text-gray-900 antialiased">

src/app/(auth)/login/page.js → app/(auth)/login/page.tsx

@@ -6,33 +6,38 @@ import InputError from '@/components/InputError'
 import Label from '@/components/Label'
 import Link from 'next/link'
 import { useAuth } from '@/hooks/auth'
-import { useEffect, useState } from 'react'
-import { useRouter } from 'next/navigation'
+import { FormEvent, useEffect, useState } from 'react'
+import { useSearchParams } from 'next/navigation'
 import AuthSessionStatus from '@/app/(auth)/AuthSessionStatus'
 
 const Login = () => {
-    const router = useRouter()
+    const searchParams = useSearchParams()
 
     const { login } = useAuth({
         middleware: 'guest',
         redirectIfAuthenticated: '/dashboard',
     })
 
-    const [email, setEmail] = useState('')
-    const [password, setPassword] = useState('')
-    const [shouldRemember, setShouldRemember] = useState(false)
-    const [errors, setErrors] = useState([])
-    const [status, setStatus] = useState(null)
+    const [email, setEmail] = useState<string>('')
+    const [password, setPassword] = useState<string>('')
+    const [shouldRemember, setShouldRemember] = useState<boolean>(false)
+    const [errors, setErrors] = useState<{ [key: string]: string[] }>({})
+    const [status, setStatus] = useState<string | null>(null)
 
     useEffect(() => {
-        if (router.reset?.length > 0 && errors.length === 0) {
-            setStatus(atob(router.reset))
+        const resetParam = searchParams.get('reset')
+        if (
+            resetParam &&
+            resetParam.length > 0 &&
+            Object.keys(errors).length === 0
+        ) {
+            setStatus(atob(resetParam))
         } else {
             setStatus(null)
         }
     })
 
-    const submitForm = async event => {
+    const submitForm = async (event: FormEvent<HTMLFormElement>) => {
         event.preventDefault()
 
         login({

src/app/(auth)/password-reset/[token]/page.js → app/(auth)/password-reset/[token]/page.tsx

@@ -5,7 +5,7 @@ import Input from '@/components/Input'
 import InputError from '@/components/InputError'
 import Label from '@/components/Label'
 import { useAuth } from '@/hooks/auth'
-import { useEffect, useState } from 'react'
+import { FormEvent, useEffect, useState } from 'react'
 import { useSearchParams } from 'next/navigation'
 import AuthSessionStatus from '@/app/(auth)/AuthSessionStatus'
 
@@ -14,13 +14,13 @@ const PasswordReset = () => {
 
     const { resetPassword } = useAuth({ middleware: 'guest' })
 
-    const [email, setEmail] = useState('')
-    const [password, setPassword] = useState('')
-    const [passwordConfirmation, setPasswordConfirmation] = useState('')
-    const [errors, setErrors] = useState([])
-    const [status, setStatus] = useState(null)
+    const [email, setEmail] = useState<string>('')
+    const [password, setPassword] = useState<string>('')
+    const [passwordConfirmation, setPasswordConfirmation] = useState<string>('')
+    const [errors, setErrors] = useState<{ [key: string]: string[] }>({})
+    const [status, setStatus] = useState<string | null>(null)
 
-    const submitForm = event => {
+    const submitForm = (event: FormEvent<HTMLFormElement>) => {
         event.preventDefault()
 
         resetPassword({
@@ -33,7 +33,8 @@ const PasswordReset = () => {
     }
 
     useEffect(() => {
-        setEmail(searchParams.get('email'))
+        const emailParam = searchParams.get('email')
+        if (emailParam) setEmail(emailParam)
     }, [searchParams.get('email')])
 
     return (

src/app/(auth)/register/page.js → app/(auth)/register/page.tsx

@@ -6,21 +6,21 @@ import InputError from '@/components/InputError'
 import Label from '@/components/Label'
 import Link from 'next/link'
 import { useAuth } from '@/hooks/auth'
-import { useState } from 'react'
+import { FormEvent, useState } from 'react'
 
 const Page = () => {
     const { register } = useAuth({
         middleware: 'guest',
         redirectIfAuthenticated: '/dashboard',
     })
 
-    const [name, setName] = useState('')
-    const [email, setEmail] = useState('')
-    const [password, setPassword] = useState('')
-    const [passwordConfirmation, setPasswordConfirmation] = useState('')
-    const [errors, setErrors] = useState([])
+    const [name, setName] = useState<string>('')
+    const [email, setEmail] = useState<string>('')
+    const [password, setPassword] = useState<string>('')
+    const [passwordConfirmation, setPasswordConfirmation] = useState<string>('')
+    const [errors, setErrors] = useState<{ [key: string]: string[] }>({})
 
-    const submitForm = event => {
+    const submitForm = (event: FormEvent<HTMLFormElement>) => {
         event.preventDefault()
 
         register({

src/app/(auth)/verify-email/page.js → app/(auth)/verify-email/page.tsx

@@ -10,7 +10,7 @@ const Page = () => {
         redirectIfAuthenticated: '/dashboard',
     })
 
-    const [status, setStatus] = useState(null)
+    const [status, setStatus] = useState<string | null>(null)
 
     return (
         <>

src/app/LoginLinks.js → app/LoginLinks.tsx

@@ -1,7 +1,7 @@
 'use client'
 
-import Link from 'next/link'
 import { useAuth } from '@/hooks/auth'
+import Link from 'next/link'
 
 const LoginLinks = () => {
     const { user } = useAuth({ middleware: 'guest' })

src/app/layout.js → app/layout.tsx

@@ -1,9 +1,14 @@
+import type { Metadata } from 'next'
 import '@/app/global.css'
 
-export const metadata = {
+export const metadata: Metadata = {
     title: 'Laravel',
 }
-const RootLayout = ({ children }) => {
+const RootLayout = ({
+    children,
+}: Readonly<{
+    children: React.ReactNode
+}>) => {
     return (
         <html lang="en">
             <body className="antialiased">{children}</body>