🥟✨ Show username in settings

Author: ruksi

gyoza/src/lib/MainHeader.svelte

@@ -2,7 +2,7 @@
     import {logOutMutation, verifyQuery} from "$lib/backend";
     import {useQueryClient} from "@tanstack/svelte-query";
 
-    const verify = verifyQuery();
+    const query = verifyQuery();
     const logOut = logOutMutation(useQueryClient());
 
     function handleLogOut(e: MouseEvent) {
@@ -19,7 +19,7 @@
     <nav>
         <a href="/">🏠️</a>
         <a class="plain" href="/about">About</a>
-        {#if $verify?.data?.is_authenticated}
+        {#if $query?.data?.is_authenticated}
             <a href="/settings">Settings</a>
             <a href="/log-out" on:click={handleLogOut}>Log Out</a>
         {:else}

gyoza/src/lib/backend.ts

@@ -48,8 +48,16 @@ export function logOutMutation(client: QueryClient) {
     });
 }
 
+export function currentUserQuery() {
+    return createQuery({
+        queryFn: api().getCurrentUser,
+        queryKey: ["current-user"],
+    });
+}
+
 export type Status = {status: string};
 export type Verify = {is_authenticated: boolean};
+export type User = {user_id: string; username: string;}
 
 type SignUpArgs = {username: string; email: string; password: string;};
 type LogInArgs = {username_or_email: string; password: string;};
@@ -97,5 +105,12 @@ export function api(_fetch = fetch) {
             });
             return data as Status;
         },
+        getCurrentUser: async (): Promise<User> => {
+            const data = await handleFetch({
+                url: `${backend}/api/users/me`,
+                _fetch,
+            });
+            return data as User;
+        },
     };
 }

gyoza/src/lib/user/Profile.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+    import {currentUserQuery} from "$lib/backend";
+
+    const query = currentUserQuery();
+    $: user = $query?.data ?? undefined;
+</script>
+
+<span class="text-neutral-100">Username:</span>
+{#if user }
+    {user.username}
+{/if}

gyoza/src/routes/(authenticated)/settings/+page.svelte

@@ -1,6 +1,27 @@
+<script>
+    import Profile from "$lib/user/Profile.svelte";
+</script>
+
 <svelte:head>
     <title>Settings</title>
     <meta name="description" content="User settings page">
 </svelte:head>
 
-<h1>Settings</h1>
+<main class="max-w-7xl mx-auto p-4">
+    <h1 class="text-5xl">Settings</h1>
+    <div class="flex flex-col gap-4 mt-4">
+        <section>
+            <h2>Profile</h2>
+            <Profile />
+        </section>
+    </div>
+</main>
+
+<style lang="postcss">
+    section {
+        @apply mt-2;
+    }
+    section h2 {
+        @apply text-2xl;
+    }
+</style>