diff --git a/src/components/Map/Drawer/AvailablePluginsDrawer/LoadPlugin/LoadPlugin.component.tsx b/src/components/Map/Drawer/AvailablePluginsDrawer/LoadPlugin/LoadPlugin.component.tsx index f129d79d0797827601fbff4068bec1b27e5fca2e..72ec131e851a51671c7f8b9934948613937421fb 100644 --- a/src/components/Map/Drawer/AvailablePluginsDrawer/LoadPlugin/LoadPlugin.component.tsx +++ b/src/components/Map/Drawer/AvailablePluginsDrawer/LoadPlugin/LoadPlugin.component.tsx @@ -1,4 +1,6 @@ /* eslint-disable no-magic-numbers */ +import { useAppDispatch } from '@/redux/hooks/useAppDispatch'; +import { setCurrentDrawerPluginHash } from '@/redux/plugins/plugins.slice'; import { Button } from '@/shared/Button'; import { MinervaPlugin } from '@/types/models'; import { useLoadPlugin } from './hooks/useLoadPlugin'; @@ -8,9 +10,14 @@ export interface Props { } export const LoadPlugin = ({ plugin }: Props): JSX.Element => { + const dispatch = useAppDispatch(); + const { isPluginActive, togglePlugin, isPluginLoading } = useLoadPlugin({ hash: plugin.hash, pluginUrl: plugin.urls[0], + onPluginLoaded: () => { + dispatch(setCurrentDrawerPluginHash(plugin.hash)); + }, }); return ( diff --git a/src/components/Map/Drawer/AvailablePluginsDrawer/LoadPlugin/hooks/useLoadPlugin.ts b/src/components/Map/Drawer/AvailablePluginsDrawer/LoadPlugin/hooks/useLoadPlugin.ts index 66399ff02cb7ee9dbb35f3861883a15c4a545e70..454347303ae79a4683debd742c0108152eef805b 100644 --- a/src/components/Map/Drawer/AvailablePluginsDrawer/LoadPlugin/hooks/useLoadPlugin.ts +++ b/src/components/Map/Drawer/AvailablePluginsDrawer/LoadPlugin/hooks/useLoadPlugin.ts @@ -22,9 +22,14 @@ type UseLoadPluginReturnType = { type UseLoadPluginProps = { hash: string; pluginUrl: string; + onPluginLoaded?(): void; }; -export const useLoadPlugin = ({ hash, pluginUrl }: UseLoadPluginProps): UseLoadPluginReturnType => { +export const useLoadPlugin = ({ + hash, + pluginUrl, + onPluginLoaded, +}: UseLoadPluginProps): UseLoadPluginReturnType => { const isPluginActive = useAppSelector(state => isPluginActiveSelector(state, hash)); const isPluginLoading = useAppSelector(state => isPluginLoadingSelector(state, hash)); const isPluginSelected = useAppSelector(state => isPluginSelectedSelector(state, hash)); @@ -44,6 +49,10 @@ export const useLoadPlugin = ({ hash, pluginUrl }: UseLoadPluginProps): UseLoadP }); loadPlugin(); + + if (onPluginLoaded) { + onPluginLoaded(); + } }; const handleUnloadPlugin = (): void => { diff --git a/src/components/Map/PluginsDrawer/PluginsHeader/PluginHeaderInfo/PluginHeaderInfo.component.tsx b/src/components/Map/PluginsDrawer/PluginsHeader/PluginHeaderInfo/PluginHeaderInfo.component.tsx index 7c77ecd9ff4084b2ae8f5795667b11c4ca6b8fd8..43844ab06cec1fd88be84d6672985ff625b5bc31 100644 --- a/src/components/Map/PluginsDrawer/PluginsHeader/PluginHeaderInfo/PluginHeaderInfo.component.tsx +++ b/src/components/Map/PluginsDrawer/PluginsHeader/PluginHeaderInfo/PluginHeaderInfo.component.tsx @@ -1,5 +1,7 @@ import { useLoadPlugin } from '@/components/Map/Drawer/AvailablePluginsDrawer/LoadPlugin/hooks/useLoadPlugin'; import { FIRST_ARRAY_ELEMENT } from '@/constants/common'; +import { useAppDispatch } from '@/redux/hooks/useAppDispatch'; +import { setCurrentDrawerPluginHash } from '@/redux/plugins/plugins.slice'; import { Icon } from '@/shared/Icon'; import { MinervaPlugin } from '@/types/models'; import { RELOAD_PLUGIN_DRAWER_BUTTON_ROLE } from './PluginHeaderInfo.constants'; @@ -9,9 +11,14 @@ interface Props { } export const PluginHeaderInfo = ({ plugin }: Props): JSX.Element => { + const dispatch = useAppDispatch(); + const { reloadPlugin } = useLoadPlugin({ hash: plugin.hash, pluginUrl: plugin.urls[FIRST_ARRAY_ELEMENT], + onPluginLoaded: () => { + dispatch(setCurrentDrawerPluginHash(plugin.hash)); + }, }); return ( diff --git a/src/components/Map/PluginsDrawer/PluginsHeader/PluginOpenButton/LoadPluginButton/index.ts b/src/components/Map/PluginsDrawer/PluginsHeader/PluginOpenButton/LoadPluginButton/index.ts deleted file mode 100644 index 2f91e9a41dc2429578fa1aac85093526e8b607c1..0000000000000000000000000000000000000000 --- a/src/components/Map/PluginsDrawer/PluginsHeader/PluginOpenButton/LoadPluginButton/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { LoadPluginButton } from './LoadPluginButton.component'; diff --git a/src/components/Map/PluginsDrawer/PluginsHeader/PluginOpenButton/LoadPluginButton/LoadPluginButton.component.test.tsx b/src/components/Map/PluginsDrawer/PluginsHeader/PluginOpenButton/LoadPluginElement/LoadPluginElement.component.test.tsx similarity index 95% rename from src/components/Map/PluginsDrawer/PluginsHeader/PluginOpenButton/LoadPluginButton/LoadPluginButton.component.test.tsx rename to src/components/Map/PluginsDrawer/PluginsHeader/PluginOpenButton/LoadPluginElement/LoadPluginElement.component.test.tsx index 36a673cba4a155b09184b5f2e77927750c57a1d4..9f6d9e24759913f389b5e83d78f77f2c1e241327 100644 --- a/src/components/Map/PluginsDrawer/PluginsHeader/PluginOpenButton/LoadPluginButton/LoadPluginButton.component.test.tsx +++ b/src/components/Map/PluginsDrawer/PluginsHeader/PluginOpenButton/LoadPluginElement/LoadPluginElement.component.test.tsx @@ -15,7 +15,7 @@ import { render, screen, waitFor } from '@testing-library/react'; import axios, { HttpStatusCode } from 'axios'; import MockAdapter from 'axios-mock-adapter'; import { MockStoreEnhanced } from 'redux-mock-store'; -import { LoadPluginButton } from './LoadPluginButton.component'; +import { LoadPluginElement } from './LoadPluginElement.component'; const mockedAxiosClient = new MockAdapter(axios); @@ -27,7 +27,7 @@ const renderComponent = ( return ( render( <Wrapper> - <LoadPluginButton plugin={plugin} /> + <LoadPluginElement plugin={plugin} /> </Wrapper>, ), { diff --git a/src/components/Map/PluginsDrawer/PluginsHeader/PluginOpenButton/LoadPluginButton/LoadPluginButton.component.tsx b/src/components/Map/PluginsDrawer/PluginsHeader/PluginOpenButton/LoadPluginElement/LoadPluginElement.component.tsx similarity index 53% rename from src/components/Map/PluginsDrawer/PluginsHeader/PluginOpenButton/LoadPluginButton/LoadPluginButton.component.tsx rename to src/components/Map/PluginsDrawer/PluginsHeader/PluginOpenButton/LoadPluginElement/LoadPluginElement.component.tsx index 24c961ce480dad4c2ef4f72e888ce563f24f73c0..cdd827c84de9d89450bda307781fcecc2d2c81b4 100644 --- a/src/components/Map/PluginsDrawer/PluginsHeader/PluginOpenButton/LoadPluginButton/LoadPluginButton.component.tsx +++ b/src/components/Map/PluginsDrawer/PluginsHeader/PluginOpenButton/LoadPluginElement/LoadPluginElement.component.tsx @@ -1,28 +1,35 @@ /* eslint-disable jsx-a11y/no-static-element-interactions */ /* eslint-disable jsx-a11y/click-events-have-key-events */ +/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */ import { useLoadPlugin } from '@/components/Map/Drawer/AvailablePluginsDrawer/LoadPlugin/hooks/useLoadPlugin'; import { FIRST_ARRAY_ELEMENT } from '@/constants/common'; +import { useAppDispatch } from '@/redux/hooks/useAppDispatch'; +import { setCurrentDrawerPluginHash } from '@/redux/plugins/plugins.slice'; import { MinervaPlugin } from '@/types/models'; interface LoadPluginButtonProps { plugin: MinervaPlugin; } -export const LoadPluginButton = ({ plugin }: LoadPluginButtonProps): JSX.Element => { - const { hash, name } = plugin; +export const LoadPluginElement = ({ plugin }: LoadPluginButtonProps): JSX.Element => { + const { hash, name, urls } = plugin; + const dispatch = useAppDispatch(); const { loadPlugin } = useLoadPlugin({ - hash: plugin.hash, - pluginUrl: plugin.urls[FIRST_ARRAY_ELEMENT], + hash, + pluginUrl: urls[FIRST_ARRAY_ELEMENT], + onPluginLoaded: () => { + dispatch(setCurrentDrawerPluginHash(hash)); + }, }); return ( - <div + <li key={hash} className="flex cursor-pointer flex-col border-t px-4 py-2 shadow-sm" onClick={loadPlugin} > {name} - </div> + </li> ); }; diff --git a/src/components/Map/PluginsDrawer/PluginsHeader/PluginOpenButton/LoadPluginElement/index.ts b/src/components/Map/PluginsDrawer/PluginsHeader/PluginOpenButton/LoadPluginElement/index.ts new file mode 100644 index 0000000000000000000000000000000000000000..3e90898777837db2bbfeaba99c3965b7e148a57e --- /dev/null +++ b/src/components/Map/PluginsDrawer/PluginsHeader/PluginOpenButton/LoadPluginElement/index.ts @@ -0,0 +1 @@ +export { LoadPluginElement } from './LoadPluginElement.component'; diff --git a/src/components/Map/PluginsDrawer/PluginsHeader/PluginOpenButton/PluginOpenButton.component.tsx b/src/components/Map/PluginsDrawer/PluginsHeader/PluginOpenButton/PluginOpenButton.component.tsx index 16c3032b5c3454dd6be276ac5510c5cd176741e6..c61328b48f69b4cda7c5dc9e71e5f6ff912de6ee 100644 --- a/src/components/Map/PluginsDrawer/PluginsHeader/PluginOpenButton/PluginOpenButton.component.tsx +++ b/src/components/Map/PluginsDrawer/PluginsHeader/PluginOpenButton/PluginOpenButton.component.tsx @@ -4,7 +4,7 @@ import { Button } from '@/shared/Button'; import { MinervaPlugin } from '@/types/models'; import { useSelect } from 'downshift'; import { useSelector } from 'react-redux'; -import { LoadPluginButton } from './LoadPluginButton'; +import { LoadPluginElement } from './LoadPluginElement'; export const PluginOpenButton = (): JSX.Element | null => { const publicPlugins = useSelector(publicPluginsListWithoutActiveSelector); @@ -21,13 +21,13 @@ export const PluginOpenButton = (): JSX.Element | null => { Open new plugin </Button> <ul - className={`absolute left-[-50%] z-10 max-h-80 w-48 translate-x-1/4 overflow-x-hidden overflow-y-scroll rounded-sm border bg-white p-0 ps-0 ${ + className={`absolute -left-1/2 z-10 max-h-80 w-48 translate-x-1/4 overflow-x-hidden overflow-y-scroll rounded-sm border bg-white p-0 ps-0 ${ !isOpen && 'hidden' }`} {...getMenuProps()} > {publicPlugins.map((plugin: MinervaPlugin) => ( - <LoadPluginButton key={plugin.hash} plugin={plugin} /> + <LoadPluginElement key={plugin.hash} plugin={plugin} /> ))} </ul> </> diff --git a/src/components/Map/PluginsDrawer/PluginsTabs/PluginsTabs.component.tsx b/src/components/Map/PluginsDrawer/PluginsTabs/PluginsTabs.component.tsx index 45dd4e5936296bab34f25aaa2e241e98941b0ba0..0ed9089edcc613b1d414a56887cde5e68ad2acbe 100644 --- a/src/components/Map/PluginsDrawer/PluginsTabs/PluginsTabs.component.tsx +++ b/src/components/Map/PluginsDrawer/PluginsTabs/PluginsTabs.component.tsx @@ -2,6 +2,7 @@ import { ZERO } from '@/constants/common'; import { useAppSelector } from '@/redux/hooks/useAppSelector'; import { allActivePluginsSelector } from '@/redux/plugins/plugins.selectors'; +import { useMemo } from 'react'; import { PluginSingleTab } from './PluginSingleTab'; export const PluginsTabs = (): JSX.Element => { @@ -12,10 +13,13 @@ export const PluginsTabs = (): JSX.Element => { <PluginSingleTab plugin={plugin} key={plugin.hash} /> )); - const pluginsEmptyInfo = ( - <div className="flex h-10 items-center px-4 text-[#979797]"> - You don't have any opened plugin yet - </div> + const pluginsEmptyInfo = useMemo( + () => ( + <div className="flex h-10 items-center px-4 text-[#979797]"> + You don't have any opened plugin yet + </div> + ), + [], ); return (