♻️(frontend) useAddresses with new api

now that we've generated types and api client, we need to use them into
our api hooks

Author: rlecellier

src/frontend/js/components/TeacherDashboardCourseList/index.spec.tsx

@@ -1,20 +1,14 @@
-import { MemoryRouter } from 'react-router-dom';
-import { QueryClientProvider } from '@tanstack/react-query';
-import { render, screen } from '@testing-library/react';
+import { screen } from '@testing-library/react';
 import fetchMock from 'fetch-mock';
-import { IntlProvider } from 'react-intl';
 
 import { CourseListItem } from 'types/Joanie';
-import {
-  RichieContextFactory as mockRichieContextFactory,
-  UserFactory,
-} from 'utils/test/factories/richie';
-import JoanieSessionProvider from 'contexts/SessionContext/JoanieSessionProvider';
+import { RichieContextFactory as mockRichieContextFactory } from 'utils/test/factories/richie';
 import { CourseListItemFactory } from 'utils/test/factories/joanieLegacy';
-import { createTestQueryClient } from 'utils/test/createTestQueryClient';
 import { mockPaginatedResponse } from 'utils/test/mockPaginatedResponse';
 import { expectNoSpinner } from 'utils/test/expectSpinner';
 import { PER_PAGE } from 'settings';
+import { setupJoanieSession } from 'utils/test/wrappers/JoanieAppWrapper';
+import { render } from 'utils/test/render';
 import TeacherDashboardCourseList from '.';
 
 jest.mock('utils/context', () => ({
@@ -40,14 +34,9 @@ jest.mock('hooks/useIntersectionObserver', () => ({
 describe('components/TeacherDashboardCourseList', () => {
   const perPage = PER_PAGE.useCourseProductUnion;
   let nbApiCalls: number;
+  const joanieSessionData = setupJoanieSession();
   beforeEach(() => {
-    fetchMock.get('https://joanie.endpoint/api/v1.0/orders/', [], { overwriteRoutes: true });
-    fetchMock.get('https://joanie.endpoint/api/v1.0/credit-cards/', [], { overwriteRoutes: true });
-    fetchMock.get('https://joanie.endpoint/api/v1.0/addresses/', [], { overwriteRoutes: true });
-    nbApiCalls = 3;
-  });
-  afterEach(() => {
-    fetchMock.restore();
+    nbApiCalls = joanieSessionData.nbSessionApiRequest;
   });
 
   it('should render', async () => {
@@ -72,18 +61,7 @@ describe('components/TeacherDashboardCourseList', () => {
       mockPaginatedResponse([productCooking, productDancing], 15, false),
     );
 
-    const user = UserFactory().one();
-    render(
-      <IntlProvider locale="en">
-        <QueryClientProvider client={createTestQueryClient({ user })}>
-          <JoanieSessionProvider>
-            <MemoryRouter>
-              <TeacherDashboardCourseList titleTranslated="TeacherDashboardCourseList test title" />
-            </MemoryRouter>
-          </JoanieSessionProvider>
-        </QueryClientProvider>
-      </IntlProvider>,
-    );
+    render(<TeacherDashboardCourseList titleTranslated="TeacherDashboardCourseList test title" />);
     nbApiCalls += 1; // courses api call
     nbApiCalls += 1; // course-product-relations api call
 
@@ -131,31 +109,21 @@ describe('components/TeacherDashboardCourseList', () => {
       },
     );
 
-    const user = UserFactory().one();
-    render(
-      <IntlProvider locale="en">
-        <QueryClientProvider client={createTestQueryClient({ user })}>
-          <JoanieSessionProvider>
-            <MemoryRouter>
-              <TeacherDashboardCourseList titleTranslated="TeacherDashboardCourseList test title" />
-            </MemoryRouter>
-          </JoanieSessionProvider>
-        </QueryClientProvider>
-      </IntlProvider>,
-    );
+    render(<TeacherDashboardCourseList titleTranslated="TeacherDashboardCourseList test title" />);
     nbApiCalls += 1; // courses api call
     nbApiCalls += 1; // course-product-relations api call
+    await expectNoSpinner('Loading courses...');
 
     expect(await screen.getByRole('heading', { name: /TeacherDashboardCourseList test title/ }));
 
     const calledUrls = fetchMock.calls().map((call) => call[0]);
-    expect(calledUrls).toHaveLength(nbApiCalls);
     expect(calledUrls).toContain(
       `https://joanie.endpoint/api/v1.0/courses/?has_listed_course_runs=true&page=1&page_size=${perPage}`,
     );
     expect(calledUrls).toContain(
       `https://joanie.endpoint/api/v1.0/course-product-relations/?product_type=credential&page=1&page_size=${perPage}`,
     );
+    expect(calledUrls).toHaveLength(nbApiCalls);
 
     expect(await screen.findByText('You have no courses yet.')).toBeInTheDocument();
   });

src/frontend/js/hooks/useAddresses.ts

@@ -1,9 +1,13 @@
 import { defineMessages } from 'react-intl';
 import { MutateOptions } from '@tanstack/react-query';
-import { useJoanieApi } from 'contexts/JoanieApiContext';
-import { Address, AddressCreationPayload, API } from 'types/Joanie';
+import { getApiClientJoanie } from 'api/joanie/client';
+import type { Address } from 'api/joanie/gen';
+import { PatchedAddressRequest } from 'api/joanie/gen';
+import { ApiResourceInterface, PaginatedResourceQuery } from 'types/Joanie';
+import { Maybe } from 'types/utils';
 import { HttpError } from 'utils/errors/HttpError';
-import { ResourcesQuery, useResource, useResources, UseResourcesProps } from './useResources';
+
+import { useResource, useResources, UseResourcesProps } from './useResources';
 
 const messages = defineMessages({
   errorUpdate: {
@@ -33,15 +37,38 @@ const messages = defineMessages({
   },
 });
 
-export type AddressesMutateOptions = MutateOptions<Address, HttpError, AddressCreationPayload>;
+export type AddressesMutateOptions = MutateOptions<PatchedAddressRequest, HttpError, Address>;
+
+const apiInterface: () => ApiResourceInterface<Address, PaginatedResourceQuery> = () => {
+  const joanieClient = getApiClientJoanie();
+  return {
+    get: (resourceQuery?: Maybe<PaginatedResourceQuery>) => {
+      const { id, ...filters } = resourceQuery || {};
+      if (id) {
+        return joanieClient.addresses.addressesRetrieve(id);
+      }
+      return joanieClient.addresses.addressesList(filters.page, filters.page_size);
+    },
+    create: (data: Address) => {
+      return joanieClient.addresses.addressesCreate(data);
+    },
+    update: (data: PatchedAddressRequest & { id: string }) => {
+      const { id, ...updateData } = data;
+      return joanieClient.addresses.addressesPartialUpdate(id, updateData);
+    },
+    delete: (id: string) => {
+      return joanieClient.addresses.addressesDestroy(id);
+    },
+  };
+};
 
 /**
  * Joanie Api hook to retrieve/create/update/delete addresses
  * owned by the authenticated user.
  */
-const props: UseResourcesProps<Address, ResourcesQuery, API['user']['addresses']> = {
+const props: UseResourcesProps<Address, PaginatedResourceQuery, ReturnType<typeof apiInterface>> = {
   queryKey: ['addresses'],
-  apiInterface: () => useJoanieApi().user.addresses,
+  apiInterface,
   omniscient: true,
   session: true,
   messages,