From ef5c8b0d8e794d0634cade975c5c70ac73aa8e21 Mon Sep 17 00:00:00 2001
From: Joep <jcbuhre@gmail.com>
Date: Sat, 9 Sep 2023 13:06:04 +0200
Subject: [PATCH] Converted view/Share.vue to composition api

---
 frontend/.eslintrc.json                  |   6 +-
 frontend/src/api/pub.ts                  |  46 +--
 frontend/src/api/utils.ts                |   8 +-
 frontend/src/main.ts                     |   2 +
 frontend/src/stores/file.ts              |  12 +-
 frontend/src/stores/layout.ts            |   2 +-
 frontend/src/types/api.d.ts              |  11 +-
 frontend/src/types/file.d.ts             |  41 ++-
 frontend/src/types/global.d.ts           |   3 +
 frontend/src/types/layout.d.ts           |   6 +-
 frontend/src/views/Files.vue             |   5 +-
 frontend/src/views/Share.vue             | 413 ++++++++++-------------
 frontend/src/views/files/FileListing.vue |   2 +-
 13 files changed, 251 insertions(+), 306 deletions(-)

diff --git a/frontend/.eslintrc.json b/frontend/.eslintrc.json
index 607f9b61..ba4fcdfd 100644
--- a/frontend/.eslintrc.json
+++ b/frontend/.eslintrc.json
@@ -3,10 +3,14 @@
   "env": {
     "node": true
   },
