@squiz/resource-browser 2.1.8-rc.0 → 2.1.9-rc.0

package/CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.1.9-rc.0](https://gitlab.squiz.net/dxp/dxp-shared-ui/resource-browser/compare/@squiz/resource-browser@2.1.8-rc.0...@squiz/resource-browser@2.1.9-rc.0) (2024-06-03)
+
+**Note:** Version bump only for package @squiz/resource-browser
+
 ## 2.1.8-rc.0 (2024-05-30)
 
 **Note:** Version bump only for package @squiz/resource-browser

package/lib/Hooks/useSources.d.ts

@@ -1,5 +1,5 @@
 import { ResourceBrowserSource, ResourceBrowserPlugin } from '../types';
-type UseSourcesProps = {
+export type UseSourcesProps = {
     onRequestSources: () => Promise<ResourceBrowserSource[]>;
     plugins: Array<ResourceBrowserPlugin>;
 };
@@ -12,4 +12,3 @@ export declare const useSources: ({ onRequestSources, plugins }: UseSourcesProps
     isLoading: boolean;
     reload: () => void;
 };
-export {};

package/lib/Hooks/useSources.js

@@ -6,6 +6,7 @@ const generic_browser_lib_1 = require("@squiz/generic-browser-lib");
  * Loads and caches the source list when a component using the hook is mounted.
  */
 const useSources = ({ onRequestSources, plugins }) => {
+    const pluginsKey = plugins.reduce((acc, plugin) => acc + plugin.type, '');
     return (0, generic_browser_lib_1.useAsync)({
         callback: () => {
             return new Promise((resolve, reject) => {
@@ -28,6 +29,6 @@ const useSources = ({ onRequestSources, plugins }) => {
             });
         },
         defaultValue: [],
-    }, [plugins]);
+    }, [onRequestSources, pluginsKey]);
 };
 exports.useSources = useSources;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@squiz/resource-browser",
-    "version": "2.1.8-rc.0",
+    "version": "2.1.9-rc.0",
     "main": "lib/index.js",
     "types": "lib/index.d.ts",
     "private": false,
@@ -81,5 +81,5 @@
     "volta": {
         "node": "18.18.0"
     },
-    "gitHead": "95c233207d4a87157029512d0bd9edacaf15826d"
+    "gitHead": "9ea5dc75a03930aaedf856fe5fb09f67a5a23364"
 }

package/src/Hooks/useSources.spec.ts

@@ -1,6 +1,6 @@
 import { renderHook, waitFor } from '@testing-library/react';
 import { mockSource, mockPlugin } from '../__mocks__/MockModels';
-import { useSources } from './useSources';
+import { useSources, UseSourcesProps } from './useSources';
 
 describe('useSources', () => {
     it('Should trigger and load the sources', async () => {
@@ -35,4 +35,33 @@ describe('useSources', () => {
         expect(result.current.data).toEqual([sources[0]]);
         expect(result.current.data.length).toEqual(1);
     });
+
+    it('Should calculate the async key from the plugins type so it wont always change on re-renders', async () => {
+        const sources = [mockSource()];
+        const plugins = [mockPlugin()];
+        const onRequestSources = jest.fn().mockResolvedValue(sources);
+        const { rerender, result } = renderHook((props: UseSourcesProps) =>
+            useSources({ onRequestSources: props?.onRequestSources || onRequestSources, plugins: props?.plugins || plugins }),
+        );
+
+        expect(result.current.isLoading).toBe(true);
+        expect(result.current.error).toBe(null);
+        expect(result.current.data).toEqual([]);
+
+        await waitFor(() => expect(result.current.isLoading).toBe(false));
+        expect(result.current.isLoading).toBe(false);
+        expect(result.current.data).toEqual(sources);
+
+        // Wont go back to loading data (plugin keys havent changed)
+        rerender({ onRequestSources, plugins: [mockPlugin()] });
+        expect(result.current.isLoading).toBe(false);
+
+        // Will go back to loading as change in keys
+        rerender({ onRequestSources, plugins: [mockPlugin(), mockPlugin({ type: 'matrix' })] });
+        expect(result.current.isLoading).toBe(true);
+
+        // Will go back to loading as change in keys (order change will cause reload)
+        rerender({ onRequestSources, plugins: [mockPlugin({ type: 'matrix' }), mockPlugin()] });
+        expect(result.current.isLoading).toBe(true);
+    });
 });

package/src/Hooks/useSources.ts

@@ -1,7 +1,7 @@
 import { ResourceBrowserSource, ResourceBrowserPlugin } from '../types';
 import { useAsync } from '@squiz/generic-browser-lib';
 
-type UseSourcesProps = {
+export type UseSourcesProps = {
     onRequestSources: () => Promise<ResourceBrowserSource[]>;
     plugins: Array<ResourceBrowserPlugin>;
 };
@@ -10,6 +10,7 @@ type UseSourcesProps = {
  * Loads and caches the source list when a component using the hook is mounted.
  */
 export const useSources = ({ onRequestSources, plugins }: UseSourcesProps) => {
+    const pluginsKey = plugins.reduce((acc, plugin) => acc + plugin.type, '');
     return useAsync(
         {
             callback: () => {
@@ -36,6 +37,6 @@ export const useSources = ({ onRequestSources, plugins }: UseSourcesProps) => {
             },
             defaultValue: [] as ResourceBrowserSource[],
         },
-        [plugins],
+        [onRequestSources, pluginsKey],
     );
 };