From 9d2b64e82b9a7fa7ff301cc7d0c63933afcf3186 Mon Sep 17 00:00:00 2001 From: Rokt33r Date: Wed, 14 Oct 2015 15:20:16 +0900 Subject: [PATCH] CREATE_MODE(1/2) --- .gitignore | 1 + browser/main/HomePage.js | 58 +++++-- browser/main/HomePage/ArticleDetail.js | 149 ++++++++++++++++-- browser/main/HomePage/ArticleList.js | 28 +--- browser/main/HomePage/ArticleNavigator.js | 30 ++-- browser/main/actions.js | 4 + .../HomeContainer/components/ArticleList.styl | 3 +- lib/ace-modes.js | 4 +- lib/components/modal/CreateNewTeam.js | 4 +- lib/{key-gen.js => keygen.js} | 0 lib/linkState.js | 15 +- 11 files changed, 226 insertions(+), 70 deletions(-) rename lib/{key-gen.js => keygen.js} (100%) diff --git a/.gitignore b/.gitignore index 727c5017..ca1bab2e 100644 --- a/.gitignore +++ b/.gitignore @@ -2,3 +2,4 @@ node_modules/* !node_modules/boost Boost-darwin-x64/ +backup/ diff --git a/browser/main/HomePage.js b/browser/main/HomePage.js index 3628e757..015d5d5b 100644 --- a/browser/main/HomePage.js +++ b/browser/main/HomePage.js @@ -1,15 +1,14 @@ import React, { PropTypes} from 'react' import { connect } from 'react-redux' -import { switchUser } from './actions' +import { CREATE_MODE, IDLE_MODE, switchUser } from './actions' import UserNavigator from './HomePage/UserNavigator' import ArticleNavigator from './HomePage/ArticleNavigator' import ArticleTopBar from './HomePage/ArticleTopBar' import ArticleList from './HomePage/ArticleList' import ArticleDetail from './HomePage/ArticleDetail' -import { findWhere } from 'lodash' - -// var AuthFilter = require('../Mixins/AuthFilter') -// var KeyCaster = require('../Mixins/KeyCaster') +import { findWhere, pick } from 'lodash' +import keygen from 'boost/keygen' +import { NEW } from './actions' class HomeContainer extends React.Component { componentDidMount () { @@ -27,15 +26,15 @@ class HomeContainer extends React.Component { } render () { - const { users, user, status, articles, article } = this.props + const { dispatch, status, users, activeUser, articles, activeArticle } = this.props return (
- + - - + +
) } @@ -48,24 +47,48 @@ function remap (state) { let teams = Array.isArray(currentUser.Teams) ? currentUser.Teams : [] let users = [currentUser, ...teams] - let user = findWhere(users, {id: parseInt(status.userId, 10)}) - if (user == null) user = users[0] - let articles = state.articles['team-' + user.id] - let article = findWhere(users, {id: status.articleId}) - if (article == null) article = articles[0] + let activeUser = findWhere(users, {id: parseInt(status.userId, 10)}) + if (activeUser == null) activeUser = users[0] + let articles = state.articles['team-' + activeUser.id] + let activeArticle = findWhere(users, {id: status.articleId}) + if (activeArticle == null) activeArticle = articles[0] + + if (status.mode === CREATE_MODE && activeUser.Folders.length > 0) { + var newArticle = findWhere(articles, {status: 'NEW'}) + if (newArticle == null) { + newArticle = { + id: keygen(), + title: '', + content: '', + mode: 'markdown', + Tags: [], + User: pick(currentUser, ['email', 'name', 'profileName']), + FolderId: activeUser.Folders[0].id, + status: NEW + } + articles.unshift(newArticle) + } + activeArticle = newArticle + } else if (status.mode === CREATE_MODE) { + status.mode = IDLE_MODE + } + if (status.mode !== CREATE_MODE && activeArticle != null && activeArticle.status === NEW) { + articles.splice(articles.indexOf(activeArticle), 1) + activeArticle = articles[0] + } return { users, - user, + activeUser, status, articles, - article + activeArticle } } HomeContainer.propTypes = { users: PropTypes.array, - user: PropTypes.object, + activeUser: PropTypes.object, params: PropTypes.shape({ userId: PropTypes.string }), @@ -74,6 +97,7 @@ HomeContainer.propTypes = { folderId: PropTypes.number }), articles: PropTypes.array, + activeArticle: PropTypes.shape(), dispatch: PropTypes.func } diff --git a/browser/main/HomePage/ArticleDetail.js b/browser/main/HomePage/ArticleDetail.js index 01fc52e6..74e01c1d 100644 --- a/browser/main/HomePage/ArticleDetail.js +++ b/browser/main/HomePage/ArticleDetail.js @@ -1,22 +1,52 @@ import React, { PropTypes } from 'react' import moment from 'moment' -import { findWhere } from 'lodash' +import { findWhere, uniq } from 'lodash' import ModeIcon from 'boost/components/ModeIcon' import MarkdownPreview from 'boost/components/MarkdownPreview' import CodeEditor from 'boost/components/CodeEditor' +import { NEW, IDLE_MODE, CREATE_MODE, EDIT_MODE, switchMode } from '../actions' +import aceModes from 'boost/ace-modes' +import Select from 'react-select' +import linkState from 'boost/linkState' + +var modeOptions = aceModes.map(function (mode) { + return { + label: mode, + value: mode + } +}) export default class ArticleDetail extends React.Component { - render () { - let { article, status, user } = this.props + constructor (props) { + super(props) + this.state = { + article: Object.assign({}, props.activeArticle) + } + } - let tags = article.Tags.length > 0 ? article.Tags.map(tag => { + componentWillReceiveProps (nextProps) { + this.setState({article: nextProps.activeArticle}) + } + + renderEmpty () { + return ( +
+ Empty article +
+ ) + } + + renderIdle () { + let { status, activeArticle, activeUser } = this.props + + let tags = activeArticle.Tags.length > 0 ? activeArticle.Tags.map(tag => { return ( {tag.name} ) }) : ( Not tagged yet ) - let folder = findWhere(user.Folders, {id: article.FolderId}) + let folder = findWhere(activeUser.Folders, {id: activeArticle.FolderId}) let folderName = folder != null ? folder.name : '(unknown)' return ( @@ -25,9 +55,9 @@ export default class ArticleDetail extends React.Component {
{folderName}  - by {article.User.profileName}  - Created {moment(article.createdAt).format('YYYY/MM/DD')}  - Updated {moment(article.updatedAt).format('YYYY/MM/DD')} + by {activeArticle.User.profileName}  + Created {moment(activeArticle.createdAt).format('YYYY/MM/DD')}  + Updated {moment(activeArticle.updatedAt).format('YYYY/MM/DD')}
{tags}
@@ -41,19 +71,112 @@ export default class ArticleDetail extends React.Component {
- -
{article.title}
+ +
{activeArticle.title}
- {article.mode === 'markdown' ? : } + {activeArticle.mode === 'markdown' ? : }
) } + + handleCancelButtonClick (e) { + this.props.dispatch(switchMode(IDLE_MODE)) + } + + handleSaveButtonClick (e) { + console.log(this.state.article) + } + + handleFolderIdChange (value) { + let article = this.state.article + article.FolderId = value + this.setState({article: article}) + } + + handleTagsChange (tag, tags) { + tags = uniq(tags, function (tag) { + return tag.value + }) + + var article = this.state.article + article.Tags = tags.map(function (tag) { + return tag.value + }) + + this.setState({article: article}) + } + + handleModeChange (value) { + let article = this.state.article + article.mode = value + this.setState({article: article}) + } + + handleContentChange (e, value) { + let article = this.state.article + article.content = value + this.setState({article: article}) + } + + renderEdit () { + let { status, activeUser } = this.props + + let folderOptions = activeUser.Folders.map(folder => { + return { + label: folder.name, + value: folder.id + } + }) + + return ( +
+
+
+ this.handleTagsChange(tag, tags)} clearable={false} multi={true} placeholder='add some tags...' allowCreate={true} value={this.state.article.Tags} className='tags'/> +
+
+ + +
+
+
+
+
+
+ +
+ + {alertEl}
@@ -260,3 +261,4 @@ export default class CreateNewTeam extends React.Component { CreateNewTeam.propTypes = { close: PropTypes.func } +CreateNewTeam.prototype.linkState = linkState diff --git a/lib/key-gen.js b/lib/keygen.js similarity index 100% rename from lib/key-gen.js rename to lib/keygen.js diff --git a/lib/linkState.js b/lib/linkState.js index b1b85016..2b874615 100644 --- a/lib/linkState.js +++ b/lib/linkState.js @@ -1,5 +1,5 @@ function getIn (object, path) { - var stack = path.split('.') + let stack = path.split('.') while (stack.length > 1) { object = object[stack.shift()] } @@ -7,8 +7,8 @@ function getIn (object, path) { } function updateIn (object, path, value) { - var current = object - var stack = path.split('.') + let current = object + let stack = path.split('.') while (stack.length > 1) { current = current[stack.shift()] } @@ -21,7 +21,14 @@ function setPartialState (component, path, value) { updateIn(component.state, path, value)) } -export default function linkState (el, path) { +export default function linkState (path) { + return { + value: getIn(this.state, path), + requestChange: setPartialState.bind(null, this, path) + } +} + +export function linkState2 (el, path) { return { value: getIn(el.state, path), requestChange: setPartialState.bind(null, el, path)