+  "parser": "@typescript-eslint/parser",
   "extends": [
-    "plugin:vue/vue3-essential",
     "eslint:recommended",
+    "plugin:@typescript-eslint/eslint-recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:vue/vue3-essential",
     "@vue/eslint-config-prettier"
+
   ],
   "rules": {
     "vue/multi-word-component-names": "off",
diff --git a/frontend/src/api/pub.ts b/frontend/src/api/pub.ts
index 526e2b0d..6cae6bf1 100644
--- a/frontend/src/api/pub.ts
+++ b/frontend/src/api/pub.ts
@@ -1,7 +1,7 @@
 import { fetchURL, removePrefix, createURL } from "./utils";
 import { baseURL } from "@/utils/constants";
 
-export async function fetch(url: apiUrl, password: string = "") {
+export async function fetch(url: ApiUrl, password: string = "") {
   url = removePrefix(url);
 
   const res = await fetchURL(
@@ -33,35 +33,35 @@ export async function fetch(url: apiUrl, password: string = "") {
 }
 
 // Is this redundant code?
-// export function download(format, hash, token, ...files) {
-//   let url = `${baseURL}/api/public/dl/${hash}`;
+export function download(format: any, hash: string, token: string, ...files: any) {
+  let url = `${baseURL}/api/public/dl/${hash}`;
 
-//   if (files.length === 1) {
-//     url += encodeURIComponent(files[0]) + "?";
-//   } else {
-//     let arg = "";
+  if (files.length === 1) {
+    url += encodeURIComponent(files[0]) + "?";
+  } else {
+    let arg = "";
 
-//     for (let file of files) {
-//       arg += encodeURIComponent(file) + ",";
-//     }
+    for (let file of files) {
+      arg += encodeURIComponent(file) + ",";
+    }
 
-//     arg = arg.substring(0, arg.length - 1);
-//     arg = encodeURIComponent(arg);
-//     url += `/?files=${arg}&`;
-//   }
+    arg = arg.substring(0, arg.length - 1);
+    arg = encodeURIComponent(arg);
+    url += `/?files=${arg}&`;
+  }
 
-//   if (format) {
-//     url += `algo=${format}&`;
-//   }
+  if (format) {
+    url += `algo=${format}&`;
+  }
 
-//   if (token) {
-//     url += `token=${token}&`;
-//   }
+  if (token) {
+    url += `token=${token}&`;
+  }
 
-//   window.open(url);
-// }
+  window.open(url);
+}
 
-export function getDownloadURL(share: share, inline = false) {
+export function getDownloadURL(share: IFile, inline = false) {
   const params = {
     ...(inline && { inline: "true" }),
     ...(share.token && { token: share.token }),
diff --git a/frontend/src/api/utils.ts b/frontend/src/api/utils.ts
index 5e7467ab..5fa7609c 100644
--- a/frontend/src/api/utils.ts
+++ b/frontend/src/api/utils.ts
@@ -3,7 +3,7 @@ import { renew, logout } from "@/utils/auth";
 import { baseURL } from "@/utils/constants";
 import { encodePath } from "@/utils/url";
 
-export async function fetchURL(url: apiUrl, opts: apiOpts, auth = true) {
+export async function fetchURL(url: ApiUrl, opts: ApiOpts, auth = true) {
   const authStore = useAuthStore();
 
   opts = opts || {};
@@ -46,7 +46,7 @@ export async function fetchURL(url: apiUrl, opts: apiOpts, auth = true) {
   return res;
 }
 
-export async function fetchJSON(url: apiUrl, opts?: any) {
+export async function fetchJSON(url: ApiUrl, opts?: any) {
   const res = await fetchURL(url, opts);
 
   if (res.status === 200) {
@@ -56,7 +56,7 @@ export async function fetchJSON(url: apiUrl, opts?: any) {
   }
 }
 
-export function removePrefix(url: apiUrl) {
+export function removePrefix(url: ApiUrl) {
   url = url.split("/").splice(2).join("/");
 
   if (url === "") url = "/";
@@ -64,7 +64,7 @@ export function removePrefix(url: apiUrl) {
   return url;
 }
 
-export function createURL(endpoint: apiUrl, params = {}, auth = true) {
+export function createURL(endpoint: ApiUrl, params = {}, auth = true) {
   const authStore = useAuthStore();
 
   let prefix = baseURL;
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index 5e6c699a..923f1dde 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -13,6 +13,8 @@ import dayjs from "dayjs";
 import localizedFormat from "dayjs/plugin/localizedFormat";
 import relativeTime from "dayjs/plugin/relativeTime";
 import duration from "dayjs/plugin/duration";
+import "./css/styles.css";
+
 // register dayjs plugins globally
 dayjs.extend(localizedFormat);
 dayjs.extend(relativeTime);
diff --git a/frontend/src/stores/file.ts b/frontend/src/stores/file.ts
index 045f6e2c..616a7f44 100644
--- a/frontend/src/stores/file.ts
+++ b/frontend/src/stores/file.ts
@@ -3,15 +3,15 @@ import { defineStore } from "pinia";
 export const useFileStore = defineStore("file", {
   // convert to a function
   state: (): {
-    req: req,
-    oldReq: req,
+    req: IFile | null,
+    oldReq: IFile | null,
     reload: boolean,
     selected: any[],
     multiple: boolean,
     isFiles: boolean
   } => ({
-    req: {},
-    oldReq: {},
+    req: null,
+    oldReq: null,
     reload: false,
     selected: [],
     multiple: false,
@@ -28,7 +28,7 @@ export const useFileStore = defineStore("file", {
     //   return !layoutStore.loading && state.route._value.name === "Files";
     // },
     isListing: (state) => {
-      return state.isFiles && state.req.isDir;
+      return state.isFiles && state?.req?.isDir;
     },
   },
   actions: {
@@ -36,7 +36,7 @@ export const useFileStore = defineStore("file", {
     toggleMultiple() {
       this.multiple = !this.multiple;
     },
-    updateRequest(value: req) {
+    updateRequest(value: IFile) {
       this.oldReq = this.req;
       this.req = value;
     },
diff --git a/frontend/src/stores/layout.ts b/frontend/src/stores/layout.ts
index 1ca27243..aa2afc87 100644
--- a/frontend/src/stores/layout.ts
+++ b/frontend/src/stores/layout.ts
@@ -7,7 +7,7 @@ export const useLayoutStore = defineStore("layout", {
   state: (): {
     loading: boolean,
     show: string | null | boolean,
-    showConfirm: boolean | null,
+    showConfirm: Function | null,
     showAction: boolean | null,
     showShell: boolean | null
   } => ({
diff --git a/frontend/src/types/api.d.ts b/frontend/src/types/api.d.ts
index 79b6a23a..fe56a5bd 100644
--- a/frontend/src/types/api.d.ts
+++ b/frontend/src/types/api.d.ts
@@ -1,14 +1,13 @@
-type apiUrl = string // Can also be set as a path eg: "path1" | "path2"
+type ApiUrl = string // Can also be set as a path eg: "path1" | "path2"
 
 type resourcePath = string
 
-type apiMethod =  "GET" | "POST" | "PUT" | "DELETE" | "PATCH"
+type ApiMethod =  "GET" | "POST" | "PUT" | "DELETE" | "PATCH"
 
-// type apiContent = string | Blob | File 
-type apiContent = Blob | File | Pick<ReadableStreamDefaultReader<any>, "read">  | ""
+type ApiContent = Blob | File | Pick<ReadableStreamDefaultReader<any>, "read">  | ""
 
-interface apiOpts {
-    method?: apiMethod,
+interface ApiOpts {
+    method?: ApiMethod,
     headers?: object,
     body?: any
 }
diff --git a/frontend/src/types/file.d.ts b/frontend/src/types/file.d.ts
index 69709c28..b025210e 100644
--- a/frontend/src/types/file.d.ts
+++ b/frontend/src/types/file.d.ts
@@ -1,5 +1,5 @@
-
-interface file {
+interface IFile {
+    index?: number
     name: string,
     modified: string,
     path: string,
@@ -7,27 +7,32 @@ interface file {
     isDir: boolean,
     size: number,
     fullPath: string,
-    type: uploadType
+    type: uploadType,
+    items: IFile[]
+    token?: string,
+    hash: string,
+    url?: string
 }
 
-interface item {
-    id: number,
-    path: string,
-    file: file,
-    url?: string,
-    dir?: boolean,
-    from?: string,
-    to?: string,
-    name?: string,
-    type?: uploadType
-    overwrite: boolean
-}
+
 
 type uploadType = "video" | "audio" | "image" | "pdf" | "text" | "blob"
 
-interface req {
-    isDir?: boolean
-}
+type req = {
+    path: string
+    name: string
+    size: number
+    extension: string
+    modified: string
+    mode: number
+    isDir: boolean
+    isSymlink: boolean
+    type: string
+    url: string
+    hash: string
+  }
+  
+
 
 interface uploads {
     [key: string]: upload
diff --git a/frontend/src/types/global.d.ts b/frontend/src/types/global.d.ts
index 8f8d3240..5366524c 100644
--- a/frontend/src/types/global.d.ts
+++ b/frontend/src/types/global.d.ts
@@ -5,4 +5,7 @@ declare global {
         FileBrowser: any;
         grecaptcha: any
     }
+    interface HTMLAttributes extends HTMLAttributes {
+        title: any
+    }
 }
\ No newline at end of file
diff --git a/frontend/src/types/layout.d.ts b/frontend/src/types/layout.d.ts
index 0f741a49..1d4efe7f 100644
--- a/frontend/src/types/layout.d.ts
+++ b/frontend/src/types/layout.d.ts
@@ -1,5 +1,5 @@
 interface LayoutValue {
-    prompt: boolean,
-    confirm: boolean,
-    action: boolean,
+    prompt: string,
+    confirm: Function,
+    action?: boolean,
 }
\ No newline at end of file
diff --git a/frontend/src/views/Files.vue b/frontend/src/views/Files.vue
index 51744265..ef50c51a 100644
--- a/frontend/src/views/Files.vue
+++ b/frontend/src/views/Files.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <header-bar v-if="error || req.type == null" showMenu showLogo />
+    <header-bar v-if="error || req?.type === null" showMenu showLogo />
 
     <breadcrumbs base="/files" />
 
@@ -68,7 +68,7 @@ export default {
       uploadError: "error",
     }),
     currentView() {
-      if (this.req.type == undefined) {
+      if (this.req?.type == undefined) {
         return null;
       }
 
@@ -129,7 +129,6 @@ export default {
       let url = this.$route.path;
       if (url === "") url = "/";
       if (url[0] !== "/") url = "/" + url;
-
       try {
         const res = await api.fetch(url);
 
diff --git a/frontend/src/views/Share.vue b/frontend/src/views/Share.vue
index 6434f00a..3070c86b 100644
--- a/frontend/src/views/Share.vue
+++ b/frontend/src/views/Share.vue
@@ -3,32 +3,18 @@
     <header-bar showMenu showLogo>
       <title />
 
-      <action
-        v-if="selectedCount"
-        icon="file_download"
-        :label="$t('buttons.download')"
-        @action="download"
-        :counter="selectedCount"
-      />
-      <button
-        v-if="isSingleFile()"
-        class="action copy-clipboard"
-        :data-clipboard-text="linkSelected()"
-        :aria-label="$t('buttons.copyDownloadLinkToClipboard')"
-        :title="$t('buttons.copyDownloadLinkToClipboard')"
-      >
+      <action v-if="fileStore.selectedCount" icon="file_download" :label="$t('buttons.download')" @action="download"
+        :counter="fileStore.selectedCount" />
+      <button v-if="isSingleFile()" class="action copy-clipboard" :data-clipboard-text="linkSelected()"
+        :aria-label="$t('buttons.copyDownloadLinkToClipboard')" :data-title="$t('buttons.copyDownloadLinkToClipboard')">
         <i class="material-icons">content_paste</i>
       </button>
-      <action
-        icon="check_circle"
-        :label="$t('buttons.selectMultiple')"
-        @action="toggleMultipleSelection"
-      />
+      <action icon="check_circle" :label="$t('buttons.selectMultiple')" @action="toggleMultipleSelection" />
     </header-bar>
 
     <breadcrumbs :base="'/share/' + hash" />
 
-    <div v-if="loading">
+    <div v-if="layoutStore.loading">
       <h2 class="message delayed">
         <div class="spinner">
           <div class="bounce1"></div>
@@ -49,21 +35,12 @@
           </div>
 
           <div class="card-content">
-            <input
-              v-focus
-              type="password"
-              :placeholder="$t('login.password')"
-              v-model="password"
-              @keyup.enter="fetchData"
-            />
+            <input v-focus type="password" :placeholder="$t('login.password')" v-model="password"
+              @keyup.enter="fetchData" />
           </div>
           <div class="card-action">
-            <button
-              class="button button--flat"
-              @click="fetchData"
-              :aria-label="$t('buttons.submit')"
-              :title="$t('buttons.submit')"
-            >
+            <button class="button button--flat" @click="fetchData" :aria-label="$t('buttons.submit')"
+              :data-title="$t('buttons.submit')">
               {{ $t("buttons.submit") }}
             </button>
           </div>
@@ -71,14 +48,14 @@
       </div>
       <errors v-else :errorCode="error.status" />
     </div>
-    <div v-else>
+    <div v-else-if="req !== null">
       <div class="share">
         <div class="share__box share__box__info">
           <div class="share__box__header">
             {{
               req.isDir
-                ? $t("download.downloadFolder")
-                : $t("download.downloadFile")
+              ? $t("download.downloadFolder")
+              : $t("download.downloadFile")
             }}
           </div>
           <div class="share__box__element share__box__center share__box__icon">
@@ -87,7 +64,7 @@
           <div class="share__box__element">
             <strong>{{ $t("prompts.displayName") }}</strong> {{ req.name }}
           </div>
-          <div class="share__box__element" :title="modTime">
+          <div class="share__box__element" :data-title="modTime">
             <strong>{{ $t("prompts.lastModified") }}:</strong> {{ humanTime }}
           </div>
           <div class="share__box__element">
@@ -96,19 +73,12 @@
           <div class="share__box__element share__box__center">
             <a target="_blank" :href="link" class="button button--flat">
               <div>
-                <i class="material-icons">file_download</i
-                >{{ $t("buttons.download") }}
+                <i class="material-icons">file_download</i>{{ $t("buttons.download") }}
               </div>
             </a>
-            <a
-              target="_blank"
-              :href="inlineLink"
-              class="button button--flat"
-              v-if="!req.isDir"
-            >
+            <a target="_blank" :href="inlineLink" class="button button--flat" v-if="!req.isDir">
               <div>
-                <i class="material-icons">open_in_new</i
-                >{{ $t("buttons.openFile") }}
+                <i class="material-icons">open_in_new</i>{{ $t("buttons.openFile") }}
               </div>
             </a>
           </div>
@@ -116,56 +86,31 @@
             <qrcode-vue :value="link" :size="200" level="M"></qrcode-vue>
           </div>
         </div>
-        <div
-          v-if="req.isDir && req.items.length > 0"
-          class="share__box share__box__items"
-        >
+        <div v-if="req.isDir && req.items.length > 0" class="share__box share__box__items">
           <div class="share__box__header" v-if="req.isDir">
             {{ $t("files.files") }}
           </div>
           <div id="listing" class="list file-icons">
-            <item
-              v-for="item in req.items.slice(0, this.showLimit)"
-              :key="base64(item.name)"
-              v-bind:index="item.index"
-              v-bind:name="item.name"
-              v-bind:isDir="item.isDir"
-              v-bind:url="item.url"
-              v-bind:modified="item.modified"
-              v-bind:type="item.type"
-              v-bind:size="item.size"
-              readOnly
-            >
+            <item v-for="item in req.items.slice(0, showLimit)" :key="base64(item.name)" v-bind:index="item.index"
+              v-bind:name="item.name" v-bind:isDir="item.isDir" v-bind:url="item.url" v-bind:modified="item.modified"
+              v-bind:type="item.type" v-bind:size="item.size" readOnly>
             </item>
-            <div
-              v-if="req.items.length > showLimit"
-              class="item"
-              @click="showLimit += 100"
-            >
+            <div v-if="req.items.length > showLimit" class="item" @click="showLimit += 100">
               <div>
                 <p class="name">+ {{ req.items.length - showLimit }}</p>
               </div>
             </div>
 
-            <div :class="{ active: multiple }" id="multiple-selection">
+            <div :class="{ active: fileStore.multiple }" id="multiple-selection">
               <p>{{ $t("files.multipleSelectionEnabled") }}</p>
-              <div
-                @click="() => (multiple = false)"
-                tabindex="0"
-                role="button"
-                :title="$t('files.clear')"
-                :aria-label="$t('files.clear')"
-                class="action"
-              >
+              <div @click="() => (fileStore.multiple = false)" tabindex="0" role="button" :data-title="$t('files.clear')"
+                :aria-label="$t('files.clear')" class="action">
                 <i class="material-icons">clear</i>
               </div>
             </div>
           </div>
         </div>
-        <div
-          v-else-if="req.isDir && req.items.length === 0"
-          class="share__box share__box__items"
-        >
+        <div v-else-if="req.isDir && req.items.length === 0" class="share__box share__box__items">
           <h2 class="message">
             <i class="material-icons">sentiment_dissatisfied</i>
             <span>{{ $t("files.lonely") }}</span>
@@ -176,9 +121,8 @@
   </div>
 </template>
 
-<script>
-import { mapState, mapActions, mapWritableState } from "pinia";
-import { pub as api } from "@/api";
+<script setup lang="ts">
+import { pub as api, files } from "@/api";
 import { filesize } from "filesize";
 import dayjs from "dayjs";
 import { Base64 } from "js-base64";
@@ -192,171 +136,160 @@ import Item from "@/components/files/ListingItem.vue";
 import Clipboard from "clipboard";
 import { useFileStore } from "@/stores/file";
 import { useLayoutStore } from "@/stores/layout";
+import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue";
+import { useRoute } from "vue-router";
 
-export default {
-  name: "share",
-  components: {
-    HeaderBar,
-    Action,
-    Breadcrumbs,
-    Item,
-    QrcodeVue,
-    Errors,
-  },
-  data: () => ({
-    error: null,
-    showLimit: 100,
-    password: "",
-    attemptedPasswordLogin: false,
-    hash: null,
-    token: null,
-    clip: null,
-  }),
-  inject: ["$showSuccess"],
-  watch: {
-    $route: function () {
-      this.showLimit = 100;
+const error = ref<null | any>(null)
+const showLimit = ref<number>(100)
+const password = ref<string>("")
+const attemptedPasswordLogin = ref<boolean>(false)
+const hash = ref<any>(null)
+const token = ref<any>(null)
+const clip = ref<any>(null)
 
-      this.fetchData();
-    },
-  },
-  created: async function () {
-    const hash = this.$route.params.path[0];
-    this.hash = hash;
-    await this.fetchData();
-  },
-  mounted() {
-    window.addEventListener("keydown", this.keyEvent);
-    this.clip = new Clipboard(".copy-clipboard");
-    this.clip.on("success", () => {
-      this.$showSuccess(this.$t("success.linkCopied"));
-    });
-  },
-  beforeUnmount() {
-    window.removeEventListener("keydown", this.keyEvent);
-    this.clip.destroy();
-  },
-  computed: {
-    ...mapState(useFileStore, ["req", "selectedCount"]),
-    ...mapWritableState(useFileStore, ["reload", "multiple", "selected"]),
-    ...mapWritableState(useLayoutStore, ["loading"]),
-    icon: function () {
-      if (this.req.isDir) return "folder";
-      if (this.req.type === "image") return "insert_photo";
-      if (this.req.type === "audio") return "volume_up";
-      if (this.req.type === "video") return "movie";
-      return "insert_drive_file";
-    },
-    link: function () {
-      return api.getDownloadURL(this.req);
-    },
-    inlineLink: function () {
-      return api.getDownloadURL(this.req, true);
-    },
-    humanSize: function () {
-      if (this.req.isDir) {
-        return this.req.items.length;
+const route = useRoute()
+const fileStore = useFileStore()
+const layoutStore = useLayoutStore()
+
+watch(route, (newValue, oldValue) => {
+  showLimit.value = 100
+  fetchData();
+})
+
+const req = computed(() => fileStore.req)
+
+// inject: ["$showSuccess"],
+
+
+// Define computes
+
+const icon = computed(() => {
+  if (req.value === null) return "insert_drive_file"
+  if (req.value.isDir) return "folder";
+  if (req.value.type === "image") return "insert_photo";
+  if (req.value.type === "audio") return "volume_up";
+  if (req.value.type === "video") return "movie";
+  return "insert_drive_file";
+})
+
+const link = computed(() => (req.value ? api.getDownloadURL(req.value) : ""))
+const inlineLink = computed(() => (req.value ? api.getDownloadURL(req.value, true) : ""))
+const humanSize = computed(() => {
+  if (req.value) {
+    return (req.value.isDir ? req.value.items.length : filesize(req.value.size ?? 0))
+  } else {
+    return ""
+  }
+})
+const humanTime = computed(() => dayjs(req.value?.modified).fromNow())
+const modTime = computed(() => (req.value ? new Date(Date.parse(req.value.modified)).toLocaleString() : new Date()))
+
+// Functions
+const base64 = (name: any) => Base64.encodeURI(name);
+const fetchData = async () => {
+  fileStore.reload = false;
+  fileStore.selected = [];
+  fileStore.multiple = false;
+  // fileStore.closeHovers();
+
+  // Set loading to true and reset the error.
+  layoutStore.loading = true;
+  error.value = null;
+  if (password.value !== "") {
+    attemptedPasswordLogin.value = true;
+  }
+
+  let url = route.path;
+  if (url === "") url = "/";
+  if (url[0] !== "/") url = "/" + url;
+
+  try {
+    let file = await api.fetch(url, password.value);
+    file.hash = hash.value;
+    
+    
+    token.value = file.token || "";
+
+    fileStore.updateRequest(file);
+    document.title = `${file.name} - ${document.title}`;
+  } catch (e) {
+    error.value = e;
+  } finally {
+    layoutStore.loading = false;
+  }
+}
+
+const keyEvent = (event: KeyboardEvent) => {
+  if (event.key === "Escape") {
+    // If we're on a listing, unselect all
+    // files and folders.
+    if (fileStore.selectedCount > 0) {
+      fileStore.selected = [];
+    }
+  }
+}
+
+const toggleMultipleSelection = () => {
+  // toggle
+}
+
+const isSingleFile = () => fileStore.selectedCount === 1 && !req.value?.items[fileStore.selected[0]].isDir
+
+const download = () => {
+  if (isSingleFile()) {
+    api.download(
+      null,
+      hash.value,
+      token.value,
+      req.value?.items[fileStore.selected[0]].path
+    );
+    return;
+  }
+  layoutStore.showHover({
+    prompt: "download",
+    confirm: (format: any) => {
+      if (req.value === null) return false
+      layoutStore.closeHovers();
+
+      let files: string[] = [];
+
+      for (let i of fileStore.selected) {
+        files.push(req.value.items[i].path);
       }
 
-      return filesize(this.req.size);
+      // @ts-ignore
+      api.download(format, hash.value, token.value, ...files);
     },
-    humanTime: function () {
-      return dayjs(this.req.modified).fromNow();
-    },
-    modTime: function () {
-      return new Date(Date.parse(this.req.modified)).toLocaleString();
-    },
-  },
-  methods: {
-    ...mapActions(useFileStore, ["updateRequest", "toggleMultiple"]),
-    ...mapActions(useLayoutStore, ["showHover", "closeHovers"]),
-    base64: function (name) {
-      return Base64.encodeURI(name);
-    },
-    fetchData: async function () {
-      // Reset view information.
-      this.reload = false;
-      this.selected = [];
-      this.multiple = false;
-      this.closeHovers();
+  });
+}
 
-      // Set loading to true and reset the error.
-      this.loading = true;
-      this.error = null;
+const linkSelected = () => {
+  return isSingleFile() && req.value
+    // @ts-ignore
+    ? api.getDownloadURL({
+      hash: hash.value,
+      path: req.value.items[fileStore.selected[0]].path,
+    })
+    : "";
+}
 
-      if (this.password !== "") {
-        this.attemptedPasswordLogin = true;
-      }
 
-      let url = this.$route.path;
-      if (url === "") url = "/";
-      if (url[0] !== "/") url = "/" + url;
+onMounted(async () => {
+  // Created
+  hash.value = route.params.path[0];
+  await fetchData();
 
-      try {
-        let file = await api.fetch(url, this.password);
-        file.hash = this.hash;
 
-        this.token = file.token || "";
+  // window.addEventListener("keydown", this.keyEvent);
+  // this.clip = new Clipboard(".copy-clipboard");
+  // this.clip.on("success", () => {
+  //   this.$showSuccess(this.$t("success.linkCopied"));
+  // });
+})
 
-        this.updateRequest(file);
-        document.title = `${file.name} - ${document.title}`;
-      } catch (e) {
-        this.error = e;
-      } finally {
-        this.loading = false;
-      }
-    },
-    keyEvent(event) {
-      if (event.key === "Escape") {
-        // If we're on a listing, unselect all
-        // files and folders.
-        if (this.selectedCount > 0) {
-          this.selected = [];
-        }
-      }
-    },
-    toggleMultipleSelection() {
-      this.toggleMultiple();
-    },
-    isSingleFile: function () {
-      return (
-        this.selectedCount === 1 && !this.req.items[this.selected[0]].isDir
-      );
-    },
-    download() {
-      if (this.isSingleFile()) {
-        api.download(
-          null,
-          this.hash,
-          this.token,
-          this.req.items[this.selected[0]].path
-        );
-        return;
-      }
+onBeforeUnmount(() => {
+  // window.removeEventListener("keydown", this.keyEvent);
+  // this.clip.destroy();
+})
 
-      this.showHover({
-        prompt: "download",
-        confirm: (format) => {
-          this.closeHovers();
-
-          let files = [];
-
-          for (let i of this.selected) {
-            files.push(this.req.items[i].path);
-          }
-
-          api.download(format, this.hash, this.token, ...files);
-        },
-      });
-    },
-    linkSelected: function () {
-      return this.isSingleFile()
-        ? api.getDownloadURL({
-            hash: this.hash,
-            path: this.req.items[this.selected[0]].path,
-          })
-        : "";
-    },
-  },
-};
-</script>
+</script>
\ No newline at end of file
diff --git a/frontend/src/views/files/FileListing.vue b/frontend/src/views/files/FileListing.vue
index 8dd8c334..da520a14 100644
--- a/frontend/src/views/files/FileListing.vue
+++ b/frontend/src/views/files/FileListing.vue
@@ -616,7 +616,7 @@ export default {
       if (!items) return;
 
       let columns = Math.floor(
-        document.querySelector("main").offsetWidth / this.columnWidth
+        document.querySelector("main")?.offsetWidth / this.columnWidth
       );
       if (columns === 0) columns = 1;
       items.style.width = `calc(${100 / columns}% - 1em)`;