1 files changed, 22 insertions, 15 deletions
diff --git a/animism-align/frontend/app/views/editor/align/containers/sidebar.container.js b/animism-align/frontend/app/views/editor/align/containers/sidebar.container.js
index a771f1a..10ebc03 100644
--- a/animism-align/frontend/app/views/editor/align/containers/sidebar.container.js
+++ b/animism-align/frontend/app/views/editor/align/containers/sidebar.container.js
@@ -1,4 +1,5 @@
 import React, { Component } from 'react'
+import { connect } from 'react-redux'
 // import { Link } from 'react-router-dom'
 
 import actions from 'app/actions'
@@ -6,28 +7,34 @@ import actions from 'app/actions'
 import Script from '../components/sidebar/script.component.js'
 import TableOfContents from '../components/sidebar/tableOfContents.component.js'
 
-export default class Sidebar extends Component {
+class Sidebar extends Component {
   state = {
     mode: "toc",
   }
-  render() {
-    if (this.state.mode === "toc") {
-      return (
-        <div className='sidebar'>
-          <button onClick={() => this.setState({ mode: "script" })}>
-            +
-          </button>
-          <TableOfContents />
-        </div>
-      )
+  componentDidMount(){
+    if (!this.props.peaks.length) {
+      this.setState({ mode: "wav" })
     }
+  }
+
+  render() {
+    const { mode } = this.state
     return (
       <div className='sidebar'>
-        <Script />
-        <button onClick={() => this.setState({ mode: "toc" })}>
-          x
-        </button>
+        <div className='buttons'>
+          <button onClick={() => this.setState({ mode: "txt" })}>text</button>
+          <button onClick={() => this.setState({ mode: "wav" })}>wav</button>
+          <button onClick={() => this.setState({ mode: "toc" })}>contents</button>
+        </div>
+        {mode === 'toc' && <TableOfContents />}
+        {mode === 'txt' && <Script />}
       </div>
     )
   }
 }
+
+const mapStateToProps = state => ({
+  peaks: state.align.peaks,
+})
+
+export default connect(mapStateToProps)(Sidebar)