refactor(plugins): refactor plugins manager

index.d.ts

@@ -10,19 +10,20 @@ type RegisterPlugin = ({ pluginName, pluginVersion, pluginUrl }: Plugin) => {
   element: HTMLDivElement;
 };
 
+type HashPlugin = {
+  pluginUrl: string;
+  pluginScript: string;
+};
+
+type SetHashedPlugin = ({ pluginUrl, pluginScript }: HashPlugin) => void;
+
 declare global {
   interface Window {
     minerva: {
       configuration?: MinervaConfiguration;
       plugins: {
         registerPlugin: RegisterPlugin;
-        setHashedPlugin({
-          pluginUrl,
-          pluginScript,
-        }: {
-          pluginUrl: string;
-          pluginScript: string;
-        }): void;
+        setHashedPlugin: SetHashedPlugin;
       };
     };
   }

pages/_app.tsx

@@ -7,4 +7,5 @@ const MyApp = ({ Component, pageProps }: AppProps): JSX.Element => (
     <Component {...pageProps} />
   </AppWrapper>
 );
+
 export default MyApp;

src/components/FunctionalArea/MapNavigation/MapNavigation.component.tsx

@@ -51,6 +51,7 @@ export const MapNavigation = (): JSX.Element => {
           )}
         </Button>
       ))}
+      {/* TODO: REMOVE WHEN PLUGIN DRAWER IS IMPLEMENTED */}
       <div className="fixed bottom-0 right-0 top-[104px] w-96 bg-white">
         <div id="plugins" />
       </div>

src/components/Map/Drawer/PluginDrawer/LoadPluginInput/LoadPluginInput.component.tsx

+import { Button } from '@/shared/Button';
+import { Input } from '@/shared/Input';
+import { useLoadPlugin } from './hooks/useLoadPlugin';
+
+export const LoadPluginInput = (): React.ReactNode => {
+  const { handleChangePluginUrl, handleLoadPlugin, isPending, pluginUrl } = useLoadPlugin();
+
+  return (
+    <label>
+      URL:
+      <div className="relative mt-2.5">
+        <Input
+          className="h-10 rounded-r-md pr-[70px]"
+          value={pluginUrl}
+          onChange={handleChangePluginUrl}
+        />
+        <Button
+          className="absolute inset-y-0 right-0 w-[60px] justify-center text-xs font-medium text-primary-500 ring-primary-500 hover:ring-primary-500 disabled:text-primary-500 disabled:ring-primary-500"
+          variantStyles="ghost"
+          onClick={handleLoadPlugin}
+          disabled={isPending}
+        >
+          Load
+        </Button>
+      </div>
+    </label>
+  );
+};

src/components/Map/Drawer/PluginDrawer/LoadPluginInput/hooks/useLoadPlugin.ts

