diff --git a/src/lib/contextMenu.ts b/src/lib/contextMenu.ts
new file mode 100644
index 0000000..56f65cf
--- /dev/null
+++ b/src/lib/contextMenu.ts
@@ -0,0 +1,14 @@
+import { useEventBus, type EventBusKey } from '@vueuse/core';
+import { isModalOpen } from '@stores/modal';
+
+const contextMenuOpenEvent: EventBusKey<{ name: 'contextMenuOpen' }> = Symbol('contextMenuOpen');
+
+const bus = useEventBus(contextMenuOpenEvent);
+
+isModalOpen.listen((isOpen) => {
+ if (isOpen) {
+ bus.emit();
+ }
+});
+
+export default bus;
diff --git a/src/lib/items/files.ts b/src/lib/items/files.ts
index 021f950..339f766 100644
--- a/src/lib/items/files.ts
+++ b/src/lib/items/files.ts
@@ -1,5 +1,7 @@
import { ItemClass, type ItemType } from './items';
-import { FolderClass } from './folders';
+import { type FolderType } from './folders';
+import { upload } from '@vercel/blob/client';
+import { api } from '@lib/helpers';
export class FileClass extends ItemClass {
private _blobUrl: string;
@@ -10,23 +12,60 @@ export class FileClass extends ItemClass {
this._blobUrl = fileObject.blobUrl;
}
- static create(name: string, parent: FolderClass | null) {
- // TODO: Send request to create folder
-
- // Placeholder for now
- const returnedFile = {
- id: 1,
- name: name,
- mimeType: 'application/vnd.cloudstore.folder',
- ownerId: 43535,
- parentId: parent?.id || null,
- deletedAt: null,
- createdAt: new Date(),
- updatedAt: new Date(),
- blobUrl: 'https://www.google.com',
- };
-
- return new FileClass(returnedFile);
+ static async create(file: File, parent: FolderType | null) {
+ await upload(file.name, file, {
+ access: 'public',
+ handleUploadUrl: api('blob'),
+ clientPayload: JSON.stringify({
+ parentId: parent?.id ?? null,
+ }),
+ });
+ }
+
+ async update(input: { name: string }) {
+ const response = await fetch(api('blob'), {
+ method: 'PUT',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ credentials: 'include',
+ body: JSON.stringify({
+ id: this.id,
+ name: input.name,
+ }),
+ });
+
+ if (!response.ok) {
+ if (response.status >= 400 && response.status < 500) {
+ const json = await response.json();
+
+ throw new Error(json.error);
+ }
+
+ throw new Error(await response.text());
+ }
+
+ return new FileClass(await response.json());
+ }
+
+ async delete() {
+ const response = await fetch(api('blob/' + this.id), {
+ method: 'DELETE',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ credentials: 'include',
+ });
+
+ if (!response.ok) {
+ if (response.status >= 400 && response.status < 500) {
+ const json = await response.json();
+
+ throw new Error(json.error);
+ }
+
+ throw new Error(await response.text());
+ }
}
get blobUrl() {
diff --git a/src/lib/items/folders.ts b/src/lib/items/folders.ts
index 951629b..ac06f04 100644
--- a/src/lib/items/folders.ts
+++ b/src/lib/items/folders.ts
@@ -1,3 +1,4 @@
+import { api } from '@lib/helpers';
import { ItemClass, type ItemType } from './items';
export class FolderClass extends ItemClass {
@@ -9,23 +10,78 @@ export class FolderClass extends ItemClass {
this._color = folderObject.color;
}
- static create(name: string, parent: FolderClass | null) {
- // TODO: Send request to create folder
-
- // Placeholder for now
- const returnedFolder = {
- id: 1,
- name: name,
- mimeType: 'application/vnd.cloudstore.folder',
- ownerId: 43535,
- parentId: parent?.id || null,
- deletedAt: null,
- createdAt: new Date(),
- updatedAt: new Date(),
- color: FolderClass.randomColor(),
- };
-
- return new FolderClass(returnedFolder);
+ static async create(input: { name: string; parent: FolderType | null; color: FolderColor }) {
+ const response = await fetch(api('folder'), {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ credentials: 'include',
+ body: JSON.stringify({
+ name: input.name,
+ parentId: input.parent?.id ?? null,
+ color: input.color,
+ }),
+ });
+
+ if (!response.ok) {
+ if (response.status >= 400 && response.status < 500) {
+ const json = await response.json();
+
+ throw new Error(json.error);
+ }
+
+ throw new Error(await response.text());
+ }
+
+ return new FolderClass(await response.json());
+ }
+
+ async update(input: { name: string; color: FolderColor }) {
+ const response = await fetch(api('folder'), {
+ method: 'PUT',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ credentials: 'include',
+ body: JSON.stringify({
+ id: this.id,
+ name: input.name,
+ color: input.color,
+ }),
+ });
+
+ if (!response.ok) {
+ if (response.status >= 400 && response.status < 500) {
+ const json = await response.json();
+
+ throw new Error(json.error);
+ }
+
+ throw new Error(await response.text());
+ }
+
+ return new FolderClass(await response.json());
+ }
+
+ async delete() {
+ const response = await fetch(api('folder/' + this.id), {
+ method: 'DELETE',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ credentials: 'include',
+ });
+
+ if (!response.ok) {
+ if (response.status >= 400 && response.status < 500) {
+ const json = await response.json();
+
+ throw new Error(json.error);
+ }
+
+ throw new Error(await response.text());
+ }
}
get color() {
@@ -36,12 +92,6 @@ export class FolderClass extends ItemClass {
return FolderColors[this._color];
}
- private static randomColor() {
- return Object.keys(FolderColors)[
- Math.floor(Math.random() * Object.keys(FolderColors).length)
- ] as FolderColor;
- }
-
static isFolder(object: any): object is FolderType {
if (!ItemClass.isItem(object)) return false;
@@ -59,7 +109,7 @@ export type FolderType = {
color: FolderColor;
} & ItemType;
-const FolderColors =
{
+export const FolderColors = {
red: 'from-red-500 to-orange-500',
orange: 'from-orange-500 to-amber-500',
amber: 'from-amber-500 to-yellow-500',
@@ -78,5 +128,5 @@ const FolderColors = {
pink: 'from-pink-500 to-rose-500',
rose: 'from-rose-500 to-red-500',
};
-type FolderColor = keyof typeof FolderColors;
+export type FolderColor = keyof typeof FolderColors;
type FolderColorValue = (typeof FolderColors)[FolderColor];
diff --git a/src/lib/items/items.ts b/src/lib/items/items.ts
index 29d1b7d..b371378 100644
--- a/src/lib/items/items.ts
+++ b/src/lib/items/items.ts
@@ -35,6 +35,10 @@ export abstract class ItemClass {
return this._name;
}
+ protected set name(value: string) {
+ this._name = value;
+ }
+
get mimeType() {
return this._mimeType;
}
diff --git a/src/pages/u/folder/[id].astro b/src/pages/u/folder/[id].astro
index c1c1c64..e9b19c8 100644
--- a/src/pages/u/folder/[id].astro
+++ b/src/pages/u/folder/[id].astro
@@ -1,6 +1,7 @@
---
import LayoutSidebar from '@layouts/LayoutSidebar.astro';
-import FileBrowser from '@components/files/FileBrowser.vue';
+// @ts-ignore
+import Browser from '@components/item/Browser.vue';
// @ts-ignore https://github.com/withastro/language-tools/issues/476
import { api, url } from '@lib/helpers';
import { FolderClass } from '@lib/items/folders';
@@ -36,7 +37,7 @@ const user = Astro.locals.user as User;
---
-
-
+
+
diff --git a/src/pages/u/index.astro b/src/pages/u/index.astro
index 891cda0..e3fa003 100644
--- a/src/pages/u/index.astro
+++ b/src/pages/u/index.astro
@@ -1,13 +1,14 @@
---
import LayoutSidebar from '@layouts/LayoutSidebar.astro';
-import FileBrowser from '@components/files/FileBrowser.vue';
+// @ts-ignore
+import Browser from '@components/item/Browser.vue';
// We can safely cast this as we know that middleware would have already checked for a valid user
const user = Astro.locals.user as User;
---
-
-
+
+
diff --git a/src/stores/items.ts b/src/stores/items.ts
new file mode 100644
index 0000000..f43a2ae
--- /dev/null
+++ b/src/stores/items.ts
@@ -0,0 +1,16 @@
+import { map } from 'nanostores';
+import type { ItemClass } from '@lib/items/items';
+
+export const itemsStore = map
>({});
+
+export function addItem(item: ItemClass) {
+ itemsStore.setKey(item.id, item);
+}
+
+export function updateItem(item: ItemClass) {
+ itemsStore.setKey(item.id, item);
+}
+
+export function removeItem(item: ItemClass) {
+ itemsStore.setKey(item.id, undefined);
+}
diff --git a/src/stores/modal.ts b/src/stores/modal.ts
new file mode 100644
index 0000000..7312a06
--- /dev/null
+++ b/src/stores/modal.ts
@@ -0,0 +1,3 @@
+import { atom } from 'nanostores';
+
+export const isModalOpen = atom(false);
diff --git a/tsconfig.json b/tsconfig.json
index a2b7fc2..e8aedb7 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -10,7 +10,8 @@
"paths": {
"@components/*": ["src/components/*"],
"@layouts/*": ["src/layouts/*"],
- "@lib/*": ["src/lib/*"]
+ "@lib/*": ["src/lib/*"],
+ "@stores/*": ["src/stores/*"]
},
"strictNullChecks": true,
"verbatimModuleSyntax": true,