+
+
-
-
-
-
-
-
- (null);
+
+// async function handleSubmit(e: React.SubmitEvent) {
+// e.preventDefault();
+// setLoading(true);
+// setError(null);
+// try {
+// if (mode === "login") {
+// // attempt login
+// await login({ email, password } as any);
+// } else {
+// // attempt register
+// await register({ email, password } as any);
+// }
+// setEmail("");
+// setPassword("");
+// } catch (err: any) {
+// setError(err?.message ?? String(err));
+// } finally {
+// setLoading(false);
+// }
+// }
+
+// async function handleLogout() {
+// setLoading(true);
+// try {
+// await logout();
+// } catch (err: any) {
+// setError(err?.message ?? String(err));
+// } finally {
+// setLoading(false);
+// }
+// }
+
+// return (
+//
-
- Account
- {user ? ( -
-
);
}
+
+const Description = () => (
+
- Signed in as: {user?.email ?? "Unknown"}
-
-
- Verified: {verified ? "Yes" : "No"}
-
-
-
-
-
-
+ 
+
+ &
+
+
+
+
+
+
+ What's next?
+
+
+ {total > limit && (
+
+
+ {total - limit} more todo(s) hidden
+ )}
+
+ {todos.reverse().map((todo) => (
+
- ) : (
-
- )}
-
+
+
+ ))}
+ {
+ await updateTodo({ data: todo });
+ router.invalidate();
+ }}
+ />
+
+
+
+ {todo.title}
+
+ -
+ {items.map((item, i) => (
+
- + {item} + + ))} +
+//
+//
+//
+//
+//
+
+//
+//
+//
+//
+// );
+// }
diff --git a/src/routes/ssr.tsx b/src/routes/ssr.tsx
new file mode 100644
index 0000000..514ffed
--- /dev/null
+++ b/src/routes/ssr.tsx
@@ -0,0 +1,184 @@
+import { createFileRoute, useRouterState } from "@tanstack/react-router";
+import { getRequest } from "@tanstack/react-start/server";
+
+export const getTodo = createServerFn({ method: "POST" }).handler(async () => {
+ const api = await getApi({});
+ const limit = 5;
+ const todos = await api.data.readMany("todos");
+ const total = todos.body.meta.total as number;
+ return { total, todos, limit };
+});
+
+export const getUser = createServerFn({ method: "POST" }).handler(async () => {
+ const request = getRequest();
+ const api = await getApi({ verify: true, headers: request.headers });
+ const user = api.getUser();
+ return { user };
+});
+
+export const Route = createFileRoute("/ssr")({
+ component: RouteComponent,
+ loader: async () => {
+ return { ...(await getTodo()), ...(await getUser()) };
+ },
+});
+
+import { getApi } from "@/bknd";
+import { createServerFn } from "@tanstack/react-start";
+import { Link } from "@tanstack/react-router";
+
+function RouteComponent() {
+ const { todos, user } = Route.useLoaderData();
+
+ return (
+
+// Account
+// {user ? ( +//
+//
+// ) : (
+//
+// )}
+//
+// Signed in as: {user?.email ?? "Unknown"}
+//
+//
+// Verified: {verified ? "Yes" : "No"}
+//
+//
+//
+//
+//
+//
+//
+//
+
+
+
+
+ );
+}
+
+export function Footer() {
+ const routerState = useRouterState();
+ const pathname = routerState.location.pathname;
+
+ return (
+
+ );
+}
+
+export const List = ({ items = [] }: { items: React.ReactNode[] }) => (
+
+
+
+
+
+ &
+
+ - todo.title)} />
+
+ {user ? (
+ <>
+ Logged in as {user.email}.{" "}
+
+ Logout
+
+
+ ) : (
+
+
+
+ )}
+ + Not logged in.{" "} + + Login + +
+
+ Sign in with:{" "}
+
+ test@bknd.io
+ {" "}
+ /{" "}
+
+ 12345678
+
+
-
+ {items.map((item, i) => (
+
- + {item} + + ))} +