From 70039d374727c21944d35df221f3d61b4a133ebf Mon Sep 17 00:00:00 2001 From: Yuri Becker Date: Sun, 24 Dec 2023 01:20:08 +0100 Subject: [PATCH] Change useApi hook to include guild id --- frontend/src/hooks/api/use-api.tsx | 19 ++++++++++++++++--- frontend/src/hooks/api/use-fetch-self.tsx | 4 ++-- frontend/src/hooks/api/use-get-channels.tsx | 10 ++++------ frontend/src/hooks/api/use-get-roles.tsx | 11 ++++------- .../pages/audit/hooks/use-get-audit-logs.tsx | 10 ++++------ .../oauth-callback/oauth-callback-page.tsx | 4 ++-- .../pages/oauth-callback/use-fetch-token.tsx | 4 ++-- .../pages/settings/hooks/use-get-settings.tsx | 11 ++++------- .../pages/settings/hooks/use-put-settings.tsx | 9 +++------ 9 files changed, 41 insertions(+), 41 deletions(-) diff --git a/frontend/src/hooks/api/use-api.tsx b/frontend/src/hooks/api/use-api.tsx index 82eae7a..974b46b 100644 --- a/frontend/src/hooks/api/use-api.tsx +++ b/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 }); diff --git a/frontend/src/hooks/api/use-fetch-self.tsx b/frontend/src/hooks/api/use-fetch-self.tsx index eb3d6e5..b1e1daf 100644 --- a/frontend/src/hooks/api/use-fetch-self.tsx +++ b/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 ( diff --git a/frontend/src/hooks/api/use-get-channels.tsx b/frontend/src/hooks/api/use-get-channels.tsx index 9cea250..6ea0357 100644 --- a/frontend/src/hooks/api/use-get-channels.tsx +++ b/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; export const useGetChannels = () => { - const api = useApi(); - const guildId = useGuildId(); + const api = useGuildApi(); const [channels, setChannels] = useState(); useEffect(() => { - if (!guildId) return; api - .get(`/guild/${guildId}/moderation/channel`) + .get(`/moderation/channel`) .json() .then((channels) => setChannels(channels)); - }, [guildId, api]); + }, [api]); return channels; }; diff --git a/frontend/src/hooks/api/use-get-roles.tsx b/frontend/src/hooks/api/use-get-roles.tsx index 29bce58..330d30d 100644 --- a/frontend/src/hooks/api/use-get-roles.tsx +++ b/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(); useEffect(() => { - if (!guildId) return; api - .get(`/guild/${guildId}/moderation/role/`) + .get(`/moderation/role/`) .json() .then((roles) => setRoles(roles)); - }, [guildId, api]); + }, [api]); return roles; }; diff --git a/frontend/src/pages/audit/hooks/use-get-audit-logs.tsx b/frontend/src/pages/audit/hooks/use-get-audit-logs.tsx index 75c73db..ffcf63b 100644 --- a/frontend/src/pages/audit/hooks/use-get-audit-logs.tsx +++ b/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, diff --git a/frontend/src/pages/oauth-callback/oauth-callback-page.tsx b/frontend/src/pages/oauth-callback/oauth-callback-page.tsx index 7045844..fb668a3 100644 --- a/frontend/src/pages/oauth-callback/oauth-callback-page.tsx +++ b/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(); diff --git a/frontend/src/pages/oauth-callback/use-fetch-token.tsx b/frontend/src/pages/oauth-callback/use-fetch-token.tsx index 5a68384..199e392 100644 --- a/frontend/src/pages/oauth-callback/use-fetch-token.tsx +++ b/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([]); diff --git a/frontend/src/pages/settings/hooks/use-get-settings.tsx b/frontend/src/pages/settings/hooks/use-get-settings.tsx index efa4af8..dff38db 100644 --- a/frontend/src/pages/settings/hooks/use-get-settings.tsx +++ b/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(); useEffect(() => { - if (!guildId) return; api - .get(`/guild/${guildId}/settings`) + .get(`/settings`) .json() .then((settings) => setSettings(settings)); - }, [api, guildId]); + }, [api]); return settings; }; diff --git a/frontend/src/pages/settings/hooks/use-put-settings.tsx b/frontend/src/pages/settings/hooks/use-put-settings.tsx index 553b04d..471f811 100644 --- a/frontend/src/pages/settings/hooks/use-put-settings.tsx +++ b/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(); };