feat(frontend): store pending profile changes in sessionStorage
This commit is contained in:
parent
92bf933c10
commit
d1faf1ddee
11 changed files with 117 additions and 4 deletions
|
@ -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}
|
||||
|
|
|
@ -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 />
|
||||
|
|
|
@ -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}
|
||||
/>
|
||||
|
|
|
@ -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}`, {
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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 />
|
||||
|
|
|
@ -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}
|
||||
/>
|
||||
|
|
|
@ -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", {
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue