From f965ddffe8a550043c2f30040896af2c826399c1 Mon Sep 17 00:00:00 2001
From: Victor Lin <13424970+victorlin@users.noreply.github.com>
Date: Mon, 23 Oct 2023 15:37:47 -0700
Subject: [PATCH] Sidebar: Access typed controls state within component

Instead of passing down from Main.

Also take the opportunity to convert this file to TypeScript.
---
 src/components/main/index.js                    | 2 --
 src/components/main/{sidebar.js => sidebar.tsx} | 7 ++++++-
 2 files changed, 6 insertions(+), 3 deletions(-)
 rename src/components/main/{sidebar.js => sidebar.tsx} (77%)

diff --git a/src/components/main/index.js b/src/components/main/index.js
index f53913048..cd357cb0f 100644
--- a/src/components/main/index.js
+++ b/src/components/main/index.js
@@ -143,11 +143,9 @@ class Main extends React.Component {
           handler={this.toggleSidebar}
         />
         <Sidebar
-          sidebarOpen={this.props.sidebarOpen}
           width={sidebarWidth}
           height={availableHeight}
           displayNarrative={this.props.displayNarrative}
-          panelsToDisplay={this.props.panelsToDisplay}
           narrativeTitle={this.props.narrativeTitle}
           navBarHandler={this.toggleSidebar}
         />
diff --git a/src/components/main/sidebar.js b/src/components/main/sidebar.tsx
similarity index 77%
rename from src/components/main/sidebar.js
rename to src/components/main/sidebar.tsx
index ee077fb75..99f755df6 100644
--- a/src/components/main/sidebar.js
+++ b/src/components/main/sidebar.tsx
@@ -1,15 +1,20 @@
 import React from "react";
+import { useSelector } from "react-redux";
 import {ThemeProvider} from 'styled-components';
 import Narrative from "../narrative";
 import NavBar from "../navBar";
 import Controls from "../controls/controls";
 import { SidebarContainer, sidebarTheme } from "./styles";
 import { narrativeNavBarHeight } from "../../util/globals";
+import { RootState } from "../../store";
 
 
 export const Sidebar = (
-  {sidebarOpen, width, height, displayNarrative, panelsToDisplay, narrativeTitle, navBarHandler}
+  { width, height, displayNarrative, narrativeTitle, navBarHandler}
 ) => {
+  const sidebarOpen = useSelector((state: RootState) => state.controls.sidebarOpen);
+  const panelsToDisplay = useSelector((state: RootState) => state.controls.panelsToDisplay);
+
   return (
     <ThemeProvider theme={sidebarTheme}>
       <SidebarContainer left={sidebarOpen ? 0 : -1 * width} width={width} height={height}>