refactor: change plugins hook to a component

Author: johnvente

src/components/PluggableComponent/hooks.jsx renamed to src/components/PluggableComponent/MultiplePlugins.jsx

@@ -1,20 +1,17 @@
 import React, { useState, useEffect, useRef } from 'react';
 import loadable from '@loadable/component';
 import useDeepCompareEffect from 'use-deep-compare-effect';
+import PropTypes from 'prop-types';
 
 import { isPluginAvailable, getPluginsByPrefix } from './utils';
 
-/**
- * Component that dynamically loads and displays a list of plugins.
- *
- * @param {Object} props - The component props.
- * @param {React.ReactNode} props.children - Children components to be passed to each plugin.
- * @param {Array} props.plugins - An array of plugin objects to be loaded.
- * @param {React.ReactNode} props.loadingComponent - Component to display while each plugin is loading.
- * @param {Object} props.pluggableComponentProps - Additional props to be passed to each dynamically loaded plugin.
- * @returns {React.ReactNode} The rendered component.
- */
-export const usePlugins = (plugins, pluggableComponentProps, prefix, loadingComponent) => {
+const MultiplePlugins = ({
+  plugins,
+  pluggableComponentProps,
+  prefix,
+  loadingComponent,
+  containerPluginsProps,
+}) => {
   const [pluginComponents, setPluginComponents] = useState({});
   const loadedAllPluginsRef = useRef(null);
 
@@ -89,5 +86,34 @@ export const usePlugins = (plugins, pluggableComponentProps, prefix, loadingComp
     }
   }, [pluggableComponentProps]);
 
-  return pluginComponents;
+  return (
+    <div {...containerPluginsProps}>
+      {Object.entries(pluginComponents).map(([pluginKey, Component]) => (
+        <React.Fragment key={pluginKey}>
+          {Component}
+        </React.Fragment>
+      ))}
+    </div>
+  );
 };
+
+MultiplePlugins.defaultProps = {
+  plugins: [],
+  pluggableComponentProps: {},
+  prefix: '',
+  loadingComponent: null,
+  containerPluginsProps: {},
+};
+
+MultiplePlugins.propTypes = {
+  plugins: PropTypes.arrayOf(PropTypes.shape({
+    name: PropTypes.string.isRequired,
+    id: PropTypes.string.isRequired,
+  })),
+  pluggableComponentProps: PropTypes.shape({}),
+  prefix: PropTypes.string,
+  loadingComponent: PropTypes.node,
+  containerPluginsProps: PropTypes.shape({}),
+};
+
+export default MultiplePlugins;

src/components/PluggableComponent/hooks.test.jsx renamed to src/components/PluggableComponent/MultiplePlugins.test.jsx

@@ -1,72 +1,51 @@
 import React from 'react';
 import { render, waitFor } from '@testing-library/react';
