From 4f8bc22934c9a8e9d8cbd2cc6f246e048e347cda Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adrian=20Or=C5=82=C3=B3w?= <adrian.orlow@fishbrain.com>
Date: Tue, 16 Apr 2024 16:43:31 +0200
Subject: [PATCH] feat: rfc fixes
---
.../GroupedOverlayAxes/GroupedOverlayAxes.components.tsx | 4 +++-
.../BioEntityDrawer/OverlayData/OverlayData.component.tsx | 4 +++-
2 files changed, 6 insertions(+), 2 deletions(-)
diff --git a/src/components/Map/Drawer/BioEntityDrawer/OverlayData/GroupedOverlayAxes/GroupedOverlayAxes.components.tsx b/src/components/Map/Drawer/BioEntityDrawer/OverlayData/GroupedOverlayAxes/GroupedOverlayAxes.components.tsx
index c21e1dfa..de4e9208 100644
--- a/src/components/Map/Drawer/BioEntityDrawer/OverlayData/GroupedOverlayAxes/GroupedOverlayAxes.components.tsx
+++ b/src/components/Map/Drawer/BioEntityDrawer/OverlayData/GroupedOverlayAxes/GroupedOverlayAxes.components.tsx
@@ -1,5 +1,6 @@
import { SIZE_OF_EMPTY_ARRAY } from '@/constants/common';
import { MapOverlay } from '@/types/models';
+import { useMemo } from 'react';
import { OverlayAxis } from '../OverlayAxis';
import { OverlayDataAxis } from '../OverlayData.types';
import { getAxesSortedByValue } from '../utils/getAxesSortedByValue';
@@ -12,6 +13,7 @@ interface Props {
export const GroupedOverlayAxes = ({ overlay, axes }: Props): JSX.Element | null => {
const { idObject, name } = overlay;
const overlayAxes = axes.filter(axis => axis.overlayId === idObject);
+ const sortedAxes = useMemo(() => getAxesSortedByValue(overlayAxes), [overlayAxes]);
if (overlayAxes.length === SIZE_OF_EMPTY_ARRAY) {
return null;
@@ -23,7 +25,7 @@ export const GroupedOverlayAxes = ({ overlay, axes }: Props): JSX.Element | null
{name}
</div>
<div className="my-1 h-[1px] w-full bg-divide" />
- {getAxesSortedByValue(overlayAxes).map(axis => (
+ {sortedAxes.map(axis => (
<OverlayAxis key={axis.title} axis={axis} />
))}
</div>
diff --git a/src/components/Map/Drawer/BioEntityDrawer/OverlayData/OverlayData.component.tsx b/src/components/Map/Drawer/BioEntityDrawer/OverlayData/OverlayData.component.tsx
index 6ee13184..bc52903a 100644
--- a/src/components/Map/Drawer/BioEntityDrawer/OverlayData/OverlayData.component.tsx
+++ b/src/components/Map/Drawer/BioEntityDrawer/OverlayData/OverlayData.component.tsx
@@ -1,5 +1,6 @@
import { ZERO } from '@/constants/common';
import { overlaysOpenedSelector } from '@/redux/overlayBioEntity/overlayBioEntity.selector';
+import { useMemo } from 'react';
import { useSelector } from 'react-redux';
import { GroupedOverlayAxes } from './GroupedOverlayAxes';
import { OverlayAxis } from './OverlayAxis';
@@ -19,6 +20,7 @@ export const OverlayData = ({
const axes = useOverlaysAxes({ isShowOverlayBioEntityName });
const uniqueAxes = getUniqueAxes(axes);
const openedOverlays = useSelector(overlaysOpenedSelector);
+ const sortedAxes = useMemo(() => getAxesSortedByValue(uniqueAxes), [uniqueAxes]);
if (uniqueAxes.length === ZERO) {
return null;
@@ -26,7 +28,7 @@ export const OverlayData = ({
const overlaysAxesContent = (
<div className="flex flex-col gap-2 rounded-lg border border-divide p-4">
- {getAxesSortedByValue(uniqueAxes).map(axis => (
+ {sortedAxes.map(axis => (
<OverlayAxis key={axis.title} axis={axis} />
))}
</div>
--
GitLab