refactor(example): directly import homepage Server Action in Client Component

Author: TheEdoRan

packages/example-app/src/app/login-form.tsx

@@ -1,13 +1,9 @@
 "use client";
 
 import { useState } from "react";
-import type { loginUser } from "./login-action";
+import { loginUser } from "./login-action";
 
-type Props = {
-	login: typeof loginUser; // infer types with `typeof`
-};
-
-const LoginForm = ({ login }: Props) => {
+const LoginForm = () => {
 	const [result, setResult] = useState(
 		"fill in form and click on the log in button"
 	);
@@ -22,7 +18,7 @@ const LoginForm = ({ login }: Props) => {
 						username: string;
 						password: string;
 					};
-					const res = await login(input); // this is the typesafe action called from client
+					const res = await loginUser(input); // this is the typesafe action called from client
 					setResult(JSON.stringify(res, null, 1));
 				}}>
 				<input

packages/example-app/src/app/page.tsx

@@ -1,5 +1,4 @@
 import Link from "next/link";
-import { loginUser } from "./login-action";
 import LoginForm from "./login-form";
 
 export const metadata = {
@@ -13,9 +12,9 @@ export default function Home() {
 			<Link href="/hook">Go to /hook</Link>
 			<Link href="/optimistic-hook">Go to /optimistic-hook</Link>
 			<Link href="/form">Go to /form</Link>
+			<Link href="/nested-schema">Go to /nested-schema</Link>
 			<h1>Action without auth</h1>
-			{/* Pass the typesafe mutation to Client Component */}
-			<LoginForm login={loginUser} />
+			<LoginForm />
 		</>
 	);
 }