From d35209928a362b1385dbfd1c44fc6d27025e2318 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adrian=20Or=C5=82=C3=B3w?= <adrian.orlow@fishbrain.com>
Date: Thu, 8 Feb 2024 18:21:47 +0100
Subject: [PATCH] feat: add rfc changes
---
.../LoadPlugin/LoadPlugin.component.tsx | 7 +++++++
.../LoadPlugin/hooks/useLoadPlugin.ts | 11 ++++++++++-
.../PluginHeaderInfo.component.tsx | 7 +++++++
.../LoadPluginButton/index.ts | 1 -
.../LoadPluginElement.component.test.tsx} | 4 ++--
.../LoadPluginElement.component.tsx} | 19 +++++++++++++------
.../LoadPluginElement/index.ts | 1 +
.../PluginOpenButton.component.tsx | 6 +++---
.../PluginsTabs/PluginsTabs.component.tsx | 12 ++++++++----
9 files changed, 51 insertions(+), 17 deletions(-)
delete mode 100644 src/components/Map/PluginsDrawer/PluginsHeader/PluginOpenButton/LoadPluginButton/index.ts
rename src/components/Map/PluginsDrawer/PluginsHeader/PluginOpenButton/{LoadPluginButton/LoadPluginButton.component.test.tsx => LoadPluginElement/LoadPluginElement.component.test.tsx} (95%)
rename src/components/Map/PluginsDrawer/PluginsHeader/PluginOpenButton/{LoadPluginButton/LoadPluginButton.component.tsx => LoadPluginElement/LoadPluginElement.component.tsx} (53%)
create mode 100644 src/components/Map/PluginsDrawer/PluginsHeader/PluginOpenButton/LoadPluginElement/index.ts
diff --git a/src/components/Map/Drawer/AvailablePluginsDrawer/LoadPlugin/LoadPlugin.component.tsx b/src/components/Map/Drawer/AvailablePluginsDrawer/LoadPlugin/LoadPlugin.component.tsx
index f129d79d..72ec131e 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 66399ff0..45434730 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 7c77ecd9..43844ab0 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 2f91e9a4..00000000
--- 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 36a673cb..9f6d9e24 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 24c961ce..cdd827c8 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 00000000..3e908987
--- /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 16c3032b..c61328b4 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 45dd4e59..0ed9089e 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 (
--
GitLab