From ed3563470c99f352988cb05ee7e282ef6471a245 Mon Sep 17 00:00:00 2001
From: Paul Popus <paul@nouance.io>
Date: Tue, 12 Mar 2024 23:12:46 -0300
Subject: [PATCH] chore: uncomment out the example of a server component with
 local api running

---
 payload.config.ts          | 58 +++++++++++++++++++-------------------
 src/app/(app)/page.tsx     |  3 +-
 src/components/Example.tsx |  2 +-
 3 files changed, 31 insertions(+), 32 deletions(-)

diff --git a/payload.config.ts b/payload.config.ts
index 5f740e6..b95debe 100644
--- a/payload.config.ts
+++ b/payload.config.ts
@@ -1,4 +1,4 @@
-import path from "path";
+import path from 'path'
 // import { postgresAdapter } from '@payloadcms/db-postgres'
 import {
   AlignFeature,
@@ -17,50 +17,50 @@ import {
   RelationshipFeature,
   UnorderedListFeature,
   UploadFeature,
-} from "@payloadcms/richtext-lexical";
+} from '@payloadcms/richtext-lexical'
 //import { slateEditor } from '@payloadcms/richtext-slate'
-import { mongooseAdapter } from "@payloadcms/db-mongodb";
-import { buildConfig } from "payload/config";
-import sharp from "sharp";
-import { fileURLToPath } from "url";
+import { mongooseAdapter } from '@payloadcms/db-mongodb'
+import { buildConfig } from 'payload/config'
+import sharp from 'sharp'
+import { fileURLToPath } from 'url'
 
-const filename = fileURLToPath(import.meta.url);
-const dirname = path.dirname(filename);
+const filename = fileURLToPath(import.meta.url)
+const dirname = path.dirname(filename)
 
 export default buildConfig({
   //editor: slateEditor({}),
   editor: lexicalEditor(),
   collections: [
     {
-      slug: "pages",
+      slug: 'pages',
       admin: {
-        useAsTitle: "title",
+        useAsTitle: 'title',
       },
       fields: [
         {
-          name: "title",
-          type: "text",
+          name: 'title',
+          type: 'text',
         },
         {
-          name: "content",
-          type: "richText",
+          name: 'content',
+          type: 'richText',
         },
       ],
     },
     {
-      slug: "media",
+      slug: 'media',
       upload: true,
       fields: [
         {
-          name: "text",
-          type: "text",
+          name: 'text',
+          type: 'text',
         },
       ],
     },
   ],
-  secret: process.env.PAYLOAD_SECRET || "",
+  secret: process.env.PAYLOAD_SECRET || '',
   typescript: {
-    outputFile: path.resolve(dirname, "payload-types.ts"),
+    outputFile: path.resolve(dirname, 'payload-types.ts'),
   },
   // db: postgresAdapter({
   //   pool: {
@@ -68,29 +68,29 @@ export default buildConfig({
   //   }
   // }),
   db: mongooseAdapter({
-    url: process.env.MONGODB_URI || "",
+    url: process.env.MONGODB_URI || '',
   }),
   admin: {
     autoLogin: {
-      email: "dev@payloadcms.com",
-      password: "test",
+      email: 'dev@payloadcms.com',
+      password: 'test',
       prefillOnly: true,
     },
   },
   async onInit(payload) {
     const existingUsers = await payload.find({
-      collection: "users",
+      collection: 'users',
       limit: 1,
-    });
+    })
 
     if (existingUsers.docs.length === 0) {
       await payload.create({
-        collection: "users",
+        collection: 'users',
         data: {
-          email: "dev@payloadcms.com",
-          password: "test",
+          email: 'dev@payloadcms.com',
+          password: 'test',
         },
-      });
+      })
     }
   },
   // Sharp is now an optional dependency -
@@ -100,4 +100,4 @@ export default buildConfig({
   // This is temporary - we may make an adapter pattern
   // for this before reaching 3.0 stable
   sharp,
-});
+})
diff --git a/src/app/(app)/page.tsx b/src/app/(app)/page.tsx
index 9ad2fbf..971d5c8 100644
--- a/src/app/(app)/page.tsx
+++ b/src/app/(app)/page.tsx
@@ -36,8 +36,7 @@ const Page = () => {
         contains an example of a custom route running the Local API.
       </p>
 
-      {/* Commented out for now due to bug */}
-      {/* <Example /> */}
+      <Example />
 
       <p>You can use the Local API in your server components like this:</p>
       <pre>
diff --git a/src/components/Example.tsx b/src/components/Example.tsx
index f8355b5..76fd7cc 100644
--- a/src/components/Example.tsx
+++ b/src/components/Example.tsx
@@ -4,7 +4,7 @@ import configPromise from '@payload-config'
 
 const Example: React.FC = async () => {
   const payload = await getPayload({ config: configPromise })
-  const url = payload.config.serverURL
+  const url = payload.getAdminURL()
   return <div>The admin panel is running at: {url}</div>
 }