diff --git a/browser/styles/main/HomeContainer/lib/Preferences.styl b/browser/styles/main/HomeContainer/lib/Preferences.styl index 91e42766..20b746c4 100644 --- a/browser/styles/main/HomeContainer/lib/Preferences.styl +++ b/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 diff --git a/lib/actions.js b/lib/actions.js index eebc5c6e..56349d49 100644 --- a/lib/actions.js +++ b/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 { diff --git a/lib/components/modal/Preference/FolderSettingTab.js b/lib/components/modal/Preference/FolderSettingTab.js index 776b7501..83f272b6 100644 --- a/lib/components/modal/Preference/FolderSettingTab.js +++ b/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 {
Edit/Delete
{folderElements} +
+
+ +
+
+ +
+
+ +
+
@@ -61,3 +111,5 @@ FolderSettingTab.propTypes = { teams: PropTypes.array, switchTeam: PropTypes.func } + +FolderSettingTab.prototype.linkState = linkState diff --git a/lib/reducer.js b/lib/reducer.js index d8f6647f..05f9c195 100644 --- a/lib/reducer.js +++ b/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 diff --git a/lib/socket.js b/lib/socket.js index e62f0fb3..1f0eb597 100644 --- a/lib/socket.js +++ b/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