add folder create

browser/styles/main/HomeContainer/lib/Preferences.styl

@@ -356,6 +356,41 @@ iptFocusBorderColor = #369DCD
               float right
               width 145px
               text-align center
+            &.newFolder
+              .folderName input
+                height 33px
+                border 1px solid transparent
+                border-radius 5px
+                padding 0 10px
+                font-size 14px
+                outline none
+                width 150px
+                &:hover
+                  border-color borderColor
+                &:focus
+                  border-color iptFocusBorderColor
+              .folderPublic select
+                height 33px
+                border 1px solid transparent
+                background-color white
+                outline none
+                display block
+                margin 0 auto
+                font-size 14px
+                &:hover
+                  border-color borderColor
+                &:focus
+                  border-color iptFocusBorderColor
+              .folderControl
+                button
+                  border none
+                  height 30px
+                  margin-top 1.5px
+                  font-size 14px
+                  background-color transparent
+                  color brandColor
+                  &:hover
+                    color lighten(brandColor, 10%)
             &.FolderRow
               .folderName input
                 height 33px
@@ -374,6 +409,7 @@ iptFocusBorderColor = #369DCD
                 outline none
                 display block
                 margin 0 auto
+                font-size 14px
                 &:focus
                   border-color iptFocusBorderColor
               .folderControl

lib/actions.js

@@ -3,6 +3,7 @@ export const USER_UPDATE = 'USER_UPDATE'
 export const ARTICLE_REFRESH = 'ARTICLE_REFRESH'
 export const ARTICLE_UPDATE = 'ARTICLE_UPDATE'
 export const ARTICLE_DESTROY = 'ARTICLE_DESTROY'
+export const FOLDER_DESTROY = 'FOLDER_DESTROY'
 
 export const SWITCH_USER = 'SWITCH_USER'
 export const SWITCH_FOLDER = 'SWITCH_FOLDER'
@@ -50,6 +51,13 @@ export function destroyArticle (userId, articleKey) {
   }
 }
 
+export function destroyFolder (userId, folderId) {
+  return {
+    type: FOLDER_DESTROY,
+    data: { userId, folderId }
+  }
+}
+
 // Nav
 export function switchUser (userId) {
   return {

lib/components/modal/Preference/FolderSettingTab.js

@@ -1,8 +1,18 @@
 import React, { PropTypes } from 'react'
 import _ from 'lodash'
 import FolderRow from './FolderRow'
+import linkState from 'boost/linkState'
+import api from 'boost/api'
 
 export default class FolderSettingTab extends React.Component {
+  constructor (props) {
+    super(props)
+
+    this.state = {
+      name: '',
+      public: 0
+    }
+  }
 
   getCurrentTeam (props) {
     if (props == null) props = this.props
@@ -13,6 +23,32 @@ export default class FolderSettingTab extends React.Component {
     this.props.switchTeam(e.target.value)
   }
 
+  handleFolderPublicChange (e) {
+    this.setState({public: e.target.value})
+  }
+
+  handleSaveButtonClick (e) {
+    let team = this.getCurrentTeam()
+    let input = {
+      UserId: team.id,
+      name: this.state.name,
+      public: !!parseInt(this.state.public, 10)
+    }
+
+    api.createFolder(input)
+      .then(res => {
+        console.log(res.body)
+        this.setState({
+          name: '',
+          public: 0
+        })
+      })
+      .catch(err => {
+        if (err.status != null) throw err
+        else console.error(err)
+      })
+  }
+
   renderTeamOptions () {
     return this.props.teams.map(team => {
       return (
@@ -49,6 +85,20 @@ export default class FolderSettingTab extends React.Component {
               <div className='folderControl'>Edit/Delete</div>
             </div>
             {folderElements}
+            <div className='newFolder'>
+              <div className='folderName'>
+                <input valueLink={this.linkState('name')} type='text' placeholder='New Folder'/>
+              </div>
+              <div className='folderPublic'>
+                <select value={this.state.public} onChange={e => this.handleFolderPublicChange(e)}>
+                  <option value='0'>Private</option>
+                  <option value='1'>Public</option>
+                </select>
+              </div>
+              <div className='folderControl'>
+                <button onClick={e => this.handleSaveButtonClick(e)} className='primary'>Add</button>
+              </div>
+            </div>
           </div>
         </div>
       </div>
@@ -61,3 +111,5 @@ FolderSettingTab.propTypes = {
   teams: PropTypes.array,
   switchTeam: PropTypes.func
 }
+
+FolderSettingTab.prototype.linkState = linkState

lib/reducer.js

@@ -1,6 +1,6 @@
 import { combineReducers } from 'redux'
 import { findIndex } from 'lodash'
-import { SWITCH_USER, SWITCH_FOLDER, SWITCH_MODE, SWITCH_ARTICLE, SET_SEARCH_FILTER, SET_TAG_FILTER, USER_UPDATE, ARTICLE_REFRESH, ARTICLE_UPDATE, ARTICLE_DESTROY, IDLE_MODE, CREATE_MODE } from './actions'
+import { SWITCH_USER, SWITCH_FOLDER, SWITCH_MODE, SWITCH_ARTICLE, SET_SEARCH_FILTER, SET_TAG_FILTER, USER_UPDATE, ARTICLE_REFRESH, ARTICLE_UPDATE, ARTICLE_DESTROY, FOLDER_DESTROY, IDLE_MODE, CREATE_MODE } from './actions'
 import auth from 'boost/auth'
 
 const initialStatus = {
@@ -116,6 +116,17 @@ function articles (state, action) {
         state[teamKey] = articles
       }
       return state
+    case FOLDER_DESTROY:
+      {
+        let { userId, folderId } = action.data
+        let teamKey = genKey(userId)
+        let articles = JSON.parse(localStorage.getItem(teamKey))
+        articles = articles.filter(article => article.FolderId !== folderId)
+
+        localStorage.setItem(teamKey, JSON.stringify(articles))
+        state[teamKey] = articles
+      }
+      return state
     default:
       if (state == null) return getInitialArticles()
       return state

lib/socket.js

@@ -2,13 +2,14 @@ import { API_URL } from '../config'
 import socketio from 'socket.io-client'
 import auth from './auth'
 import store from './store'
-import { updateUser, updateArticle, destroyArticle } from './actions'
+import { updateUser, updateArticle, destroyArticle, destroyFolder } from './actions'
 
 export const CONN = 'CONN'
 export const ALERT = 'ALERT'
 export const USER_UPDATE = 'USER_UPDATE'
 export const ARTICLE_UPDATE = 'ARTICLE_UPDATE'
 export const ARTICLE_DESTROY = 'ARTICLE_DESTROY'
+export const FOLDER_DESTROY = 'FOLDER_DESTROY'
 
 let io = socketio(API_URL)
 
@@ -31,6 +32,11 @@ io.on(USER_UPDATE, function (data) {
   store.dispatch(updateUser(user))
 })
 
+io.on(FOLDER_DESTROY, function (data) {
+  console.log(FOLDER_DESTROY, data)
+  store.dispatch(destroyFolder(data.TeamId, data.FolderId))
+})
+
 io.on(ARTICLE_UPDATE, function (data) {
   console.log(ARTICLE_UPDATE, data)
   let { userId, article } = data