refactor(examples/nextjs-v15): update next/headers to async

storybookjs · Nov 15, 2024 · 660ea90 · 660ea90
1 parent 8accdb2
commit 660ea90
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 20 deletions.
diff --git a/examples/nextjs-v15/src/app/components/Header/Header.stories.tsx b/examples/nextjs-v15/src/app/components/Header/Header.stories.tsx
@@ -16,17 +16,17 @@ type Story = StoryObj<typeof NextHeader>;
 
 export const Default: Story = {
   loaders: async () => {
-    cookies().set("firstName", "Jane");
-    cookies().set({
+    (await cookies()).set("firstName", "Jane");
+    (await cookies()).set({
       name: "lastName",
       value: "Doe",
     });
-    headers().set("timezone", "Central European Summer Time");
+    (await headers()).set("timezone", "Central European Summer Time");
   },
   play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement);
-    const headersMock = headers();
-    const cookiesMock = cookies();
+    const headersMock = await headers();
+    const cookiesMock = await cookies();
     await step(
       "Cookie and header store apis are called upon rendering",
       async () => {

diff --git a/examples/nextjs-v15/src/app/components/Header/Header.tsx b/examples/nextjs-v15/src/app/components/Header/Header.tsx
@@ -3,28 +3,26 @@ import { cookies, headers } from "next/headers";
 export default async function Component() {
   async function handleClick() {
     "use server";
-    cookies().set("user-id", "encrypted-id");
+    (await cookies()).set("user-id", "encrypted-id");
   }
 
   return (
     <>
       <h3>Cookies:</h3>
-      {cookies()
-        .getAll()
-        .map(({ name, value }) => {
-          return (
-            <p
-              key={name}
-              style={{ display: "flex", flexDirection: "row", gap: 8 }}
-            >
-              <strong>Name:</strong> <span>{name}</span>
-              <strong>Value:</strong> <span>{value}</span>
-            </p>
-          );
-        })}
+      {(await cookies()).getAll().map(({ name, value }) => {
+        return (
+          <p
+            key={name}
+            style={{ display: "flex", flexDirection: "row", gap: 8 }}
+          >
+            <strong>Name:</strong> <span>{name}</span>
+            <strong>Value:</strong> <span>{value}</span>
+          </p>
+        );
+      })}
 
       <h3>Headers:</h3>
-      {Array.from(headers().entries()).map(
+      {Array.from((await headers()).entries()).map(
         ([name, value]: [string, string]) => {
           return (
             <p