From 1ff3877220343972ba8e7008b7338b41cc4c876d Mon Sep 17 00:00:00 2001 From: Adam Soltys Date: Fri, 27 Jan 2023 09:30:52 -0800 Subject: image previews --- src/components/AppHeader.svelte | 4 +- src/components/Avatar.svelte | 6 +- src/lib/store.js | 4 +- src/lib/upload.js | 1 + src/lib/utils.js | 2 +- src/routes/(app)/[username]/+layout.server.js | 3 +- .../[username]/settings/[...tab]/+page.svelte | 28 +++--- .../[username]/settings/[...tab]/_account.svelte | 103 ++++++++------------- svelte.config.js | 3 +- 9 files changed, 66 insertions(+), 88 deletions(-) diff --git a/src/components/AppHeader.svelte b/src/components/AppHeader.svelte index 59537ffa..8d64e713 100644 --- a/src/components/AppHeader.svelte +++ b/src/components/AppHeader.svelte @@ -1,6 +1,6 @@ diff --git a/src/components/Avatar.svelte b/src/components/Avatar.svelte index 09161e01..43331c19 100644 --- a/src/components/Avatar.svelte +++ b/src/components/Avatar.svelte @@ -1,5 +1,5 @@ diff --git a/src/lib/store.js b/src/lib/store.js index 5d83a74c..d38eb411 100644 --- a/src/lib/store.js +++ b/src/lib/store.js @@ -32,8 +32,8 @@ const persistLocal = (key, defaultValue) => { return s; }; -export const avatarUpload = writable(); -export const bannerUpload = writable(); +export const avatar = writable(); +export const banner = writable(); export const colorTheme = writable('from-primary to-gradient'); export const events = writable({}); export const invoice = writable(); diff --git a/src/lib/upload.js b/src/lib/upload.js index 099e2f30..899dbb0c 100644 --- a/src/lib/upload.js +++ b/src/lib/upload.js @@ -1,4 +1,5 @@ export const upload = async (file, type, progress, token) => { + console.log("TYPE", type) let url = `/api/upload/${type}`; let formData = new FormData(); formData.append('file', file); diff --git a/src/lib/utils.js b/src/lib/utils.js index bb6b34fa..e4b1194f 100644 --- a/src/lib/utils.js +++ b/src/lib/utils.js @@ -171,7 +171,7 @@ export const sat = (s) => { export const sats = 100000000; export const back = () => browser && history.go(-1); -export const focus = (el) => setTimeout(() => el.focus()); +export const focus = (el) => setTimeout(() => el.focus(), 1); export const sleep = (n) => new Promise((r) => setTimeout(r, n)); export const wait = async (f, n = 100, s = 300) => { diff --git a/src/routes/(app)/[username]/+layout.server.js b/src/routes/(app)/[username]/+layout.server.js index d1b203d7..8279698a 100644 --- a/src/routes/(app)/[username]/+layout.server.js +++ b/src/routes/(app)/[username]/+layout.server.js @@ -5,7 +5,8 @@ export let load = async ({ depends, params: { username } }) => { depends('app:user'); try { - return { subject: await get(`/users/${username}`) }; + let subject = await get(`/users/${username}`) + return { subject }; } catch (e) { console.log(e); throw error(500, 'Unable to retrieve user account data'); diff --git a/src/routes/(app)/[username]/settings/[...tab]/+page.svelte b/src/routes/(app)/[username]/settings/[...tab]/+page.svelte index 94ca2223..e1555248 100644 --- a/src/routes/(app)/[username]/settings/[...tab]/+page.svelte +++ b/src/routes/(app)/[username]/settings/[...tab]/+page.svelte @@ -6,7 +6,7 @@ import { Icon, Spinner, Pin } from '$comp'; import { t } from '$lib/translations'; import { failure, post, success } from '$lib/utils'; - import { avatarUpload, bannerUpload, password, pin } from '$lib/store'; + import { avatar, banner, password, pin } from '$lib/store'; import { upload } from '$lib/upload'; import { page } from '$app/stores'; import { sign, send, reEncryptEntropy } from '$lib/nostr'; @@ -46,7 +46,7 @@ $: ({ comp } = tabs.find((t) => t.name === tab)); - let { address, username } = user; + let { address, id, username } = user; let loading; async function handleSubmit() { @@ -58,17 +58,14 @@ data.set('cipher', await reEncryptEntropy(user, data.get('password'))); } - try { - if ($avatarUpload) { - await upload($avatarUpload.file, $avatarUpload.type, $avatarUpload.progress, token); - } - - if ($bannerUpload) { - await upload($bannerUpload.file, $bannerUpload.type, $bannerUpload.progress, token); - } - } catch (e) { - console.log(e); - failure('Something went wrong'); + if ($avatar) { + await upload($avatar.file, $avatar.type, $avatar.progress, token); + await fetch(`/api/public/${id}-profile.webp`, {cache: 'reload', mode: 'no-cors'}) + } + + if ($banner) { + await upload($banner.file, $banner.type, $banner.progress, token); + await fetch(`/api/public/${id}-banner.webp`, {cache: 'reload', mode: 'no-cors'}) } let event = { @@ -99,11 +96,12 @@ } applyAction(result); - loading = false; } catch (e) { console.log(e); - failure('Problem submitting form'); + failure('Something went wrong'); } + + loading = false; } let loaded; diff --git a/src/routes/(app)/[username]/settings/[...tab]/_account.svelte b/src/routes/(app)/[username]/settings/[...tab]/_account.svelte index 93b5442d..9b5af6d3 100644 --- a/src/routes/(app)/[username]/settings/[...tab]/_account.svelte +++ b/src/routes/(app)/[username]/settings/[...tab]/_account.svelte @@ -1,18 +1,14 @@