Merge pull request #198 from solid/deconstructing-ui

Importing specific parts of solid-ui

Author: megoth

src/dashboard/basicPreferences.source.ts

@@ -1,17 +1,13 @@
 import { PaneDefinition } from '../types'
-import UI from 'solid-ui'
-import namespace from 'solid-namespace'
-import { NamedNode, parse, namedNode, IndexedFormula } from 'rdflib'
+import { authn, icons, ns, store, widgets } from 'solid-ui'
+import { NamedNode, parse, IndexedFormula } from 'rdflib'
 import { renderTrustedApplicationsOptions } from './trustedApplications/trustedApplicationsPane'
 
 import preferencesFormText from './preferencesFormText.ttl'
 import ontologyData from './ontologyData.ttl'
 
-const kb = UI.store
-const ns = namespace({ namedNode } as any)
-
 export const basicPreferencesPane: PaneDefinition = {
-  icon: UI.icons.iconBase + 'noun_Sliders_341315_000000.svg',
+  icon: icons.iconBase + 'noun_Sliders_341315_000000.svg',
   name: 'basicPreferences',
   label: _subject => {
     return null
@@ -22,7 +18,7 @@ export const basicPreferencesPane: PaneDefinition = {
   render: (subject: NamedNode, dom: HTMLDocument) => {
     function complainIfBad (ok: Boolean, mess: any) {
       if (ok) return
-      container.appendChild(UI.widgets.errorMessageBlock(dom, mess, '#fee'))
+      container.appendChild(widgets.errorMessageBlock(dom, mess, '#fee'))
     }
 
     const container = dom.createElement('div')
@@ -31,23 +27,23 @@ export const basicPreferencesPane: PaneDefinition = {
 
     function loadData (doc: NamedNode, turtle: String) {
       doc = doc.doc() // remove # from URI if nec
-      if (!kb.holds(undefined, undefined, undefined, doc)) {
+      if (!store.holds(undefined, undefined, undefined, doc)) {
         // If not loaded already
-        ;(parse as any)(turtle, kb, doc.uri, 'text/turtle', null) // Load form directly
+        ;(parse as any)(turtle, store, doc.uri, 'text/turtle', null) // Load form directly
       }
     }
-    const preferencesForm = kb.sym(
+    const preferencesForm = store.sym(
       'urn:uuid:93774ba1-d3b6-41f2-85b6-4ae27ffd2597#this'
     )
     loadData(preferencesForm, preferencesFormText)
 
-    const ontologyExtra = kb.sym(
+    const ontologyExtra = store.sym(
       'urn:uuid:93774ba1-d3b6-41f2-85b6-4ae27ffd2597-ONT'
     )
     loadData(ontologyExtra, ontologyData)
 
     async function doRender () {
-      const context = await UI.authn.logInLoadPreferences({
+      const context = await authn.logInLoadPreferences({
         dom,
         div: container
       })
@@ -59,8 +55,8 @@ export const basicPreferencesPane: PaneDefinition = {
         )
         return
       }
-      addDeletionLinks(container, kb, context.me)
-      const appendedForm = UI.widgets.appendForm(
+      addDeletionLinks(container, store, context.me)
+      const appendedForm = widgets.appendForm(
         dom,
         formArea,
         {},

src/dashboard/dashboardPane.source.ts

@@ -1,11 +1,11 @@
 import { PaneDefinition, SolidSession } from '../types'
-import UI from 'solid-ui'
+import { authn, icons, store } from 'solid-ui'
 import panes from 'pane-registry'
 import { NamedNode, sym } from 'rdflib'
 import { generateHomepage } from './homepage'
 
 export const dashboardPaneSource: PaneDefinition = {
-  icon: UI.icons.iconBase + 'noun_547570.svg',
+  icon: icons.iconBase + 'noun_547570.svg',
   name: 'dashboard',
   label: subject => {
     if (subject.uri === subject.site().uri) {
@@ -15,7 +15,7 @@ export const dashboardPaneSource: PaneDefinition = {
   },
   render: (subject, dom) => {
     const container = dom.createElement('div')
-    UI.authn.solidAuthClient.trackSession(async (session: SolidSession) => {
+    authn.solidAuthClient.trackSession(async (session: SolidSession) => {
       container.innerHTML = ''
       buildPage(container, session ? sym(session.webId) : null, dom, subject)
     })
@@ -51,7 +51,7 @@ function buildHomePage (container: HTMLElement, subject: NamedNode) {
   link.rel = 'stylesheet'
   link.href = '/common/css/bootstrap.min.css'
   shadow.appendChild(link)
-  generateHomepage(subject, UI.store, UI.store.fetcher).then(homepage =>
+  generateHomepage(subject, store, store.fetcher).then(homepage =>
     shadow.appendChild(homepage)
   )
 }

src/dashboard/homepage.ts

@@ -1,7 +1,5 @@
 import { Fetcher, IndexedFormula, NamedNode, sym } from 'rdflib'
-import UI from 'solid-ui'
-
-const ns = UI.ns
+import { ns } from 'solid-ui'
 
 export async function generateHomepage (
   subject: NamedNode,

src/dashboard/trustedApplications/trustedApplicationsPane.ts

@@ -1,16 +1,11 @@
-import UI from 'solid-ui'
-import { NamedNode, IndexedFormula, sym } from 'rdflib'
-
-import { Namespaces } from 'solid-namespace'
+import { authn, ns, store, widgets } from 'solid-ui'
+import { NamedNode, sym } from 'rdflib'
 
 import {
   getStatementsToAdd,
   getStatementsToDelete
 } from './trustedApplicationsUtils'
 
-const kb: IndexedFormula = UI.store
-const ns: Namespaces = UI.ns
-
 const thisColor = '#418d99'
 
 interface FormElements {
@@ -38,18 +33,18 @@ export function renderTrustedApplicationsOptions (dom: HTMLDocument) {
   statusArea.setAttribute('style', 'padding: 0.7em;')
 
   const context = { dom: dom, div: main, statusArea: statusArea, me: null }
-  UI.authn.logInLoadProfile(context).then(
+  authn.logInLoadProfile(context).then(
     (context: any) => {
       let subject: NamedNode = context.me
 
       const profile = subject.doc()
-      const editable = UI.store.updater.editable(profile.uri, kb)
+      const editable = store.updater.editable(profile.uri, store)
 
       main.appendChild(createText('h3', 'Manage your trusted applications'))
 
       if (!editable) {
         main.appendChild(
-          UI.widgets.errorMessageBlock(
+          widgets.errorMessageBlock(
             dom,
             `Your profile ${
               subject.doc().uri
@@ -91,7 +86,7 @@ export function renderTrustedApplicationsOptions (dom: HTMLDocument) {
       )
     },
     (err: any) => {
-      statusArea.appendChild(UI.widgets.errorMessageBlock(dom, err))
+      statusArea.appendChild(widgets.errorMessageBlock(dom, err))
     }
   )
   return div
@@ -111,12 +106,12 @@ function createApplicationTable (subject: NamedNode) {
   applicationsTable.appendChild(header)
 
   // creating rows
-  ;(kb.each(subject, ns.acl('trustedApp'), undefined, undefined) as any)
+  ;(store.each(subject, ns.acl('trustedApp'), undefined, undefined) as any)
     .flatMap((app: any) => {
-      return kb
+      return store
         .each(app, ns.acl('origin'), undefined, undefined)
         .map(origin => ({
-          appModes: kb.each(app, ns.acl('mode'), undefined, undefined),
+          appModes: store.each(app, ns.acl('mode'), undefined, undefined),
           origin
         }))
     })
@@ -242,7 +237,7 @@ function createApplicationEntry (
     const deletions = getStatementsToDelete(
       trustedApplicationState.origin || origin,
       subject,
-      kb,
+      store,
       ns
     )
     const additions = getStatementsToAdd(
@@ -252,7 +247,7 @@ function createApplicationEntry (
       subject,
       ns
     )
-    ;(kb as any).updater.update(deletions, additions, handleUpdateResponse)
+    ;(store as any).updater.update(deletions, additions, handleUpdateResponse)
   }
 
   function removeApplication (event: Event) {
@@ -266,8 +261,8 @@ function createApplicationEntry (
       )
     }
 
-    const deletions = getStatementsToDelete(origin, subject, kb, ns)
-    ;(kb as any).updater.update(deletions, [], handleUpdateResponse)
+    const deletions = getStatementsToDelete(origin, subject, store, ns)
+    ;(store as any).updater.update(deletions, [], handleUpdateResponse)
   }
 
   function handleUpdateResponse (uri: any, success: boolean, errorBody: any) {

src/home/homePane.source.ts

@@ -9,11 +9,11 @@
  */
 
 import { PaneDefinition } from '../types'
-import * as UI from 'solid-ui'
+import { authn, create, icons } from 'solid-ui'
 import * as panes from 'pane-registry'
 
 const HomePaneSource: PaneDefinition = {
-  icon: UI.icons.iconBase + 'noun_547570.svg', // noun_25830
+  icon: icons.iconBase + 'noun_547570.svg', // noun_25830
 
   global: true,
 
@@ -48,28 +48,26 @@ const HomePaneSource: PaneDefinition = {
         statusArea: div,
         me: me
       }
-      const relevantPanes = await UI.authn.filterAvailablePanes(panes.list)
-      UI.create.newThingUI(creationContext, relevantPanes) // newUI Have to pass panes down
+      const relevantPanes = await authn.filterAvailablePanes(panes.list)
+      create.newThingUI(creationContext, relevantPanes) // newUI Have to pass panes down
 
       div.appendChild(dom.createElement('h4')).textContent = 'Private things'
       // TODO: Replace by a common, representative interface
       type AuthContext = unknown
-      UI.authn
+      authn
         .registrationList(context, { private: true })
         .then(function (context: AuthContext) {
           div.appendChild(dom.createElement('h4')).textContent = 'Public things'
           div.appendChild(dom.createElement('p')).textContent =
             'Things in this list are visible to others.'
-          UI.authn
-            .registrationList(context, { public: true })
-            .then(function () {
-              // done
-            })
+          authn.registrationList(context, { public: true }).then(function () {
+            // done
+          })
         })
     }
 
     var div = dom.createElement('div')
-    var me = UI.authn.currentUser()
+    var me = authn.currentUser()
 
     showContent()