Show a Scratchpad's author

Added primarily to test navigating between different resources
without a full page refresh.

Author: Vinnl

scratchpad/__snapshots__/view.test.ts.snap

@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`View mode should properly render the pad's contents 1`] = `"<div>First line<br>Second line<br></div>"`;
+exports[`View mode should properly render the pad's contents 1`] = `"<div>First line<br>Second line<br><hr><small></small></div>"`;

scratchpad/data.test.ts

@@ -1,6 +1,6 @@
 /* eslint-env jest */
 import $rdf from 'rdflib'
-import { getInitialisationStatements, getSetContentsStatements, getContents, isPad, getTitle } from './data'
+import { getInitialisationStatements, getSetContentsStatements, getContents, isPad, getTitle, getLatestAuthor } from './data'
 import vocab from 'solid-namespace'
 
 const ns = vocab($rdf)
@@ -119,6 +119,67 @@ Second line`
   })
 })
 
+describe('getLatestAuthor()', () => {
+  it('should be able to get the latest author', async () => {
+    const mockStore = $rdf.graph()
+    const mockPad = $rdf.sym('https://mock-pad')
+    const mockEarlyAuthor = $rdf.sym('https:/mock-early-author')
+    const mockLateAuthor = $rdf.sym('https:/mock-late-author')
+
+    const mockFirstLine = $rdf.sym('https://arbitrary-line-1')
+    mockStore.add(mockPad, ns.pad('next'), mockFirstLine, mockPad.doc())
+    mockStore.add(mockFirstLine, ns.sioc('content'), 'First line', mockPad.doc())
+    mockStore.add(mockFirstLine, ns.dc('created'), new Date(0), mockPad.doc())
+    mockStore.add(mockFirstLine, ns.dc('author'), mockEarlyAuthor, mockPad.doc())
+    const mockSecondLine = $rdf.sym('https://arbitrary-line-2')
+    mockStore.add(mockFirstLine, ns.pad('next'), mockSecondLine, mockPad.doc())
+    mockStore.add(mockSecondLine, ns.sioc('content'), 'Second line', mockPad.doc())
+    mockStore.add(mockSecondLine, ns.dc('created'), new Date(24 * 60 * 60 * 1000), mockPad.doc())
+    mockStore.add(mockSecondLine, ns.dc('author'), mockLateAuthor, mockPad.doc())
+    mockStore.add(mockSecondLine, ns.pad('next'), mockPad, mockPad.doc())
+
+    expect(getLatestAuthor(mockStore, mockPad)).toEqual(mockLateAuthor)
+  })
+
+  it('should return an author even when all lines were authored at the same time', async () => {
+    const mockStore = $rdf.graph()
+    const mockPad = $rdf.sym('https://mock-pad')
+    const mockEarlyAuthor = $rdf.sym('https:/mock-early-author')
+    const mockLateAuthor = $rdf.sym('https:/mock-late-author')
+
+    const mockFirstLine = $rdf.sym('https://arbitrary-line-1')
+    mockStore.add(mockPad, ns.pad('next'), mockFirstLine, mockPad.doc())
+    mockStore.add(mockFirstLine, ns.sioc('content'), 'First line', mockPad.doc())
+    mockStore.add(mockFirstLine, ns.dc('created'), new Date(0), mockPad.doc())
+    mockStore.add(mockFirstLine, ns.dc('author'), mockEarlyAuthor, mockPad.doc())
+    const mockSecondLine = $rdf.sym('https://arbitrary-line-2')
+    mockStore.add(mockFirstLine, ns.pad('next'), mockSecondLine, mockPad.doc())
+    mockStore.add(mockSecondLine, ns.sioc('content'), 'Second line', mockPad.doc())
+    mockStore.add(mockSecondLine, ns.dc('created'), new Date(0), mockPad.doc())
+    mockStore.add(mockSecondLine, ns.dc('author'), mockLateAuthor, mockPad.doc())
+    mockStore.add(mockSecondLine, ns.pad('next'), mockPad, mockPad.doc())
+
+    expect(getLatestAuthor(mockStore, mockPad)).not.toBeNull()
+  })
+
+  it('should return null if no author data is present', async () => {
+    const mockStore = $rdf.graph()
+    const mockPad = $rdf.sym('https://mock-pad')
+
+    const mockFirstLine = $rdf.sym('https://arbitrary-line-1')
+    mockStore.add(mockPad, ns.pad('next'), mockFirstLine, mockPad.doc())
+    mockStore.add(mockFirstLine, ns.sioc('content'), 'First line', mockPad.doc())
+    mockStore.add(mockFirstLine, ns.dc('created'), new Date(0), mockPad.doc())
+    const mockSecondLine = $rdf.sym('https://arbitrary-line-2')
+    mockStore.add(mockFirstLine, ns.pad('next'), mockSecondLine, mockPad.doc())
+    mockStore.add(mockSecondLine, ns.sioc('content'), 'Second line', mockPad.doc())
+    mockStore.add(mockSecondLine, ns.dc('created'), new Date(0), mockPad.doc())
+    mockStore.add(mockSecondLine, ns.pad('next'), mockPad, mockPad.doc())
+
+    expect(getLatestAuthor(mockStore, mockPad)).toBeNull()
+  })
+})
+
 describe('getTitle()', () => {
   it('should return a document\'s title', async () => {
     const mockStore = $rdf.graph()

scratchpad/data.ts

@@ -134,3 +134,50 @@ export function getContents (
 
   return lines.join('\n')
 }
+
+export function getLatestAuthor (
+  store: IndexedFormula,
+  pad: NamedNode
+): NamedNode | null {
+  const [firstLineStatement] = store.statementsMatching(pad, ns.pad('next'), null, pad.doc(), true)
+  let prevLine: Node = firstLineStatement.object
+  const datesAndAuthors = []
+  while (prevLine.value !== pad.value) {
+    const [currentLineStatement] = store.statementsMatching(prevLine, ns.pad('next'), null, pad.doc(), true)
+    const [lineDateStatement] = store.statementsMatching(
+      currentLineStatement.subject,
+      ns.dc('created'),
+      null,
+      pad.doc(),
+      true
+    )
+    const [lineAuthorStatement] = store.statementsMatching(
+      currentLineStatement.subject,
+      ns.dc('author'),
+      null,
+      pad.doc(),
+      true
+    )
+    if (lineDateStatement && lineAuthorStatement) {
+      datesAndAuthors.push({
+        created: new Date(lineDateStatement.object.value),
+        author: lineAuthorStatement.object
+      })
+    }
+    prevLine = currentLineStatement.object
+  }
+
+  if (datesAndAuthors.length === 0) {
+    return null
+  }
+
+  const latestAuthor = datesAndAuthors.reduce(
+    (latestAuthor, lineDateAndAuthor) => {
+      return (latestAuthor.created.getTime() < lineDateAndAuthor.created.getTime())
+        ? lineDateAndAuthor
+        : latestAuthor
+    }
+  )
+
+  return latestAuthor.author
+}

scratchpad/paneWrapper.ts

@@ -3,7 +3,7 @@ import { pane } from './pane'
 import { initialise } from './data'
 import { Namespaces } from 'solid-namespace'
 import UI from 'solid-ui'
-import { IndexedFormula } from 'rdflib'
+import { IndexedFormula, NamedNode } from 'rdflib'
 
 const store: IndexedFormula = UI.store
 const ns: Namespaces = UI.ns
@@ -41,10 +41,16 @@ const paneWrapper: PaneDefinition = {
       container: container,
       subject: subject,
       store: UI.store,
+      visitNode: visitNode,
       user: UI.authn.currentUser()
     })
     return container
   }
 }
 
+function visitNode (node: NamedNode) {
+  const outliner = (window as any).panes.getOutliner(document)
+  outliner.GotoSubject(node, true, undefined, true, undefined)
+}
+
 export default paneWrapper

scratchpad/view.test.ts

@@ -30,7 +30,8 @@ describe('View mode', () => {
     view({
       container: container,
       subject: mockPad,
-      store: mockStore
+      store: mockStore,
+      visitNode: jest.fn()
     })
     const button = container.querySelector('button')
     expect(button).toBeNull()
@@ -47,7 +48,8 @@ describe('View mode', () => {
       container: container,
       subject: mockPad,
       store: mockStore,
-      user: mockUser
+      user: mockUser,
+      visitNode: jest.fn()
     })
     const button = container.querySelector('button')
     expect(button).toBeDefined()
@@ -63,7 +65,8 @@ describe('View mode', () => {
     view({
       container: container,
       subject: mockPad,
-      store: mockStore
+      store: mockStore,
+      visitNode: jest.fn()
     })
     expect(container.outerHTML).toMatchSnapshot()
   })
@@ -81,6 +84,7 @@ describe('Edit mode', () => {
       container: container,
       subject: mockPad,
       store: mockStore,
+      visitNode: jest.fn(),
       user: mockUser
     })
     const button = container.querySelector('button')

scratchpad/view.ts

@@ -1,7 +1,11 @@
-import { getContents, getSetContentsStatements } from './data'
+import vocab from 'solid-namespace'
+import $rdf from 'rdflib'
+import { getContents, getSetContentsStatements, getLatestAuthor } from './data'
 import { ViewParams } from '../types'
 
-export function view ({ container, subject, store, user }: ViewParams) {
+const ns = vocab($rdf)
+
+export function view ({ container, subject, store, visitNode, user }: ViewParams) {
   toViewMode()
 
   function toViewMode () {
@@ -14,6 +18,8 @@ export function view ({ container, subject, store, user }: ViewParams) {
       container.appendChild(document.createElement('br'))
     })
 
+    container.appendChild(document.createElement('hr'))
+
     if (user) {
       const editButton = document.createElement('button')
       editButton.textContent = 'Edit'
@@ -22,6 +28,33 @@ export function view ({ container, subject, store, user }: ViewParams) {
         toEditMode()
       })
       container.appendChild(editButton)
+      container.appendChild(document.createElement('br'))
+    }
+
+    const authorContainer = document.createElement('small')
+    container.appendChild(authorContainer)
+    showLatestAuthor(authorContainer)
+  }
+
+  /* istanbul ignore next [This function depends on a side effect (fetch), so skip it for testing for now:] */
+  async function showLatestAuthor (authorContainer: HTMLElement) {
+    const latestAuthor = getLatestAuthor(store, subject)
+    if (latestAuthor) {
+      const fetcher = $rdf.fetcher(store, {})
+      await fetcher.load(latestAuthor.uri)
+      const [nameStatement] = store.statementsMatching(latestAuthor, ns.vcard('fn'), null, null, true)
+
+      authorContainer.appendChild(document.createTextNode('Latest author: '))
+      const authorLink = document.createElement('a')
+      authorLink.href = latestAuthor.uri
+      const name = (nameStatement) ? nameStatement.object.value : latestAuthor.uri
+      authorLink.textContent = name
+      authorLink.title = `View the profile of ${name}`
+      authorLink.addEventListener('click', (event) => {
+        event.preventDefault()
+        visitNode(latestAuthor)
+      })
+      authorContainer.appendChild(authorLink)
     }
   }
 

types.ts

@@ -30,6 +30,7 @@ export interface ViewParams {
   container: HTMLElement;
   subject: NamedNode;
   store: IndexedFormula;
+  visitNode: (node: NamedNode) => void;
   user?: NamedNode;
 };
 

typings/rdflib/index.d.ts

@@ -347,15 +347,15 @@ export class Statement {
   /**
    * The statement's subject
    */
-  subject: Node;
+  subject: NamedNode;
   /**
    * The statement's predicate
    */
-  predicate: Node;
+  predicate: NamedNode;
   /**
    * The statement's object
    */
-  object: Node;
+  object: NamedNode;
   /**
    * The origin of this statement
    */
@@ -1089,10 +1089,13 @@ export class Fetcher {
   static CONTENT_TYPE_BY_EXT: {
       [ext: string]: string;
   };
+<<<<<<< HEAD
   /**
    * Loads a web resource or resources into the store.
    * @param uri Resource to load, provided either as a NamedNode object or a plain URL. If multiple resources are passed as an array, they will be fetched in parallel.
    */
+=======
+>>>>>>> d6d756b... Show a Scratchpad's author
   load: (uri: NamedNode[] | string[] | NamedNode | string, options?: FetchOptions) => Promise<Response>;
 }
 /**