handle new note button & note list

browser/main/Main.js

@@ -84,18 +84,35 @@ class Main extends React.Component {
         <SideNav
           {..._.pick(this.props, ['dispatch', 'repositories', 'config', 'location'])}
         />
-        <TopBar/>
+        <TopBar
+          {..._.pick(this.props, [
+            'dispatch',
+            'repositories',
+            'config',
+            'params'
+          ])}
+        />
         <div styleName={config.isSideNavFolded ? 'body--expanded' : 'body'}
           ref='body'
         >
-          <NoteList style={{width: this.state.listWidth}}/>
+          <NoteList style={{width: this.state.listWidth}}
+            {..._.pick(this.props, [
+              'dispatch',
+              'repositories',
+              'config',
+              'params',
+              'location'
+            ])}
+          />
           <div styleName={this.state.isSliderFocused ? 'slider--active' : 'slider'}
             style={{left: this.state.listWidth}}
             onMouseDown={(e) => this.handleSlideMouseDown(e)}
             draggable='false'
-          />
+          >
+            <div styleName='slider-hitbox'/>
+          </div>
           <NoteDetail
-            style={{left: this.state.listWidth + 5}}
+            style={{left: this.state.listWidth + 1}}
           />
         </div>
         <StatusBar

browser/main/Main.styl

@@ -13,13 +13,18 @@
 
 .slider
   absolute top bottom
-  width 5px
-  background-color $ui-backgroundColor
-  border-width 0 1px 0
+  width 1px
+  background-color $ui-borderColor
+  border-width 0
   border-style solid
   border-color $ui-borderColor
-  cursor ew-resize
+  cursor col-resize
 
 .slider--active
   @extend .slider
   background-color $ui-button--active-backgroundColor
+
+.slider-hitbox
+  absolute top bottom left right
+  width 7px
+  left -3px

browser/main/NoteList/NoteList.styl

@@ -2,3 +2,36 @@
   absolute top left bottom
   border-top $ui-border
   border-bottom $ui-border
+  overflow auto
+
+.item
+  height 80px
+  border-bottom $ui-border
+  padding 0 5px
+  user-select none
+  cursor pointer
+  &:hover
+    background-color alpha(black, 5%)
+
+.item-info
+  height 30px
+  clearfix()
+  font-size 12px
+  line-height 30px
+
+.item-info-left
+  float left
+
+.item-info-right
+  float right
+
+.item-title
+  height 20px
+  line-height 20px
+  font-weight bold
+  overflow ellipsis
+
+.item-tags
+  height 30px
+  font-size 12px
+  line-height 30px

browser/main/NoteList/index.js

@@ -123,8 +123,81 @@ class NoteList extends React.Component {
     }
   }
 
+  getNotes () {
+    let { repositories, params, location } = this.props
+    let repositoryKey = params.repositoryKey
+    let folderKey = params.folderKey
+
+    if (location.pathname.match(/\/home/)) {
+      return repositories
+      .reduce((sum, repository) => {
+        return sum.concat(repository.notes
+          .map((note) => {
+            note._repository = repository
+            return note
+          }))
+      }, [])
+    }
+
+    let repository = _.find(repositories, {key: repositoryKey})
+    if (repository == null) return []
+
+    let folder = _.find(repository.folders, {key: folderKey})
+    if (folder == null) {
+      return repository.notes
+        .map((note) => {
+          note._repository = repository
+          return note
+        })
+    }
+
+    return repository.notes
+      .filter((note) => note.folder === folderKey)
+      .map((note) => {
+        note._repository = repository
+        return note
+      })
+  }
+
+  handleNoteClick (key) {
+    return (e) => {
+      console.log(key)
+    }
+  }
+
   render () {
-    let articleElements = []
+    let notes = this.getNotes()
+    let noteElements = notes.map((note) => {
+      let folder = _.find(note._repository.folders, {key: note.folder})
+      let tagElements = note.tags.map((tag) => {
+        return <span key='tag'>{tag}</span>
+      })
+      let key = `${note._repository.key}/${note.key}`
+
+      return (
+        <div styleName='item'
+          key={key}
+          onClick={(e) => this.handleNoteClick(key)(e)}
+        >
+          <div styleName='item-info'>
+
+            <div styleName='item-info-left'>
+              <i className='fa fa-cube fa-fw' style={{color: folder.color}}/> {folder.name}
+            </div>
+
+            <div styleName='item-info-right'>
+              {moment(note.createdAt).fromNow()}
+            </div>
+
+          </div>
+
+          <div styleName='item-title'>{note.title}</div>
+
+          <div styleName='item-tags'><i className='fa fa-tags fa-fw'/>{tagElements.length > 0 ? tagElements : <span>Not tagged yet</span>}</div>
+
+        </div>
+      )
+    })
 
     return (
       <div className='NoteList'
@@ -133,11 +206,14 @@ class NoteList extends React.Component {
         onKeyDown={(e) => this.handleNoteListKeyDown(e)}
         style={this.props.style}
       >
-        {articleElements}
+        {noteElements}
       </div>
     )
   }
 }
