richie-education 2.25.0-b2.dev156 → 2.25.0-b2.dev161

package/js/hooks/useUnionResource/index.spec.tsx

@@ -1,7 +1,7 @@
 import { renderHook, act, waitFor } from '@testing-library/react';
 import fetchMock from 'fetch-mock';
 import queryString from 'query-string';
-import { PaginatedResourceQuery } from 'types/Joanie';
+import { PaginatedResourceQuery, PaginatedResponse } from 'types/Joanie';
 import { Deferred } from 'utils/test/deferred';
 import { noop } from 'utils';
 import { mockPaginatedResponse } from 'utils/test/mockPaginatedResponse';
@@ -281,7 +281,15 @@ describe('useUnionResource', () => {
   });
 
   it('should refetch data when filters change', async () => {
-    fetchMock.get('http://data.a/?page=1', mockPaginatedResponse([dataAList[0]], 1, false));
+    fetchMock.get(
+      'http://data.a/?page=1',
+      mockPaginatedResponse([dataAList[0], dataAList[1], dataAList[2]], 7, true),
+    );
+    fetchMock.get(
+      'http://data.a/?page=2',
+      mockPaginatedResponse([dataAList[3], dataAList[4], dataAList[5]], 7, true),
+    );
+    fetchMock.get('http://data.a/?page=3', mockPaginatedResponse([dataAList[6]], 7, false));
     fetchMock.get('http://data.b/?page=1', mockPaginatedResponse([], 0, false));
 
     const { result, rerender } = renderHook(
@@ -297,9 +305,24 @@ describe('useUnionResource', () => {
     );
 
     await waitFor(() => expect(result.current.isLoading).toBe(false));
+    // two page of 3 item have been fetch but only 3 item are displayed.
+    act(() => {
+      // display one more page for a total of 6 item displayed
+      result.current.next();
+    });
+    act(() => {
+      // display one more page for a total of 7 item displayed
+      result.current.next();
+    });
+    await waitFor(() => expect(result.current.isLoading).toBe(false));
+    expect(result.current.hasMore).toBe(false);
+
     let calledUrls = fetchMock.calls().map((call) => call[0]);
-    expect(calledUrls).toHaveLength(2);
+    let expectedQueries = 4;
+    expect(calledUrls).toHaveLength(expectedQueries);
     expect(calledUrls).toContain('http://data.a/?page=1');
+    expect(calledUrls).toContain('http://data.a/?page=2');
+    expect(calledUrls).toContain('http://data.a/?page=3');
     expect(calledUrls).toContain('http://data.b/?page=1');
 
     queryAConfig.filters = { isFiltered: true };
@@ -312,8 +335,10 @@ describe('useUnionResource', () => {
     await waitFor(() => expect(result.current.isLoading).toBe(false));
 
     calledUrls = fetchMock.calls().map((call) => call[0]);
-    expect(calledUrls).toHaveLength(4);
+    expectedQueries += 1; // fetch dataA first page
+    expect(calledUrls).toHaveLength(expectedQueries);
     expect(calledUrls).toContain('http://data.a/?isFiltered=true&page=1');
+    expect(result.current.hasMore).toBe(false);
   });
 
   it.each([
@@ -366,4 +391,112 @@ describe('useUnionResource', () => {
     expect(calledUrls.filter((url) => url === 'http://data.a/?page=1')).toHaveLength(2);
     expect(calledUrls.filter((url) => url === 'http://data.b/?page=1')).toHaveLength(1);
   });
+
+  it('should adapt eof to the total number of result when it change', async () => {
+    fetchMock.get(
+      'http://data.a/?page=1',
+      mockPaginatedResponse([dataAList[0], dataAList[1], dataAList[2]], 6, true),
+    );
+    fetchMock.get(
+      'http://data.a/?page=2',
+      mockPaginatedResponse([dataAList[3], dataAList[4], dataAList[5]], 6, false),
+    );
+    fetchMock.get('http://data.b/?page=1', mockPaginatedResponse([], 0, false));
+
+    const queryClient = createTestQueryClient({ user: true });
+    const { result } = renderHook(
+      (queries: {
+        queryA?: QueryConfig<TestDataA, TestDataAFilters>;
+        queryB?: QueryConfig<TestDataB, PaginatedResourceQuery>;
+      }) =>
+        useUnionResource<TestDataA, TestDataB, TestDataAFilters, PaginatedResourceQuery>({
+          queryAConfig: queries?.queryA || queryAConfig,
+          queryBConfig: queries?.queryB || queryBConfig,
+        }),
+      {
+        wrapper: ({ children }) => (
+          <ReactQueryAppWrapper queryOptions={{ client: queryClient }}>
+            {children}
+          </ReactQueryAppWrapper>
+        ),
+      },
+    );
+
+    await waitFor(() => expect(result.current.isLoading).toBe(false));
+    // two page of 3 item have been fetch but only 3 item are displayed.
+    act(() => {
+      // display one more page for a total of 6 item displayed
+      result.current.next();
+    });
+    expect(result.current.hasMore).toBe(false);
+
+    let calledUrls = fetchMock.calls().map((call) => call[0]);
+    expect(calledUrls).toHaveLength(3);
+    expect(calledUrls).toContain('http://data.a/?page=1');
+    expect(calledUrls).toContain('http://data.a/?page=2');
+    expect(calledUrls).toContain('http://data.b/?page=1');
+
+    // simulate backend adding items, totalResults move from 6 to 7
+    // it means that we should request one more page.
+    fetchMock.restore();
+    fetchMock.get(
+      'http://data.a/?page=1',
+      mockPaginatedResponse([dataAList[0], dataAList[1], dataAList[2]], 7, true),
+    );
+    fetchMock.get(
+      'http://data.a/?page=2',
+      mockPaginatedResponse([dataAList[3], dataAList[4], dataAList[5]], 7, true),
+    );
+    fetchMock.get('http://data.a/?page=3', mockPaginatedResponse([dataAList[6]], 7, false));
+    fetchMock.get('http://data.b/?page=1', mockPaginatedResponse([], 0, false));
+
+    // simulate cache expire
+    queryClient.invalidateQueries({ queryKey: ['resourceA'] });
+    queryClient.invalidateQueries({ queryKey: ['resourceB'] });
+
+    await waitFor(() => {
+      expect(
+        queryClient.getQueryState<PaginatedResponse<TestDataA>>(['resourceA']),
+      ).toBeUndefined();
+      expect(
+        queryClient.getQueryState<PaginatedResponse<TestDataB>>(['resourceB']),
+      ).toBeUndefined();
+    });
+
+    await waitFor(() => {
+      expect(result.current.isLoading).toBe(false);
+      expect(result.current.data).toHaveLength(3);
+    });
+
+    // two page of 3 item have been fetch but only 3 item are displayed.
+    act(() => {
+      // display one more page for a total of 6 item displayed
+      result.current.next();
+    });
+    act(() => {
+      expect(result.current.isLoading).toBe(false);
+      expect(result.current.data).toHaveLength(6);
+    });
+
+    act(() => {
+      // display one more page for a total of 7 item displayed
+      result.current.next();
+    });
+    await waitFor(() => {
+      expect(result.current.isLoading).toBe(false);
+      expect(result.current.data).toHaveLength(7);
+    });
+
+    await waitFor(() => {
+      expect(result.current.hasMore).toBe(false);
+    });
+
+    calledUrls = fetchMock.calls().map((call) => call[0]);
+    expect(calledUrls).toHaveLength(4);
+
+    expect(calledUrls).toContain('http://data.a/?page=1');
+    expect(calledUrls).toContain('http://data.a/?page=2');
+    expect(calledUrls).toContain('http://data.a/?page=3');
+    expect(calledUrls).toContain('http://data.b/?page=1');
+  });
 });

package/js/hooks/useUnionResource/index.ts

@@ -94,7 +94,11 @@ const useUnionResource = <
 
   // to force execution of useEffect::fetchNewPage(),
   // reset need to generate a uniq key that is part of it's dependencies.
-  const reset = () => {
+  const reset = (eofKey?: string) => {
+    if (eofKey) {
+      delete eofRef.current[eofKey];
+    }
+
     setStack([]);
     setPage(0);
     setTotalCount(undefined);
@@ -107,8 +111,12 @@ const useUnionResource = <
   // we manualy observe key invalidation to trigger new search
   // by generating a new update key
   if (refetchOnInvalidation) {
-    useQueryKeyInvalidateListener(queryAConfig.queryKey, reset);
-    useQueryKeyInvalidateListener(queryBConfig.queryKey, reset);
+    useQueryKeyInvalidateListener(queryAConfig.queryKey, () => {
+      reset(queryAConfig.queryKey.join('-'));
+    });
+    useQueryKeyInvalidateListener(queryBConfig.queryKey, () => {
+      reset(queryBConfig.queryKey.join('-'));
+    });
   }
 
   // filters have changes, new results will be fetch.

package/js/hooks/useUnionResource/utils/fetchEntity.ts

@@ -65,14 +65,11 @@ export const fetchEntity = async <
   try {
     const res = await fn(filters);
     queryClient.setQueryData(QUERY_KEY, res);
-
-    // If we reached the end of the list, we set the eof flag to prevent future requests.
-    if (!res.next) {
-      eofRef.current = { ...eofRef.current, [queryKeyString]: filters.page! };
-      // Eof is cached based, the same way, we cache the fetching data. Otherwise there would
-      // be request to non existing pages after reload.
-      queryClient.setQueryData(eofQueryKey, eofRef.current);
-    }
+    // Eof is cached based, the same way, we cache the fetching data. Otherwise there would
+    // be request to non existing pages after reload.
+    const totalPages = Math.ceil(res.count / perPage);
+    eofRef.current = { ...eofRef.current, [queryKeyString]: totalPages };
+    queryClient.setQueryData(eofQueryKey, eofRef.current);
     return res;
   } catch (err) {
     if (isHttpError(err)) {

package/js/widgets/Dashboard/components/DashboardBreadcrumbs/index.tsx

@@ -60,7 +60,7 @@ export const DashboardBreadcrumbs = () => {
         <RouterButton
           href={backPath}
           size="nano"
-          color="tertiary"
+          color="tertiary-text"
           icon={<span className="material-icons">chevron_left</span>}
         >
           <FormattedMessage {...messages.back} />
@@ -69,7 +69,7 @@ export const DashboardBreadcrumbs = () => {
 
       {breadcrumbs.map((breadcrumb) => (
         <li key={breadcrumb.pathname}>
-          <RouterButton href={breadcrumb.pathname} size="nano" color="tertiary">
+          <RouterButton href={breadcrumb.pathname} size="nano" color="tertiary-text">
             {breadcrumb.name}
           </RouterButton>
         </li>

package/js/widgets/Dashboard/components/DashboardItem/Order/DashboardItemOrderContract.useUnionResource.cache.spec.tsx

@@ -59,7 +59,7 @@ describe('<DashboardItemOrder/> Contract', () => {
       // overwrite useOmniscientOrders call
       fetchMock.get(
         'https://joanie.endpoint/api/v1.0/orders/',
-        { results: [order], next: null, previous: null, count: null },
+        { results: [order], next: null, previous: null, count: 1 },
         { overwriteRoutes: true },
       );
 
@@ -68,12 +68,12 @@ describe('<DashboardItemOrder/> Contract', () => {
         results: [],
         next: null,
         previous: null,
-        count: null,
+        count: 0,
       });
 
       fetchMock.get(
         'https://joanie.endpoint/api/v1.0/orders/?product_type=credential&state_exclude=canceled&page=1&page_size=50',
-        { results: [order], next: null, previous: null, count: null },
+        { results: [order], next: null, previous: null, count: 1 },
       );
 
       const submitDeferred = new Deferred();
@@ -238,7 +238,7 @@ describe('<DashboardItemOrder/> Contract', () => {
         results: [signedOrder],
         next: null,
         previous: null,
-        count: null,
+        count: 1,
       });
 
       // Contract signing is removed.
@@ -249,7 +249,7 @@ describe('<DashboardItemOrder/> Contract', () => {
       // Go back to the list view to make sure the sign button is not shown anymore.
       fetchMock.get(
         'https://joanie.endpoint/api/v1.0/orders/?product_type=credential&state_exclude=canceled&page=1&page_size=50',
-        { results: [signedOrder], next: null, previous: null, count: null },
+        { results: [signedOrder], next: null, previous: null, count: 1 },
         { overwriteRoutes: true },
       );
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "richie-education",
-  "version": "2.25.0-b2.dev156",
+  "version": "2.25.0-b2.dev161",
   "description": "A CMS to build learning portals for Open Education",
   "main": "sandbox/manage.py",
   "scripts": {