Update login

Author: lucemans

app/src/models/user.rs

@@ -39,7 +39,10 @@ impl User {
 
     pub async fn authorize_by_guest_id(state: &AppState) -> Result<User> {
         let user_id = Self::get_next_guest_id(state, 0).await?;
-        let guest_name: String = fake::faker::name::en::Name().fake();
+        let guest_name: String = fake::faker::name::en::FirstName().fake();
+        let last_name: String = fake::faker::name::en::LastName().fake();
+        let first_char_of_last_name: String = last_name.chars().next().unwrap().to_string();
+        let guest_name = format!("{} {}.", guest_name, first_char_of_last_name);
 
         let user = sqlx::query_as!(
             User,

web/src/api/api.ts

@@ -4,11 +4,17 @@ import { authStore, useAuth } from "@/hooks/auth";
 
 export const baseUrl = new URL('/api/', window.location.origin);
 
+let tokenProxy = {
+    get value() {
+        return authStore.getSnapshot().context.token;
+    },
+}
+
 export const useApi = createFetch<paths>({
     baseUrl,
     get headers() {
         return {
-            Authorization: `Bearer ${authStore.getSnapshot().context.token}`,
+            Authorization: `Bearer ${tokenProxy.value}`,
         };
     },
 });

web/src/api/auth.ts

@@ -19,18 +19,15 @@ export const useGuestAuth = (extra?: Partial<MutationOptions<GuestResponse, unde
 }
 
 export const useUser = () => {
-    const { token, user } = useAuth();
-    
+    const { token } = useAuth();
+
     return useQuery({
         queryKey: ['user', token],
         queryFn: async () => {
-            console.log('fetching user w auth token', token);
-            if (!token) {
-                return null;
-            }
-            
             try {
-                const response = await useApi('/auth/user', 'get', {})
+                console.log('fetching user');
+                const response = await useApi('/auth/user', 'get', { fetchOptions: { cache: 'no-store', headers: { Authorization: `Bearer ${token}` } } })
+                console.log('user response', response.data);
                 return response.data;
             } catch (error) {
                 console.error('Error fetching user data:', error);
@@ -40,10 +37,11 @@ export const useUser = () => {
         // Use the user from auth context as initialData
         // initialData: user,
         // Only run query if we have a token
-        enabled: !!token,
+        // enabled: !!token,
         // Reasonable refetch settings
         refetchOnMount: true,
         refetchOnWindowFocus: true,
         staleTime: 3000, // Consider data stale after 3 seconds
+        refetchInterval: 5000,
     });
 };

web/src/hooks/auth.ts

@@ -51,10 +51,15 @@ export const authStore = createStore({
       };
 
       // Notify listeners of state change
-      setTimeout(() => authEvents.notify(), 0);
-      queryClient.invalidateQueries({}).then(() => {
-        queryClient.refetchQueries({});
-      });
+      setTimeout(() => {
+        authEvents.notify();
+
+        console.log('invalidating queries');
+        queryClient.invalidateQueries({}).then(() => {
+          console.log('refetching queries');
+          queryClient.refetchQueries({});
+        });
+      }, 0);
 
       return result;
     },
@@ -70,9 +75,6 @@ export const authStore = createStore({
 
       // Notify listeners of state change
       setTimeout(() => authEvents.notify(), 0);
-      queryClient.invalidateQueries({}).then(() => {
-        queryClient.refetchQueries({});
-      });
 
       return result;
     },
@@ -86,9 +88,6 @@ export const authStore = createStore({
 
       // Notify listeners of state change
       setTimeout(() => authEvents.notify(), 0);
-      queryClient.invalidateQueries({}).then(() => {
-        queryClient.refetchQueries({});
-      });
 
       return result;
     }
@@ -172,3 +171,16 @@ export const useAuth = () => {
     }
   };
 };
+
+// subscribe to auth state changes and invalidate queries when user is logged in
+
+// authStore.subscribe(() => {
+//   // if (authStore.getSnapshot().context.token) {
+//    setTimeout(() => {
+//     queryClient.invalidateQueries({}).then(() => {
+//       queryClient.refetchQueries({});
+//     });
+//    }, 1000);
+// //  }
+// });
+

web/src/routes/index.tsx

@@ -12,7 +12,7 @@ export const Route = createFileRoute('/')({
 })
 
 function RouteComponent() {
-  return <div className="mx-auto w-full max-w-4xl flex flex-wrap gap-4 pt-8">
+  return <div className="mx-auto w-full max-w-4xl flex flex-wrap gap-4 pt-8 px-2">
     <div className="card flex-1 flex flex-col gap-1">
       <h1 className="">Let&apos;s fish some base codes!</h1>
       <p className="text-secondary">Code raiding is the age-old process of endlessly trying codes on your enemies base until you find one that works.</p>
@@ -34,7 +34,7 @@ function RouteComponent() {
       <h2 className="text-accent pt-4">Let&apos;s go!</h2>
       <p className="text-secondary">Use this site to coordinate with ur group. And profit efficiently.</p>
     </div>
-    <div className="flex h-fit gap-4 flex-col">
+    <div className="flex h-fit gap-4 flex-col w-full sm:max-w-sm">
       <div className="card flex-1 flex flex-col gap-1">
         <h2>Create a party</h2>
         <p className="text-secondary">Start a code raid</p>
@@ -43,7 +43,7 @@ function RouteComponent() {
       <div className="card flex-1 flex flex-col gap-1">
         <h2>Join a party</h2>
         <p className="text-secondary">Enter party code to join a party.</p>
-        <div className="flex gap-2">
+        <div className="flex gap-2 w-full flex-wrap">
           <input type="text" placeholder="Party code" className="input" />
           <button className="button grow h-full">Join</button>
         </div>