show latest added files

ui/package-lock.json

@@ -10,6 +10,7 @@
       "dependencies": {
         "@shoelace-style/shoelace": "^2.0.0-beta.19",
         "core-js": "^3.6.5",
+        "date-fns": "^2.19.0",
         "normalize.css": "^8.0.1",
         "sass": "^1.32.8",
         "sass-loader": "^10.0.2",
@@ -1902,7 +1903,6 @@
         "@vue/cli-shared-utils": "^4.5.6",
         "cache-loader": "^4.1.0",
         "fork-ts-checker-webpack-plugin": "^3.1.1",
-        "fork-ts-checker-webpack-plugin-v5": "npm:fork-ts-checker-webpack-plugin@^5.0.11",
         "globby": "^9.2.0",
         "thread-loader": "^2.1.3",
         "ts-loader": "^6.2.2",
@@ -1975,7 +1975,6 @@
         "thread-loader": "^2.1.3",
         "url-loader": "^2.2.0",
         "vue-loader": "^15.9.2",
-        "vue-loader-v16": "npm:vue-loader@^16.0.0-beta.7",
         "vue-style-loader": "^4.1.2",
         "webpack": "^4.0.0",
         "webpack-bundle-analyzer": "^3.8.0",
@@ -2326,7 +2325,6 @@
         "merge-source-map": "^1.1.0",
         "postcss": "^7.0.14",
         "postcss-selector-parser": "^6.0.2",
-        "prettier": "^1.18.2",
         "source-map": "~0.6.1",
         "vue-template-es2015-compiler": "^1.9.0"
       },
@@ -3841,7 +3839,6 @@
       "dependencies": {
         "anymatch": "~3.1.1",
         "braces": "~3.0.2",
-        "fsevents": "~2.1.2",
         "glob-parent": "~5.1.0",
         "is-binary-path": "~2.1.0",
         "is-glob": "~4.0.1",
@@ -4990,6 +4987,18 @@
         "node": ">=0.10"
       }
     },
+    "node_modules/date-fns": {
+      "version": "2.19.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.19.0.tgz",
+      "integrity": "sha512-X3bf2iTPgCAQp9wvjOQytnf5vO5rESYRXlPIVcgSbtT5OTScPcsf9eZU+B/YIkKAtYr5WeCii58BgATrNitlWg==",
+      "engines": {
+        "node": ">=0.11"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/date-fns"
+      }
+    },
     "node_modules/debug": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.2.0.tgz",
@@ -13900,8 +13909,7 @@
       "dependencies": {
         "chokidar": "^3.4.1",
         "graceful-fs": "^4.1.2",
-        "neo-async": "^2.5.0",
+        "neo-async": "^2.5.0"
-        "watchpack-chokidar2": "^2.0.0"
       },
       "optionalDependencies": {
         "watchpack-chokidar2": "^2.0.0"
@@ -14280,7 +14288,6 @@
         "anymatch": "^2.0.0",
         "async-each": "^1.0.1",
         "braces": "^2.3.2",
-        "fsevents": "^1.2.7",
         "glob-parent": "^3.1.0",
         "inherits": "^2.0.3",
         "is-binary-path": "^1.0.0",
@@ -19391,6 +19398,11 @@
         "assert-plus": "^1.0.0"
       }
     },
+    "date-fns": {
+      "version": "2.19.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.19.0.tgz",
+      "integrity": "sha512-X3bf2iTPgCAQp9wvjOQytnf5vO5rESYRXlPIVcgSbtT5OTScPcsf9eZU+B/YIkKAtYr5WeCii58BgATrNitlWg=="
+    },
     "debug": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.2.0.tgz",

ui/package.json

@@ -10,6 +10,7 @@
   "dependencies": {
     "@shoelace-style/shoelace": "^2.0.0-beta.19",
     "core-js": "^3.6.5",
+    "date-fns": "^2.19.0",
     "normalize.css": "^8.0.1",
     "sass": "^1.32.8",
     "sass-loader": "^10.0.2",

ui/src/router/index.ts

@@ -1,6 +1,6 @@
 import Inspect from "@/views/Inspect.vue";
 import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router';
-import Home from "../views/About.vue";
+import Home from "../views/Home.vue";
 import Search from '../views/Search.vue';
 
 const routes: Array<RouteRecordRaw> = [
@@ -26,7 +26,7 @@ const routes: Array<RouteRecordRaw> = [
     // route level code-splitting
     // this generates a separate chunk (about.[hash].js) for this route
     // which is lazy-loaded when the route is visited.
-    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
+    component: () => import(/* webpackChunkName: "about" */ '../views/Home.vue')
   }
 ]
 

ui/src/types/base.ts

@@ -15,3 +15,12 @@ export interface Job {
   title: string;
   progress: number;
 }
+
+export interface IFile {
+  hash: string;
+  path: string;
+  valid: boolean;
+  added: string;
+  size: number;
+  mtime: string;
+}

ui/src/views/About.vue

@@ -1,5 +0,0 @@
-<template>
-  <div class="about">
-    <h1>This is an about page</h1>
-  </div>
-</template>

ui/src/views/Home.vue

@@ -0,0 +1,51 @@
+<template>
+  <div class="home">
+    <h1>Welcome to UpEnd!</h1>
+    <ul v-if="latestFiles">
+      <li v-for="file in latestFiles" :key="file.hash">
+        <router-link :to="{ name: 'inspect', params: { address: file.hash } }">
+          <span class="file-path">{{ file.path }}</span>
+        </router-link>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script lang="ts">
+import { IFile } from "@/types/base";
+import useSWRV from "swrv";
+import { computed, defineComponent } from "vue";
+import { useRoute } from "vue-router";
+import { fetcher } from "../utils";
+import { parseISO } from "date-fns";
+
+export default defineComponent({
+  name: "Home",
+
+  setup() {
+    const route = useRoute();
+    const { data: latestFilesRaw } = useSWRV<IFile[], unknown>(
+      "/api/files/latest",
+      fetcher
+    );
+
+    const latestFiles = computed(() => {
+      if (latestFilesRaw?.value) {
+        return latestFilesRaw.value.map((file) => {
+          return {
+            ...file,
+            added: parseISO(file.added),
+            mtime: parseISO(file.added),
+          };
+        });
+      }
+    });
+
+    return {
+      latestFiles,
+    };
+  },
+});
+</script>
+
+<style lang="scss"></style>