Determine panel on states in controls component

Instead of determining in the sidebar and passing down as props.
nextstrain · Oct 19, 2023 · 1880083 · 1880083
1 parent 640fa4f
commit 1880083
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 14 deletions.
diff --git a/src/components/controls/controls.tsx b/src/components/controls/controls.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+import { useSelector } from "react-redux";
 import { useTranslation } from 'react-i18next';
 
 import ColorBy, {ColorByInfo} from "./color-by";
@@ -25,18 +26,22 @@ import {TreeOptionsInfo, MapOptionsInfo, AnimationOptionsInfo, PanelOptionsInfo,
   ExplodeTreeInfo, FrequencyInfo, MeasurementsOptionsInfo} from "./miscInfoText";
 import { AnnotatedHeader } from "./annotatedHeader";
 import MeasurementsOptions from "./measurementsOptions";
+import { RootState } from "../../store";
 
 type Props = {
-  treeOn: boolean
-  mapOn: boolean
-  frequenciesOn: boolean
-  measurementsOn: boolean
   mobileDisplay: boolean
 }
 
-function Controls({ treeOn, mapOn, frequenciesOn, measurementsOn, mobileDisplay }: Props) {
+function Controls({ mobileDisplay }: Props) {
   const { t } = useTranslation();
 
+  const panelsToDisplay = useSelector((state: RootState) => state.controls.panelsToDisplay);
+
+  const treeOn = panelsToDisplay.includes("tree");
+  const mapOn = panelsToDisplay.includes("map");
+  const frequenciesOn = panelsToDisplay.includes("frequencies");
+  const measurementsOn = panelsToDisplay.includes("measurements");
+
   return (
     <ControlsContainer>
       <ChooseDataset />

diff --git a/src/components/main/index.js b/src/components/main/index.js
@@ -156,7 +156,6 @@ class Main extends React.Component {
           width={sidebarWidth}
           height={availableHeight}
           displayNarrative={this.props.displayNarrative}
-          panelsToDisplay={this.props.panelsToDisplay}
           narrativeTitle={this.props.narrativeTitle}
           mobileDisplay={this.state.mobileDisplay}
           navBarHandler={this.toggleSidebar}

diff --git a/src/components/main/sidebar.js b/src/components/main/sidebar.js
@@ -8,7 +8,7 @@ import { narrativeNavBarHeight } from "../../util/globals";
 
 
 export const Sidebar = (
-  {sidebarOpen, width, height, displayNarrative, panelsToDisplay, narrativeTitle, mobileDisplay, navBarHandler}
+  {sidebarOpen, width, height, displayNarrative, narrativeTitle, mobileDisplay, navBarHandler}
 ) => {
   return (
     <ThemeProvider theme={sidebarTheme}>
@@ -23,13 +23,7 @@ export const Sidebar = (
         {displayNarrative ? (
           <Narrative height={height - narrativeNavBarHeight} width={width} />
         ) : (
-          <Controls
-            mobileDisplay={mobileDisplay}
-            treeOn={panelsToDisplay.includes("tree")}
-            mapOn={panelsToDisplay.includes("map")}
-            frequenciesOn={panelsToDisplay.includes("frequencies")}
-            measurementsOn={panelsToDisplay.includes("measurements")}
-          />
+          <Controls mobileDisplay={mobileDisplay} />
         )}
       </SidebarContainer>
     </ThemeProvider>