refactoring PrimaryAndSecondaryPanelWidget -> FullAndShortStatesPanel…

…Widget

src/views/Map/Map.tsx

@@ -6,7 +6,7 @@ import { DrawToolsToolbox } from '~core/draw_tools/components/DrawToolsToolbox/D
 import { featureFlagsAtom, FeatureFlag } from '~core/shared_state';
 import { legendPanel } from '~features/legend_panel';
 import { layersPanel } from '~features/layers_panel';
-import { PrimaryAndSecondaryPanelWidget } from '~widgets/PrimaryAndSecondaryPanel';
+import { FullAndShortStatesPanelWidget } from '~widgets/FullAndShortStatesPanelWidget';
 import { analyticsPanel } from '~features/analytics_panel';
 import { advancedAnalyticsPanel } from '~features/advanced_analytics_panel';
 import s from './Map.module.css';
@@ -101,33 +101,10 @@ export function MapPage() {
       </div>
       {featureFlags && (
         <Layout
-          analytics={
-            <PrimaryAndSecondaryPanelWidget
-              primaryProps={
-                featureFlags[FeatureFlag.ADVANCED_ANALYTICS_PANEL]
-                  ? advancedAnalyticsPanel
-                  : null
-              }
-              secondaryProps={
-                featureFlags[FeatureFlag.ANALYTICS_PANEL] ? analyticsPanel : null
-              }
-              initialState={featureFlags[FeatureFlag.ANALYTICS_PANEL] ? 'short' : null}
-              key="analytics"
-              id="analytics"
-            />
-          }
+          analytics={<Analytics featureFlags={featureFlags} />}
           // if EVENTS_LIST is enabled, we always have default feed
           disasters={featureFlags[FeatureFlag.EVENTS_LIST] && <EventListPanel />}
-          layersAndLegends={
-            <PrimaryAndSecondaryPanelWidget
-              primaryProps={
-                featureFlags[FeatureFlag.MAP_LAYERS_PANEL] ? layersPanel : null
-              }
-              secondaryProps={featureFlags[FeatureFlag.LEGEND_PANEL] ? legendPanel : null}
-              key="layers_and_legends"
-              id="layers_and_legends"
-            />
-          }
+          layersAndLegends={<LayersAndLegends featureFlags={featureFlags} />}
           matrix={featureFlags[FeatureFlag.BIVARIATE_MANAGER] && <BivariatePanel />}
           timeline={featureFlags[FeatureFlag.EPISODES_TIMELINE] && <EventEpisodes />}
           toolbar={<Toolbar />}
@@ -145,3 +122,38 @@ export function MapPage() {
     </div>
   );
 }
+
+const Analytics = ({ featureFlags }: { featureFlags: Record<string, boolean> }) => {
+  const [fullState, shortState] = [
+    featureFlags[FeatureFlag.ADVANCED_ANALYTICS_PANEL] ? advancedAnalyticsPanel : null,
+    featureFlags[FeatureFlag.ANALYTICS_PANEL] ? analyticsPanel : null,
+  ];
+  return (
+    <FullAndShortStatesPanelWidget
+      fullState={fullState}
+      shortState={shortState}
+      initialState={featureFlags[FeatureFlag.ANALYTICS_PANEL] ? 'short' : null}
+      key="analytics"
+      id="analytics"
+    />
+  );
+};
+
+const LayersAndLegends = ({
+  featureFlags,
+}: {
+  featureFlags: Record<string, boolean>;
+}) => {
+  const [fullState, shortState] = [
+    featureFlags[FeatureFlag.MAP_LAYERS_PANEL] ? layersPanel : null,
+    featureFlags[FeatureFlag.LEGEND_PANEL] ? legendPanel : null,
+  ];
+  return (
+    <FullAndShortStatesPanelWidget
+      fullState={fullState}
+      shortState={shortState}
+      key="layers_and_legends"
+      id="layers_and_legends"
+    />
+  );
+};

src/widgets/PrimaryAndSecondaryPanel/components/PrimaryAndSecondaryPanelWidget.tsx → src/widgets/FullAndShortStatesPanelWidget/components/FullAndShortStatesPanelWidget.tsx

@@ -6,39 +6,39 @@ import { IS_MOBILE_QUERY, useMediaQuery } from '~utils/hooks/useMediaQuery';
 import { useHeightResizer } from '~utils/hooks/useResizer';
 import { useShortPanelState } from '~utils/hooks/useShortPanelState';
 import { useAutoCollapsePanel } from '~utils/hooks/useAutoCollapsePanel';
-import s from './PrimaryAndSecondaryPanel.module.css';
+import s from './FullAndShortStatesPanelWidget.module.css';
 import type { PanelState } from '~utils/hooks/useShortPanelState';
 import type { PanelFeatureInterface } from 'types/featuresTypes';
 
 type PanelProps = {
-  primaryProps?: PanelFeatureInterface | null;
-  secondaryProps?: PanelFeatureInterface | null;
+  fullState?: PanelFeatureInterface | null;
+  shortState?: PanelFeatureInterface | null;
   id?: string;
   initialState?: PanelState | null;
 };
 
-export function PrimaryAndSecondaryPanelWidget({
-  primaryProps,
-  secondaryProps,
+export function FullAndShortStatesPanelWidget({
+  fullState,
+  shortState,
   id,
   initialState,
 }: PanelProps) {
   const { panelState, panelControls, setPanelState } = useShortPanelState({
     initialState,
-    skipShortState: Boolean(!primaryProps || !secondaryProps),
+    skipShortState: Boolean(!fullState || !shortState),
   });
 
   const isOpen = panelState !== 'closed';
   const isShort = panelState === 'short';
   const isMobile = useMediaQuery(IS_MOBILE_QUERY);
   const getProperty = useCallback(
     function <K extends keyof PanelFeatureInterface>(property: K) {
-      return isShort ? secondaryProps?.[property] : primaryProps?.[property];
+      return isShort ? shortState?.[property] : fullState?.[property];
     },
-    [isShort, primaryProps, secondaryProps],
+    [isShort, fullState, shortState],
   );
 
-  const minHeight = getProperty('minHeight') || secondaryProps?.minHeight || 0;
+  const minHeight = getProperty('minHeight') || shortState?.minHeight || 0;
   const maxHeight = getProperty('maxHeight');
   const contentHeight = getProperty('contentheight');
   const resize = isMobile ? 'none' : getProperty('resize');
@@ -48,7 +48,7 @@ export function PrimaryAndSecondaryPanelWidget({
     isOpen,
     minHeight,
     id || 'primary_and_secondary',
-    isShort ? secondaryProps?.skipAutoResize : primaryProps?.skipAutoResize,
+    isShort ? shortState?.skipAutoResize : fullState?.skipAutoResize,
   );
 
   const onPanelIconClick = useCallback(() => {
@@ -61,14 +61,14 @@ export function PrimaryAndSecondaryPanelWidget({
 
   useAutoCollapsePanel(isOpen, onPanelClose);
 
-  if (!primaryProps && !secondaryProps) return null;
+  if (!fullState && !shortState) return null;
 
-  const header = !primaryProps ? secondaryProps?.header : primaryProps.header;
-  const panelIcon = !primaryProps ? secondaryProps?.panelIcon : primaryProps.panelIcon;
+  const header = !fullState ? shortState?.header : fullState.header;
+  const panelIcon = !fullState ? shortState?.panelIcon : fullState.panelIcon;
 
   const panelContent = {
-    full: primaryProps?.content || secondaryProps?.content,
-    short: secondaryProps?.content,
+    full: fullState?.content || shortState?.content,
+    short: shortState?.content,
     closed: <></>,
   };
 

src/widgets/FullAndShortStatesPanelWidget/index.tsx

@@ -0,0 +1 @@
+export { FullAndShortStatesPanelWidget } from './components/FullAndShortStatesPanelWidget';