👔(frontend) adapt versions api with new types

We updated the backend recently, the types of the
versions list has changed.
This commit adapts the frontend to the new types.

src/frontend/apps/impress/src/api/helpers.tsx

@@ -10,14 +10,16 @@ import { APIError } from './APIError';
 import { APIList } from './types';
 
 export type UseQueryOptionsAPI<Q> = UseQueryOptions<Q, APIError, Q>;
-export type DefinedInitialDataInfiniteOptionsAPI<Q> =
+export type DefinedInitialDataInfiniteOptionsAPI<
-  DefinedInitialDataInfiniteOptions<
+  Q,
-    Q,
+  TPageParam = number,
-    APIError,
+> = DefinedInitialDataInfiniteOptions<
-    InfiniteData<Q>,
+  Q,
-    QueryKey,
+  APIError,
-    number
+  InfiniteData<Q>,
-  >;
+  QueryKey,
+  TPageParam
+>;
 
 /**
  * @param param Used for infinite scroll pagination

src/frontend/apps/impress/src/features/docs/doc-versioning/api/useDocVersions.tsx

@@ -1,32 +1,35 @@
-import { useQuery } from '@tanstack/react-query';
+import {
+  InfiniteData,
+  QueryKey,
+  useInfiniteQuery,
+  useQuery,
+} from '@tanstack/react-query';
 
 import {
   APIError,
-  APIList,
   DefinedInitialDataInfiniteOptionsAPI,
   UseQueryOptionsAPI,
   errorCauses,
   fetchAPI,
-  useAPIInfiniteQuery,
 } from '@/api';
 
-import { Versions } from '../types';
+import { APIListVersions } from '../types';
 
 export type DocVersionsParam = {
   docId: string;
 };
 
 export type DocVersionsAPIParams = DocVersionsParam & {
-  page: number;
+  versionId: string;
 };
 
-type VersionsResponse = APIList<Versions>;
+type VersionsResponse = APIListVersions;
 
 const getDocVersions = async ({
-  page,
+  versionId,
   docId,
 }: DocVersionsAPIParams): Promise<VersionsResponse> => {
-  const url = `documents/${docId}/versions/?page=${page}`;
+  const url = `documents/${docId}/versions/?version_id=${versionId}`;
 
   const response = await fetchAPI(url);
 
@@ -55,12 +58,25 @@ export function useDocVersions(
 
 export function useDocVersionsInfiniteQuery(
   param: DocVersionsParam,
-  queryConfig?: DefinedInitialDataInfiniteOptionsAPI<VersionsResponse>,
+  queryConfig?: DefinedInitialDataInfiniteOptionsAPI<VersionsResponse, string>,
 ) {
-  return useAPIInfiniteQuery<DocVersionsParam, VersionsResponse>(
+  return useInfiniteQuery<
-    KEY_LIST_DOC_VERSIONS,
+    VersionsResponse,
-    getDocVersions,
+    APIError,
-    param,
+    InfiniteData<VersionsResponse>,
-    queryConfig,
+    QueryKey,
-  );
+    string
+  >({
+    initialPageParam: '',
+    queryKey: [KEY_LIST_DOC_VERSIONS, param],
+    queryFn: ({ pageParam }) =>
+      getDocVersions({
+        ...param,
+        versionId: pageParam,
+      }),
+    getNextPageParam(lastPage) {
+      return lastPage.next_version_id_marker || undefined;
+    },
+    ...queryConfig,
+  });
 }

src/frontend/apps/impress/src/features/docs/doc-versioning/components/VersionList.tsx

@@ -1,6 +1,6 @@
 import { Loader } from '@openfun/cunningham-react';
 import { useRouter } from 'next/router';
-import React, { useEffect, useMemo, useRef } from 'react';
+import React, { useMemo, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { APIError } from '@/api';
@@ -9,7 +9,6 @@ import { Doc } from '@/features/docs/doc-management';
 import { useDate } from '@/hook';
 
 import { useDocVersionsInfiniteQuery } from '../api/useDocVersions';
-import { useDocVersionStore } from '../stores';
 import { Versions } from '../types';
 
 import { VersionItem } from './VersionItem';
@@ -102,16 +101,9 @@ export const VersionList = ({ doc }: VersionListProps) => {
   const containerRef = useRef<HTMLDivElement>(null);
   const versions = useMemo(() => {
     return data?.pages.reduce((acc, page) => {
-      return acc.concat(page.results);
+      return acc.concat(page.versions);
     }, [] as Versions[]);
   }, [data?.pages]);
-  const { setIsPanelVersionOpen } = useDocVersionStore();
-
-  useEffect(() => {
-    return () => {
-      setIsPanelVersionOpen(false);
-    };
-  }, [setIsPanelVersionOpen]);
 
   return (
     <Box $css="overflow-y: auto; overflow-x: hidden;" ref={containerRef}>

src/frontend/apps/impress/src/features/docs/doc-versioning/types.ts

@@ -1,5 +1,12 @@
 import { Doc } from '../doc-management';
 
+export interface APIListVersions {
+  count: number;
+  is_truncated: boolean;
+  next_version_id_marker: string | null;
+  versions: Versions[];
+}
+
 export interface Versions {
   etag: string;
   is_latest: boolean;