Change useApi hook to include guild id

frontend/src/hooks/api/use-api.tsx

@@ -3,13 +3,15 @@ import wretch from 'wretch';
 import { UserContext } from '../../state/user.context.tsx';
 import QueryStringAddon from 'wretch/addons/queryString';
 import { normalizeUrlMiddleware } from './normalize-url-middleware.tsx';
+import { useGuildId } from '../state/use-guild-id.tsx';
 
 const instance = wretch(import.meta.env.VITE_API_URL)
   .middlewares([normalizeUrlMiddleware])
   .addon(QueryStringAddon);
 
-export const useApi = () => {
+const useApi = ({ prependGuildId }: { prependGuildId: boolean }) => {
   const user = useContext(UserContext);
+  const guildId = useGuildId();
 
   return useMemo(() => {
     const authenticated = () => {
@@ -18,12 +20,23 @@ export const useApi = () => {
     };
     return authenticated().middlewares([
       (next) => async (url, opts) => {
-        const response = await next(url, opts);
+        if (prependGuildId && !guildId) {
+          throw new Error(
+            'Having a guild selected is required for this request',
+          );
+        }
+        const prependedUrl = prependGuildId
+          ? `/guild/${guildId}/${url.replace(/^\//, '')}`
+          : url;
+        const response = await next(prependedUrl, opts);
         if (response.status === 401) {
           user.clear();
         }
         return response;
       },
     ]);
-  }, [user]);
+  }, [user, guildId, prependGuildId]);
 };
+
+export const useGlobalApi = () => useApi({ prependGuildId: false });
+export const useGuildApi = () => useApi({ prependGuildId: true });

frontend/src/hooks/api/use-fetch-self.tsx

@@ -1,4 +1,4 @@
-import { useApi } from './use-api.tsx';
+import { useGlobalApi } from './use-api.tsx';
 
 export type Rank = 'NEW' | 'MEMBER' | 'MOD' | 'ADMIN' | 'OWNER';
 
@@ -11,7 +11,7 @@ export interface User {
 }
 
 export const useFetchSelf = () => {
-  const api = useApi();
+  const api = useGlobalApi();
 
   return (token?: string) => {
     return (

frontend/src/hooks/api/use-get-channels.tsx

@@ -1,20 +1,18 @@
-import { useApi } from './use-api.tsx';
+import { useGuildApi } from './use-api.tsx';
 import { useEffect, useState } from 'react';
 import { useGuildId } from '../state/use-guild-id.tsx';
 import { APIGuildChannel, ChannelType } from '../../discord-api.ts';
 
 export type Channel = APIGuildChannel<ChannelType>;
 export const useGetChannels = () => {
-  const api = useApi();
-  const guildId = useGuildId();
+  const api = useGuildApi();
   const [channels, setChannels] = useState<Channel[]>();
   useEffect(() => {
-    if (!guildId) return;
     api
-      .get(`/guild/${guildId}/moderation/channel`)
+      .get(`/moderation/channel`)
       .json<Channel[]>()
       .then((channels) => setChannels(channels));
-  }, [guildId, api]);
+  }, [api]);
 
   return channels;
 };

frontend/src/hooks/api/use-get-roles.tsx

@@ -1,21 +1,18 @@
-import { useApi } from './use-api.tsx';
-import { useGuildId } from '../state/use-guild-id.tsx';
+import { useApi, useGuildApi } from './use-api.tsx';
 import { useEffect, useState } from 'react';
 import { APIRole } from '../../discord-api.ts';
 
 export type Role = APIRole;
 
 export const useGetRoles = () => {
-  const api = useApi();
-  const guildId = useGuildId();
+  const api = useGuildApi();
   const [roles, setRoles] = useState<APIRole[]>();
   useEffect(() => {
-    if (!guildId) return;
     api
-      .get(`/guild/${guildId}/moderation/role/`)
+      .get(`/moderation/role/`)
       .json<Role[]>()
       .then((roles) => setRoles(roles));
-  }, [guildId, api]);
+  }, [api]);
 
   return roles;
 };

frontend/src/pages/audit/hooks/use-get-audit-logs.tsx

@@ -1,5 +1,4 @@
-import { useApi } from '../../../hooks/api/use-api.tsx';
-import { useGuildId } from '../../../hooks/state/use-guild-id.tsx';
+import { useGuildApi } from '../../../hooks/api/use-api.tsx';
 import { TargetType } from '../domain/target-type.tsx';
 import { Action } from '../domain/action.tsx';
 import { LogEntry } from '../domain/log-entry.tsx';
