Fixed a few things

Closes #39, #40

frontend/src/api/base.ts

@@ -40,8 +40,14 @@ export const post_token_form = (
 			},
 			onUploadProgress: onProgress
 		})
-		.then((res) => res.data)
-		.catch((err) => err.response.data);
+		.then((res) => {
+			console.log(res);
+			return res.data;
+		})
+		.catch((err) => {
+			console.log(err);
+			return err.response.data;
+		});
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 export const get = (url: string) =>

frontend/src/api/util.ts

@@ -4,6 +4,16 @@ import jwtDecode from 'jwt-decode';
 import { isErrorResponse } from './base';
 import { refresh_token } from './auth';
 
+export async function update_token(
+	token: TokenInjectType
+): Promise<string | void> {
+	if (!token.jwt.value) return token.logout();
+	const new_token = await refresh_token(token.jwt.value);
+	if (isErrorResponse(new_token)) return token.logout();
+	token.setToken(new_token.jwt);
+	return new_token.jwt;
+}
+
 export async function check_token(
 	token: TokenInjectType
 ): Promise<string | void> {
@@ -13,10 +23,7 @@ export async function check_token(
 	// Expires in more than 60 Minute
 	if (payload.exp && payload.exp > Math.floor(Date.now() / 1000 + 60 * 60))
 		return token.jwt.value;
-	const new_token = await refresh_token(token.jwt.value);
-	if (isErrorResponse(new_token)) return token.logout();
-	token.setToken(new_token.jwt);
-	return new_token.jwt;
+	return update_token(token);
 }
 
 export type TokenInjectType = {

frontend/src/components/DirViewer/DirViewerTable.vue

@@ -33,6 +33,7 @@ import {
 	Delete,
 	Download
 } from '@vicons/carbon';
+import semaphore from 'semaphore';
 import NLink from '@/components/NLink.vue';
 import PreviewImage from '@/components/DirViewer/PreviewImage.vue';
 import createZipDialog from '@/components/DirViewer/CreateZipDialog';
@@ -59,6 +60,7 @@ const props = defineProps<{
 	showPreview: boolean;
 }>();
 
+const previewDownloadSem = semaphore(40);
 const checkedRows = ref<number[]>([]);
 const deleteNodes = ref<number[]>([]);
 const deleteDialog = ref();
@@ -222,7 +224,12 @@ const previewColumns: DataTableColumn<Responses.GetNodeEntry>[] = [
 			return node.isFile ? (
 				<Suspense>
 					{{
-						default: () => <PreviewImage node={node} />,
+						default: () => (
+							<PreviewImage
+								node={node}
+								sem={previewDownloadSem}
+							/>
+						),
 						fallback: () => <NSpin size="small" />
 					}}
 				</Suspense>

frontend/src/components/DirViewer/PreviewImage.vue

@@ -1,5 +1,6 @@
 <script setup async lang="ts">
 import type { TokenInjectType, Responses } from '@/api';
+import type { Semaphore } from 'semaphore';
 import { inject, ref } from 'vue';
 import { NImage, NIcon } from 'naive-ui';
 import { Image, Music, Video, Document } from '@vicons/carbon';
@@ -7,6 +8,7 @@ import { check_token, FS, isErrorResponse } from '@/api';
 
 const props = defineProps<{
 	node: Responses.GetNodeEntry;
+	sem: Semaphore;
 }>();
 
 enum fileTypes {
@@ -23,28 +25,35 @@ const success = ref(false);
 const data = ref('');
 const fileType = ref<fileTypes>(fileTypes.UNKNOWN);
 
-const token = await check_token(jwt);
-if (token) {
-	if (props.node.preview) {
-		const resp = await FS.download_preview(token, props.node.id);
-		if (!isErrorResponse(resp)) {
-			data.value = resp.data;
-			success.value = true;
+await new Promise<void>((resolve) => {
+	props.sem.take(async () => {
+		const token = await check_token(jwt);
+		if (token) {
+			if (props.node.preview) {
+				const resp = await FS.download_preview(token, props.node.id);
+				if (!isErrorResponse(resp)) {
+					data.value = resp.data;
+					success.value = true;
+				}
+			} else {
+				fileType.value = fileTypes.UNKNOWN;
+				const resp = await FS.get_type(token, props.node.id);
+				if (!isErrorResponse(resp)) {
+					if (resp.type.startsWith('image'))
+						fileType.value = fileTypes.IMAGE;
+					else if (resp.type.startsWith('application/pdf'))
+						fileType.value = fileTypes.PDF;
+					else if (resp.type.startsWith('audio'))
+						fileType.value = fileTypes.AUDIO;
+					else if (resp.type.startsWith('video'))
+						fileType.value = fileTypes.VIDEO;
+				}
+			}
 		}
-	} else {
-		fileType.value = fileTypes.UNKNOWN;
-		const resp = await FS.get_type(token, props.node.id);
-		if (!isErrorResponse(resp)) {
-			if (resp.type.startsWith('image')) fileType.value = fileTypes.IMAGE;
-			else if (resp.type.startsWith('application/pdf'))
-				fileType.value = fileTypes.PDF;
-			else if (resp.type.startsWith('audio'))
-				fileType.value = fileTypes.AUDIO;
-			else if (resp.type.startsWith('video'))
-				fileType.value = fileTypes.VIDEO;
-		}
-	}
-}
+		props.sem.leave();
+		resolve();
+	});
+});
 </script>
 
 <template>

frontend/src/components/UploadDialog/UploadFileDialog.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { TokenInjectType, UploadFile } from '@/api';
 import { ref, inject } from 'vue';
-import { check_token } from '@/api';
+import { update_token } from '@/api';
 import UploadEntry from '@/components/UploadDialog/UploadEntry.vue';
 import { NCard } from 'naive-ui';
 
@@ -10,7 +10,7 @@ const jwt = inject<TokenInjectType>('jwt') as TokenInjectType;
 const entries = ref<typeof UploadEntry[]>([]);
 
 async function startUpload() {
-	const token = await check_token(jwt);
+	const token = await update_token(jwt);
 	if (!token) return;
 	const ents: typeof UploadEntry[] = entries.value;
 	const allProms: Promise<void>[] = [];

frontend/src/views/FSView.vue

@@ -2,13 +2,15 @@
 import type { TokenInjectType, Responses } from '@/api';
 import { onBeforeRouteUpdate, useRoute, useRouter } from 'vue-router';
 import { inject, onBeforeMount, ref } from 'vue';
-import { NCard } from 'naive-ui';
+import { NCard, useMessage } from 'naive-ui';
 import { check_token, FS, isErrorResponse } from '@/api';
 import UploadField from '@/components/UploadDialog/UploadField.vue';
 import DirViewer from '@/components/DirViewer/DirViewer.vue';
 import FileViewer from '@/components/FileViewer/FileViewer.vue';
 import NLink from '@/components/NLink.vue';
+import { loadingMsgWrapper } from '@/utils';
 
+const message = useMessage();
 const router = useRouter();
 const route = useRoute();
 const jwt = inject<TokenInjectType>('jwt') as TokenInjectType;
@@ -22,7 +24,7 @@ function nameCompare(a: Responses.GetNodeEntry, b: Responses.GetNodeEntry) {
 	return aStr.localeCompare(bStr);
 }
 
-async function fetch_node(node_id: number) {
+const fetch_node = loadingMsgWrapper(message, async (node_id: number) => {
 	const token = await check_token(jwt);
 	if (!token) return;
 	const [p, n] = [
@@ -41,7 +43,7 @@ async function fetch_node(node_id: number) {
 		n.children = [...folders, ...files];
 	}
 	[path.value, node.value] = [p, n];
-}
+});
 
 onBeforeRouteUpdate(async (to) => {
 	await fetch_node(Number(to.params.node_id));