[Work in progress] Separation of concerns using Surplus

index.js

@@ -47,6 +47,10 @@ if (typeof window !== 'undefined') {
 
 let register = panes.register
 
+register(require('./trustedApplications/trustedApplicationsPane').default) // manage your trusted applications
+
+register(require('./markdown/index.tsx').Pane)
+
 register(require('issue-pane'))
 register(require('contacts-pane'))
 
@@ -130,7 +134,6 @@ register(require('./internalPane.js'))
 // The home pane is a 2016 experiment. Always there.
 
 register(require('./profile/profilePane').default) // edit your public profile
-register(require('./trustedApplications/trustedApplicationsPane').default) // manage your trusted applications
 register(require('./home/homePane').default)
 
 // ENDS

markdown/index.tsx

@@ -0,0 +1,38 @@
+import { NewPaneOptions, PaneDefinition } from '../types'
+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
+
+export const Pane: PaneDefinition = {
+  icon: `${icons.iconBase}noun_79217.svg`,
+  name: 'MarkdownPane',
+  label: (subject: NamedNode) => subject.uri.endsWith('.md') ? 'Handle markdown file' : null,
+  mintNew: function (options: NewPaneOptions) {
+    const newInstance = createFileName(options)
+    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) => {
+    const controller = new MarkdownController(subject.uri)
+    return MarkdownView(controller)
+  }
+}
+
+function createFileName (options: NewPaneOptions): NamedNode {
+  let uri = options.newBase
+  if (uri.endsWith('/')) {
+    uri = uri.slice(0, -1) + '.md'
+  }
+  return sym(uri)
+}

markdown/markdown.controller.ts

@@ -0,0 +1,35 @@
+import { S } from 'surplus'
+import { DataSignal } from 's-js/src/S'
+import { loadMarkdown, saveMarkdown } from './markdown.service'
+
+export enum STATE {
+  'LOADING',
+  'RENDERING',
+  'EDITING'
+}
+
+export class MarkdownController {
+  public state: DataSignal<STATE>
+  public rawText: DataSignal<string>
+
+  constructor (private subjectUri: string) {
+    this.state = S.value(STATE.LOADING)
+    this.rawText = S.value('')
+
+    loadMarkdown(subjectUri)
+      .then((responseText) => {
+        this.rawText(responseText)
+        this.state(STATE.RENDERING)
+      })
+  }
+
+  toggle () {
+    const wasEditing = this.state() === STATE.EDITING
+    if (wasEditing) {
+      this.state(STATE.LOADING)
+      return saveMarkdown(this.subjectUri, this.rawText())
+        .then(() => this.state(STATE.RENDERING))
+    }
+    this.state(STATE.EDITING)
+  }
+}

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

@@ -0,0 +1,25 @@
+import { MarkdownController, STATE } from './markdown.controller'
+import * as Surplus from 'surplus'
+import data from 'surplus-mixin-data'
+import marked from 'marked'
+
+const { S } = Surplus
+
+export const MarkdownView = (controller: MarkdownController) =>
+  <section>
+    {controller.state() === STATE.LOADING ? 'LOADING' : null}
+    {controller.state() === STATE.RENDERING
+      ? [
+        <button onClick={() => controller.toggle()}>EDIT</button>,
+        <div fn={(el: HTMLElement) => {
+          el.innerHTML = marked(controller.rawText())
+        }}/>
+      ]
+      : null}
+    {controller.state() === STATE.EDITING
+      ? [
+        <button onClick={() => controller.toggle()}>RENDER</button>,
+        <textarea fn={data(controller.rawText)}>{controller.rawText}</textarea>
+      ]
+      : null}
+  </section>