WIP: Search bar redux

browser/components/BoardShowPage/MenuSideBar/LabelsPane.js

@@ -0,0 +1,79 @@
+import React, { Component } from 'react'
+import SearchBar from './SearchBar'
+import Pane from './index'
+
+
+export default class LabelsPane extends Component {
+
+  static PropTypes = {
+    board: React.PropTypes.object.isRequired,
+    onClose: React.PropTypes.func.isRequired,
+
+  }
+
+  constructor(props){
+    super(props)
+    this.state = {
+      display: 'Cards',
+      value: ''
+    }
+    this.setSearchTerm = this.setSearchTerm.bind(this)
+    this.toggleDisplay = this.toggleDisplay.bind(this)
+    this.goToPane = this.goToPane.bind(this)
+    this.goBack = this.goBack.bind(this)
+
+
+  }
+
+  setSearchTerm(event){
+    const value = event.target.value
+    this.setState({value: value})
+  }
+
+  goToPane(pane) {
+    if (!(pane in this.props.panes))
+      throw new Error(`cannot go to pane ${pane} it was not defined in panes prop`)
+    return event => {
+      if (event) event.preventDefault()
+      this.setState({
+        pane: pane
+      })
+    }
+  }
+
+  goBack(){
+    //TODO: this needs to go back to the More Pane; look above
+    this.props.goToPane('Main Label Pane')()
+  }
+
+  render(){
+    const { board } = this.props
+    // TODO: component for displaying search results
+    return(
+      <div className="">
+        <Pane name="Labels">
+          <div>Labels Panel</div>
+          <SearchBar
+            type="text"
+            className="BoardShowPage-MenuSideBar-ArchivedItems-SearchBox"
+            placeholder="Placeholder for searching labels."
+            value={this.state.value}
+            onChange={this.setSearchTerm}
+          />
+        </Pane>
+      </div>
+      )
+  }
+}
+// const LabelsPane = ({board, onClose, gotoPane, goBack}) =>
+//   <Pane name="Labels">
+//     <div>Labels Panel</div>
+//     <SearchBar
+//       type="text"
+//       className="BoardShowPage-MenuSideBar-ArchivedItems-SearchBox"
+//       placeholder="Placeholder for searching labels."
+//       value={this.state.value}
+//       onChange={this.setSearchTerm}
+//     />
+//   </Pane>
+module.exports = LabelsPane

browser/components/BoardShowPage/MenuSideBar/SearchBar.js

@@ -0,0 +1,24 @@
+import React, { Component } from 'react'
+// take search bar contents from unarchive
+// make a component in this file
+// check that the content rendered is correct
+// set props to the state
+// export
+// replace search contents with search bar
+// test
+
+
+const SearchBar = ( props ) => {
+  // TODO: create HTML class for search bar
+  return <span className="BoardShowPage-MenuSideBar-SearchBar" >
+  <input
+    type="text"
+    className="BoardShowPage-MenuSideBar-ArchivedItems-SearchBox"
+    placeholder=""
+    value={props.value}
+    onChange={props.onChange}
+  />
+</span>
+}
+
+module.exports = SearchBar

browser/components/BoardShowPage/MenuSideBar/Unarchive.js

@@ -7,6 +7,7 @@ import ConfirmationLink from '../../ConfirmationLink'
 import Icon from '../../Icon'
 import Button from '../../Button'
 import commands from '../../../commands'
+import SearchBar from './SearchBar'
 
 
 export default class Unarchive extends Component {
@@ -18,23 +19,28 @@ export default class Unarchive extends Component {
   constructor(props){
     super(props)
     this.state = {
-      searchTerm: '',
-      display: 'Cards'
+      display: 'Cards',
+      value: ''
     }
     this.setSearchTerm = this.setSearchTerm.bind(this)
     this.toggleDisplay = this.toggleDisplay.bind(this)
   }
 
   setSearchTerm(event){
-    const searchTerm = event.target.value
-    this.setState({searchTerm: searchTerm})
+    const value = event.target.value
+    this.setState({value: value})
   }
 
   toggleDisplay(){
     const display = this.state.display === 'Cards' ? 'Lists' : 'Cards'
     this.setState( {
       display: display
     })
+// TODO: check whether this should be a function declaration
+  // handleInput( event ){
+  //   const value
+  //   this.setState({ value: event.target.value })
+  // }
   }
 
   render(){
@@ -44,15 +50,27 @@ export default class Unarchive extends Component {
       <ArchivedCards board={board} searchTerm={this.state.searchTerm} className="BoardShowPage-MenuSideBar-ArchivedItems-List" /> :
       <ArchivedLists board={board} searchTerm={this.state.searchTerm} className="BoardShowPage-MenuSideBar-ArchivedItems-List"/>
     return (<div className="BoardShowPage-MenuSideBar-ArchivedItems">
-        <span className="BoardShowPage-MenuSideBar-ArchivedItems-Header" > <input
+      {/* insert searchbar function */}
+        {/* <span className="BoardShowPage-MenuSideBar-ArchivedItems-Header" > <input
           type="text"
           className="BoardShowPage-MenuSideBar-ArchivedItems-SearchBox"
           placeholder="Search archive..."
           value={this.state.searchTerm}
           onChange={this.setSearchTerm}
         />
       <Link onClick={this.toggleDisplay} className="BoardShowPage-MenuSideBar-ArchivedItems-ToggleDisplay">{toggleButtonText}</Link>
-      </span>
+      </span> */}
+      <SearchBar
+        type="text"
+        className="BoardShowPage-MenuSideBar-ArchivedItems-SearchBox"
+        placeholder="Placeholder for searching unarchive."
+        value={this.state.value}
+        onChange={this.setSearchTerm}
+      />
+      <Link
+        onClick={this.toggleDisplay}
+        className="BoardShowPage-MenuSideBar-ArchivedItems-ToggleDisplay">{toggleButtonText}
+      </Link>
       {toggleDisplayStatus}
     </div>
   )

browser/components/BoardShowPage/MenuSideBar/index.js

@@ -10,6 +10,7 @@ import List from '../List'
 import Unarchive from './Unarchive'
 import InviteByEmailPopover from '../../InviteByEmailPopover'
 import Avatar from '../../Avatar'
+import LabelsPane from './LabelsPane'
 import './index.sass'
 
 // panes
@@ -293,11 +294,11 @@ const SettingsPane = ({board, onClose, gotoPane, goBack}) =>
     <div>Settings Label TBD</div>
   </Pane>
 
-
-const LabelsPane = ({board, onClose, gotoPane, goBack}) =>
-  <Pane name="Labels">
-    <div>Labels Panel</div>
-  </Pane>
+// TODO: how to use the labelspane component
+// const LabelsPane = ({board, onClose, gotoPane, goBack}) =>
+  // <Pane name="Labels">
+  //   <div>Labels Panel</div>
+  // </Pane>
 
 
 const DownloadBoardButton = (props) => {