62 lines
1.6 KiB
TypeScript
62 lines
1.6 KiB
TypeScript
import dynamic from 'next/dynamic'
|
|
import Layout from '@/layouts/Home'
|
|
import { useState } from 'react'
|
|
import { OutputData } from "@editorjs/editorjs";
|
|
import { getPageBySlug } from '@/utils/pb';
|
|
import { api } from '@/utils/api';
|
|
|
|
const ReactEditorJS = dynamic(() => import('@/components/ReactEditor'), {
|
|
ssr: false
|
|
})
|
|
|
|
export default function Editor({data: pbData, slug, title}: {data: OutputData, slug: string, title: string}) {
|
|
const [data, setData] = useState<OutputData>(pbData);
|
|
const {mutate, isLoading, data: data2, isError} = api.pages.updatePage.useMutation();
|
|
|
|
if (data2) console.log(data2)
|
|
|
|
const handleSubmit = () => {
|
|
if (!data) return
|
|
mutate({
|
|
slug,
|
|
title,
|
|
content: data
|
|
})
|
|
}
|
|
|
|
return (
|
|
<Layout title={'Edition de ' + title}>
|
|
<button onClick={handleSubmit}>Save</button>
|
|
{isLoading && <p>Loading...</p>}
|
|
{data2 && !isError && <p>Saved!</p>}
|
|
{isError && <p>Error!</p>}
|
|
|
|
<h1>React EditorJS</h1>
|
|
<div className="container mx-auto p-8">
|
|
<h2>EditorJS with React</h2>
|
|
<div>
|
|
<ReactEditorJS autofocus data={data} onChange={setData} holder='editorjs' />
|
|
</div>
|
|
<h2>Output</h2>
|
|
<pre>{JSON.stringify(data, null, 2)}</pre>
|
|
</div>
|
|
</Layout>
|
|
)
|
|
}
|
|
|
|
export async function getServerSideProps({query}: {query: {[key: string]: string}}) {
|
|
if (!query.page) return {notFound: true}
|
|
|
|
const data = await getPageBySlug(query.page);
|
|
|
|
if (!data.data) return {notFound: true};
|
|
|
|
return {
|
|
props: {
|
|
data: data.data.content,
|
|
slug: query.page,
|
|
title: data.data.title
|
|
}
|
|
}
|
|
}
|