Add components for runs

Author: Mytrill

dist/src/components/RunsPane.d.ts

@@ -0,0 +1,8 @@
+import "./RunsPane.scss";
+import { State, Actions, Run } from "../api";
+export interface RunsPaneProps {
+    state: State;
+    actions: Actions;
+    runs: Run[];
+}
+export declare function RunsPane(props: RunsPaneProps): JSX.Element;

dist/src/components/RunsPaneItem.d.ts

@@ -0,0 +1,9 @@
+import "./RunsPaneItem.scss";
+import { State, Actions, Run } from "../api";
+export interface RunsPaneItemProps {
+    state: State;
+    actions: Actions;
+    run: Run;
+    current: boolean;
+}
+export declare function RunsPaneItem(props: RunsPaneItemProps): JSX.Element;

dist/src/selectors.d.ts

@@ -0,0 +1,2 @@
+import { State, Run } from "./api";
+export declare function getRuns(state: State): Run[];

src/components/RunsPane.scss

@@ -0,0 +1,26 @@
+import { h } from "hyperapp"
+
+import "./RunsPane.scss"
+
+import { State, Actions, Run } from "../api"
+import { RunsPaneItem } from "./RunsPaneItem"
+
+export interface RunsPaneProps {
+  state: State
+  actions: Actions
+  runs: Run[]
+}
+
+export function RunsPane(props: RunsPaneProps) {
+  const { state, actions, runs } = props
+  const items = []
+  const lastId = runs.length - 1
+  runs.forEach((run, i) => {
+    items.unshift(RunsPaneItem({ state, actions, run, current: i === lastId }))
+  })
+  return (
+    <div class="scrollable">
+      <ul class="scrollable-content">{runs}</ul>
+    </div>
+  )
+}

src/components/RunsPane.tsx

@@ -0,0 +1,17 @@
+import { h } from "hyperapp"
+
+import "./RunsPaneItem.scss"
+
+import { State, Actions, Run } from "../api"
+
+export interface RunsPaneItemProps {
+  state: State
+  actions: Actions
+  run: Run
+  current: boolean
+}
+
+export function RunsPaneItem(props: RunsPaneItemProps) {
+  const { state, actions, run, current } = props
+  return <li>Run {run.timestamp}</li>
+}

src/components/RunsPaneItem.scss

@@ -0,0 +1,11 @@
+import { State, Run } from "./api"
+
+function compareRuns(r1: Run, r2: Run): number {
+  return r1.timestamp - r2.timestamp
+}
+
+export function getRuns(state: State): Run[] {
+  return Object.keys(state.runs)
+    .map(key => state.runs[key])
+    .sort(compareRuns)
+}