89 lines
2.2 KiB
TypeScript
89 lines
2.2 KiB
TypeScript
'use client'
|
|
|
|
import React, { Fragment, useCallback, useState } from 'react'
|
|
import { toast } from '@payloadcms/ui'
|
|
|
|
import './index.scss'
|
|
|
|
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 | string>(null)
|
|
|
|
const handleClick = useCallback(
|
|
async (e: React.MouseEvent<HTMLButtonElement>) => {
|
|
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('/next/seed', { method: 'POST', credentials: 'include' })
|
|
.then((res) => {
|
|
if (res.ok) {
|
|
resolve(true)
|
|
setSeeded(true)
|
|
} else {
|
|
reject('An error occurred while seeding.')
|
|
}
|
|
})
|
|
.catch((error) => {
|
|
reject(error)
|
|
})
|
|
} catch (error) {
|
|
reject(error)
|
|
}
|
|
}),
|
|
{
|
|
loading: 'Seeding with data....',
|
|
success: <SuccessMessage />,
|
|
error: 'An error occurred while seeding.',
|
|
},
|
|
)
|
|
} catch (err) {
|
|
const error = err instanceof Error ? err.message : String(err)
|
|
setError(error)
|
|
}
|
|
},
|
|
[loading, seeded, error],
|
|
)
|
|
|
|
let message = ''
|
|
if (loading) message = ' (seeding...)'
|
|
if (seeded) message = ' (done!)'
|
|
if (error) message = ` (error: ${error})`
|
|
|
|
return (
|
|
<Fragment>
|
|
<button className="seedButton" onClick={handleClick}>
|
|
Seed your database
|
|
</button>
|
|
{message}
|
|
</Fragment>
|
|
)
|
|
}
|