Handle loading of data in a wrapper component

Author: Vinnl

markdown/container.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react'
+import { loadMarkdown, saveMarkdown } from './service'
+import { View } from './view'
+import { ContainerProps } from '../types'
+
+export const Container: React.FC<ContainerProps> = (props) => {
+  const [markdown, setMarkdown] = React.useState<undefined | null | string>()
+
+  React.useEffect(() => {
+    loadMarkdown(props.store, props.subject.uri)
+      .then((markdown) => setMarkdown(markdown))
+      .catch(() => setMarkdown(null))
+  })
+
+  if (typeof markdown === 'undefined') {
+    return <section aria-busy={true}>Loading&hellip;</section>
+  }
+  if (markdown === null) {
+    return <section>Error loading markdown :(</section>
+  }
+
+  const saveHandler = (newMarkdown: string) => saveMarkdown(props.store, props.subject.uri, newMarkdown)
+
+  return (
+    <section>
+      <View
+        markdown={markdown}
+        onSave={saveHandler}
+      />
+    </section>
+  )
+}

markdown/index.tsx

@@ -3,8 +3,8 @@ import * as ReactDOM from 'react-dom'
 import { PaneDefinition, NewPaneOptions } from '../types'
 import $rdf from 'rdflib'
 import solidUi from 'solid-ui'
-import { saveMarkdown, loadMarkdown } from './service'
-import { View } from './view'
+import { saveMarkdown } from './service'
+import { Container } from './container'
 
 const { icons, store } = solidUi
 
@@ -26,16 +26,8 @@ export const Pane: PaneDefinition = {
   },
   render: (subject) => {
     const container = document.createElement('div')
+    ReactDOM.render(<Container store={store} subject={subject}/>, container)
 
-    loadMarkdown(store, subject.uri).then((markdown) => {
-      const view = (
-        <View
-          markdown={markdown}
-          onSave={(newMarkdown) => saveMarkdown(store, subject.uri, newMarkdown)}
-        />
-      )
-      ReactDOM.render(view, container)
-    })
     return container
   }
 }

markdown/view.tsx

@@ -7,39 +7,35 @@ interface Props {
 }
 
 export const View: React.FC<Props> = (props) => {
-  const [phase, setPhase] = React.useState<'loading' | 'rendering' | 'editing'>('rendering')
+  const [phase, setPhase] = React.useState<'saving' | 'rendering' | 'editing'>('rendering')
   const [rawText, setRawText] = React.useState(props.markdown)
 
   function storeMarkdown () {
-    setPhase('loading')
+    setPhase('saving')
     props.onSave(rawText).then(() => {
       setPhase('rendering')
     })
   }
 
-  if (phase === 'loading') {
-    return <section aria-busy={true}>Loading&hellip;</section>
+  if (phase === 'saving') {
+    return <span aria-busy={true}>Loading&hellip;</span>
   }
 
   if (phase === 'editing') {
     return (
-      <section>
-        <form onSubmit={(e) => { e.preventDefault(); storeMarkdown() }}>
-          <textarea
-            onChange={(e) => { setRawText(e.target.value) }}
-            defaultValue={rawText}/>
-          <button type="submit">RENDER</button>,
-        </form>
-      </section>
+      <form onSubmit={(e) => { e.preventDefault(); storeMarkdown() }}>
+        <textarea
+          onChange={(e) => { setRawText(e.target.value) }}
+          defaultValue={rawText}/>
+        <button type="submit">RENDER</button>,
+      </form>
     )
   }
 
   return (
-    <section>
-      <form onSubmit={(event) => { event.preventDefault(); setPhase('editing') }}>
-        <Markdown source={rawText}/>
-        <button type="submit">EDIT</button>
-      </form>
-    </section>
+    <form onSubmit={(event) => { event.preventDefault(); setPhase('editing') }}>
+      <Markdown source={rawText}/>
+      <button type="submit">EDIT</button>
+    </form>
   )
 }

types.ts

@@ -39,3 +39,8 @@ export interface RevampPaneDefinition {
   view: (params: ViewParams) => void;
   label: (subject: NamedNode, store: IndexedFormula) => string | null;
 };
+
+export interface ContainerProps {
+  store: IndexedFormula;
+  subject: NamedNode;
+}