#9 - Typing of Item, Folder and File complete

package.json

@@ -29,26 +29,26 @@
 	},
 	"dependencies": {
 		"@astrojs/check": "^0.2.0",
-		"@astrojs/node": "^6.0.0",
+		"@astrojs/node": "^6.0.2",
 		"@astrojs/sitemap": "^3.0.0",
 		"@astrojs/tailwind": "^5.0.0",
 		"@astrojs/ts-plugin": "^1.1.3",
 		"@astrojs/vercel": "^5.0.1",
 		"@astrojs/vue": "^3.0.0",
-		"@tauri-apps/api": "^1.4.0",
-		"@vercel/blob": "^0.12.5",
-		"astro": "^3.1.1",
+		"@tauri-apps/api": "^1.5.0",
+		"@vercel/blob": "^0.13.0",
+		"astro": "^3.2.2",
 		"flowbite": "^1.8.1",
 		"flowbite-typography": "^1.0.3",
-		"jose": "^4.14.6",
+		"jose": "^4.15.1",
 		"tailwind-scrollbar": "^3.0.5",
 		"tailwindcss": "^3.3.3",
 		"typescript": "^5.2.2",
 		"vite": "^4.4.9",
 		"vue": "^3.3.4"
 	},
 	"devDependencies": {
-		"@tauri-apps/cli": "^1.4.0",
+		"@tauri-apps/cli": "^1.5.1",
 		"dotenv": "^16.3.1",
 		"prettier": "^3.0.3",
 		"prettier-plugin-astro": "^0.12.0",

src/components/Dashboard.astro

@@ -3,5 +3,5 @@ import FileBrowser from './Files/FileBrowser.vue';
 ---
 
 <div class="h-screen px-4 pt-6">
-	<FileBrowser />
+	<FileBrowser client:only/>
 </div>

src/components/Files/File.vue

@@ -0,0 +1,15 @@
+<template>
+	<div>{{ file.name }}</div>
+</template>
+
+<script setup lang="ts">
+import { type PropType } from 'vue';
+import { FileClass } from '@lib/items';
+
+defineProps({
+	file: {
+		type: Object as PropType<FileClass>,
+		required: true,
+	},
+});
+</script>

src/components/Files/FileBrowser.vue

@@ -3,24 +3,54 @@
 		<NoFiles />
 	</template>
 	<template v-else>
-		<template v-for="folder in folders">
-			<button
-				type="button"
-				:class="randomGradient()"
-				class="mb-2 mr-2 rounded-lg bg-gradient-to-br px-5 py-2.5 text-center text-sm font-medium text-white hover:bg-gradient-to-bl focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800"
-			>
-				{{ folder.name }}
-			</button>
-		</template>
-		<template v-for="file in files"> </template>
-
+		<div>
+			<Folder v-for="folder in folders" :folder="folder" />
+		</div>
+		<div>
+			<File v-for="file in files" :file="file" />
+		</div>
 	</template>
 </template>
 
 <script setup lang="ts">
 import { computed, ref } from 'vue';
 import NoFiles from './NoFiles.vue';
+import Folder from './Folder.vue';
+import File from './File.vue';
+import { FolderClass, FileClass, ItemClass } from '@lib/items';
 
+/**
+ * Items
+ */
+const items = ref<ItemClass[]>([]);
+
+getItems();
+
+function getItems() {
+	for (let i = 0; i < 29; i++) {
+		const item =
+			Math.random() > 0.5 ? FolderClass.create(randomName(), null) : FileClass.create(randomName(), null);
+		items.value.push(item);
+	}
+}
+
+/**
+ * Folders
+ */
+const folders = computed(() => {
+	return items.value.filter((item) => item instanceof FolderClass) as FolderClass[];
+});
+
+/**
+ * Files
+ */
+const files = computed(() => {
+	return items.value.filter((item) => item instanceof FileClass) as FileClass[];
+});
+
+/**
+ * TODO: Delete this function
+ */
 function randomName() {
 	const words = [
 		'ability',
@@ -51,117 +81,4 @@ function randomName() {
 	];
 	return words[Math.floor(Math.random() * words.length)] as string;
 }
-
-function randomItems() {
-	const items = [];
-	for (let i = 0; i < 29; i++) {
-		items.push({
-			id: i.toString(),
-			name: randomName() + (Math.random() > 0.5 ? ' ' + randomName() : ''),
-			type: Math.random() > 0.5 ? FolderType.directory : Object.values(FileType)[Math.floor(Math.random() * Object.values(FileType).length)],
-		});
-	}
-	return items as Item[];
-}
-
-const items = ref<Item[]>(randomItems());
-
-const folders = computed(() => {
-	return items.value.filter((item) => item.type === FolderType.directory) as Folder[];
-});
-
-const files = computed(() => {
-	return items.value.filter((item) => item.type !== FolderType.directory) as File[];
-});
-
-function randomGradient() {
-	return `from-${randomColor()}-500 to-${randomColor()}-500`;
-}
-
-function randomColor() {
-	const colors = [
-		'red',
-		'orange',
-		'amber',
-		'yellow',
-		'lime',
-		'green',
-		'emerald',
-		'teal',
-		'cyan',
-		'sky',
-		'blue',
-		'indigo',
-		'violet',
-		'purple',
-		'fuchsia',
-		'pink',
-		'rose',
-	];
-	return colors[Math.floor(Math.random() * colors.length)];
-}
-</script>
-
-<script lang="ts">
-const FolderType = <const>{
-	directory: 'text/directory',
-};
-type FolderTypeValue = (typeof FolderType)[keyof typeof FolderType];
-
-const VideoType = <const>{
-	mp4: 'video/mp4',
-	webm: 'video/webm',
-};
-
-const AudioType = <const>{
-	mp3: 'audio/mpeg',
-	wav: 'audio/wav',
-	ogg: 'audio/ogg',
-};
-
-const ImageType = <const>{
-	svg: 'image/svg+xml',
-	png: 'image/png',
-	jpg: 'image/jpeg',
-	gif: 'image/gif',
-};
-
-const ApplicationType = <const>{
-	doc: 'application/clouddoc',
-	pdf: 'application/pdf',
-	json: 'application/json',
-	zip: 'application/zip',
-};
-
-const FileType = <const>{
-	...VideoType,
-	...AudioType,
-	...ImageType,
-	...ApplicationType,
-};
-type FileTypeValue = (typeof FileType)[keyof typeof FileType];
-
-const SupportedItemTypes = <const>{
-	...FolderType,
-	...FileType,
-};
-type SupportedItemTypesValue = (typeof SupportedItemTypes)[keyof typeof SupportedItemTypes];
-
-type Item = {
-	id: string;
-	name: string;
-	type: SupportedItemTypesValue;
-};
-
-type Folder = {
-	id: string;
-	name: string;
-	type: FolderTypeValue;
-};
-
-type File = {
-	id: string;
-	name: string;
-	type: FileTypeValue;
-};
 </script>

src/components/Files/Folder.vue

@@ -0,0 +1,21 @@
+<template>
+	<button
+		type="button"
+		:class="folder.colorClass"
+		class="mb-2 mr-2 rounded-lg bg-gradient-to-br px-5 py-2.5 text-center text-sm font-medium text-white hover:bg-gradient-to-bl focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800"
+	>
+		{{ folder.name }}
+	</button>
+</template>
+
+<script setup lang="ts">
+import { type PropType } from 'vue';
+import { FolderClass } from '@lib/items';
+
+defineProps({
+	folder: {
+		type: Object as PropType<FolderClass>,
+		required: true,
+	},
+});
+</script>