From d0562029e8bef47b61a9211d7854f7c55f0dc0ce Mon Sep 17 00:00:00 2001
From: Anthony LC <anthony.le-courric@mail.numerique.gouv.fr>
Date: Wed, 7 Feb 2024 16:16:17 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(app-desk)=20integrate=20team=20endpoi?=
 =?UTF-8?q?nt?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Integrate team endpoint with react-query.
It will be used to get the team on the team page.
---
 .../desk/src/features/teams/api/types.tsx     | 17 +++++++++
 .../desk/src/features/teams/api/useTeam.tsx   | 35 +++++++++++++++++++
 .../desk/src/features/teams/api/useTeams.tsx  | 25 ++++---------
 .../features/teams/components/PanelTeams.tsx  |  3 +-
 4 files changed, 60 insertions(+), 20 deletions(-)
 create mode 100644 src/frontend/apps/desk/src/features/teams/api/types.tsx
 create mode 100644 src/frontend/apps/desk/src/features/teams/api/useTeam.tsx

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<TeamResponse> => {
+  const response = await fetchAPI(`teams/${id}`);
+
+  if (!response.ok) {
+    throw new Error(`Couldn't fetch team: ${response.statusText}`);
+  }
+  return response.json() as Promise<TeamResponse>;
+};
+
+export const KEY_TEAM = 'team';
+
+export function useTeam(
+  param: TeamParams,
+  queryConfig?: UseQueryOptions<TeamResponse, TeamResponseError, TeamResponse>,
+) {
+  return useQuery<TeamResponse, TeamResponseError, TeamResponse>({
+    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<TeamsResponse> => {
   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<TeamsResponse>;
 };
 
 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';