feat(frontend): store pending profile changes in sessionStorage

This commit is contained in:
sam 2025-02-24 17:37:49 +01:00
parent 92bf933c10
commit d1faf1ddee
Signed by: sam
GPG key ID: B4EF20DDE721CAA1
11 changed files with 117 additions and 4 deletions

View file

@ -15,6 +15,7 @@
import BioEditor from "$components/editor/BioEditor.svelte";
import { PUBLIC_BASE_URL } from "$env/static/public";
import { enhance } from "$app/forms";
import ephemeralState from "$lib/state.svelte";
type Props = { data: PageData; form: ActionData };
let { data, form }: Props = $props();
@ -61,6 +62,12 @@
// Bio is stored in a $state() so we have a markdown preview
let bio = $state(data.member.bio || "");
ephemeralState(
"member-" + data.member.id + "-bio",
() => bio,
(data) => (bio = data),
);
</script>
{#if error}

View file

@ -6,6 +6,7 @@
import FieldsEditor from "$components/editor/FieldsEditor.svelte";
import NoscriptWarning from "$components/editor/NoscriptWarning.svelte";
import log from "$lib/log";
import ephemeralState from "$lib/state.svelte";
import type { PageData } from "./$types";
type Props = { data: PageData };
@ -29,6 +30,12 @@
if (e instanceof ApiError) ok.error = e.obj;
}
};
ephemeralState(
"member-" + data.member.id + "-fields",
() => fields,
(data) => (fields = data),
);
</script>
<NoscriptWarning />

View file

@ -41,10 +41,16 @@
</script>
<ProfileFlagsEditor
stateKey="member-{data.member.id}-flags"
profileFlags={data.member.flags}
allFlags={data.flags}
save={flagSave}
form={flagForm}
/>
<LinksEditor currentLinks={data.member.links} save={linksSave} form={linksForm} />
<LinksEditor
stateKey="member-{data.member.id}-links"
currentLinks={data.member.links}
save={linksSave}
form={linksForm}
/>

View file

@ -10,6 +10,7 @@
import PronounsEditor from "$components/editor/PronounsEditor.svelte";
import { t } from "$lib/i18n";
import log from "$lib/log";
import ephemeralState from "$lib/state.svelte";
import type { PageData } from "./$types";
type Props = { data: PageData };
@ -22,6 +23,15 @@
let allPreferences = $derived(mergePreferences(data.user.custom_preferences));
ephemeralState(
"member-" + data.member.id + "-names-pronouns",
() => ({ names, pronouns }),
(data) => {
names = data.names;
pronouns = data.pronouns;
},
);
const update = async () => {
try {
const resp = await apiRequest<Member>("PATCH", `/users/@me/members/${data.member.id}`, {

View file

@ -3,11 +3,18 @@
import type { ActionData, PageData } from "./$types";
import BioEditor from "$components/editor/BioEditor.svelte";
import { t } from "$lib/i18n";
import ephemeralState from "$lib/state.svelte";
type Props = { data: PageData; form: ActionData };
let { data, form }: Props = $props();
let bio = $state(data.user.bio || "");
ephemeralState(
"user-bio",
() => bio,
(data) => (bio = data),
);
</script>
<h4>{$t("edit-profile.bio-tab")}</h4>

View file

@ -6,6 +6,7 @@
import FieldsEditor from "$components/editor/FieldsEditor.svelte";
import NoscriptWarning from "$components/editor/NoscriptWarning.svelte";
import log from "$lib/log";
import ephemeralState from "$lib/state.svelte";
import type { PageData } from "./$types";
type Props = { data: PageData };
@ -29,6 +30,12 @@
if (e instanceof ApiError) ok.error = e.obj;
}
};
ephemeralState(
"user-fields",
() => fields,
(data) => (fields = data),
);
</script>
<NoscriptWarning />

View file

@ -41,10 +41,16 @@
</script>
<ProfileFlagsEditor
stateKey="user-flags"
profileFlags={data.user.flags}
allFlags={data.flags}
save={flagSave}
form={flagForm}
/>
<LinksEditor currentLinks={data.user.links} save={linksSave} form={linksForm} />
<LinksEditor
stateKey="user-links"
currentLinks={data.user.links}
save={linksSave}
form={linksForm}
/>

View file

@ -9,6 +9,7 @@
import PronounsEditor from "$components/editor/PronounsEditor.svelte";
import { t } from "$lib/i18n";
import log from "$lib/log";
import ephemeralState from "$lib/state.svelte";
import type { PageData } from "./$types";
type Props = { data: PageData };
@ -19,6 +20,15 @@
let ok: { ok: boolean; error: RawApiError | null } | null = $state(null);
let allPreferences = $derived(mergePreferences(data.user.custom_preferences));
ephemeralState(
"user-names-pronouns",
() => ({ names, pronouns }),
(data) => {
names = data.names;
pronouns = data.pronouns;
},
);
const update = async () => {
try {
const resp = await apiRequest<User>("PATCH", "/users/@me", {