add query params for title and body in editor

Author: Roshan Jossy

src/components/story/StoryEditor.tsx

@@ -1,4 +1,5 @@
 import EditorJS, { LogLevels, OutputData } from '@editorjs/editorjs'
+import { Http2ServerRequest } from 'http2'
 import React, { useEffect, useRef, useState } from 'react'
 import { graphql, useMutation } from 'react-relay'
 import Button from '../Button'
@@ -36,11 +37,18 @@ const getAbstract = (content: OutputData) => {
 
 const EDITTOR_HOLDER_ID = 'editorjs'
 
-export default function Editor() {
-  const [postTitle, setPostTitle] = useState('Your Title Goes Here')
+type EditorProps = {
+  title?: string
+  body?: string
+}
+
+export default function Editor({ title, body }: EditorProps) {
+  const [postTitle, setPostTitle] = useState(title || 'Your Title Goes Here')
   const ejInstance = useRef<EditorJS | null>()
-  const [editorData, setEditorData] = React.useState(DEFAULT_INITIAL_DATA)
 
+  const [editorData, setEditorData] = React.useState(
+    (body && JSON.parse(decodeURI(body))) || DEFAULT_INITIAL_DATA
+  )
   useEffect(() => {
     if (!ejInstance.current) {
       initEditor()

src/pages/story.tsx

@@ -1,17 +1,20 @@
 import dynamic from 'next/dynamic'
+import { useRouter } from 'next/router'
 import Layout from '../components/Layout'
 
 const Editor = dynamic(() => import('../components/story/StoryEditor'), {
   ssr: false,
 })
 export default function Story() {
+  const router = useRouter()
+  const { title, body } = router.query
   return (
     <div>
       <Layout
         sidebarContentRight={<div>Promoted</div>}
         sidebarContentLeft={<div>Reactions</div>}
       >
-        <Editor />
+        <Editor title={title as string} body={body as string} />
       </Layout>
     </div>
   )