Shaping up the markdown parts a bit, introducing service file

Author: megoth

markdown/index.tsx

@@ -3,6 +3,7 @@ import solidUi from 'solid-ui'
 import { NamedNode, sym } from 'rdflib'
 import { MarkdownController } from './markdown.controller'
 import { MarkdownView } from './markdown.view'
+import { saveMarkdown } from './markdown.service'
 
 const { icons, store } = solidUi
 
@@ -12,16 +13,14 @@ export const Pane: PaneDefinition = {
   label: (subject: NamedNode) => subject.uri.endsWith('.md') ? 'Handle markdown file' : null,
   mintNew: function (options: NewPaneOptions) {
     const newInstance = createFileName(options)
-    return store.fetcher.webOperation('PUT', newInstance, {
-      data: '# This is your markdown file\n\nHere be stuff!',
-      contentType: 'text/markdown; charset=UTF-8'
-    })
-      .then(() => ({
+    return saveMarkdown(newInstance.uri, '# This is your markdown file\n\nHere be stuff!')
+      .then((): NewPaneOptions => ({
         newInstance,
         ...options
       }))
       .catch((err: any) => {
         console.error('Error creating new instance of markdown file', err)
+        return options
       })
   },
   render: (subject: NamedNode) => {

markdown/markdown.controller.ts

@@ -1,8 +1,6 @@
-import solidUi from 'solid-ui'
 import { S } from 'surplus'
 import { DataSignal } from 's-js/src/S'
-
-const { store } = solidUi
+import { loadMarkdown, saveMarkdown } from './markdown.service'
 
 export enum STATE {
   'LOADING',
@@ -14,17 +12,13 @@ export class MarkdownController {
   public state: DataSignal<STATE>
   public rawText: DataSignal<string>
 
-  // public renderedText: DataSignal<string>
-
   constructor (private subjectUri: string) {
     this.state = S.value(STATE.LOADING)
     this.rawText = S.value('')
-    // this.renderedText = S.value('')
 
-    store.fetcher.webOperation('GET', subjectUri)
-      .then((response: any) => {
-        this.rawText(response.responseText)
-        // this.renderedText(marked(response.responseText))
+    loadMarkdown(subjectUri)
+      .then((responseText) => {
+        this.rawText(responseText)
         this.state(STATE.RENDERING)
       })
   }
@@ -33,20 +27,9 @@ export class MarkdownController {
     const wasEditing = this.state() === STATE.EDITING
     if (wasEditing) {
       this.state(STATE.LOADING)
-      return MarkdownController.save(this.subjectUri, this.rawText())
+      return saveMarkdown(this.subjectUri, this.rawText())
         .then(() => this.state(STATE.RENDERING))
     }
     this.state(STATE.EDITING)
   }
-
-  update (fieldName: string): void {
-    console.log(fieldName, this)
-  }
-
-  static save (uri: string, content: string): Promise<any> {
-    return store.fetcher.webOperation('PUT', uri, {
-      data: content,
-      contentType: 'text/markdown; charset=UTF-8'
-    })
-  }
 }

markdown/markdown.service.ts

@@ -0,0 +1,15 @@
+import solidUi from 'solid-ui'
+
+const { store } = solidUi
+
+export function loadMarkdown (uri: string): Promise<string> {
+  return store.fetcher.webOperation('GET', uri)
+    .then((response: any) => response.responseText)
+}
+
+export function saveMarkdown (uri: string, data: string): Promise<any> {
+  return store.fetcher.webOperation('PUT', uri, {
+    data,
+    contentType: 'text/markdown; charset=UTF-8'
+  })
+}

markdown/markdown.view.tsx

@@ -9,17 +9,17 @@ export const MarkdownView = (controller: MarkdownController) =>
   <section>
     {controller.state() === STATE.LOADING ? 'LOADING' : null}
     {controller.state() === STATE.RENDERING
-      ? <div>
-        <button onClick={() => controller.toggle()}>EDIT</button>
+      ? [
+        <button onClick={() => controller.toggle()}>EDIT</button>,
         <div fn={(el: HTMLElement) => {
           el.innerHTML = marked(controller.rawText())
         }}/>
-      </div>
+      ]
       : null}
     {controller.state() === STATE.EDITING
-      ? <div>
-        <button onClick={() => controller.toggle()}>RENDER</button>
-        <textarea width='100%' rows={20} fn={data(controller.rawText)}>{controller.rawText}</textarea>
-      </div>
+      ? [
+        <button onClick={() => controller.toggle()}>RENDER</button>,
+        <textarea fn={data(controller.rawText)}>{controller.rawText}</textarea>
+      ]
       : null}
   </section>