richie-education 2.25.0-b2.dev138 → 2.25.0-b2.dev141

package/js/components/SaleTunnel/components/StepBreadcrumb/index.spec.tsx

@@ -19,9 +19,8 @@ describe('StepBreadcrumb', () => {
   it('renders visually a minimal manifest', () => {
     // If manifest's steps does not have `label` and `icon` property,
     // only a breadcrumb with the step index is displayed.
-    type LastStep = 'step1';
-    type Steps = 'step0' | LastStep;
-    const manifest: Manifest<Steps, LastStep> = {
+    type Steps = 'step0' | 'step1';
+    const manifest: Manifest<Steps> = {
       start: 'step0',
       steps: {
         step0: {
@@ -78,9 +77,8 @@ describe('StepBreadcrumb', () => {
   it('renders visually a complete manifest', () => {
     // If manifest's steps has `label` and `icon` property,
     // this information was shown.
-    type LastStep = 'step1';
-    type Steps = 'step0' | LastStep;
-    const manifest: Manifest<Steps, LastStep> = {
+    type Steps = 'step0' | 'step1';
+    const manifest: Manifest<Steps> = {
       start: 'step0',
       steps: {
         step0: {
@@ -155,9 +153,8 @@ describe('StepBreadcrumb', () => {
   });
 
   it('sorts manifest steps to guarantee the display order of steps', () => {
-    type LastStep = 'step0';
-    type Steps = 'step1' | LastStep;
-    const manifest: Manifest<Steps, LastStep> = {
+    type Steps = 'step1' | 'step0';
+    const manifest: Manifest<Steps> = {
       start: 'step1',
       steps: {
         step0: {
@@ -189,9 +186,8 @@ describe('StepBreadcrumb', () => {
   });
 
   it('displays all active steps on mount if manifest does not start to the first step', () => {
-    type LastStep = 'step1';
-    type Steps = 'step0' | LastStep;
-    const manifest: Manifest<Steps, LastStep> = {
+    type Steps = 'step0' | 'step1';
+    const manifest: Manifest<Steps> = {
       start: 'step1',
       steps: {
         step0: {

package/js/components/SaleTunnel/components/StepBreadcrumb/index.tsx

@@ -7,8 +7,8 @@ import { Nullable } from 'types/utils';
 import { Icon } from 'components/Icon';
 import { Manifest, Step, useStepManager } from 'hooks/useStepManager';
 
-interface Props<Keys extends PropertyKey, LastKey extends Keys> {
-  manifest: Manifest<Keys, LastKey>;
+interface Props<Keys extends PropertyKey> {
+  manifest: Manifest<Keys>;
   step: Nullable<PropertyKey>;
 }
 
@@ -33,12 +33,9 @@ function getActiveStepIndex(steps: FlattenStep[], step: Nullable<PropertyKey>) {
  * // MARK When IE 11 supports will be dropped, we can use a `Map`
  * to define `manifest.steps` then remove this sort function
  */
-function sortSteps<Keys extends PropertyKey, LastKey extends Keys>(
-  firstStep: Keys,
-  manifest: Manifest<Keys, LastKey>,
-) {
+function sortSteps<Keys extends PropertyKey>(firstStep: Keys, manifest: Manifest<Keys>) {
   const steps: FlattenStep[] = [];
-  let step = firstStep;
+  let step: Nullable<Keys> = firstStep;
 
   while (step !== null) {
     steps.push([step, manifest.steps[step]]);
@@ -57,10 +54,7 @@ const messages = defineMessages({
   },
 });
 
-export const StepBreadcrumb = <Keys extends PropertyKey, LastKey extends Keys>({
-  step,
-  manifest,
-}: Props<Keys, LastKey>) => {
+export const StepBreadcrumb = <Keys extends PropertyKey>({ step, manifest }: Props<Keys>) => {
   const { firstStep } = useStepManager(manifest);
   const orderedSteps = sortSteps(firstStep, manifest);
   const activeIndex = getActiveStepIndex(orderedSteps, step);

package/js/components/SaleTunnel/index.tsx

@@ -86,7 +86,7 @@ const SaleTunnel = ({
     productId: product.id,
   });
 
-  const manifest: Manifest<TunnelSteps, 'resume'> = {
+  const manifest: Manifest<TunnelSteps> = {
     start: 'validation',
     steps: {
       validation: {

package/js/hooks/useStepManager/index.spec.ts

@@ -3,9 +3,8 @@ import { Manifest, useStepManager } from '.';
 
 describe('useStepManager', () => {
   it('reads the manifest', () => {
-    type LastStep = 'step1';
-    type Steps = 'step0' | LastStep;
-    const manifest: Manifest<Steps, LastStep> = {
+    type Steps = 'step0' | 'step1';
+    const manifest: Manifest<Steps> = {
       start: 'step0',
       steps: {
         step0: {
@@ -35,9 +34,8 @@ describe('useStepManager', () => {
   });
 
   it('is able to reset the step process', () => {
-    type LastStep = 'step1';
-    type Steps = 'step0' | LastStep;
-    const manifest: Manifest<Steps, LastStep> = {
+    type Steps = 'step0' | 'step1';
+    const manifest: Manifest<Steps> = {
       start: 'step0',
       steps: {
         step0: {
@@ -63,9 +61,8 @@ describe('useStepManager', () => {
   });
 
   it('is able to find the first step through steps if manifest does not have a start property', () => {
-    type LastStep = 'finally';
-    type Steps = 'first' | 'then' | LastStep;
-    const manifest: Manifest<Steps, LastStep> = {
+    type Steps = 'first' | 'then' | 'finally';
+    const manifest: Manifest<Steps> = {
       steps: {
         then: {
           next: 'finally',
@@ -100,9 +97,8 @@ describe('useStepManager', () => {
   });
 
   it('triggers onEnter and onExit hooks on step transition', () => {
-    type LastStep = 'step1';
-    type Steps = 'step0' | LastStep;
-    const manifest: Manifest<Steps, LastStep> = {
+    type Steps = 'step0' | 'step1';
+    const manifest: Manifest<Steps> = {
       start: 'step0',
       steps: {
         step0: {

package/js/hooks/useStepManager/index.ts

@@ -10,20 +10,10 @@ export interface Step<Keys extends PropertyKey = PropertyKey> {
   onExit?: Function;
 }
 
-interface InStep<Keys extends PropertyKey> extends Step<Keys> {
-  next: Keys;
-}
-
-interface LastStep extends Step {
-  next: null;
-}
-
-type Steps<Keys extends PropertyKey, LastKey extends Keys> = Record<Keys, Step<Keys>> &
-  Record<Exclude<Keys, LastKey>, InStep<Keys>> &
-  Record<LastKey, LastStep>;
+type Steps<Keys extends PropertyKey> = Record<Keys, Step<Keys>>;
 
-export interface Manifest<Keys extends PropertyKey, LastKey extends Keys = Keys> {
-  steps: Steps<Keys, LastKey>;
+export interface Manifest<Keys extends PropertyKey> {
+  steps: Steps<Keys>;
   start?: Keys;
 }
 
@@ -34,9 +24,7 @@ export interface Manifest<Keys extends PropertyKey, LastKey extends Keys = Keys>
  * @param {Manifest} manifest
  * @returns {Manifest.step} step
  */
-function findFirstStep<Keys extends PropertyKey, LastKey extends Keys>(
-  manifest: Manifest<Keys, LastKey>,
-): Keys {
+function findFirstStep<Keys extends PropertyKey>(manifest: Manifest<Keys>): Keys {
   const steps = Object.keys(manifest.steps) as Keys[];
   const nextSteps = Object.values<Step<Keys>>(manifest.steps).map(({ next }) => next);
 
@@ -52,12 +40,10 @@ function findFirstStep<Keys extends PropertyKey, LastKey extends Keys>(
  *
  * Process terminates when step is null
  */
-export const useStepManager = <Keys extends PropertyKey, LastKey extends Keys>(
-  manifest: Manifest<Keys, LastKey>,
-) => {
-  const firstStep = findFirstStep<Keys, LastKey>(manifest);
+export const useStepManager = <Keys extends PropertyKey>(manifest: Manifest<Keys>) => {
+  const firstStep = findFirstStep<Keys>(manifest);
   const [step, setStep] = useState<Nullable<Keys>>(manifest.start || firstStep);
-  const state = useMemo(() => (step ? manifest.steps[step] : null), [step]);
+  const currentStep = useMemo(() => (step ? manifest.steps[step] : null), [step]);
 
   const next = () => {
     if (step !== null) {
@@ -67,12 +53,12 @@ export const useStepManager = <Keys extends PropertyKey, LastKey extends Keys>(
   };
 
   useEffect(() => {
-    if (state?.onEnter) state.onEnter();
+    if (currentStep?.onEnter) currentStep.onEnter();
 
     return () => {
-      if (state?.onExit) state.onExit();
+      if (currentStep?.onExit) currentStep.onExit();
     };
-  }, [state]);
+  }, [currentStep]);
 
   const reset = () => {
     setStep(manifest.start || firstStep);

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

@@ -8,6 +8,7 @@ import { mockPaginatedResponse } from 'utils/test/mockPaginatedResponse';
 import { PER_PAGE } from 'settings';
 import { HttpError, HttpStatusCode } from 'utils/errors/HttpError';
 import { BaseAppWrapper } from 'utils/test/wrappers/BaseAppWrapper';
+import { createTestQueryClient } from 'utils/test/createTestQueryClient';
 import { QueryConfig, FetchDataFunction } from './utils/fetchEntity';
 import useUnionResource from '.';
 
@@ -314,4 +315,53 @@ describe('useUnionResource', () => {
     expect(calledUrls).toHaveLength(4);
     expect(calledUrls).toContain('http://data.a/?isFiltered=true&page=1');
   });
+
+  it.each([
+    {
+      testLabel: 'with some results',
+      testDataAList: [{ name: 'TestDataA', id: '1', created_on: '2022-01-01' }],
+    },
+    {
+      testLabel: 'without results',
+      testDataAList: [],
+    },
+  ])('should refetch data when a query $testLabel is invalidate', async ({ testDataAList }) => {
+    fetchMock.get(
+      'http://data.a/?page=1',
+      mockPaginatedResponse(testDataAList, testDataAList.length, false),
+    );
+    fetchMock.get('http://data.b/?page=1', mockPaginatedResponse([], 0, false));
+
+    const queryClient = createTestQueryClient({ user: true });
+    const { result, rerender } = 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 }) => (
+          <BaseAppWrapper queryOptions={{ client: queryClient }}>{children}</BaseAppWrapper>
+        ),
+      },
+    );
+
+    await waitFor(() => expect(result.current.isLoading).toBe(false));
+    let calledUrls = fetchMock.calls().map((call) => call[0]);
+    expect(calledUrls).toHaveLength(2);
+    expect(calledUrls).toContain('http://data.a/?page=1');
+    expect(calledUrls).toContain('http://data.b/?page=1');
+
+    queryClient.invalidateQueries({ queryKey: queryAConfig.queryKey });
+    rerender({ queryA: { ...queryAConfig }, queryB: queryBConfig });
+    await waitFor(() => {
+      calledUrls = fetchMock.calls().map((call) => call[0]);
+      expect(calledUrls).toHaveLength(3);
+    });
+    expect(calledUrls.filter((url) => url === 'http://data.a/?page=1')).toHaveLength(2);
+    expect(calledUrls.filter((url) => url === 'http://data.b/?page=1')).toHaveLength(1);
+  });
 });

package/js/hooks/useUnionResource/index.ts

@@ -90,8 +90,10 @@ const useUnionResource = <
   const eofRef = useRef<Record<string, number>>(queryClient.getQueryData(eofQueryKey) ?? {});
   log('eof', eofRef.current);
 
-  const [unionQueryKey, setUnionQueryKey] = useState<string>();
+  const [update, setForceUpdate] = useState<number>();
 
+  // to force execution of useEffect::fetchNewPage(),
+  // reset need to generate a uniq key that is part of it's dependencies.
   const reset = () => {
     setStack([]);
     setPage(0);
@@ -99,23 +101,21 @@ const useUnionResource = <
     setError(undefined);
     setCursor(perPage);
     setIntegrityCount(0);
+    setForceUpdate(new Date().getTime());
   };
 
+  // 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);
   }
 
+  // filters have changes, new results will be fetch.
+  // let's reset every previous fetches states
+  // and re-generate update
   useEffect(() => {
-    // filters have changes, new results will be fetch.
-    // let's reset every previous fetches states
     reset();
-
-    // We need to fetch new results.
-    // reset all states isn't enought. If we've a research without results
-    // then the next reset would do nothing.
-    // to force execution of useEffect::fetchNewPage(), we use a uniq key build with current queries filters.
-    setUnionQueryKey(JSON.stringify(queryAConfig.filters) + JSON.stringify(queryBConfig.filters));
   }, [JSON.stringify(queryAConfig.filters), JSON.stringify(queryBConfig.filters)]);
 
   useEffect(() => {
@@ -165,11 +165,8 @@ const useUnionResource = <
     }
   }, [
     cursor,
-    // FIXME(rlecellier): when stack.length === 0, invalidate the query will not refetch.
-    // stack.length is added in the dependency array to force a new fetch on reset.
-    stack.length,
-    // unionQueryKey assure that we refetch data when query filters change.
-    unionQueryKey,
+    // update assure that we refetch data on reset
+    update,
   ]);
 
   const cursorToUse = Math.min(cursor, integrityCount);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "richie-education",
-  "version": "2.25.0-b2.dev138",
+  "version": "2.25.0-b2.dev141",
   "description": "A CMS to build learning portals for Open Education",
   "main": "sandbox/manage.py",
   "scripts": {
@@ -50,8 +50,8 @@
     "@hookform/resolvers": "3.3.4",
     "@openfun/cunningham-react": "2.6.0",
     "@openfun/cunningham-tokens": "2.1.1",
-    "@sentry/browser": "7.105.0",
-    "@sentry/types": "7.105.0",
+    "@sentry/browser": "7.106.0",
+    "@sentry/types": "7.106.0",
     "@storybook/addon-actions": "7.6.17",
     "@storybook/addon-essentials": "7.6.17",
     "@storybook/addon-interactions": "7.6.17",
@@ -59,10 +59,10 @@
     "@storybook/react": "7.6.17",
     "@storybook/react-webpack5": "7.6.17",
     "@storybook/testing-library": "0.2.2",
-    "@tanstack/query-core": "5.24.8",
-    "@tanstack/query-sync-storage-persister": "5.24.8",
-    "@tanstack/react-query": "5.24.8",
-    "@tanstack/react-query-persist-client": "5.24.8",
+    "@tanstack/query-core": "5.25.0",
+    "@tanstack/query-sync-storage-persister": "5.25.0",
+    "@tanstack/react-query": "5.25.0",
+    "@tanstack/react-query-persist-client": "5.25.0",
     "@testing-library/dom": "9.3.4",
     "@testing-library/jest-dom": "6.4.2",
     "@testing-library/react": "14.2.1",
@@ -74,13 +74,13 @@
     "@types/lodash-es": "4.17.12",
     "@types/node-fetch": "2.6.11",
     "@types/query-string": "6.3.0",
-    "@types/react": "18.2.61",
+    "@types/react": "18.2.64",
     "@types/react-autosuggest": "10.1.11",
-    "@types/react-dom": "18.2.19",
+    "@types/react-dom": "18.2.21",
     "@types/react-modal": "3.16.3",
     "@types/uuid": "9.0.8",
-    "@typescript-eslint/eslint-plugin": "7.1.0",
-    "@typescript-eslint/parser": "7.1.0",
+    "@typescript-eslint/eslint-plugin": "7.1.1",
+    "@typescript-eslint/parser": "7.1.1",
     "babel-jest": "29.7.0",
     "babel-loader": "9.1.3",
     "babel-plugin-react-intl": "8.2.25",
@@ -113,7 +113,7 @@
     "js-cookie": "3.0.5",
     "lodash-es": "4.17.21",
     "mdn-polyfills": "5.20.0",
-    "msw": "2.2.2",
+    "msw": "2.2.3",
     "node-fetch": ">2.6.6 <3",
     "nodemon": "3.1.0",
     "prettier": "3.2.5",
@@ -124,24 +124,24 @@
     "react-hook-form": "7.51.0",
     "react-intl": "6.6.2",
     "react-modal": "3.16.1",
-    "react-router-dom": "6.22.2",
+    "react-router-dom": "6.22.3",
     "sass": "1.71.1",
     "source-map-loader": "5.0.0",
     "storybook": "7.6.17",
     "tsconfig-paths-webpack-plugin": "4.1.0",
-    "typescript": "5.3.3",
+    "typescript": "5.4.2",
     "uuid": "9.0.1",
     "webpack": "5.90.3",
     "webpack-cli": "5.1.4",
     "whatwg-fetch": "3.6.20",
     "xhr-mock": "2.5.1",
     "yargs": "17.7.2",
-    "yup": "1.3.3"
+    "yup": "1.4.0"
   },
   "resolutions": {
     "@testing-library/dom": "9.3.4",
-    "@types/react": "18.2.61",
-    "@types/react-dom": "18.2.19"
+    "@types/react": "18.2.64",
+    "@types/react-dom": "18.2.21"
   },
   "msw": {
     "workerDirectory": "../richie/static/richie/js"