<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>
