➕ [web] Update User type definitions using camelcase-keys and `ty…

…pe-fest` (#792)

* ➕ [web] Add `camelcase-keys` and `type-fest`
* ✨ Enhance user store and utilities with camelCase conversion and additional fields
  * Update `User` type to use `CamelCasedProperties` from `type-fest`
  * Modify `updateUser` method to handle partial updates and convert keys to camelCase
  * Add `created_at` field to user selection in `getUser` function

apps/web/package.json

@@ -24,8 +24,10 @@
   },
   "dependencies": {
     "@supabase/supabase-js": "^2.43.4",
+    "camelcase-keys": "^9.1.3",
     "cdate": "^0.0.7",
-    "tailwind-variants": "^0.2.1"
+    "tailwind-variants": "^0.2.1",
+    "type-fest": "^4.20.0"
   },
   "devDependencies": {
     "@repo/eslint-config": "workspace:*",

apps/web/src/lib/features/user/userStore.svelte.ts

@@ -1,26 +1,28 @@
-import { supabase } from '$lib/supabaseClient';
 import type { PostgrestError } from '@supabase/supabase-js';
+import type { CamelCasedProperties } from 'type-fest';
+import camelcaseKeys from 'camelcase-keys';
+import { supabase } from '$lib/supabaseClient';
+import type { Tables } from '$lib/$generated/supabase-types';
 
-export interface User {
-  id: string;
-  email: string;
-  displayName: string;
-  bio: string;
-}
+type DBProfiles = Tables<'profiles'>;
+
+export type User = CamelCasedProperties<DBProfiles>;
 
 export interface UserInputs {
   email: string;
   password: string;
   displayName?: string;
 }
 
+const baseUserInputs = {
+  displayName: 'Guest',
+  email: 'email@add.com',
+  password: 'password0',
+} satisfies UserInputs;
+
 class UserStore {
   #user = $state<User | null>(null);
-  #userInputs = $state<UserInputs>({
-    displayName: 'Guest',
-    email: 'email@add.com',
-    password: 'password0',
-  });
+  #userInputs = $state<UserInputs>(baseUserInputs);
 
   /**
    * Get the user
@@ -39,14 +41,14 @@ class UserStore {
 
   async updateUser(
     id: string,
-    props: { bio?: string },
+    props: Partial<Omit<DBProfiles, 'id'>>,
   ): Promise<{ error: PostgrestError | Error | null }> {
     if (!this.#user) return { error: new Error('You must be logged in to update your profile') };
 
     const { error } = await supabase.from('profiles').update(props).eq('id', id);
     if (error) return { error };
 
-    this.#user = { ...this.#user, ...props };
+    this.#user = { ...this.#user, ...camelcaseKeys(props) };
 
     return { error: null };
   }
@@ -85,7 +87,6 @@ class UserStore {
 
   /**
    * Log in a user
-   * @param userInputs - The user inputs
    */
   async logIn(): Promise<void> {
     const { error } = await supabase.auth.signInWithPassword(this.#userInputs);

apps/web/src/lib/features/user/userUtils.ts

@@ -7,7 +7,7 @@ export async function getUser(
 ): Promise<{ user: User | null; error: PostgrestError | null }> {
   const { data: profiles, error } = await supabase
     .from('profiles')
-    .select('email, display_name, bio')
+    .select('email, display_name, bio, created_at')
     .eq('id', id);
 
   const user = profiles?.length
@@ -16,6 +16,7 @@ export async function getUser(
         email: profiles[0].email,
         displayName: profiles[0].display_name,
         bio: profiles[0].bio,
+        createdAt: profiles[0].created_at,
       } satisfies User)
     : null;
 

project-words.txt

@@ -1,4 +1,5 @@
 ahvu
+camelcase
 cdate
 dirents
 hasura