fix: don't use userStore in edit profile pages so they can be used after refresh

frontend/src/routes/edit/member/[id]/+page.svelte

@@ -11,9 +11,7 @@
     type Pronoun,
   } from "$lib/api/entities";
   import FallbackImage from "$lib/components/FallbackImage.svelte";
-  import { userStore } from "$lib/store";
   import {
-    Alert,
     Button,
     ButtonGroup,
     FormGroup,
@@ -38,7 +36,8 @@
 
   export let data: PageData;
 
-  if (!$userStore || $userStore.id !== data.member.user.id) {
+  if (data.user.id !== data.member.user.id) {
+    addToast({ header: "Not your member", body: "You cannot edit another user's member." });
     goto(`/@${data.member.user.name}/${data.member.name}`);
   }
 
@@ -307,10 +306,7 @@
   <ErrorAlert {error} />
 {/if}
 
-{#if !$userStore}
+<div class="grid">
-  <Alert color="danger" fade={false}>Error: No user object</Alert>
-{:else}
-  <div class="grid">
   <div class="row m-1">
     <div class="col-md">
       <h4>Avatar</h4>
@@ -339,8 +335,8 @@
             accept="image/png, image/jpeg, image/gif, image/webp"
           />
           <p class="text-muted mt-3">
-              <Icon name="info-circle-fill" aria-hidden /> Only PNG, JPEG, GIF, and WebP can be used
+            <Icon name="info-circle-fill" aria-hidden /> Only PNG, JPEG, GIF, and WebP can be used as
-              as avatars. Avatars cannot be larger than 1 MB, and animated avatars will be made static.
+            avatars. Avatars cannot be larger than 1 MB, and animated avatars will be made static.
           </p>
           <a href="" on:click={() => (avatar = "")}>Remove avatar</a>
         </div>
@@ -452,8 +448,8 @@
       Add new field
     </Button>
   </h4>
-  </div>
+</div>
-  <div class="grid gap-3">
+<div class="grid gap-3">
   <div class="row row-cols-1 row-cols-md-2">
     {#each fields as _, index}
       <EditableField
@@ -463,5 +459,4 @@
       />
     {/each}
   </div>
-  </div>
+</div>
-{/if}

frontend/src/routes/edit/member/[id]/+page.ts

@@ -1,14 +1,16 @@
-import type { APIError, Member } from "$lib/api/entities";
+import type { MeUser, APIError, Member } from "$lib/api/entities";
-import { apiFetch } from "$lib/api/fetch";
+import { apiFetchClient } from "$lib/api/fetch";
 import { error } from "@sveltejs/kit";
 
 export const ssr = false;
 
 export const load = async ({ params }) => {
   try {
-    const member = await apiFetch<Member>(`/members/${params.id}`, {});
+    const user = await apiFetchClient<MeUser>(`/users/@me`);
+    const member = await apiFetchClient<Member>(`/members/${params.id}`);
 
     return {
+      user,
       member,
     };
   } catch (e) {

frontend/src/routes/edit/profile/+page.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import { goto } from "$app/navigation";
   import {
     MAX_DESCRIPTION_LENGTH,
     userAvatars,
@@ -12,7 +11,7 @@
   } from "$lib/api/entities";
   import FallbackImage from "$lib/components/FallbackImage.svelte";
   import { userStore } from "$lib/store";
-  import { Alert, Button, ButtonGroup, FormGroup, Icon, Input } from "sveltestrap";
+  import { Button, ButtonGroup, FormGroup, Icon, Input } from "sveltestrap";
   import { encode } from "base64-arraybuffer";
   import { apiFetchClient } from "$lib/api/fetch";
   import IconButton from "$lib/components/IconButton.svelte";
@@ -21,22 +20,20 @@
   import EditablePronouns from "../EditablePronouns.svelte";
   import ErrorAlert from "$lib/components/ErrorAlert.svelte";
   import { addToast, delToast } from "$lib/toast";
+  import type { PageData } from "./$types";
 
   const MAX_AVATAR_BYTES = 1_000_000;
 
-  if (!$userStore) {
+  export let data: PageData;
-    addToast({ header: "Error", body: "You are not logged in." });
-    goto("/");
-  }
 
   let error: APIError | null = null;
 
-  let bio: string = $userStore?.bio || "";
+  let bio: string = data.user.bio || "";
-  let display_name: string = $userStore?.display_name || "";
+  let display_name: string = data.user.display_name || "";
-  let links: string[] = $userStore ? window.structuredClone($userStore.links) : [];
+  let links: string[] = window.structuredClone(data.user.links);
-  let names: FieldEntry[] = $userStore ? window.structuredClone($userStore.names) : [];
+  let names: FieldEntry[] = window.structuredClone(data.user.names);
-  let pronouns: Pronoun[] = $userStore ? window.structuredClone($userStore.pronouns) : [];
+  let pronouns: Pronoun[] = window.structuredClone(data.user.pronouns);
-  let fields: Field[] = $userStore ? window.structuredClone($userStore.fields) : [];
+  let fields: Field[] = window.structuredClone(data.user.fields);
 
   let avatar: string | null;
   let avatar_files: FileList | null;
@@ -60,14 +57,12 @@
     fields: Field[],
     avatar: string | null,
   ) => {
-    if (!$userStore) return false;
+    if (bio !== data.user.bio) return true;
-
+    if (display_name !== data.user.display_name) return true;
-    if (bio !== $userStore.bio) return true;
+    if (!linksEqual(links, data.user.links)) return true;
-    if (display_name !== $userStore.display_name) return true;
+    if (!fieldsEqual(fields, data.user.fields)) return true;
-    if (!linksEqual(links, $userStore.links)) return true;
+    if (!namesEqual(names, data.user.names)) return true;
-    if (!fieldsEqual(fields, $userStore.fields)) return true;
+    if (!pronounsEqual(pronouns, data.user.pronouns)) return true;
-    if (!namesEqual(names, $userStore.names)) return true;
-    if (!pronounsEqual(pronouns, $userStore.pronouns)) return true;
     if (avatar !== null) return true;
 
     return false;
@@ -211,6 +206,7 @@
         fields,
       });
 
+      data.user = resp;
       userStore.set(resp);
       localStorage.setItem("pronouns-user", JSON.stringify(resp));
 
@@ -234,7 +230,7 @@
 <h1>
   Edit profile
   <ButtonGroup>
-    <Button color="secondary" href="/@{$userStore?.name}">
+    <Button color="secondary" href="/@{data.user.name}">
       <Icon name="chevron-left" />
       Back to your profile
     </Button>
@@ -248,10 +244,7 @@
   <ErrorAlert {error} />
 {/if}
 
-{#if !$userStore}
+<div class="grid">
-  <Alert color="danger" fade={false}>Error: No user object</Alert>
-{:else}
-  <div class="grid">
   <div class="row m-1">
     <div class="col-md">
       <h4>Avatar</h4>
@@ -268,7 +261,7 @@
               class="rounded-circle img-fluid"
             />
           {:else}
-              <FallbackImage alt="Current avatar" urls={userAvatars($userStore)} width={200} />
+            <FallbackImage alt="Current avatar" urls={userAvatars(data.user)} width={200} />
           {/if}
         </div>
         <div class="col-md mt-2">
@@ -281,8 +274,7 @@
           />
           <p class="text-muted mt-3">
             <Icon name="info-circle-fill" aria-hidden /> Only PNG, JPEG, GIF, and WebP images can be
-              used as avatars. Avatars cannot be larger than 1 MB, and animated avatars will be made
+            used as avatars. Avatars cannot be larger than 1 MB, and animated avatars will be made static.
-              static.
           </p>
           <p>
             <a href="" on:click={() => (avatar = "")}>Remove avatar</a>
@@ -386,8 +378,8 @@
       Add new field
     </Button>
   </h4>
-  </div>
+</div>
-  <div class="grid gap-3">
+<div class="grid gap-3">
   <div class="row row-cols-1 row-cols-md-2">
     {#each fields as _, index}
       <EditableField
@@ -397,5 +389,4 @@
       />
     {/each}
   </div>
-  </div>
+</div>
-{/if}

frontend/src/routes/edit/profile/+page.ts

@@ -1 +1,17 @@
+import type { APIError, MeUser } from "$lib/api/entities";
+import { apiFetchClient } from "$lib/api/fetch";
+import { error } from "@sveltejs/kit";
+
 export const ssr = false;
+
+export const load = async () => {
+  try {
+    const user = await apiFetchClient<MeUser>(`/users/@me`);
+
+    return {
+      user,
+    };
+  } catch (e) {
+    throw error((e as APIError).code, (e as APIError).message);
+  }
+};