feat: squash

libs/db/ui/dashboard.tsx

@@ -0,0 +1,80 @@
+import { Banner } from '@payloadcms/ui/elements/Banner'
+import React from 'react'
+
+import { SeedButton } from './seed-button'
+
+const baseClass = 'before-dashboard'
+
+const BeforeDashboard: React.FC = () => {
+  return (
+    <div className={baseClass}>
+      <Banner className={`${baseClass}__banner`} type="success">
+        <h4>Welcome to your dashboard!</h4>
+      </Banner>
+      Here&apos;s what to do next:
+      <ul className={`${baseClass}__instructions`}>
+        <li>
+          <SeedButton />
+          {' with a few pages, posts, and projects to jump-start your new site, then '}
+          <a href="/" target="_blank">
+            visit your website
+          </a>
+          {' to see the results.'}
+        </li>
+        <li>
+          If you created this repo using Payload Cloud, head over to GitHub and clone it to your
+          local machine. It will be under the
+          {' '}
+          <i>GitHub Scope</i>
+          {' '}
+          that you selected when creating
+          this project.
+        </li>
+        <li>
+          {'Modify your '}
+          <a
+            href="https://payloadcms.com/docs/configuration/collections"
+            rel="noopener noreferrer"
+            target="_blank"
+          >
+            collections
+          </a>
+          {' and add more '}
+          <a
+            href="https://payloadcms.com/docs/fields/overview"
+            rel="noopener noreferrer"
+            target="_blank"
+          >
+            fields
+          </a>
+          {' as needed. If you are new to Payload, we also recommend you check out the '}
+          <a
+            href="https://payloadcms.com/docs/getting-started/what-is-payload"
+            rel="noopener noreferrer"
+            target="_blank"
+          >
+            Getting Started
+          </a>
+          {' docs.'}
+        </li>
+        <li>
+          Commit and push your changes to the repository to trigger a redeployment of your project.
+        </li>
+      </ul>
+      {'Pro Tip: This block is a '}
+      <a
+        href="https://payloadcms.com/docs/admin/components#base-component-overrides"
+        rel="noopener noreferrer"
+        target="_blank"
+      >
+        custom component
+      </a>
+      , you can remove it at any time by updating your
+      {' '}
+      <strong>payload.config</strong>
+      .
+    </div>
+  )
+}
+
+export default BeforeDashboard

libs/db/ui/seed-button.tsx

@@ -0,0 +1,93 @@
+'use client'
+
+import { Button } from '@cuhacking/shared/ui/button'
+import { toast } from '@payloadcms/ui'
+import React, { useCallback, useState } from 'react'
+
+const SuccessMessage: React.FC = () => (
+  <div>
+    Database seeded! You can now
+    {' '}
+    <a target="_blank" href="/">
+      visit your website
+    </a>
+  </div>
+)
+
+export const SeedButton: React.FC = () => {
+  const [loading, setLoading] = useState(false)
+  const [seeded, setSeeded] = useState(false)
+  const [error, setError] = useState(null)
+
+  const handleClick = useCallback(
+    async (e) => {
+      e.preventDefault()
+
+      if (seeded) {
+        toast.info('Database already seeded.')
+        return
+      }
+      if (loading) {
+        toast.info('Seeding already in progress.')
+        return
+      }
+      if (error) {
+        toast.error(`An error occurred, please refresh and try again.`)
+        return
+      }
+      setLoading(true)
+      try {
+        toast.promise(
+          new Promise((resolve, reject) => {
+            try {
+              fetch('/seed', { method: 'POST', credentials: 'include' })
+                .then((res) => {
+                  if (res.ok) {
+                    resolve(true)
+                    setSeeded(true)
+                  }
+                  else {
+                    // reject('An error occurred while seeding.')
+                    setLoading(false)
+                  }
+                })
+                .catch((_error) => {
+                  throw new Error('Error occured while seed')
+                  /* reject(error) */
+                })
+            }
+            catch (error) {
+              reject(error)
+            }
+          }),
+          {
+            loading: 'Seeding with data....',
+            success: <SuccessMessage />,
+            error: 'An error occurred while seeding.',
+          },
+        )
+      }
+      catch (err) {
+        setError(err)
+      }
+    },
+    [loading, seeded, error],
+  )
+
+  let message = ''
+  if (loading)
+    message = ' (seeding...)'
+  if (seeded)
+    message = ' (done!)'
+  if (error)
+    message = ` (error: ${error})`
+
+  return (
+    <>
+      <Button onClick={handleClick}>
+        Seed your database
+      </Button>
+      {message}
+    </>
+  )
+}