docs(example): fix optimistic hook example

TheEdoRan · Mar 11, 2024 · da5284e · da5284e
1 parent 9b86935
commit da5284e
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 6 deletions.
diff --git a/packages/example-app/src/app/(examples)/optimistic-hook/addlikes-action.ts b/packages/example-app/src/app/(examples)/optimistic-hook/addlikes-action.ts
@@ -6,7 +6,7 @@ import { z } from "zod";
 
 let likes = 42;
 
-export const getLikes = () => likes;
+export const getLikes = async () => likes;
 
 const incrementLikes = (by: number) => {
 	likes += by;

diff --git a/packages/example-app/src/app/(examples)/optimistic-hook/addlikes-form.tsx b/packages/example-app/src/app/(examples)/optimistic-hook/addlikes-form.tsx
@@ -74,7 +74,11 @@ const AddLikesForm = ({ likesCount }: Props) => {
 					Reset
 				</StyledButton>
 			</form>
-			<ResultBox result={optimisticData} status={status} />
+			<ResultBox
+				result={optimisticData}
+				status={status}
+				customTitle="Optimistic data:"
+			/>
 		</>
 	);
 };

diff --git a/packages/example-app/src/app/(examples)/optimistic-hook/page.tsx b/packages/example-app/src/app/(examples)/optimistic-hook/page.tsx
@@ -2,8 +2,9 @@ import { StyledHeading } from "@/app/_components/styled-heading";
 import { getLikes } from "./addlikes-action";
 import AddLikeForm from "./addlikes-form";
 
-export default function OptimisticHook() {
-	const likesCount = getLikes();
+export default async function OptimisticHookPage() {
+	const likesCount = await getLikes();
+
 	return (
 		<main className="w-96 max-w-full px-4">
 			<StyledHeading>Action using optimistic hook</StyledHeading>

diff --git a/packages/example-app/src/app/_components/result-box.tsx b/packages/example-app/src/app/_components/result-box.tsx
@@ -3,15 +3,16 @@ import { HookActionStatus } from "next-safe-action/hooks";
 type Props = {
 	result: any;
 	status?: HookActionStatus;
+	customTitle?: string;
 };
 
-export function ResultBox({ result, status }: Props) {
+export function ResultBox({ result, status, customTitle }: Props) {
 	return (
 		<div className="mt-8">
 			{status ? (
 				<p className="text-lg font-semibold">Execution status: {status}</p>
 			) : null}
-			<p className="text-lg font-semibold">Action result:</p>
+			<p className="text-lg font-semibold">{customTitle || "Action result:"}</p>
 			<pre className="mt-4">{JSON.stringify(result, null, 1)}</pre>
 		</div>
 	);