From d38c4ff032c98af760e2b8b9330f15e9fa104ebd Mon Sep 17 00:00:00 2001
From: Luc <luc@lucemans.nl>
Date: Tue, 26 Nov 2024 22:02:09 +0100
Subject: [PATCH] Fix Migrations

---
 web/src/api/core.ts                        | 41 ++++++++++++------
 web/src/api/geoip.ts                       | 36 ++++++++++------
 web/src/api/me.ts                          | 50 +++++++++++++---------
 web/src/components/ActiveSessionsTable.tsx |  2 +-
 4 files changed, 81 insertions(+), 48 deletions(-)

diff --git a/web/src/api/core.ts b/web/src/api/core.ts
index 4934ed9..398f57a 100644
--- a/web/src/api/core.ts
+++ b/web/src/api/core.ts
@@ -1,35 +1,48 @@
 import { useMutation, useQuery } from '@tanstack/react-query';
 
-export const BASE_URL = 'http://localhost:3000';
-
-// Replace SWR fetcher with axios or fetch implementation
-// eslint-disable-next-line no-undef
-export async function fetcher<T>(url: string, init?: RequestInit): Promise<T> {
-    const response = await fetch(BASE_URL + url, init);
-
-    if (!response.ok) {
-        throw new Error('Network response was not ok');
-    }
+import { useAuth } from './auth';
 
-    return response.json();
-}
+export const BASE_URL = 'http://localhost:3000';
 
-// Replace useSWR hooks with useQuery
 export function useHttp<T>(key: string) {
+    const { token, clearAuthToken } = useAuth();
+
     return useQuery({
         queryKey: [key],
-        queryFn: () => fetcher<T>(key),
+        queryFn: async () => {
+            const headers = new Headers();
+
+            headers.append('Authorization', 'Bearer ' + token);
+
+            try {
+                const response = await fetch(BASE_URL + key, { headers });
+
+                if (response.status === 401) {
+                    console.log('Token expired, clearing token');
+                    clearAuthToken();
+
+                    return;
+                }
+
+                return (await response.json()) as T;
+            } catch (error) {
+                console.error(error);
+            }
+        },
     });
 }
 
 // For mutations (if you have any POST/PUT/DELETE operations)
 export function useUpdateData<T>(url: string) {
+    const { token } = useAuth();
+
     return useMutation({
         mutationFn: (data: T) =>
             fetch(BASE_URL + url, {
                 method: 'POST',
                 headers: {
                     'Content-Type': 'application/json',
+                    Authorization: `Bearer ${token}`,
                 },
                 body: JSON.stringify(data),
             }).then((response) => response.json()),
diff --git a/web/src/api/geoip.ts b/web/src/api/geoip.ts
index 45333bb..680516f 100644
--- a/web/src/api/geoip.ts
+++ b/web/src/api/geoip.ts
@@ -1,20 +1,32 @@
 import { useQuery } from '@tanstack/react-query';
 
-import { BASE_URL, fetcher } from './core';
+const BASE_URL = 'http://localhost:3000';
 
-interface GeoIPResponse {
-    ip: string;
-    country: string;
-    city?: string;
-    // Add other fields based on your API response
-}
+type GeoIpResponse = {
+    ip_address: string;
+    latitude: number;
+    longitude: number;
+    postal_code: string;
+    continent_code: string;
+    continent_name: string;
+    country_code: string;
+    country_name: string;
+    region_code: string;
+    region_name: string;
+    province_code: string;
+    province_name: string;
+    city_name: string;
+    timezone: string;
+};
 
-export function useGeoIp() {
+export function useGeoIp(ip: string) {
     return useQuery({
         queryKey: ['geoip'],
-        queryFn: () => fetcher<GeoIPResponse>(`${BASE_URL}/api/geoip`),
-        // Add any specific options you need:
-        // staleTime: 5 * 60 * 1000, // Consider data fresh for 5 minutes
-        // cacheTime: 30 * 60 * 1000, // Keep data in cache for 30 minutes
+        queryFn: async () => {
+            const response = await fetch('https://api.geoip.rs/?ip=' + ip);
+            const data = await response.json();
+
+            return data as GeoIpResponse;
+        },
     });
 }
diff --git a/web/src/api/me.ts b/web/src/api/me.ts
index 1792c79..6ac280b 100644
--- a/web/src/api/me.ts
+++ b/web/src/api/me.ts
@@ -1,26 +1,34 @@
-import { useQuery } from '@tanstack/react-query';
+import { useHttp } from './core';
 
-import { useAuth } from './auth';
-import { fetcher } from './core';
-
-interface MeResponse {
-    id: string;
+export type ApiMeResponse = {
+    id: number;
+    oauth_sub: string;
     name: string;
-    picture?: string;
-    // Add other fields as needed
-}
+    picture: string;
+    // oauth_data: {
+    //     sub: string;
+    //     name: string;
+    //     given_name: string;
+    //     family_name: string;
+    //     middle_name: null;
+    //     nickname: null;
+    //     preferred_username: null;
+    //     profile: null;
+    //     picture: string;
+    //     website: null;
+    //     email: string;
+    //     email_verified: boolean;
+    //     gender: null;
+    //     birthdate: null;
+    //     zoneinfo: null;
+    //     locale: null;
+    //     phone_number: null;
+    //     phone_number_verified: boolean;
+    //     address: null;
+    //     updated_at: null;
+    // };
+};
 
 export function useApiMe() {
-    const { token } = useAuth();
-
-    return useQuery({
-        queryKey: ['me', token],
-        queryFn: () =>
-            fetcher<MeResponse>('/api/me', {
-                headers: {
-                    Authorization: `Bearer ${token}`,
-                },
-            }),
-        enabled: !!token, // Only run query if token exists
-    });
+    return useHttp<ApiMeResponse>('/api/me');
 }
diff --git a/web/src/components/ActiveSessionsTable.tsx b/web/src/components/ActiveSessionsTable.tsx
index 63c07a1..ae1b50b 100644
--- a/web/src/components/ActiveSessionsTable.tsx
+++ b/web/src/components/ActiveSessionsTable.tsx
@@ -9,7 +9,7 @@ import { getRelativeTimeString } from '../util/date';
 import { LeafletPreview } from './LeafletPreview';
 
 const ActiveSession: FC<{ session: SessionResponse }> = ({ session }) => {
-    const { mutate: updateSessions } = useSessions();
+    const { refetch: updateSessions } = useSessions();
     const { token } = useAuth();
     const { data: geoip } = useGeoIp(session.user_ip);
     const user_agent = UAParser(session.user_agent);