+import { PluginsManager } from '@/services/pluginsManager';
+import axios from 'axios';
+import { ChangeEvent, useState } from 'react';
+
+type UseLoadPluginReturnType = {
+  handleChangePluginUrl: (event: ChangeEvent<HTMLInputElement>) => void;
+  handleLoadPlugin: () => Promise<void>;
+  isPending: boolean;
+  pluginUrl: string;
+};
+
+export const useLoadPlugin = (): UseLoadPluginReturnType => {
+  const [pluginUrl, setPluginUrl] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const isPending = isLoading || !pluginUrl;
+
+  const handleLoadPlugin = async (): Promise<void> => {
+    try {
+      setIsLoading(true);
+      const response = await axios(pluginUrl);
+      const pluginScript = response.data;
+
+      /* eslint-disable no-new-func */
+      const loadPlugin = new Function(pluginScript);
+
+      PluginsManager.setHashedPlugin({
+        pluginUrl,
+        pluginScript,
+      });
+
+      loadPlugin();
+      setPluginUrl('');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  const handleChangePluginUrl = (event: ChangeEvent<HTMLInputElement>): void => {
+    setPluginUrl(event.target.value);
+  };
+
+  return {
+    handleChangePluginUrl,
+    handleLoadPlugin,
+    isPending,
+    pluginUrl,
+  };
+};

src/components/Map/Drawer/PluginDrawer/LoadPluginInput/index.ts

+export { LoadPluginInput } from './LoadPluginInput.component';

src/components/Map/Drawer/PluginDrawer/PluginsDrawer.component.tsx

-import { Button } from '@/shared/Button';
 import { DrawerHeading } from '@/shared/DrawerHeading';
-import { Input } from '@/shared/Input';
-import axios from 'axios';
-import React, { ChangeEvent, useState } from 'react';
-import { useAppSelector } from '@/redux/hooks/useAppSelector';
-import { activePluginsSelector } from '@/redux/plugins/plugins.selector';
-import { useAppDispatch } from '@/redux/hooks/useAppDispatch';
-import { removePlugin } from '@/redux/plugins/plugins.slice';
-
-export const PluginsDrawer = (): React.ReactNode => {
-  const [pluginUrl, setPluginUrl] = useState('');
-  const [isLoading, setIsLoading] = useState(false);
-  const activePlugins = useAppSelector(activePluginsSelector);
-  const dispatch = useAppDispatch();
-
-  const handleLoadPlugin = async (): Promise<void> => {
-    try {
-      setIsLoading(true);
-      const res = await axios(pluginUrl);
-      const pluginScript = res.data;
-      /* eslint-disable no-new-func */
-      const loadPlugin = new Function(pluginScript);
-      window.minerva.plugins.setHashedPlugin({
-        pluginUrl,
-        pluginScript,
-      });
-      loadPlugin();
-      setPluginUrl('');
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  const handleUnloadPlugin = (pluginId: string): void => {
-    dispatch(removePlugin({ pluginId }));
-  };
-
-  const handleChangePluginUrl = (event: ChangeEvent<HTMLInputElement>): void => {
-    setPluginUrl(event.target.value);
-  };
-
-  return (
-    <div data-testid="available-plugins-drawer" className="h-full max-h-full">
-      <DrawerHeading title="Available plugins" />
-      <div className="h-[calc(100%-93px)] max-h-[calc(100%-93px)] overflow-y-auto p-6">
-        <label>
-          URL:
-          <div className="relative mt-2.5">
-            <Input
-              className="h-10 rounded-r-md pr-[70px]"
-              value={pluginUrl}
-              onChange={handleChangePluginUrl}
-            />
-            <Button
-              className="absolute inset-y-0 right-0 w-[60px] justify-center text-xs font-medium text-primary-500 ring-primary-500 hover:ring-primary-500 disabled:text-primary-500 disabled:ring-primary-500"
-              variantStyles="ghost"
-              onClick={handleLoadPlugin}
-              disabled={isLoading || !pluginUrl}
-            >
-              Load
-            </Button>
-          </div>
-        </label>
-        <ul className="mt-8 flex w-full flex-col gap-y-8">
-          {activePlugins.map(plugin => (
-            <li key={plugin.hash} className="flex w-full items-center justify-between">
-              <span className="text-sm">
-                {plugin.name} ({plugin.version})
-              </span>
-              <Button
-                variantStyles="ghost"
-                onClick={() => handleUnloadPlugin(plugin.hash)}
-                className="h-10 w-[60px] justify-center text-xs font-medium text-primary-500 ring-primary-500 hover:ring-primary-500"
-              >
-                Unload
-              </Button>
-            </li>
-          ))}
-        </ul>
-      </div>
+import React from 'react';
+import { LoadPluginInput } from './LoadPluginInput';
+import { PluginsList } from './PluginsList';
+
+export const PluginsDrawer = (): React.ReactNode => (
+  <div data-testid="available-plugins-drawer" className="h-full max-h-full">
+    <DrawerHeading title="Available plugins" />
+    <div className="h-[calc(100%-93px)] max-h-[calc(100%-93px)] overflow-y-auto p-6">
+      <LoadPluginInput />
+      <PluginsList />
     </div>
-  );
-};
+  </div>
+);

src/components/Map/Drawer/PluginDrawer/PluginsList/PluginsList.component.tsx

+import { useAppDispatch } from '@/redux/hooks/useAppDispatch';
+import { useAppSelector } from '@/redux/hooks/useAppSelector';
+import { activePluginsSelector } from '@/redux/plugins/plugins.selector';
+import { removePlugin } from '@/redux/plugins/plugins.slice';
+import { Button } from '@/shared/Button';
+
+export const PluginsList = (): React.ReactNode => {
+  const activePlugins = useAppSelector(activePluginsSelector);
+  const dispatch = useAppDispatch();
+
+  const handleUnloadPlugin = (pluginId: string): void => {
+    dispatch(removePlugin({ pluginId }));
+  };
+
+  return (
+    <ul className="mt-8 flex w-full flex-col gap-y-8">
+      {activePlugins.map(plugin => (
+        <li key={plugin.hash} className="flex w-full items-center justify-between">
+          <span className="text-sm">
+            {plugin.name} ({plugin.version})
+          </span>
+          <Button
+            variantStyles="ghost"
+            onClick={() => handleUnloadPlugin(plugin.hash)}
+            className="h-10 w-[60px] justify-center text-xs font-medium text-primary-500 ring-primary-500 hover:ring-primary-500"
+          >
+            Unload
+          </Button>
+        </li>
+      ))}
+    </ul>
+  );
+};

src/components/Map/Drawer/PluginDrawer/PluginsList/index.ts

+export { PluginsList } from './PluginsList.component';

src/redux/plugins/plugins.thunk.ts

-/* eslint-disable no-await-in-loop */
 /* eslint-disable no-magic-numbers */
 import axios from 'axios';
 import { createAsyncThunk } from '@reduxjs/toolkit';
@@ -56,7 +55,7 @@ type GetInitPluginsProps = { pluginsId: string[] };
 export const getInitPlugins = createAsyncThunk<void, GetInitPluginsProps>(
   'plugins/getInitPlugins',
   async ({ pluginsId }): Promise<void> => {
-    /* eslint-disable no-restricted-syntax */
+    /* eslint-disable no-restricted-syntax, no-await-in-loop */
     for (const pluginId of pluginsId) {
       const res = await axiosInstance<Plugin>(apiPath.getPlugin(pluginId));
 
@@ -67,6 +66,7 @@ export const getInitPlugins = createAsyncThunk<void, GetInitPluginsProps>(
         const scriptRes = await axios(urls[0]);
         const pluginScript = scriptRes.data;
         window.minerva.plugins.setHashedPlugin({ pluginUrl: urls[0], pluginScript });
+
         /* eslint-disable no-new-func */
         const loadPlugin = new Function(pluginScript);
         loadPlugin();

src/services/pluginsManager/pluginsManager.ts

@@ -48,6 +48,7 @@ export const PluginsManager: PluginsManagerType = {
       }),
     );
 
+    // TODO: replace when plugins drawer is implemented
     const element = document.createElement('div');
     const wrapper = document.querySelector('#plugins');
     wrapper?.append(element);

src/utils/query-manager/useReduxBusQueryManager.ts

@@ -10,8 +10,9 @@ export const useReduxBusQueryManager = (): void => {
   const isDataLoaded = useSelector(initDataAndMapLoadingFinished);
 
   const handleChangeQuery = useCallback(
-    () => {
-      return router.replace(
+    () =>
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      router.replace(
         {
           query: {
             ...queryData,
@@ -21,10 +22,7 @@ export const useReduxBusQueryManager = (): void => {
         {
           shallow: true,
         },
-      );
-    },
-    // router is not an stable reference
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+      ),
     [queryData],
   );