diff --git a/src/frontend/apps/desk/src/features/teams/api/types.tsx b/src/frontend/apps/desk/src/features/teams/api/types.tsx new file mode 100644 index 0000000..b407a86 --- /dev/null +++ b/src/frontend/apps/desk/src/features/teams/api/types.tsx @@ -0,0 +1,17 @@ +enum Role { + MEMBER = 'member', + ADMIN = 'administrator', + OWNER = 'owner', +} + +export interface Access { + id: string; + role: Role; + user: string; +} + +export interface TeamResponse { + id: string; + name: string; + accesses: Access[]; +} diff --git a/src/frontend/apps/desk/src/features/teams/api/useTeam.tsx b/src/frontend/apps/desk/src/features/teams/api/useTeam.tsx new file mode 100644 index 0000000..ab389c6 --- /dev/null +++ b/src/frontend/apps/desk/src/features/teams/api/useTeam.tsx @@ -0,0 +1,35 @@ +import { UseQueryOptions, useQuery } from '@tanstack/react-query'; + +import { fetchAPI } from '@/api'; + +import { TeamResponse } from './types'; + +export type TeamParams = { + id: string; +}; + +export interface TeamResponseError { + detail: string; +} + +export const getTeam = async ({ id }: TeamParams): Promise => { + const response = await fetchAPI(`teams/${id}`); + + if (!response.ok) { + throw new Error(`Couldn't fetch team: ${response.statusText}`); + } + return response.json() as Promise; +}; + +export const KEY_TEAM = 'team'; + +export function useTeam( + param: TeamParams, + queryConfig?: UseQueryOptions, +) { + return useQuery({ + queryKey: [KEY_TEAM, param], + queryFn: () => getTeam(param), + ...queryConfig, + }); +} diff --git a/src/frontend/apps/desk/src/features/teams/api/useTeams.tsx b/src/frontend/apps/desk/src/features/teams/api/useTeams.tsx index bfc0a50..dcb2562 100644 --- a/src/frontend/apps/desk/src/features/teams/api/useTeams.tsx +++ b/src/frontend/apps/desk/src/features/teams/api/useTeams.tsx @@ -7,23 +7,7 @@ import { import { APIList, fetchAPI } from '@/api'; -enum Role { - MEMBER = 'member', - ADMIN = 'administrator', - OWNER = 'owner', -} - -interface Access { - id: string; - role: Role; - user: string; -} - -export interface TeamResponse { - id: string; - name: string; - accesses: Access[]; -} +import { TeamResponse } from './types'; export enum TeamsOrdering { BY_CREATED_ON = 'created_at', @@ -42,14 +26,17 @@ export interface TeamsResponseError { detail: string; } -export const getTeams = async ({ ordering, page }: TeamsAPIParams) => { +export const getTeams = async ({ + ordering, + page, +}: TeamsAPIParams): Promise => { const orderingQuery = ordering ? `&ordering=${ordering}` : ''; const response = await fetchAPI(`teams/?page=${page}${orderingQuery}`); if (!response.ok) { throw new Error(`Couldn't fetch teams: ${response.statusText}`); } - return response.json(); + return response.json() as Promise; }; export const KEY_LIST_TEAM = 'teams'; diff --git a/src/frontend/apps/desk/src/features/teams/components/PanelTeams.tsx b/src/frontend/apps/desk/src/features/teams/components/PanelTeams.tsx index 8f0fbe7..94269f5 100644 --- a/src/frontend/apps/desk/src/features/teams/components/PanelTeams.tsx +++ b/src/frontend/apps/desk/src/features/teams/components/PanelTeams.tsx @@ -5,7 +5,8 @@ import { useTranslation } from 'react-i18next'; import { Box, Text } from '@/components'; import { InfiniteScroll } from '@/components/InfiniteScroll'; -import { TeamResponse, useTeams } from '../api/useTeams'; +import { TeamResponse } from '../api/types'; +import { useTeams } from '../api/useTeams'; import { useTeamStore } from '../store/useTeamsStore'; import { PanelTeam } from './PanelTeam';