christoph/svelte-formula11
1
Fork 0
Code Issues 23 Actions Packages Projects 1 Activity

Skeleton: Remove user/admin from fetched data

Browse Source 
This data was fetched before it was available, so the user object was
undefined
This commit is contained in:
Christoph Urlacher
2025-03-14 22:35:03 +01:00
parent 03fe027f8c
commit 614e2becc4
12 changed files with 51 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/routes/+layout.svelte
View File

@ -46,6 +46,7 @@
import { pb, pbUser, subscribe, unsubscribe } from "$lib/pocketbase";
import { AVATAR_HEIGHT, AVATAR_WIDTH } from "$lib/config";
import { error } from "@sveltejs/kit";
import { get } from "svelte/store";
let { data, children }: { data: LayoutData; children: Snippet } = $props();
@ -138,9 +139,9 @@
storePopup.set({ computePosition, autoUpdate, offset, shift, flip, arrow });
// Reactive state
let username_value: string = $state(data.user?.username ?? "");
let firstname_value: string = $state(data.user?.firstname ?? "");
let email_value: string = $state(data.user?.email ?? "");
let username_value: string = $state(pbUser?.username ?? "");
let firstname_value: string = $state(pbUser?.firstname ?? "");
let email_value: string = $state(pbUser?.email ?? "");
let password_value: string = $state("");
let avatar_value: FileList | undefined = $state();
@ -172,11 +173,12 @@
} catch (error) {
toastStore.trigger(get_error_toast("" + error));
}
await invalidate("data:user");
drawerStore.close();
username_value = data.user?.username ?? "";
firstname_value = data.user?.firstname ?? "";
email_value = data.user?.email ?? "";
username_value = pbUser?.username ?? "";
firstname_value = pbUser?.firstname ?? "";
email_value = pbUser?.email ?? "";
password_value = "";
};
@ -254,20 +256,20 @@
await login();
} else {
if (!data.user?.id || data.user.id === "") {
if (!pbUser?.id || pbUser.id === "") {
toastStore.trigger(get_error_toast("Invalid user id!"));
return;
}
if (email_value && email_value.trim() !== data.user.email) {
if (email_value && email_value.trim() !== pbUser.email) {
await pb.collection("users").requestEmailChange(email_value.trim());
toastStore.trigger(get_info_toast("Check your inbox!"));
}
await pb.collection("users").update(data.user.id, {
username: username_value.trim().length > 0 ? username_value.trim() : data.user.username,
await pb.collection("users").update(pbUser.id, {
username: username_value.trim().length > 0 ? username_value.trim() : pbUser.username,
firstname:
firstname_value.trim().length > 0 ? firstname_value.trim() : data.user.firstname,
firstname_value.trim().length > 0 ? firstname_value.trim() : pbUser.firstname,
avatar: avatar_avif,
});
@ -455,7 +457,7 @@
</Button>
</div>
</div>
{:else if $drawerStore.id === "profile_drawer" && data.user}
{:else if $drawerStore.id === "profile_drawer" && pbUser}
<!-- Profile Drawer -->
<!-- Profile Drawer -->
<!-- Profile Drawer -->
@ -537,14 +539,14 @@
activate={$page.url.pathname.startsWith("/data")}>Data</Button
>
{#if !data.user}
{#if !pbUser}
<!-- Login drawer -->
<Button color="primary" onclick={login_drawer}>Login</Button>
{:else}
<!-- Profile drawer -->
<Avatar
id="user_avatar_preview"
src={data.user.avatar_url}
src={pbUser?.avatar_url}
rounded="rounded-full"
width="w-10"
background="bg-primary-50"

10
src/routes/+layout.ts
View File

@ -1,6 +1,8 @@
import { fetch_graphics } from "$lib/fetch";
import { pbUser } from "$lib/pocketbase";
import { get } from "svelte/store";
import type { LayoutLoad } from "./$types";
import type { User } from "$lib/schema";
// This makes the page client-side rendered
export const ssr = false;
@ -11,12 +13,14 @@ export const ssr = false;
// It will populate the "user" attribute of each page's "data" object,
// so each page has access to the current user (or knows if no one is signed in).
export const load: LayoutLoad = async ({ fetch, depends }) => {
depends("data:graphics", "data:user");
depends("data:graphics");
return {
// NOTE: Don't do this! The user object will be updated after this, so it will be undefined!
//
// User information (synchronous)
user: pbUser,
admin: pbUser?.admin ?? false,
// user: get(pbUser),
// admin: get(pbUser)?.admin ?? false,
// Return static data
graphics: await fetch_graphics(fetch),

14
src/routes/racepicks/+page.svelte
View File

@ -22,6 +22,7 @@
import { format_date, shortdatetimeformat } from "$lib/date";
import type { CurrentPickedUser, RacePick } from "$lib/schema";
import { get_by_value, get_driver_headshot_template } from "$lib/database";
import { pbUser } from "$lib/pocketbase";
let { data }: { data: PageData } = $props();
@ -76,9 +77,8 @@
</svelte:fragment>
<svelte:fragment slot="content">
<div
class="grid grid-cols-2 gap-2 lg:mx-auto lg:w-fit {data.user
? 'lg:grid-cols-6'
: 'lg:grid-cols-4'}"
class="grid grid-cols-2 gap-2 lg:mx-auto lg:w-fit
{pbUser ? 'lg:grid-cols-6' : 'lg:grid-cols-4'}"
>
<!-- Show information about the next race -->
<div class="card flex w-full min-w-40 flex-col p-2 shadow lg:max-w-40">
@ -124,7 +124,7 @@
</div>
<!-- Only show the userguess if signed in -->
{#if data.user}
{#if pbUser}
<!-- PXX pick -->
<div class="card w-full min-w-40 p-2 pb-0 shadow lg:max-w-40">
<h1 class="mb-2 text-nowrap font-bold">Your P{data.currentrace.pxx} Pick:</h1>
@ -309,10 +309,8 @@
{@const picks = racepicks.filter((pick: RacePick) => pick.user === user.id)}
<div
class="card ml-1 mt-2 w-full min-w-12 overflow-hidden py-2 shadow lg:ml-2 lg:min-w-40 {data.user &&
data.user.username === user.username
? 'bg-primary-300'
: ''}"
class="card ml-1 mt-2 w-full min-w-12 overflow-hidden py-2 shadow lg:ml-2 lg:min-w-40
{pbUser && pbUser.username === user.username ? 'bg-primary-300' : ''}"
>
<!-- Avatar + name display at the top -->
<div class="mx-auto flex h-10 w-fit">

9
src/routes/seasonpicks/+page.svelte
View File

@ -23,6 +23,7 @@
TEAM_BANNER_WIDTH,
} from "$lib/config";
import Countdown from "$lib/components/Countdown.svelte";
import { pbUser } from "$lib/pocketbase";
let { data }: { data: PageData } = $props();
@ -69,12 +70,12 @@
</svelte:fragment>
<svelte:fragment slot="content">
<div
class="grid grid-cols-2 gap-2 lg:mx-auto lg:w-fit {data.user
class="grid grid-cols-2 gap-2 lg:mx-auto lg:w-fit {pbUser
? 'lg:grid-cols-5 2xl:grid-cols-10'
: 'lg:grid-cols-2 2xl:grid-cols-2'}"
>
<!-- Only show the stuff if signed in -->
{#if data.user}
{#if pbUser}
{@const teamwinners = data.seasonpick
? data.seasonpick.teamwinners
.map((id: string) => get_by_value(drivers, "id", id) as Driver)
@ -345,8 +346,8 @@
: [undefined]}
<div
class="card ml-1 mt-2 w-full min-w-[9.5rem] overflow-hidden py-2 shadow lg:ml-2 {data.user &&
data.user.username === user.username
class="card ml-1 mt-2 w-full min-w-[9.5rem] overflow-hidden py-2 shadow lg:ml-2 {pbUser &&
pbUser.username === user.username
? 'bg-primary-300'
: ''}"
>