-import { usePlugins } from './hooks';
-
-describe('usePlugins', () => {
-  beforeEach(() => {
-    jest.resetModules();
-    jest.clearAllMocks();
-  });
+import MultiplePlugins from './MultiplePlugins';
 
+describe('MultiplePlugins', () => {
   const mockPlugins = [
     { id: 'plugin1', name: 'Plugin1' },
     { id: 'plugin2', name: 'Plugin2' },
   ];
 
-  /* eslint-disable react/prop-types */
-  const ComponentsContainer = ({
-    plugins = [],
-    pluggableComponentProps = {},
-    prefix = '',
-    loadingComponent,
-  }) => {
-    const pluginComponents = usePlugins(
-      plugins,
-      pluggableComponentProps,
-      prefix,
-      loadingComponent,
-    );
+  beforeEach(() => {
+    jest.resetModules();
+    jest.clearAllMocks();
+  });
 
-    return (
-      <>
-        {Object.entries(pluginComponents).map(([pluginKey, Component]) => (
-          <div key={pluginKey} data-testid={pluginKey}>
-            {Component}
-          </div>
-        ))}
-      </>
+  /* eslint-disable react/prop-types */
+  test('initializes with loading components for each plugin', async () => {
+    const { getAllByText } = render(
+      <MultiplePlugins
+        plugins={mockPlugins}
+        pluggableComponentProps={{}}
+        loadingComponent={<div>Loading...</div>}
+      />,
     );
-  };
-
-  const renderComponent = (overrideProps) => render(<ComponentsContainer {...overrideProps} />);
 
-  test('initializes with loading components for each plugin', async () => {
-    const { getByTestId } = renderComponent({
-      plugins: mockPlugins,
-      pluggableComponentProps: {},
-      loadingComponent: <div>Loading...</div>,
-    });
+    const [pluginLoading1, pluginLoading2] = getAllByText('Loading...');
 
-    expect(getByTestId('plugin1')).toHaveTextContent('Loading...');
-    expect(getByTestId('plugin2')).toHaveTextContent('Loading...');
+    expect(pluginLoading1).toBeInTheDocument();
+    expect(pluginLoading1).toHaveTextContent('Loading...');
+    expect(pluginLoading2).toBeInTheDocument();
+    expect(pluginLoading2).toHaveTextContent('Loading...');
   });
 
   test('loads a plugins list successfully', async () => {
     const mockValidPlugins = [
       { id: 'plugin1', name: 'communications-app-test-component' },
     ];
 
-    const MockPluginComponent = () => <div>Mocked Plugin Component</div>;
+    const MockPluginComponent = () => <div data-testid="plugin1">Mocked Plugin Component</div>;
 
     jest.mock(
       '@node_modules/@openedx-plugins/communications-app-test-component',
       () => MockPluginComponent,
     );
 
-    const { getByTestId } = renderComponent({
-      plugins: mockValidPlugins,
-      pluggableComponentProps: {},
-    });
+    const { getByTestId } = render(
+      <MultiplePlugins plugins={mockValidPlugins} pluggableComponentProps={{}} />,
+    );
 
     await waitFor(() => {
       const pluginComponent = getByTestId('plugin1');
@@ -76,17 +55,19 @@ describe('usePlugins', () => {
   });
 
   test('loads a plugin successfully with prefix', async () => {
-    const MockPluginComponent = () => <div>Mocked Plugin Component</div>;
+    const MockPluginComponent = () => <div data-testid="communications-app-test-component">Mocked Plugin Component</div>;
 
     jest.mock(
       '@node_modules/@openedx-plugins/communications-app-test-component',
       () => MockPluginComponent,
     );
 
-    const { getByTestId } = renderComponent({
-      pluggableComponentProps: {},
-      prefix: 'communications-app-test',
-    });
+    const { getByTestId } = render(
+      <MultiplePlugins
+        pluggableComponentProps={{}}
+        prefix="communications-app-test"
+      />,
+    );
 
     await waitFor(() => {
       const pluginComponent = getByTestId('communications-app-test-component');
@@ -96,23 +77,15 @@ describe('usePlugins', () => {
   });
 
   test('loads a plugin successfully with prefix changing component props', async () => {
-    // eslint-disable-next-line react/prop-types
-    const MockPluginComponent = (props) => {
-      console.log('props', props);
-      return <div data-testid="mock-plugin-props">{props.title}</div>;
-    };
+    const MockPluginComponent = (props) => <div data-testid="mock-plugin-props">{props.title}</div>;
 
     jest.mock(
       '@node_modules/@openedx-plugins/communications-app-test-component',
       () => MockPluginComponent,
     );
 
-    const ComponentsContainerUpdater = (overrideProps) => (
-      <ComponentsContainer {...overrideProps} />
-    );
-
     const { getByTestId, rerender } = render(
-      <ComponentsContainerUpdater
+      <MultiplePlugins
         prefix="communications-app-test"
         pluggableComponentProps={{ title: 'Initial Title' }}
       />,
@@ -126,7 +99,7 @@ describe('usePlugins', () => {
     });
 
     rerender(
-      <ComponentsContainerUpdater
+      <MultiplePlugins
         prefix="communications-app-test"
         pluggableComponentProps={{ title: 'Title updated' }}
       />,

src/components/PluggableComponent/index.jsx

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import useDeepCompareEffect from 'use-deep-compare-effect';
 
 import { isPluginAvailable } from './utils';
-import { usePlugins } from './hooks';
+import MultiplePlugins from './MultiplePlugins';
 
 /**
  * PluggableComponent - A component that allows dynamic loading and replacement of child components.
@@ -37,7 +37,6 @@ const PluggableComponent = ({
   const [newComponent, setNewComponent] = useState(children || null);
   const loadedComponentRef = useRef(null);
   const [isLoadingComponent, setIsLoadingComponent] = useState(false);
-  const pluginComponents = usePlugins(plugins, pluggableComponentProps, pluginsPrefix, loadingComponent);
   const hasConfigForMultiplePlugins = pluginsPrefix || plugins.length;
 
   useEffect(() => {
@@ -93,13 +92,15 @@ const PluggableComponent = ({
 
   if (hasConfigForMultiplePlugins) {
     return (
-      <div {...containerPluginsProps}>
-        {Object.entries(pluginComponents).map(([pluginKey, Component]) => (
-          <React.Fragment key={pluginKey}>
-            {Component}
-          </React.Fragment>
-        ))}
-      </div>
+      <MultiplePlugins
+        prefix={pluginsPrefix}
+        {...{
+          plugins,
+          pluggableComponentProps,
+          loadingComponent,
+          containerPluginsProps,
+        }}
+      />
     );
   }