From 3ba7784e085a2e7cb5d3f5097d1876926356ae78 Mon Sep 17 00:00:00 2001 From: Kristian Binau Date: Wed, 11 Oct 2023 17:42:57 +0200 Subject: [PATCH 1/6] #28 - POC for listening for updates on FileView --- .env.example | 2 ++ package-lock.json | 14 ++++++++++++++ package.json | 1 + src/components/item/Browser.vue | 26 ++++++++++++++++++++++++++ src/env.d.ts | 2 ++ src/pages/u/folder/[id].astro | 2 +- src/pages/u/index.astro | 2 +- 7 files changed, 47 insertions(+), 2 deletions(-) diff --git a/.env.example b/.env.example index a8b8dfc..3259af5 100644 --- a/.env.example +++ b/.env.example @@ -8,3 +8,5 @@ PUBLIC_API_URL="http://localhost:3000/api/" JWT_PUBLIC_KEY="-----BEGIN PUBLIC KEY----- MCowBQYDK2VwAyEA/nqSs2DZmox+sRNR9d9XdaO3C2yJABIO5gdJlBcswNI= -----END PUBLIC KEY-----" + +PUBLIC_PUSHER_APP_KEY="3a4575271634ad5a09ef" diff --git a/package-lock.json b/package-lock.json index 1a7c207..21907e7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -25,6 +25,7 @@ "flowbite-typography": "^1.0.3", "jose": "^4.15.1", "nanostores": "^0.9.3", + "pusher-js": "^8.3.0", "tailwind-scrollbar": "^3.0.5", "tailwindcss": "^3.3.3", "typescript": "^5.2.2", @@ -6953,6 +6954,14 @@ "node": ">=6" } }, + "node_modules/pusher-js": { + "version": "8.3.0", + "resolved": "https://registry.npmjs.org/pusher-js/-/pusher-js-8.3.0.tgz", + "integrity": "sha512-6GohP06WlVeomAQQe9qWh1IDzd3+InluWt+ZUOcecVK1SEQkg6a8uYVsvxSJm7cbccfmHhE0jDkmhKIhue8vmA==", + "dependencies": { + "tweetnacl": "^1.0.3" + } + }, "node_modules/querystringify": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.2.0.tgz", @@ -8263,6 +8272,11 @@ "node": "*" } }, + "node_modules/tweetnacl": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-1.0.3.tgz", + "integrity": "sha512-6rt+RN7aOi1nGMyC4Xa5DdYiukl2UWCbcJft7YhxReBGQD7OAM8Pbxw6YMo4r2diNEA8FEmu32YOn9rhaiE5yw==" + }, "node_modules/type-detect": { "version": "4.0.8", "resolved": "https://registry.npmjs.org/type-detect/-/type-detect-4.0.8.tgz", diff --git a/package.json b/package.json index 8e23002..b07d774 100644 --- a/package.json +++ b/package.json @@ -44,6 +44,7 @@ "flowbite-typography": "^1.0.3", "jose": "^4.15.1", "nanostores": "^0.9.3", + "pusher-js": "^8.3.0", "tailwind-scrollbar": "^3.0.5", "tailwindcss": "^3.3.3", "typescript": "^5.2.2", diff --git a/src/components/item/Browser.vue b/src/components/item/Browser.vue index 4935a90..b6e6c73 100644 --- a/src/components/item/Browser.vue +++ b/src/components/item/Browser.vue @@ -72,12 +72,17 @@ import ContextMenu from '@components/base/contextMenu.vue'; import BaseToast, { ToastType } from '@components/base/toast.vue'; import { t } from '@lib/i18n'; import { isModalOpen } from '@stores/modal'; +import Pusher from 'pusher-js'; const props = defineProps({ modelValue: { type: Object as PropType, required: false, }, + user: { + type: Object as PropType, + required: true, + }, }); const fileBrowserContextMenu = ref>(); @@ -186,4 +191,25 @@ async function uploadFiles(e: Event) { } }); } + +/** + * Live Updates + */ +Pusher.logToConsole = true; + +let pusher = new Pusher(import.meta.env.PUBLIC_PUSHER_APP_KEY, { + cluster: import.meta.env.PUBLIC_PUSHER_APP_CLUSTER, +}); + +const channelName = FolderClass.isFolder(props.modelValue) + ? `browser-folder-${props.modelValue.id}` + : `browser-root-${await crypto.subtle.digest( + 'SHA-256', + new TextEncoder().encode(props.user.email), + )}`; + +var channel = pusher.subscribe(channelName); +channel.bind('update', function (data: any) { + alert(JSON.stringify(data)); +}); diff --git a/src/env.d.ts b/src/env.d.ts index 9372e88..2f832bc 100644 --- a/src/env.d.ts +++ b/src/env.d.ts @@ -13,6 +13,8 @@ interface ImportMetaEnv { readonly PUBLIC_LOCAL_DEVELOPMENT_API_URL: string | undefined; readonly JWT_PUBLIC_KEY: string; readonly NODE_BUILD: boolean | undefined; + readonly PUBLIC_PUSHER_APP_KEY: string; + readonly PUBLIC_PUSHER_APP_CLUSTER: string; } interface ImportMeta { diff --git a/src/pages/u/folder/[id].astro b/src/pages/u/folder/[id].astro index e9b19c8..0bfe796 100644 --- a/src/pages/u/folder/[id].astro +++ b/src/pages/u/folder/[id].astro @@ -38,6 +38,6 @@ const user = Astro.locals.user as User;
- +
diff --git a/src/pages/u/index.astro b/src/pages/u/index.astro index e3fa003..5602c76 100644 --- a/src/pages/u/index.astro +++ b/src/pages/u/index.astro @@ -9,6 +9,6 @@ const user = Astro.locals.user as User;
- +
From afd4cf80418ed833fab3d7e175d210c897e0bed5 Mon Sep 17 00:00:00 2001 From: Frederik Pytlick Date: Fri, 13 Oct 2023 16:59:21 +0200 Subject: [PATCH 2/6] #28 - Introduce websockets in file browser --- .env.example | 1 + src/components/item/Browser.vue | 55 ++++++++++++++++++--------------- src/env.d.ts | 1 + src/layouts/SideBar.astro | 14 +++++++-- src/lib/pusher.ts | 15 +++++++++ src/middleware/user.ts | 2 +- 6 files changed, 59 insertions(+), 29 deletions(-) create mode 100644 src/lib/pusher.ts diff --git a/.env.example b/.env.example index 3259af5..09eb2d1 100644 --- a/.env.example +++ b/.env.example @@ -10,3 +10,4 @@ MCowBQYDK2VwAyEA/nqSs2DZmox+sRNR9d9XdaO3C2yJABIO5gdJlBcswNI= -----END PUBLIC KEY-----" PUBLIC_PUSHER_APP_KEY="3a4575271634ad5a09ef" +PUBLIC_PUSHER_APP_CLUSTER="eu" diff --git a/src/components/item/Browser.vue b/src/components/item/Browser.vue index 78176b4..56825be 100644 --- a/src/components/item/Browser.vue +++ b/src/components/item/Browser.vue @@ -57,14 +57,14 @@ diff --git a/src/env.d.ts b/src/env.d.ts index 2f832bc..d84b5d6 100644 --- a/src/env.d.ts +++ b/src/env.d.ts @@ -1,6 +1,7 @@ /// interface User { + id: number; name: string; email: string; } diff --git a/src/layouts/SideBar.astro b/src/layouts/SideBar.astro index da239b8..831ecc9 100644 --- a/src/layouts/SideBar.astro +++ b/src/layouts/SideBar.astro @@ -55,9 +55,17 @@ const currentPath = Astro.url.pathname; currentPath === '/u/shared' ? 'active' : '', ]} > - + {t('layout.link.sharedWithMe', Astro.locals.currentLocale)} diff --git a/src/lib/pusher.ts b/src/lib/pusher.ts new file mode 100644 index 0000000..c22bd93 --- /dev/null +++ b/src/lib/pusher.ts @@ -0,0 +1,15 @@ +import Pusher from 'pusher-js'; + +Pusher.logToConsole = true; + +const pusher = new Pusher(import.meta.env.PUBLIC_PUSHER_APP_KEY, { + cluster: import.meta.env.PUBLIC_PUSHER_APP_CLUSTER, +}); + +const getFolderChannel = (userId: number, itemId: number | null | undefined) => { + const channelName = itemId ? `browser-folder-${itemId}` : `browser-root-${userId}`; + + return pusher.subscribe(channelName); +}; + +export { pusher, getFolderChannel }; diff --git a/src/middleware/user.ts b/src/middleware/user.ts index 76cc85c..44f8e77 100644 --- a/src/middleware/user.ts +++ b/src/middleware/user.ts @@ -30,7 +30,7 @@ export const user = defineMiddleware(async ({ locals, request, redirect }, next) } // Otherwise, set the user data in the locals. - locals.user = userResponse as User; + locals.user = { id: locals.userId, ...userResponse } as User; return next(); }); From 892b9fee8f7c836261153a67d0d4ad0d4aefd84f Mon Sep 17 00:00:00 2001 From: Frederik Pytlick Date: Mon, 16 Oct 2023 08:26:04 +0200 Subject: [PATCH 3/6] #28 - Fix share item modal --- src/components/item/ShareItemModal.vue | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/components/item/ShareItemModal.vue b/src/components/item/ShareItemModal.vue index ab9b27a..d649624 100644 --- a/src/components/item/ShareItemModal.vue +++ b/src/components/item/ShareItemModal.vue @@ -154,6 +154,10 @@ async function getItem() { rawItem.ItemSharing.forEach( (sharing: { id: number; user: { id: number; name: string; email: string } }) => { + if (sharing.user.id === rawItem.owner.id) { + return; + } + usersWithAccess.value.push({ id: sharing.user.id, sharingId: sharing.id, From ecc694e3662531070fbf2cb1ca7b1d32d15ba347 Mon Sep 17 00:00:00 2001 From: Frederik Pytlick Date: Mon, 16 Oct 2023 09:59:20 +0200 Subject: [PATCH 4/6] #28 - Fixed issue with modals --- src/components/item/file/EditModal.vue | 3 +++ src/components/item/folder/EditModal.vue | 4 ++++ 2 files changed, 7 insertions(+) diff --git a/src/components/item/file/EditModal.vue b/src/components/item/file/EditModal.vue index dac4d4a..284dba8 100644 --- a/src/components/item/file/EditModal.vue +++ b/src/components/item/file/EditModal.vue @@ -70,6 +70,9 @@ async function updateFile() { } function open() { + file.value = { + name: props.file.name, + }; modal.value?.open(); } diff --git a/src/components/item/folder/EditModal.vue b/src/components/item/folder/EditModal.vue index f19495a..9da46aa 100644 --- a/src/components/item/folder/EditModal.vue +++ b/src/components/item/folder/EditModal.vue @@ -108,6 +108,10 @@ async function updateFolder() { } function open() { + folder.value = { + name: props.folder.name, + color: props.folder.color, + }; modal.value?.open(); } From 302c1997a2657dccb1c0cf1f78fadf30290c0630 Mon Sep 17 00:00:00 2001 From: Frederik Pytlick Date: Mon, 16 Oct 2023 13:21:15 +0200 Subject: [PATCH 5/6] #28 - Fixed various small issues --- src/components/TestForm.vue | 60 -------------------------- src/components/item/docs/EditModal.vue | 7 ++- src/lang/en.ts | 8 ++-- src/lib/items/docs.ts | 2 +- 4 files changed, 11 insertions(+), 66 deletions(-) delete mode 100644 src/components/TestForm.vue diff --git a/src/components/TestForm.vue b/src/components/TestForm.vue deleted file mode 100644 index 8315111..0000000 --- a/src/components/TestForm.vue +++ /dev/null @@ -1,60 +0,0 @@ - - - diff --git a/src/components/item/docs/EditModal.vue b/src/components/item/docs/EditModal.vue index 50f0825..01cf80c 100644 --- a/src/components/item/docs/EditModal.vue +++ b/src/components/item/docs/EditModal.vue @@ -64,10 +64,15 @@ async function updateFile() { // TODO: Show success toast close(false); - } catch (e) {} + } catch (e) { + console.error('Error: ' + e); + } } function open() { + docs.value = { + name: props.docs.name, + }; modal.value?.open(); } diff --git a/src/lang/en.ts b/src/lang/en.ts index e54e1b4..593d002 100644 --- a/src/lang/en.ts +++ b/src/lang/en.ts @@ -51,7 +51,7 @@ export default { submit: 'Edit', }, action: { - create: 'Upload fil', + create: 'Upload file', edit: 'Rename file', share: 'Share', delete: 'Delete', @@ -112,12 +112,12 @@ export default { submit: 'Edit', }, action: { - create: 'Create Docs', - edit: 'Rename Docs', + create: 'Create docs', + edit: 'Rename docs', share: 'Share', delete: 'Delete', openInNewTab: 'Open in new tab', - confirmDelete: 'Are you sure you want to delete this Docs?', + confirmDelete: 'Are you sure you want to delete this docs?', }, }, }, diff --git a/src/lib/items/docs.ts b/src/lib/items/docs.ts index 6224a29..3bce554 100644 --- a/src/lib/items/docs.ts +++ b/src/lib/items/docs.ts @@ -1,6 +1,6 @@ import { ItemClass, type ItemType } from './items'; import { type FolderType } from './folders'; -import { api } from '@lib/helpers'; +import { api, fetchFromApi } from '@lib/helpers'; export class DocsClass extends ItemClass { private _text: string; From 322cf0d9e27d4c8209abdae0237f9a40bab65707 Mon Sep 17 00:00:00 2001 From: Frederik Pytlick Date: Mon, 16 Oct 2023 13:21:56 +0200 Subject: [PATCH 6/6] #28 - Format --- src/components/item/Browser.vue | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/item/Browser.vue b/src/components/item/Browser.vue index 2d94c0c..5abd0e8 100644 --- a/src/components/item/Browser.vue +++ b/src/components/item/Browser.vue @@ -216,7 +216,6 @@ const createDocsModal = ref>(); const docs = computed(() => { return Object.values(items.value).filter((item) => item instanceof DocsClass) as DocsClass[]; - }); /** @@ -255,4 +254,4 @@ channel.bind('delete', (data: ItemType) => { removeItem(item); }); - \ No newline at end of file +