refactor: add ui state provider

dashboard/src/app.tsx

@@ -8,7 +8,7 @@
 
 import cls from "classnames"
 import { css } from "emotion/macro"
-import React from "react"
+import React, { useContext } from "react"
 import styled from "@emotion/styled/macro"
 import { Route } from "react-router-dom"
 
@@ -27,6 +27,7 @@ import { DataProvider } from "./context/data"
 import { NavLink } from "./components/links"
 
 import logo from "./assets/logo.png"
+import { UiStateProvider, UiStateContext } from "./context/ui"
 
 // Style and align properly
 const Logo = styled.img`
@@ -41,44 +42,60 @@ const SidebarWrapper = styled.div`
   height: 100vh;
 `
 
-const App = () => (
-  <div>
-    <DataProvider>
-      <EventProvider>
-        <div className={css`
+const AppContainer = () => {
+  return (
+    <div>
+      <DataProvider>
+        <EventProvider>
+          <UiStateProvider>
+            <App />
+          </UiStateProvider>
+        </EventProvider>
+      </DataProvider>
+    </div>
+  )
+
+}
+
+const App = () => {
+  const { state: { isSidebarOpen }, actions: { toggleSidebar } } = useContext(UiStateContext)
+
+  console.log(isSidebarOpen)
+
+  return (
+    <div className={css`
+      display: flex;
+      height: 100vh;
+      max-height: 100vh;
+      overflow-y: hidden;
+    `}>
+      <SidebarWrapper>
+        <button onClick={toggleSidebar}>Click ME</button>
+        <div className={"ml-1"}>
+          <NavLink to="/">
+            <Logo src={logo} alt="Home" />
+          </NavLink>
+        </div>
+        <Sidebar isOpen={isSidebarOpen} />
+      </SidebarWrapper>
+      <div className={css`
           display: flex;
-          height: 100vh;
-          max-height: 100vh;
-          overflow-y: hidden;
+          flex-direction: column;
+          flex-grow: 1;
+          overflow-y: auto;
         `}>
-          <SidebarWrapper>
-            <div className={"ml-1"}>
-              <NavLink to="/">
-                <Logo src={logo} alt="Home" />
-              </NavLink>
-            </div>
-            <Sidebar />
-          </SidebarWrapper>
-          <div className={css`
-            display: flex;
-            flex-direction: column;
+        <div className={cls(css`
+            background-color: ${colors.grayLight};
             flex-grow: 1;
-            overflow-y: auto;
-          `}>
-            <div className={cls(css`
-              background-color: ${colors.grayLight};
-              flex-grow: 1;
-            `, "p-2")}>
-              <Route exact path="/" component={Overview} />
-              <Route path="/logs/" component={Logs} />
-              <Route path="/graph/" component={Graph} />
-              <Route path="/providers/:id" component={Provider} />
-            </div>
-          </div>
+          `, "p-2")}>
+          <Route exact path="/" component={Overview} />
+          <Route path="/logs/" component={Logs} />
+          <Route path="/graph/" component={Graph} />
+          <Route path="/providers/:id" component={Provider} />
         </div>
-      </EventProvider>
-    </DataProvider>
-  </div>
-)
+      </div>
+    </div>
+  )
+}
 
-export default App
+export default AppContainer

dashboard/src/containers/sidebar.tsx

@@ -43,7 +43,11 @@ const builtinPages: Page[] = [
   },
 ]
 
-export default () => {
+interface SidebarProps {
+  isOpen: boolean
+}
+
+const SidebarContainer: React.SFC<SidebarProps> = () => {
   const {
     actions: { loadStatus },
     store: { status },
@@ -72,3 +76,5 @@ export default () => {
 
   return <Sidebar pages={[...builtinPages, ...pages]} />
 }
+
+export default SidebarContainer

dashboard/src/context/ui.tsx

@@ -0,0 +1,48 @@
+import React, { useState } from "react";
+
+interface UiState {
+  isSidebarOpen: boolean
+}
+
+interface UiActions {
+  toggleSidebar: () => void
+}
+
+const INITIAL_UI_STATE: UiState = {
+  isSidebarOpen: false,
+}
+
+interface UiStateAndActions {
+  state: UiState,
+  actions: UiActions,
+}
+
+export const UiStateContext = React.createContext<UiStateAndActions>(null)
+
+const useUiState = () => {
+  const [uiState, setState] = useState<UiState>(INITIAL_UI_STATE)
+
+  const toggleSidebar = () => {
+    setState({
+      ...uiState,
+      isSidebarOpen: !uiState.isSidebarOpen,
+    })
+  }
+
+  return {
+    state: uiState,
+    actions: {
+      toggleSidebar,
+    },
+  }
+}
+
+export const UiStateProvider: React.SFC = ({ children }) => {
+  const storeAndActions = useUiState()
+
+  return (
+    <UiStateContext.Provider value={storeAndActions}>
+      {children}
+    </UiStateContext.Provider>
+  )
+}