update sidebar

Author: cvluca

gatsby-browser.js

@@ -5,3 +5,5 @@
  */
 
 // You can delete this file if you're not using it
+import wrapWithProvider from "./wrap-with-provider"
+export const wrapRootElement = wrapWithProvider

gatsby-ssr.js

@@ -5,3 +5,5 @@
  */
 
 // You can delete this file if you're not using it
+import wrapWithProvider from "./wrap-with-provider"
+export const wrapRootElement = wrapWithProvider

src/components/Container/Container.js

@@ -1,7 +1,6 @@
 import React, { Component } from 'react';
 import { connect } from "react-redux";
 import { getSidebarDockedState, getHeaderHeightState } from '../../store/selectors';
-import { pullRight } from '../ResponsiveSidebar/sidebar-config';
 
 class Container extends Component {
   render() {
@@ -11,8 +10,8 @@ class Container extends Component {
         style={{
           position: "absolute",
           top: headerHeight + 30,
-          left: (sidebarDocked && !pullRight) ? "20%" : 0,
-          right: (sidebarDocked && pullRight) ? "20%" : 0,
+          left: (sidebarDocked) ? "20%" : 0,
+          right: 0,
           bottom: 0,
         }}
       >

src/components/Layout/layout.js

@@ -2,9 +2,6 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import Helmet from 'react-helmet'
 import { StaticQuery, graphql } from 'gatsby'
-import { Provider } from 'react-redux'
-
-import store from '../../store'
 import Header from '../Header/header'
 import './layout.css'
 import ResponsiveSidebar from '../ResponsiveSidebar';
@@ -22,7 +19,6 @@ const Layout = ({ children }) => (
       }
     `}
     render={data => (
-      <Provider store={store}>
       <>
         <Helmet
           title={data.site.siteMetadata.title}
@@ -38,8 +34,7 @@ const Layout = ({ children }) => (
         <Container>
           {children}
         </Container>
-        </>
-      </Provider>
+      </>
     )}
   />
 )

src/components/ResponsiveSidebar/ResponsiveSideBar.js

@@ -4,7 +4,7 @@ import { getSidebarState, getHeaderHeightState } from "../../store/selectors";
 import { connect } from "react-redux";
 import { onSetSidebarOpen, onSetSidebarDocked } from "../../actions/sidebar";
 import MediaQuery from "react-responsive";
-import { maxWidth, pullRight, styles } from './sidebar-config';
+import { maxWidth, styles } from './sidebar-config';
 import SidebarContent from "./SidebarContent";
 
 class ResponsiveSidebar extends Component {
@@ -33,7 +33,6 @@ class ResponsiveSidebar extends Component {
               open={sidebarOpen}
               docked={!matches}
               onSetOpen={this.onSetSidebarOpen}
-              pullRight={pullRight}
               shadow={false}
             >
               <b></b>

src/components/ResponsiveSidebar/SidebarContent.js

@@ -23,6 +23,7 @@ const convertToTree = (data) => {
 
 const constructTree = (list) => {
   let tree = []
+  let dir = []
   list.forEach(item => {
     if (item.parents === [] || item.parents === null) tree.push(item)
     else {
@@ -31,18 +32,20 @@ const constructTree = (list) => {
         if (subtree
           .filter(node => node.title === item.parents[i] && node.children)
           .length === 0) {
-          subtree.push({
+          const newNode = {
             key: "tree/" + item.parents[i],
             title: item.parents[i],
             children: []
-          })
+          }
+          subtree.push(newNode)
+          dir.push(newNode)
         }
         subtree = subtree.find(node => node.title === item.parents[i] && node.children).children
       }
       subtree.push(item)
     }
   })
-  return tree
+  return [tree, dir]
 }
 
 class SidebarContent extends Component {
@@ -51,6 +54,7 @@ class SidebarContent extends Component {
   }
 
   render() {
+    const { expandedKeys } = this.props.sidebar
     return (
       <StaticQuery
         query={graphql`
@@ -72,7 +76,7 @@ class SidebarContent extends Component {
       }
     `}
         render={data => {
-          const tree = convertToTree(data)
+          const [tree, dir] = convertToTree(data)
           const loop = data => data.map((item) => {
             if (item.children) {
               return (
@@ -87,11 +91,17 @@ class SidebarContent extends Component {
               </Menu.Item>
             )
           })
+          const selectedKeys = data.allMarkdownRemark.edges
+            .filter(item => window.location.pathname === item.node.fields.slug ||
+              window.location.pathname+'/' === item.node.fields.slug)
+            .length > 0 ? [expandedKeys] : []
+          const defaultOpenKeys = dir.map(item => item.key)
           return (
             <div>
               <Menu 
                 mode="inline"
-                defaultOpenKeys={tree.map(node => node.key)}
+                defaultOpenKeys={defaultOpenKeys}
+                selectedKeys={selectedKeys}
               >
                 {loop(tree)}
               </Menu>

src/components/ResponsiveSidebar/sidebar-config.js

@@ -1,21 +1,20 @@
-export const pullRight = true;
 export const maxWidth = 800;
 
 export const styles = 
 {
   root: {
     position: "fixed",
     top: 100,
-    left: pullRight ? "80%" : 10,
-    right: !pullRight ? "80%" : 10,
+    left: 10,
+    right: "80%",
     bottom: 0,
     overflow: "hidden"
   },
   sidebar: {
     zIndex: 2,
     position: "absolute",
-    left: pullRight ? 10 : null,
-    right: !pullRight ? 10 : null,
+    left: null,
+    right: 10,
     top: 0,
     bottom: 0,
     transition: "transform .3s ease-out",

src/store/index.js

@@ -1,10 +1,14 @@
-import { createStore } from "redux";
+import { createStore as reduxCreateStore } from "redux"
 import rootReducer from "../reducers";
 // import thunk from "redux-thunk";
 
 // const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
-export default createStore(
+// export default createStore(
+  // rootReducer,
+  // composeEnhancers(applyMiddleware(thunk))
+// );
+const createStore = () => reduxCreateStore(
   rootReducer,
   window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
-  // composeEnhancers(applyMiddleware(thunk))
-);
+)
+export default createStore

src/templates/postTemplate.js

@@ -1,13 +1,17 @@
 import React from "react"
 import { graphql } from "gatsby"
 import Layout from "../components/Layout";
+import { connect } from 'react-redux'
+import { onSidebarContentExpand } from '../actions/sidebar'
 import "katex/dist/katex.min.css"
 
-export default function Template({
+function Template({
   data, // this prop will be injected by the GraphQL query below.
+  onSidebarContentExpand
 }) {
   const { markdownRemark } = data // data.markdownRemark holds our post data
-  const { frontmatter, html } = markdownRemark
+  const { frontmatter, html, id } = markdownRemark
+  onSidebarContentExpand(id)
   return (
     <Layout>
     <div className="blog-post-container">
@@ -24,12 +28,19 @@ export default function Template({
   )
 }
 
+const mapDispatchToProps = {
+  onSidebarContentExpand
+}
+
+export default connect(()=>({}), mapDispatchToProps) (Template)
+
 export const pageQuery = graphql`
   query($path: String!) {
     markdownRemark(fields: { slug: { eq: $path} }) {
       fields {
         slug
       }
+      id
       html
       frontmatter {
         date(formatString: "MMMM DD, YYYY")

wrap-with-provider.js

@@ -0,0 +1,8 @@
+import React from "react"
+import { Provider } from "react-redux"
+import createStore from './src/store'
+
+const store = createStore()
+
+// eslint-disable-next-line react/display-name,react/prop-types
+export default ({ element }) => <Provider store={store}>{element}</Provider>