Surface history of a ledger inscription (#26)

* WIP show initial transaction time

* Transaction dates surface in UI

* Namespace logic ad types

* Fix getOriginalTx function

* Fix type QLDBHistory

* Mini history graphic

* Clean up

Author: basilesimon

gui/package-lock.json

@@ -13,12 +13,12 @@
     "@rollup/plugin-node-resolve": "^11.0.0",
     "@rollup/plugin-typescript": "^8.0.0",
     "@tsconfig/svelte": "^2.0.0",
-    "node-sass": "^6.0.0",
     "rollup": "^2.3.4",
     "rollup-plugin-css-only": "^3.1.0",
     "rollup-plugin-livereload": "^2.0.0",
     "rollup-plugin-svelte": "^7.0.0",
     "rollup-plugin-terser": "^7.0.0",
+    "sass": "^1.35.1",
     "svelte": "^3.0.0",
     "svelte-check": "^2.0.0",
     "svelte-preprocess": "^4.0.0",

gui/package.json

@@ -1,23 +1,7 @@
 <script lang="ts">
-  import LedgerEntryComponent from './LedgerEntry.svelte';
-  import type { LedgerEntry } from './types';
-
-  // double declaration to accomplish two things:
-  //   1. the typing of `ledgerData`,
-  //   2. its setting as a reactive store.
-  let ledgerData: null | LedgerEntry[];
-  $: ledgerData = null;
-
-  async function fetchData(): Promise<void | Error> {
-    const res = await fetch('http://localhost:3000/list-docs');
-    const data = await res.json();
-
-    if (res.ok) {
-      ledgerData = data;
-    } else {
-      throw new Error(data);
-    }
-  }
+  import * as Ledger from './Ledger/index';
+  import { ledgerData } from './stores';
+  ledgerData.set(Ledger.fetchData());
 </script>
 
 <style>
@@ -35,11 +19,16 @@
 </style>
 
 <main>
-  {#await fetchData()}
+  {#await $ledgerData}
     <p>...waiting</p>
-  {:then fulfilled}
-    {#each ledgerData as item}
-      <LedgerEntryComponent entry={item} />
+  {:then data}
+    {#each data as item}
+      <Ledger.LedgerEntryComponent entry={item} />
+      <div>
+        <button on:click={() => Ledger.addHistoryTo(item)} href="#"
+          >🕰 Show history</button
+        >
+      </div>
     {/each}
   {:catch error}
     <p style="color: red">{error.message}</p>

gui/src/App.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+  const w = 300;
+  const h = 50;
+  const padding = 10;
+</script>
+
+<style type="text/scss">
+  $grey: #ddd;
+  svg {
+    path {
+      stroke: $grey;
+      stroke-width: 2px;
+      stroke-dasharray: 4 8;
+    }
+    circle {
+      fill: $grey;
+    }
+  }
+</style>
+
+<svg width={w} height={h}>
+  <circle r={6} cx={padding} cy={h / 2} />
+  <path d={`M${padding} ${h / 2} L${w - padding} ${h / 2}`} />
+</svg>

gui/src/History.svelte

@@ -1,6 +1,13 @@
 <script lang="ts">
-  import type { LedgerEntry } from './types';
+  import * as Ledger from './index';
+  import type { LedgerEntry, EntryHistory } from './index';
+  import History from '../History.svelte';
   export let entry: LedgerEntry;
+
+  let originalTX: null | EntryHistory = null;
+  $: if (entry.history) {
+    originalTX = Ledger.getOriginalTX(entry.history);
+  }
   const pathToThumbnail = (path: string): string =>
     `http://localhost:3000/file/${path}.png`;
 </script>
@@ -51,5 +58,9 @@
     {#if entry.one_file_hash}
       <pre>📁 {entry.one_file_hash}</pre>
     {/if}
+    {#if entry.history}
+      <History />
+      <pre>🕰️ Added on {originalTX.originalTxDate}, {originalTX.originalTxTime}</pre>
+    {/if}
   </div>
 </section>

gui/src/LedgerEntry.svelte gui/src/Ledger/LedgerEntry.sveltegui/src/LedgerEntry.svelte renamed to gui/src/Ledger/LedgerEntry.svelte

@@ -0,0 +1,80 @@
+export { default as LedgerEntryComponent } from './LedgerEntry.svelte';
+import { ledgerData } from '../stores';
+
+export type LedgerEntry = {
+  title: string;
+  url: string;
+  sku: string;
+  screenshot_hash?: string;
+  thumb_hash?: string;
+  one_file_hash?: string;
+  history?: QLDBHistory;
+};
+
+export type EntryHistory = {
+  originalTxDate: string;
+  originalTxTime: string;
+};
+
+export type QLDBHistory = QLDBHistoryItem[];
+
+type QLDBHistoryItem = {
+  blockAddress: {};
+  data: {};
+  metadata: { txTime: string };
+};
+
+// @TODO: error handling!
+export async function fetchData(): Promise<LedgerEntry[]> {
+  const res = await fetch('http://localhost:3000/list-docs');
+  const data = await res.json();
+  return data;
+}
+
+/**
+ * Handle the convoluted querying of a record's history
+ * @param id string - the record's ID
+ * @returns a promise of a history (an array of revisions)
+ */
+// @TODO: error handling!
+async function fetchItemHistory(id: string): Promise<QLDBHistory> {
+  const res = await fetch(`http://localhost:3000/history/${id}`);
+  const data = await res.json();
+  return data;
+}
+
+/**
+ * Show a record's history in the UI: fetch this history
+ * and add it to the `historyData` store
+ * @param entry object - the record as represented in QLDB
+ */
+export async function addHistoryTo(entry: LedgerEntry) {
+  const { sku } = entry;
+  const itemHistoryData = await fetchItemHistory(sku);
+
+  ledgerData.update(async (d: Promise<LedgerEntry[]>) => {
+    // let newStore;
+    let newStore = await d.then(data => {
+      const itemToUpdate = data.find(e => e.sku === sku);
+      const updatedItem = { ...itemToUpdate, history: itemHistoryData };
+
+      return data.map((e: LedgerEntry) => {
+        if (e.sku === sku) {
+          return updatedItem;
+        } else {
+          return e;
+        }
+      });
+    });
+    return newStore;
+  });
+}
+
+export const getOriginalTX = (h: QLDBHistory): EntryHistory => {
+  const originalTx = h[0];
+  const originalTxDate = new Date(originalTx.metadata.txTime);
+  return {
+    originalTxDate: originalTxDate.toDateString(),
+    originalTxTime: originalTxDate.toLocaleTimeString(),
+  };
+};

gui/src/Ledger/index.ts

@@ -0,0 +1,4 @@
+import { Writable, writable } from 'svelte/store';
+import type { LedgerEntry } from './Ledger/index';
+
+export const ledgerData: Writable<Promise<LedgerEntry[]>> = writable(null);

gui/src/stores.ts

@@ -116,7 +116,6 @@ async function getDocumentIdByField(
   value: string
 ): Promise<string> {
   const query: string = `SELECT id FROM ${tableName} AS t BY id WHERE t.${field} = ?`;
-    console.log(query)
   let documentId: string = undefined;
   await txn
     .execute(query, value)