@@ -20,8 +19,7 @@ export const useGetAuditLogs = ({
   filter: AuditLogFilter;
   pagination: Pagination;
 }) => {
-  const api = useApi();
-  const guildId = useGuildId();
+  const api = useGuildApi();
   const [auditLogs, setAuditLogs] = useState<{
     data: LogEntry[];
     total: number;
@@ -32,11 +30,11 @@ export const useGetAuditLogs = ({
     setRefreshing((it) => it + 1);
     api
       .query({ ...filter, ...pagination })
-      .get(`/auditlog/${guildId}`)
+      .get(`/auditlog/`)
       .json<{ data: LogEntry[]; total: number }>()
       .then((auditLogs) => setAuditLogs(auditLogs))
       .finally(() => setRefreshing((it) => it - 1));
-  }, [guildId, api, filter, pagination.offset, pagination.limit]);
+  }, [api, filter, pagination.offset, pagination.limit]);
 
   const isRefreshing = useMemo(
     () => refreshing > 0 && !!auditLogs,

frontend/src/pages/oauth-callback/oauth-callback-page.tsx

@@ -2,12 +2,12 @@ import { useEffect } from 'react';
 import { useNavigate } from 'react-router';
 import { Link as RouterLink, useSearchParams } from 'react-router-dom';
 import { PageSpinner } from '../../components/page-spinner';
-import { useApi } from '../../hooks/api/use-api.tsx';
+import { useGlobalApi } from '../../hooks/api/use-api.tsx';
 import { Flex, Link } from '@chakra-ui/react';
 import { useFetchToken } from './use-fetch-token';
 
 const OauthCallbackPage = () => {
-  const api = useApi();
+  const api = useGlobalApi();
   const navigate = useNavigate();
   const [params] = useSearchParams();
   const [fetchToken, grantFailed] = useFetchToken();

frontend/src/pages/oauth-callback/use-fetch-token.tsx

@@ -1,5 +1,5 @@
 import { useContext, useState } from 'react';
-import { useApi } from '../../hooks/api/use-api.tsx';
+import { useGlobalApi } from '../../hooks/api/use-api.tsx';
 import { UserContext } from '../../state/user.context';
 import { useFetchSelf } from '../../hooks/api/use-fetch-self.tsx';
 
@@ -13,7 +13,7 @@ interface FetchTokenResponse {
 }
 
 export const useFetchToken = () => {
-  const api = useApi();
+  const api = useGlobalApi();
   const fetchSelf = useFetchSelf();
   const { set } = useContext(UserContext);
   const [usedCodes, setUsedCodes] = useState<string[]>([]);

frontend/src/pages/settings/hooks/use-get-settings.tsx

@@ -1,18 +1,15 @@
-import { useApi } from '../../../hooks/api/use-api.tsx';
+import { useGuildApi } from '../../../hooks/api/use-api.tsx';
 import { Settings } from '../domain/settings.tsx';
 import { useEffect, useState } from 'react';
-import { useGuildId } from '../../../hooks/state/use-guild-id.tsx';
 
 export const useGetSettings = () => {
-  const api = useApi();
-  const guildId = useGuildId();
+  const api = useGuildApi();
   const [settings, setSettings] = useState<Settings>();
   useEffect(() => {
-    if (!guildId) return;
     api
-      .get(`/guild/${guildId}/settings`)
+      .get(`/settings`)
       .json<Settings>()
       .then((settings) => setSettings(settings));
-  }, [api, guildId]);
+  }, [api]);
   return settings;
 };

frontend/src/pages/settings/hooks/use-put-settings.tsx

@@ -1,10 +1,7 @@
-import { useApi } from '../../../hooks/api/use-api.tsx';
-import { useGuildId } from '../../../hooks/state/use-guild-id.tsx';
+import { useGuildApi } from '../../../hooks/api/use-api.tsx';
 import { Settings } from '../domain/settings.tsx';
 
 export const usePutSettings = () => {
-  const api = useApi();
-  const guildId = useGuildId();
-  return (settings: Settings) =>
-    api.put(settings, `/guild/${guildId}/settings`).text();
+  const api = useGuildApi();
+  return (settings: Settings) => api.put(settings, `/settings`).text();
 };