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(url: string, init?: RequestInit): Promise { - 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(key: string) { + const { token, clearAuthToken } = useAuth(); + return useQuery({ queryKey: [key], - queryFn: () => fetcher(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(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(`${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('/api/me', { - headers: { - Authorization: `Bearer ${token}`, - }, - }), - enabled: !!token, // Only run query if token exists - }); + return useHttp('/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);