+NoteList.contextTypes = {
+  router: PropTypes.shape([])
+}
 
 NoteList.propTypes = {
   dispatch: PropTypes.func,

browser/main/SideNav/FolderItem.styl

@@ -61,6 +61,8 @@
   border-radius 5px
   border $ui-border
   outline none
+  background-color white
+  z-index 1
   &:focus
     border-color $ui-input--focus-borderColor
   &:disabled

browser/main/TopBar/index.js

@@ -1,8 +1,9 @@
 import React, { PropTypes } from 'react'
-import { connect } from 'react-redux'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './TopBar.styl'
 import activityRecord from 'browser/lib/activityRecord'
+import Repository from 'browser/lib/Repository'
+import _ from 'lodash'
 
 const OSX = window.process.platform === 'darwin'
 
@@ -30,23 +31,56 @@ class TopBar extends React.Component {
     this.searchInput.blur()
   }
 
-  handleSearchChange (e) {
-  }
-
-  handleSearchClearButton (e) {
-    this.searchInput.value = ''
-    this.focusInput()
-  }
-
   handleNewPostButtonClick (e) {
     activityRecord.emit('ARTICLE_CREATE')
+
+    let { params, repositories } = this.props
+
+    let folderKey = params.folderKey
+    let repositoryKey = params.repositoryKey
+    if (folderKey == null) {
+      let repository = _.find(repositories, {key: repositoryKey})
+      if (repository == null) {
+        repository = repositories[0]
+      }
+      if (repository != null) {
+        repositoryKey = repository.key
+        folderKey = repository.folders[0] != null && repository.folders[0].key
+      }
+      if (folderKey == null) throw new Error('no folder exists')
+    }
+
+    let newNote = {
+      title: 'New Note',
+      content: '',
+      folder: folderKey,
+      tags: [],
+      mode: 'markdown'
+    }
+
+    Repository
+      .find(repositoryKey)
+      .then((repo) => {
+        console.log(repo)
+        return repo.addNote(newNote)
+      })
+      .then((note) => {
+        let { dispatch } = this.props
+        dispatch({
+          type: 'ADD_NOTE',
+          repository: repositoryKey,
+          note: note
+        })
+      })
+      .catch((err) => {
+        console.error(err)
+      })
   }
 
   handleTutorialButtonClick (e) {
   }
 
   handleLinksButton (e) {
-
   }
 
   render () {
@@ -112,4 +146,4 @@ TopBar.propTypes = {
   })
 }
 
-export default connect((x) => x)(CSSModules(TopBar, styles))
+export default CSSModules(TopBar, styles)

browser/main/index.js

@@ -76,7 +76,7 @@ ipc.on('open-finder', function () {
 
 let el = document.getElementById('content')
 const history = syncHistoryWithStore(hashHistory, store)
-history.listen((location) => console.info(location))
+
 ReactDOM.render((
   <Provider store={store}>
     <Router history={history}>

browser/main/store.js

@@ -105,6 +105,16 @@ function repositories (state = initialRepositories, action) {
           targetRepo.folders.splice(targetFolderIndex, 1)
         }
 
+        return repos
+      }
+    case 'ADD_NOTE':
+      {
+        let repos = state.slice()
+        let targetRepo = _.find(repos, {key: action.repository})
+
+        if (targetRepo == null) return state
+        targetRepo.notes.push(action.note)
+
         return repos
       }
   }