mirror of
https://github.com/BoostIo/Boostnote
synced 2025-12-13 09:46:22 +00:00
Going LIte
This commit is contained in:
Rokt33r
@@ -1,42 +0,0 @@
|
||||
var React = require('react')
|
||||
|
||||
var CodeViewer = require('../../main/Components/CodeViewer')
|
||||
|
||||
var MarkdownPreview = require('../../main/Components/MarkdownPreview')
|
||||
|
||||
module.exports = React.createClass({
|
||||
propTypes: {
|
||||
currentArticle: React.PropTypes.object
|
||||
},
|
||||
render: function () {
|
||||
var article = this.props.currentArticle
|
||||
|
||||
if (article != null) {
|
||||
if (article.type === 'code') {
|
||||
return (
|
||||
<div className='FinderDetail'>
|
||||
<div className='header'><i className='fa fa-code fa-fw'/> {article.description}</div>
|
||||
<div className='content'>
|
||||
<CodeViewer code={article.content} mode={article.mode}/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
} else if (article.type === 'note') {
|
||||
|
||||
return (
|
||||
<div className='FinderDetail'>
|
||||
<div className='header'><i className='fa fa-file-text-o fa-fw'/> {article.title}</div>
|
||||
<div className='content'>
|
||||
<MarkdownPreview className='marked' content={article.content}/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
return (
|
||||
<div className='FinderDetail'>
|
||||
<div className='nothing'>Nothing selected</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
})
|
||||
@@ -1,15 +0,0 @@
|
||||
var React = require('react')
|
||||
|
||||
module.exports = React.createClass({
|
||||
propTypes: {
|
||||
onChange: React.PropTypes.func,
|
||||
search: React.PropTypes.string
|
||||
},
|
||||
render: function () {
|
||||
return (
|
||||
<div className='FinderInput'>
|
||||
<input value={this.props.search} onChange={this.props.onChange} type='text'/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
})
|
||||
@@ -1,79 +0,0 @@
|
||||
var React = require('react')
|
||||
|
||||
module.exports = React.createClass({
|
||||
propTypes: {
|
||||
articles: React.PropTypes.arrayOf,
|
||||
currentArticle: React.PropTypes.shape({
|
||||
id: React.PropTypes.number,
|
||||
type: React.PropTypes.string
|
||||
}),
|
||||
selectArticle: React.PropTypes.func
|
||||
},
|
||||
componentDidUpdate: function () {
|
||||
var index = this.props.articles.indexOf(this.props.currentArticle)
|
||||
var el = React.findDOMNode(this)
|
||||
var li = el.querySelectorAll('li')[index]
|
||||
|
||||
if (li == null) {
|
||||
return
|
||||
}
|
||||
|
||||
var overflowBelow = el.clientHeight + el.scrollTop < li.offsetTop + li.clientHeight
|
||||
if (overflowBelow) {
|
||||
el.scrollTop = li.offsetTop + li.clientHeight - el.clientHeight
|
||||
}
|
||||
var overflowAbove = el.scrollTop > li.offsetTop
|
||||
if (overflowAbove) {
|
||||
el.scrollTop = li.offsetTop
|
||||
}
|
||||
},
|
||||
handleArticleClick: function (article) {
|
||||
return function () {
|
||||
this.props.selectArticle(article)
|
||||
}.bind(this)
|
||||
},
|
||||
render: function () {
|
||||
var list = this.props.articles.map(function (article) {
|
||||
if (article == null) {
|
||||
return (
|
||||
<li className={isActive ? 'active' : ''}>
|
||||
<div className='articleItem'>Undefined</div>
|
||||
<div className='divider'/>
|
||||
</li>
|
||||
)
|
||||
}
|
||||
|
||||
var isActive = this.props.currentArticle != null && (article.type === this.props.currentArticle.type && article.id === this.props.currentArticle.id)
|
||||
if (article.type === 'code') {
|
||||
return (
|
||||
<li onClick={this.handleArticleClick(article)} className={isActive ? 'active' : ''}>
|
||||
<div className='articleItem'><i className='fa fa-code fa-fw'/> {article.description}</div>
|
||||
<div className='divider'/>
|
||||
</li>
|
||||
)
|
||||
}
|
||||
if (article.type === 'note') {
|
||||
return (
|
||||
<li onClick={this.handleArticleClick(article)} className={isActive ? 'active' : ''}>
|
||||
<div className='articleItem'><i className='fa fa-file-text-o fa-fw'/> {article.title}</div>
|
||||
<div className='divider'/>
|
||||
</li>
|
||||
)
|
||||
}
|
||||
return (
|
||||
<li className={isActive ? 'active' : ''}>
|
||||
<div className='articleItem'>Undefined</div>
|
||||
<div className='divider'/>
|
||||
</li>
|
||||
)
|
||||
}.bind(this))
|
||||
|
||||
return (
|
||||
<div className='FinderList'>
|
||||
<ul>
|
||||
{list}
|
||||
</ul>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
})
|
||||
34
browser/finder/FinderDetail.js
Normal file
34
browser/finder/FinderDetail.js
Normal file
@@ -0,0 +1,34 @@
|
||||
import React, { PropTypes } from 'react'
|
||||
import CodeEditor from 'boost/components/CodeEditor'
|
||||
import MarkdownPreview from 'boost/components/MarkdownPreview'
|
||||
import ModeIcon from 'boost/components/ModeIcon'
|
||||
|
||||
export default class FinderDetail extends React.Component {
|
||||
render () {
|
||||
let { activeArticle } = this.props
|
||||
|
||||
if (activeArticle != null) {
|
||||
return (
|
||||
<div className='FinderDetail'>
|
||||
<div className='header'>
|
||||
<ModeIcon mode={activeArticle.mode}/> {activeArticle.title}</div>
|
||||
<div className='content'>
|
||||
{activeArticle.mode === 'markdown'
|
||||
? <MarkdownPreview content={activeArticle.content}/>
|
||||
: <CodeEditor readOnly mode={activeArticle.mode} code={activeArticle.content}/>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
return (
|
||||
<div className='FinderDetail'>
|
||||
<div className='nothing'>Nothing selected</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
FinderDetail.propTypes = {
|
||||
activeArticle: PropTypes.shape()
|
||||
}
|
||||
16
browser/finder/FinderInput.js
Normal file
16
browser/finder/FinderInput.js
Normal file
@@ -0,0 +1,16 @@
|
||||
import React, { PropTypes } from 'react'
|
||||
|
||||
export default class FinderInput extends React.Component {
|
||||
render () {
|
||||
return (
|
||||
<div className='FinderInput'>
|
||||
<input ref='input' value={this.props.value} onChange={this.props.handleSearchChange} type='text'/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
FinderInput.propTypes = {
|
||||
handleSearchChange: PropTypes.func,
|
||||
value: PropTypes.string
|
||||
}
|
||||
71
browser/finder/FinderList.js
Normal file
71
browser/finder/FinderList.js
Normal file
@@ -0,0 +1,71 @@
|
||||
import React, { PropTypes } from 'react'
|
||||
import ReactDOM from 'react-dom'
|
||||
import ModeIcon from 'boost/components/ModeIcon'
|
||||
import { selectArticle } from './actions'
|
||||
|
||||
export default class FinderList extends React.Component {
|
||||
componentDidUpdate () {
|
||||
var index = this.props.articles.indexOf(this.props.activeArticle)
|
||||
var el = ReactDOM.findDOMNode(this)
|
||||
var li = el.querySelectorAll('li')[index]
|
||||
|
||||
if (li == null) {
|
||||
return
|
||||
}
|
||||
|
||||
var overflowBelow = el.clientHeight + el.scrollTop < li.offsetTop + li.clientHeight
|
||||
if (overflowBelow) {
|
||||
el.scrollTop = li.offsetTop + li.clientHeight - el.clientHeight
|
||||
}
|
||||
var overflowAbove = el.scrollTop > li.offsetTop
|
||||
if (overflowAbove) {
|
||||
el.scrollTop = li.offsetTop
|
||||
}
|
||||
}
|
||||
|
||||
handleArticleClick (article) {
|
||||
return (e) => {
|
||||
let { dispatch } = this.props
|
||||
dispatch(selectArticle(article.key))
|
||||
}
|
||||
}
|
||||
|
||||
render () {
|
||||
let articleElements = this.props.articles.map(function (article) {
|
||||
if (article == null) {
|
||||
return (
|
||||
<li className={isActive ? 'active' : ''}>
|
||||
<div className='articleItem'>Undefined</div>
|
||||
<div className='divider'/>
|
||||
</li>
|
||||
)
|
||||
}
|
||||
|
||||
var isActive = this.props.activeArticle != null && (article.key === this.props.activeArticle.key)
|
||||
return (
|
||||
<li key={'article-' + article.key} onClick={this.handleArticleClick(article)} className={isActive ? 'active' : ''}>
|
||||
<div className='articleItem'>
|
||||
<ModeIcon mode={article.mode}/> {article.title}</div>
|
||||
<div className='divider'/>
|
||||
</li>
|
||||
)
|
||||
}.bind(this))
|
||||
|
||||
return (
|
||||
<div className='FinderList'>
|
||||
<ul>
|
||||
{articleElements}
|
||||
</ul>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
FinderList.propTypes = {
|
||||
articles: PropTypes.array,
|
||||
activeArticle: PropTypes.shape({
|
||||
type: PropTypes.string,
|
||||
key: PropTypes.string
|
||||
}),
|
||||
dispatch: PropTypes.func
|
||||
}
|
||||
33
browser/finder/actions.js
Normal file
33
browser/finder/actions.js
Normal file
@@ -0,0 +1,33 @@
|
||||
export const SELECT_ARTICLE = 'SELECT_ARTICLE'
|
||||
export const SEARCH_ARTICLE = 'SEARCH_ARTICLE'
|
||||
export const REFRESH_DATA = 'REFRESH_DATA'
|
||||
|
||||
export function selectArticle (key) {
|
||||
return {
|
||||
type: SELECT_ARTICLE,
|
||||
data: { key }
|
||||
}
|
||||
}
|
||||
|
||||
export function searchArticle (input) {
|
||||
return {
|
||||
type: SEARCH_ARTICLE,
|
||||
data: { input }
|
||||
}
|
||||
}
|
||||
|
||||
export function refreshData () {
|
||||
console.log('refreshing data')
|
||||
let data = JSON.parse(localStorage.getItem('local'))
|
||||
if (data == null) return null
|
||||
|
||||
let { folders, articles } = data
|
||||
|
||||
return {
|
||||
type: REFRESH_DATA,
|
||||
data: {
|
||||
articles,
|
||||
folders
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -6,8 +6,11 @@
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
|
||||
|
||||
<link rel="stylesheet" href="../../node_modules/font-awesome/css/font-awesome.min.css" media="screen" title="no title" charset="utf-8">
|
||||
|
||||
<link rel="stylesheet" href="../../node_modules/font-awesome/css/font-awesome.min.css" media="screen" charset="utf-8">
|
||||
<link rel="stylesheet" href="../../node_modules/devicon/devicon.min.css">
|
||||
<link rel="shortcut icon" href="favicon.ico">
|
||||
|
||||
<style>
|
||||
@font-face {
|
||||
font-family: 'Lato';
|
||||
@@ -19,21 +22,23 @@
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
document.addEventListener('mousewheel', function(e) {
|
||||
if(e.deltaY % 1 !== 0) {
|
||||
e.preventDefault()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="content"></div>
|
||||
<script src="../ace/src-min/ace.js"></script>
|
||||
<script src="../../submodules/ace/src-min/ace.js"></script>
|
||||
<script>
|
||||
|
||||
require("babel-core/register")
|
||||
require('./index.jsx')
|
||||
document.addEventListener('mousewheel', function(e) {
|
||||
if(e.deltaY % 1 !== 0) {
|
||||
e.preventDefault()
|
||||
}
|
||||
})
|
||||
var scriptUrl = process.env.BOOST_ENV === 'development'
|
||||
? 'http://localhost:8080/assets/finder.js'
|
||||
: '../../compiled/finder.js'
|
||||
var scriptEl=document.createElement('script')
|
||||
scriptEl.setAttribute("type","text/javascript")
|
||||
scriptEl.setAttribute("src", scriptUrl)
|
||||
document.getElementsByTagName("head")[0].appendChild(scriptEl)
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
183
browser/finder/index.js
Normal file
183
browser/finder/index.js
Normal file
@@ -0,0 +1,183 @@
|
||||
import React, { PropTypes } from 'react'
|
||||
import ReactDOM from 'react-dom'
|
||||
import { connect, Provider } from 'react-redux'
|
||||
import reducer from './reducer'
|
||||
import { createStore } from 'redux'
|
||||
import FinderInput from './FinderInput'
|
||||
import FinderList from './FinderList'
|
||||
import FinderDetail from './FinderDetail'
|
||||
import { selectArticle, searchArticle, refreshData } from './actions'
|
||||
import _ from 'lodash'
|
||||
|
||||
import remote from 'remote'
|
||||
var hideFinder = remote.getGlobal('hideFinder')
|
||||
import clipboard from 'clipboard'
|
||||
|
||||
require('../styles/finder/index.styl')
|
||||
|
||||
const FOLDER_FILTER = 'FOLDER_FILTER'
|
||||
const TEXT_FILTER = 'TEXT_FILTER'
|
||||
const TAG_FILTER = 'TAG_FILTER'
|
||||
|
||||
class FinderMain extends React.Component {
|
||||
constructor (props) {
|
||||
super(props)
|
||||
}
|
||||
|
||||
componentDidMount () {
|
||||
ReactDOM.findDOMNode(this.refs.finderInput.refs.input).focus()
|
||||
}
|
||||
|
||||
handleClick (e) {
|
||||
ReactDOM.findDOMNode(this.refs.finderInput.refs.input).focus()
|
||||
}
|
||||
|
||||
handleKeyDown (e) {
|
||||
if (e.keyCode === 38) {
|
||||
this.selectPrevious()
|
||||
e.preventDefault()
|
||||
}
|
||||
|
||||
if (e.keyCode === 40) {
|
||||
this.selectNext()
|
||||
e.preventDefault()
|
||||
}
|
||||
|
||||
if (e.keyCode === 13) {
|
||||
let { activeArticle } = this.props
|
||||
clipboard.writeText(activeArticle.content)
|
||||
hideFinder()
|
||||
e.preventDefault()
|
||||
}
|
||||
if (e.keyCode === 27) {
|
||||
hideFinder()
|
||||
e.preventDefault()
|
||||
}
|
||||
}
|
||||
|
||||
handleSearchChange (e) {
|
||||
let { dispatch } = this.props
|
||||
|
||||
dispatch(searchArticle(e.target.value))
|
||||
}
|
||||
|
||||
selectArticle (article) {
|
||||
this.setState({currentArticle: article})
|
||||
}
|
||||
|
||||
selectPrevious () {
|
||||
let { activeArticle, dispatch } = this.props
|
||||
let index = this.refs.finderList.props.articles.indexOf(activeArticle)
|
||||
let previousArticle = this.refs.finderList.props.articles[index - 1]
|
||||
if (previousArticle != null) dispatch(selectArticle(previousArticle.key))
|
||||
}
|
||||
|
||||
selectNext () {
|
||||
let { activeArticle, dispatch } = this.props
|
||||
let index = this.refs.finderList.props.articles.indexOf(activeArticle)
|
||||
let previousArticle = this.refs.finderList.props.articles[index + 1]
|
||||
if (previousArticle != null) dispatch(selectArticle(previousArticle.key))
|
||||
}
|
||||
|
||||
render () {
|
||||
let { articles, activeArticle, status, dispatch } = this.props
|
||||
return (
|
||||
<div onClick={e => this.handleClick(e)} onKeyDown={e => this.handleKeyDown(e)} className='Finder'>
|
||||
<FinderInput
|
||||
handleSearchChange={e => this.handleSearchChange(e)}
|
||||
ref='finderInput'
|
||||
onChange={this.handleChange}
|
||||
value={status.search}
|
||||
/>
|
||||
<FinderList
|
||||
ref='finderList'
|
||||
activeArticle={activeArticle}
|
||||
articles={articles}
|
||||
dispatch={dispatch}
|
||||
selectArticle={article => this.selectArticle(article)}
|
||||
/>
|
||||
<FinderDetail activeArticle={activeArticle}/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
FinderMain.propTypes = {
|
||||
articles: PropTypes.array,
|
||||
activeArticle: PropTypes.shape({
|
||||
key: PropTypes.string,
|
||||
tags: PropTypes.array,
|
||||
title: PropTypes.string,
|
||||
content: PropTypes.string
|
||||
}),
|
||||
status: PropTypes.shape(),
|
||||
dispatch: PropTypes.func
|
||||
}
|
||||
|
||||
function remap (state) {
|
||||
let { articles, folders, status } = state
|
||||
|
||||
let filters = status.search.split(' ').map(key => key.trim()).filter(key => key.length > 0 && !key.match(/^#$/)).map(key => {
|
||||
if (key.match(/^in:.+$/)) {
|
||||
return {type: FOLDER_FILTER, value: key.match(/^in:(.+)$/)[1]}
|
||||
}
|
||||
if (key.match(/^#(.+)/)) {
|
||||
return {type: TAG_FILTER, value: key.match(/^#(.+)$/)[1]}
|
||||
}
|
||||
return {type: TEXT_FILTER, value: key}
|
||||
})
|
||||
let folderFilters = filters.filter(filter => filter.type === FOLDER_FILTER)
|
||||
let textFilters = filters.filter(filter => filter.type === TEXT_FILTER)
|
||||
let tagFilters = filters.filter(filter => filter.type === TAG_FILTER)
|
||||
|
||||
if (folders != null) {
|
||||
let targetFolders = folders.filter(folder => {
|
||||
return _.findWhere(folderFilters, {value: folder.name})
|
||||
})
|
||||
status.targetFolders = targetFolders
|
||||
|
||||
if (targetFolders.length > 0) {
|
||||
articles = articles.filter(article => {
|
||||
return _.findWhere(targetFolders, {key: article.FolderKey})
|
||||
})
|
||||
}
|
||||
|
||||
if (textFilters.length > 0) {
|
||||
articles = textFilters.reduce((articles, textFilter) => {
|
||||
return articles.filter(article => {
|
||||
return article.title.match(new RegExp(textFilter.value, 'i')) || article.content.match(new RegExp(textFilter.value, 'i'))
|
||||
})
|
||||
}, articles)
|
||||
}
|
||||
|
||||
if (tagFilters.length > 0) {
|
||||
articles = tagFilters.reduce((articles, tagFilter) => {
|
||||
return articles.filter(article => {
|
||||
return _.find(article.tags, tag => tag.match(new RegExp(tagFilter.value, 'i')))
|
||||
})
|
||||
}, articles)
|
||||
}
|
||||
}
|
||||
|
||||
let activeArticle = _.findWhere(articles, {key: status.articleKey})
|
||||
if (activeArticle == null) activeArticle = articles[0]
|
||||
|
||||
return {
|
||||
articles,
|
||||
activeArticle,
|
||||
status
|
||||
}
|
||||
}
|
||||
|
||||
var Finder = connect(remap)(FinderMain)
|
||||
var store = createStore(reducer)
|
||||
|
||||
window.onfocus = e => {
|
||||
store.dispatch(refreshData())
|
||||
}
|
||||
|
||||
ReactDOM.render((
|
||||
<Provider store={store}>
|
||||
<Finder/>
|
||||
</Provider>
|
||||
), document.getElementById('content'))
|
||||
@@ -1,135 +0,0 @@
|
||||
/* global localStorage */
|
||||
var remote = require('remote')
|
||||
var hideFinder = remote.getGlobal('hideFinder')
|
||||
var clipboard = require('clipboard')
|
||||
|
||||
var React = require('react')
|
||||
|
||||
var ArticleFilter = require('../main/Mixins/ArticleFilter')
|
||||
|
||||
var FinderInput = require('./Components/FinderInput')
|
||||
var FinderList = require('./Components/FinderList')
|
||||
var FinderDetail = require('./Components/FinderDetail')
|
||||
|
||||
// Filter end
|
||||
|
||||
function fetchArticles () {
|
||||
var user = JSON.parse(localStorage.getItem('currentUser'))
|
||||
if (user == null) {
|
||||
console.log('need to login')
|
||||
return []
|
||||
}
|
||||
|
||||
var articles = []
|
||||
user.Planets.forEach(function (planet) {
|
||||
var _planet = JSON.parse(localStorage.getItem('planet-' + planet.id))
|
||||
articles = articles.concat(_planet.Codes, _planet.Notes)
|
||||
})
|
||||
user.Teams.forEach(function (team) {
|
||||
team.Planets.forEach(function (planet) {
|
||||
var _planet = JSON.parse(localStorage.getItem('planet-' + planet.id))
|
||||
articles = articles.concat(_planet.Codes, _planet.Notes)
|
||||
})
|
||||
})
|
||||
|
||||
return articles
|
||||
}
|
||||
|
||||
var Finder = React.createClass({
|
||||
mixins: [ArticleFilter],
|
||||
getInitialState: function () {
|
||||
var articles = fetchArticles()
|
||||
return {
|
||||
articles: articles,
|
||||
currentArticle: articles[0],
|
||||
search: ''
|
||||
}
|
||||
},
|
||||
componentDidMount: function () {
|
||||
document.addEventListener('keydown', this.handleKeyDown)
|
||||
document.addEventListener('click', this.handleClick)
|
||||
window.addEventListener('focus', this.handleFinderFocus)
|
||||
this.handleFinderFocus()
|
||||
},
|
||||
componentWillUnmount: function () {
|
||||
document.removeEventListener('keydown', this.handleKeyDown)
|
||||
document.removeEventListener('click', this.handleClick)
|
||||
window.removeEventListener('focus', this.handleFinderFocus)
|
||||
},
|
||||
handleFinderFocus: function () {
|
||||
console.log('focusseeddddd')
|
||||
this.focusInput()
|
||||
var articles = fetchArticles()
|
||||
this.setState({
|
||||
articles: articles,
|
||||
search: ''
|
||||
}, function () {
|
||||
var firstArticle = this.refs.finderList.props.articles[0]
|
||||
if (firstArticle) {
|
||||
this.setState({
|
||||
currentArticle: firstArticle
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
handleKeyDown: function (e) {
|
||||
if (e.keyCode === 38) {
|
||||
this.selectPrevious()
|
||||
e.preventDefault()
|
||||
}
|
||||
|
||||
if (e.keyCode === 40) {
|
||||
this.selectNext()
|
||||
e.preventDefault()
|
||||
}
|
||||
|
||||
if (e.keyCode === 13) {
|
||||
var article = this.state.currentArticle
|
||||
clipboard.writeText(article.content)
|
||||
hideFinder()
|
||||
e.preventDefault()
|
||||
}
|
||||
if (e.keyCode === 27) {
|
||||
hideFinder()
|
||||
e.preventDefault()
|
||||
}
|
||||
},
|
||||
focusInput: function () {
|
||||
React.findDOMNode(this.refs.finderInput).querySelector('input').focus()
|
||||
},
|
||||
handleClick: function () {
|
||||
this.focusInput()
|
||||
},
|
||||
selectPrevious: function () {
|
||||
var index = this.refs.finderList.props.articles.indexOf(this.state.currentArticle)
|
||||
if (index > 0) {
|
||||
this.setState({currentArticle: this.refs.finderList.props.articles[index - 1]})
|
||||
}
|
||||
},
|
||||
selectNext: function () {
|
||||
var index = this.refs.finderList.props.articles.indexOf(this.state.currentArticle)
|
||||
if (index > -1 && index < this.refs.finderList.props.articles.length - 1) {
|
||||
this.setState({currentArticle: this.refs.finderList.props.articles[index + 1]})
|
||||
}
|
||||
},
|
||||
selectArticle: function (article) {
|
||||
this.setState({currentArticle: article})
|
||||
},
|
||||
handleChange: function (e) {
|
||||
this.setState({search: e.target.value}, function () {
|
||||
this.setState({currentArticle: this.refs.finderList.props.articles[0]})
|
||||
})
|
||||
},
|
||||
render: function () {
|
||||
var articles = this.searchArticle(this.state.search, this.state.articles)
|
||||
return (
|
||||
<div className='Finder'>
|
||||
<FinderInput ref='finderInput' onChange={this.handleChange} search={this.state.search}/>
|
||||
<FinderList ref='finderList' currentArticle={this.state.currentArticle} articles={articles} selectArticle={this.selectArticle}/>
|
||||
<FinderDetail currentArticle={this.state.currentArticle}/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
React.render(<Finder/>, document.getElementById('content'))
|
||||
49
browser/finder/reducer.js
Normal file
49
browser/finder/reducer.js
Normal file
@@ -0,0 +1,49 @@
|
||||
import { combineReducers } from 'redux'
|
||||
import { SELECT_ARTICLE, SEARCH_ARTICLE, REFRESH_DATA } from './actions'
|
||||
|
||||
let data = JSON.parse(localStorage.getItem('local'))
|
||||
|
||||
let initialArticles = data != null ? data.articles : []
|
||||
let initialFolders = data != null ? data.folders : []
|
||||
let initialStatus = {
|
||||
articleKey: null,
|
||||
search: ''
|
||||
}
|
||||
|
||||
function status (state = initialStatus, action) {
|
||||
switch (action.type) {
|
||||
case SELECT_ARTICLE:
|
||||
state.articleKey = action.data.key
|
||||
return state
|
||||
case SEARCH_ARTICLE:
|
||||
state.search = action.data.input
|
||||
return state
|
||||
default:
|
||||
return state
|
||||
}
|
||||
}
|
||||
|
||||
function articles (state = initialArticles, action) {
|
||||
switch (action.type) {
|
||||
case REFRESH_DATA:
|
||||
return action.data.articles
|
||||
default:
|
||||
return state
|
||||
}
|
||||
}
|
||||
|
||||
function folders (state = initialFolders, action) {
|
||||
switch (action.type) {
|
||||
case REFRESH_DATA:
|
||||
console.log(action)
|
||||
return action.data.folders
|
||||
default:
|
||||
return state
|
||||
}
|
||||
}
|
||||
|
||||
export default combineReducers({
|
||||
status,
|
||||
folders,
|
||||
articles
|
||||
})
|
||||
@@ -1,65 +1,43 @@
|
||||
import React, { PropTypes} from 'react'
|
||||
import { connect } from 'react-redux'
|
||||
import { CREATE_MODE, IDLE_MODE, switchUser, NEW, refreshArticles } from 'boost/actions'
|
||||
import UserNavigator from './HomePage/UserNavigator'
|
||||
import { CREATE_MODE, IDLE_MODE, NEW } from 'boost/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, findIndex, pick } from 'lodash'
|
||||
import _ from 'lodash'
|
||||
import keygen from 'boost/keygen'
|
||||
import api from 'boost/api'
|
||||
import auth from 'boost/auth'
|
||||
import io from 'boost/socket'
|
||||
|
||||
const TEXT_FILTER = 'TEXT_FILTER'
|
||||
const FOLDER_FILTER = 'FOLDER_FILTER'
|
||||
const TAG_FILTER = 'TAG_FILTER'
|
||||
|
||||
class HomePage extends React.Component {
|
||||
componentDidMount () {
|
||||
const { dispatch } = this.props
|
||||
|
||||
dispatch(switchUser(this.props.params.userId))
|
||||
|
||||
let currentUser = auth.user()
|
||||
|
||||
let users = currentUser.Teams != null ? [currentUser].concat(currentUser.Teams) : [currentUser]
|
||||
users.forEach(user => {
|
||||
api.fetchArticles(user.id)
|
||||
.then(res => {
|
||||
dispatch(refreshArticles(user.id, res.body))
|
||||
})
|
||||
.catch(err => {
|
||||
if (err.status == null) throw err
|
||||
console.error(err)
|
||||
})
|
||||
})
|
||||
|
||||
let token = auth.token()
|
||||
if (token != null) {
|
||||
io.emit('JOIN', {token})
|
||||
}
|
||||
}
|
||||
|
||||
componentWillReceiveProps (nextProps) {
|
||||
const { dispatch, status } = this.props
|
||||
|
||||
if (nextProps.params.userId !== status.userId) {
|
||||
dispatch(switchUser(nextProps.params.userId))
|
||||
}
|
||||
}
|
||||
|
||||
render () {
|
||||
const { dispatch, status, users, activeUser, articles, activeArticle } = this.props
|
||||
let { dispatch, status, articles, activeArticle, folders } = this.props
|
||||
|
||||
return (
|
||||
<div className='HomePage'>
|
||||
<UserNavigator users={users} />
|
||||
<ArticleNavigator dispatch={dispatch} activeUser={activeUser} status={status}/>
|
||||
<ArticleNavigator
|
||||
dispatch={dispatch}
|
||||
folders={folders}
|
||||
status={status}
|
||||
/>
|
||||
<ArticleTopBar dispatch={dispatch} status={status}/>
|
||||
<ArticleList dispatch={dispatch} articles={articles} status={status} activeArticle={activeArticle}/>
|
||||
<ArticleDetail dispatch={dispatch} activeUser={activeUser} activeArticle={activeArticle} status={status}/>
|
||||
<ArticleList
|
||||
dispatch={dispatch}
|
||||
folders={folders}
|
||||
articles={articles}
|
||||
status={status}
|
||||
activeArticle={activeArticle}
|
||||
/>
|
||||
<ArticleDetail
|
||||
dispatch={dispatch}
|
||||
activeArticle={activeArticle}
|
||||
folders={folders}
|
||||
status={status}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -67,17 +45,9 @@ class HomePage extends React.Component {
|
||||
|
||||
function remap (state) {
|
||||
let status = state.status
|
||||
|
||||
let currentUser = state.currentUser
|
||||
if (currentUser == null) return state
|
||||
let teams = Array.isArray(currentUser.Teams) ? currentUser.Teams : []
|
||||
|
||||
let users = [currentUser, ...teams]
|
||||
let activeUser = findWhere(users, {id: parseInt(status.userId, 10)})
|
||||
if (activeUser == null) activeUser = users[0]
|
||||
|
||||
// Fetch articles
|
||||
let articles = state.articles['team-' + activeUser.id]
|
||||
let data = JSON.parse(localStorage.getItem('local'))
|
||||
let { folders, articles } = data
|
||||
if (articles == null) articles = []
|
||||
articles.sort((a, b) => {
|
||||
return new Date(b.updatedAt) - new Date(a.updatedAt)
|
||||
@@ -97,17 +67,18 @@ function remap (state) {
|
||||
let textFilters = filters.filter(filter => filter.type === TEXT_FILTER)
|
||||
let tagFilters = filters.filter(filter => filter.type === TAG_FILTER)
|
||||
|
||||
if (activeUser.Folders != null) {
|
||||
let targetFolders = activeUser.Folders.filter(folder => {
|
||||
return findWhere(folderFilters, {value: folder.name})
|
||||
if (folders != null) {
|
||||
let targetFolders = folders.filter(folder => {
|
||||
return _.findWhere(folderFilters, {value: folder.name})
|
||||
})
|
||||
status.targetFolders = targetFolders
|
||||
|
||||
if (targetFolders.length > 0) {
|
||||
articles = articles.filter(article => {
|
||||
return findWhere(targetFolders, {id: article.FolderId})
|
||||
return _.findWhere(targetFolders, {key: article.FolderKey})
|
||||
})
|
||||
}
|
||||
|
||||
if (textFilters.length > 0) {
|
||||
articles = textFilters.reduce((articles, textFilter) => {
|
||||
return articles.filter(article => {
|
||||
@@ -119,19 +90,19 @@ function remap (state) {
|
||||
if (tagFilters.length > 0) {
|
||||
articles = tagFilters.reduce((articles, tagFilter) => {
|
||||
return articles.filter(article => {
|
||||
return _.find(article.Tags, tag => tag.name.match(new RegExp(tagFilter.value, 'i')))
|
||||
return _.find(article.tags, tag => tag.match(new RegExp(tagFilter.value, 'i')))
|
||||
})
|
||||
}, articles)
|
||||
}
|
||||
}
|
||||
|
||||
// Grab active article
|
||||
let activeArticle = findWhere(articles, {key: status.articleKey})
|
||||
let activeArticle = _.findWhere(articles, {key: status.articleKey})
|
||||
if (activeArticle == null) activeArticle = articles[0]
|
||||
|
||||
// remove Unsaved new article if user is not CREATE_MODE
|
||||
if (status.mode !== CREATE_MODE) {
|
||||
let targetIndex = findIndex(articles, article => article.status === NEW)
|
||||
let targetIndex = _.findIndex(articles, article => article.status === NEW)
|
||||
|
||||
if (targetIndex >= 0) articles.splice(targetIndex, 1)
|
||||
}
|
||||
@@ -140,8 +111,8 @@ function remap (state) {
|
||||
// restrict
|
||||
// 1. team have one folder at least
|
||||
// or Change IDLE MODE
|
||||
if (status.mode === CREATE_MODE && activeUser.Folders.length > 0) {
|
||||
var newArticle = findWhere(articles, {status: 'NEW'})
|
||||
if (status.mode === CREATE_MODE) {
|
||||
var newArticle = _.findWhere(articles, {status: 'NEW'})
|
||||
if (newArticle == null) {
|
||||
newArticle = {
|
||||
id: null,
|
||||
@@ -149,9 +120,8 @@ function remap (state) {
|
||||
title: '',
|
||||
content: '',
|
||||
mode: 'markdown',
|
||||
Tags: [],
|
||||
User: pick(currentUser, ['email', 'name', 'profileName']),
|
||||
FolderId: activeUser.Folders[0].id,
|
||||
tags: [],
|
||||
FolderKey: folders[0].key,
|
||||
status: NEW
|
||||
}
|
||||
articles.unshift(newArticle)
|
||||
@@ -162,8 +132,7 @@ function remap (state) {
|
||||
}
|
||||
|
||||
let props = {
|
||||
users,
|
||||
activeUser,
|
||||
folders,
|
||||
status,
|
||||
articles,
|
||||
activeArticle
|
||||
@@ -173,8 +142,6 @@ function remap (state) {
|
||||
}
|
||||
|
||||
HomePage.propTypes = {
|
||||
users: PropTypes.array,
|
||||
activeUser: PropTypes.object,
|
||||
params: PropTypes.shape({
|
||||
userId: PropTypes.string
|
||||
}),
|
||||
@@ -183,7 +150,8 @@ HomePage.propTypes = {
|
||||
}),
|
||||
articles: PropTypes.array,
|
||||
activeArticle: PropTypes.shape(),
|
||||
dispatch: PropTypes.func
|
||||
dispatch: PropTypes.func,
|
||||
folders: PropTypes.array
|
||||
}
|
||||
|
||||
export default connect(remap)(HomePage)
|
||||
|
||||
@@ -1,16 +1,16 @@
|
||||
import React, { PropTypes } from 'react'
|
||||
import moment from 'moment'
|
||||
import { findWhere, uniq } from 'lodash'
|
||||
import _ from 'lodash'
|
||||
import ModeIcon from 'boost/components/ModeIcon'
|
||||
import MarkdownPreview from 'boost/components/MarkdownPreview'
|
||||
import CodeEditor from 'boost/components/CodeEditor'
|
||||
import { UNSYNCED, IDLE_MODE, CREATE_MODE, EDIT_MODE, switchMode, switchArticle, updateArticle, destroyArticle } from 'boost/actions'
|
||||
import { IDLE_MODE, CREATE_MODE, EDIT_MODE, switchMode, updateArticle, destroyArticle } from 'boost/actions'
|
||||
import aceModes from 'boost/ace-modes'
|
||||
import Select from 'react-select'
|
||||
import linkState from 'boost/linkState'
|
||||
import api from 'boost/api'
|
||||
import FolderMark from 'boost/components/FolderMark'
|
||||
import TagLink from 'boost/components/TagLink'
|
||||
import TagSelect from 'boost/components/TagSelect'
|
||||
|
||||
var modeOptions = aceModes.map(function (mode) {
|
||||
return {
|
||||
@@ -20,9 +20,7 @@ var modeOptions = aceModes.map(function (mode) {
|
||||
})
|
||||
|
||||
function makeInstantArticle (article) {
|
||||
let instantArticle = Object.assign({}, article)
|
||||
instantArticle.Tags = Array.isArray(instantArticle.Tags) ? instantArticle.Tags.map(tag => tag.name) : []
|
||||
return instantArticle
|
||||
return Object.assign({}, article)
|
||||
}
|
||||
|
||||
export default class ArticleDetail extends React.Component {
|
||||
@@ -35,7 +33,7 @@ export default class ArticleDetail extends React.Component {
|
||||
}
|
||||
|
||||
componentWillReceiveProps (nextProps) {
|
||||
if (nextProps.activeArticle != null && nextProps.activeArticle.id !== this.state.article.id) {
|
||||
if (nextProps.activeArticle != null && (nextProps.activeArticle.key !== this.state.article.key) || (nextProps.status.mode !== this.props.status.mode)) {
|
||||
this.setState({article: makeInstantArticle(nextProps.activeArticle)}, function () {
|
||||
console.log('receive props')
|
||||
})
|
||||
@@ -44,8 +42,8 @@ export default class ArticleDetail extends React.Component {
|
||||
|
||||
renderEmpty () {
|
||||
return (
|
||||
<div className='ArticleDetail'>
|
||||
Empty article
|
||||
<div className='ArticleDetail empty'>
|
||||
Command(⌘) + Enter to create a new post
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -60,23 +58,9 @@ export default class ArticleDetail extends React.Component {
|
||||
}
|
||||
|
||||
handleDeleteConfirmButtonClick (e) {
|
||||
let { dispatch, activeUser, activeArticle } = this.props
|
||||
let { dispatch, activeArticle } = this.props
|
||||
|
||||
api.destroyArticle(activeArticle.id)
|
||||
.then(res => {
|
||||
console.log(res.body)
|
||||
})
|
||||
.catch(err => {
|
||||
// connect failed need to queue data
|
||||
if (err.code === 'ECONNREFUSED') {
|
||||
return
|
||||
}
|
||||
|
||||
if (err.status != null) throw err
|
||||
else console.log(err)
|
||||
})
|
||||
|
||||
dispatch(destroyArticle(activeUser.id, activeArticle.id))
|
||||
dispatch(destroyArticle(activeArticle.key))
|
||||
this.setState({openDeleteConfirmMenu: false})
|
||||
}
|
||||
|
||||
@@ -85,17 +69,16 @@ export default class ArticleDetail extends React.Component {
|
||||
}
|
||||
|
||||
renderIdle () {
|
||||
let { activeArticle, activeUser } = this.props
|
||||
let { activeArticle, folders } = this.props
|
||||
|
||||
let tags = activeArticle.Tags.length > 0
|
||||
? activeArticle.Tags.map(tag => {
|
||||
return (<TagLink key={tag.name} tag={tag}/>)
|
||||
let tags = activeArticle.tags != null ? activeArticle.tags.length > 0
|
||||
? activeArticle.tags.map(tag => {
|
||||
return (<TagLink key={tag} tag={tag}/>)
|
||||
})
|
||||
: (
|
||||
<span className='noTags'>Not tagged yet</span>
|
||||
)
|
||||
let folder = findWhere(activeUser.Folders, {id: activeArticle.FolderId})
|
||||
let folderName = folder != null ? folder.name : '(unknown)'
|
||||
) : null
|
||||
let folder = _.findWhere(folders, {key: activeArticle.FolderKey})
|
||||
|
||||
return (
|
||||
<div className='ArticleDetail idle'>
|
||||
@@ -117,8 +100,7 @@ export default class ArticleDetail extends React.Component {
|
||||
<div className='detailInfo'>
|
||||
<div className='left'>
|
||||
<div className='info'>
|
||||
<FolderMark id={folder.id}/> {folderName}
|
||||
by {activeArticle.User.profileName}
|
||||
<FolderMark color={folder.color}/> {folder.name}
|
||||
Created {moment(activeArticle.createdAt).format('YYYY/MM/DD')}
|
||||
Updated {moment(activeArticle.updatedAt).format('YYYY/MM/DD')}
|
||||
</div>
|
||||
@@ -127,7 +109,6 @@ export default class ArticleDetail extends React.Component {
|
||||
<div className='right'>
|
||||
<button onClick={e => this.handleEditButtonClick(e)}><i className='fa fa-fw fa-edit'/></button>
|
||||
<button onClick={e => this.handleDeleteButtonClick(e)}><i className='fa fa-fw fa-trash'/></button>
|
||||
<button><i className='fa fa-fw fa-share-alt'/></button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
@@ -141,7 +122,7 @@ export default class ArticleDetail extends React.Component {
|
||||
</div>
|
||||
{activeArticle.mode === 'markdown'
|
||||
? <MarkdownPreview content={activeArticle.content}/>
|
||||
: <CodeEditor readOnly onChange={this.handleContentChange} mode={activeArticle.mode} code={activeArticle.content}/>
|
||||
: <CodeEditor readOnly onChange={(e, value) => this.handleContentChange(e, value)} mode={activeArticle.mode} code={activeArticle.content}/>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
@@ -154,86 +135,30 @@ export default class ArticleDetail extends React.Component {
|
||||
}
|
||||
|
||||
handleSaveButtonClick (e) {
|
||||
let { activeArticle } = this.props
|
||||
|
||||
if (activeArticle.id == null) this.saveAsNew()
|
||||
else this.save()
|
||||
}
|
||||
|
||||
saveAsNew () {
|
||||
let { dispatch, activeUser } = this.props
|
||||
let article = this.state.article
|
||||
let newArticle = Object.assign({}, article)
|
||||
article.tags = article.Tags
|
||||
|
||||
api.createArticle(article)
|
||||
.then(res => {
|
||||
console.log('saved as new')
|
||||
console.log(res.body)
|
||||
})
|
||||
.catch(err => {
|
||||
// connect failed need to queue data
|
||||
if (err.code === 'ECONNREFUSED') {
|
||||
return
|
||||
}
|
||||
|
||||
if (err.status != null) throw err
|
||||
else console.log(err)
|
||||
})
|
||||
|
||||
newArticle.status = UNSYNCED
|
||||
newArticle.Tags = newArticle.Tags.map(tag => { return {name: tag} })
|
||||
|
||||
dispatch(updateArticle(activeUser.id, newArticle))
|
||||
dispatch(switchMode(IDLE_MODE))
|
||||
dispatch(switchArticle(article.id))
|
||||
}
|
||||
|
||||
save () {
|
||||
let { dispatch, activeUser } = this.props
|
||||
let { dispatch, folders } = this.props
|
||||
let article = this.state.article
|
||||
let newArticle = Object.assign({}, article)
|
||||
|
||||
article.tags = article.Tags
|
||||
let folder = _.findWhere(folders, {key: article.FolderKey})
|
||||
if (folder == null) return false
|
||||
|
||||
api.saveArticle(article)
|
||||
.then(res => {
|
||||
console.log('saved')
|
||||
console.log(res.body)
|
||||
})
|
||||
.catch(err => {
|
||||
// connect failed need to queue data
|
||||
if (err.code === 'ECONNREFUSED') {
|
||||
return
|
||||
}
|
||||
delete newArticle.status
|
||||
newArticle.updatedAt = new Date()
|
||||
|
||||
if (err.status != null) throw err
|
||||
else console.log(err)
|
||||
})
|
||||
|
||||
newArticle.status = UNSYNCED
|
||||
newArticle.Tags = newArticle.Tags.map(tag => { return {name: tag} })
|
||||
|
||||
dispatch(updateArticle(activeUser.id, newArticle))
|
||||
dispatch(updateArticle(newArticle))
|
||||
dispatch(switchMode(IDLE_MODE))
|
||||
dispatch(switchArticle(article.id))
|
||||
}
|
||||
|
||||
handleFolderIdChange (value) {
|
||||
handleFolderKeyChange (e) {
|
||||
let article = this.state.article
|
||||
article.FolderId = value
|
||||
article.FolderKey = e.target.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
|
||||
})
|
||||
handleTagsChange (newTag, tags) {
|
||||
let article = this.state.article
|
||||
article.tags = tags
|
||||
|
||||
this.setState({article: article})
|
||||
}
|
||||
@@ -251,21 +176,31 @@ export default class ArticleDetail extends React.Component {
|
||||
}
|
||||
|
||||
renderEdit () {
|
||||
let { activeUser } = this.props
|
||||
let { folders } = this.props
|
||||
|
||||
let folderOptions = activeUser.Folders.map(folder => {
|
||||
return {
|
||||
label: folder.name,
|
||||
value: folder.id
|
||||
}
|
||||
let folderOptions = folders.map(folder => {
|
||||
return (
|
||||
<option key={folder.key} value={folder.key}>{folder.name}</option>
|
||||
)
|
||||
})
|
||||
console.log('edit rendered')
|
||||
|
||||
return (
|
||||
<div className='ArticleDetail edit'>
|
||||
<div className='detailInfo'>
|
||||
<div className='left'>
|
||||
<Select ref='folder' onChange={value => this.handleFolderIdChange(value)} clearable={false} placeholder='select folder...' options={folderOptions} value={this.state.article.FolderId} className='folder'/>
|
||||
<Select onChange={(tag, tags) => this.handleTagsChange(tag, tags)} clearable={false} multi placeholder='add some tags...' allowCreate value={this.state.article.Tags} className='tags'/>
|
||||
<select
|
||||
className='folder'
|
||||
value={this.state.article.FolderKey}
|
||||
onChange={e => this.handleFolderKeyChange(e)}
|
||||
>
|
||||
{folderOptions}
|
||||
</select>
|
||||
|
||||
<TagSelect
|
||||
tags={this.state.article.tags}
|
||||
onChange={(tags, tag) => this.handleTagsChange(tags, tag)}
|
||||
/>
|
||||
</div>
|
||||
<div className='right'>
|
||||
<button onClick={e => this.handleCancelButtonClick(e)}>Cancel</button>
|
||||
@@ -278,9 +213,22 @@ export default class ArticleDetail extends React.Component {
|
||||
<div className='title'>
|
||||
<input placeholder='Title' ref='title' valueLink={this.linkState('article.title')}/>
|
||||
</div>
|
||||
<Select ref='mode' onChange={value => this.handleModeChange(value)} clearable={false} options={modeOptions}placeholder='select mode...' value={this.state.article.mode} className='mode'/>
|
||||
<Select
|
||||
ref='mode'
|
||||
onChange={value => this.handleModeChange(value)}
|
||||
clearable={false}
|
||||
options={modeOptions}
|
||||
placeholder='select mode...'
|
||||
value={this.state.article.mode}
|
||||
className='mode'
|
||||
/>
|
||||
</div>
|
||||
<CodeEditor onChange={(e, value) => this.handleContentChange(e, value)} mode={this.state.article.mode} code={this.state.article.content}/>
|
||||
<CodeEditor
|
||||
onChange={(e, value) => this.handleContentChange(e, value)}
|
||||
readOnly={false}
|
||||
mode={this.state.article.mode}
|
||||
code={this.state.article.content}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,42 +1,54 @@
|
||||
import React, { PropTypes } from 'react'
|
||||
import ProfileImage from 'boost/components/ProfileImage'
|
||||
import ModeIcon from 'boost/components/ModeIcon'
|
||||
import moment from 'moment'
|
||||
import { switchArticle, NEW } from 'boost/actions'
|
||||
import FolderMark from 'boost/components/FolderMark'
|
||||
import TagLink from 'boost/components/TagLink'
|
||||
import _ from 'lodash'
|
||||
|
||||
export default class ArticleList extends React.Component {
|
||||
handleArticleClick (key) {
|
||||
componentDidMount () {
|
||||
this.refreshTimer = setInterval(() => this.forceUpdate(), 60 * 1000)
|
||||
}
|
||||
|
||||
componentWillUnmount () {
|
||||
clearInterval(this.refreshTimer)
|
||||
}
|
||||
|
||||
handleArticleClick (article) {
|
||||
let { dispatch } = this.props
|
||||
return function (e) {
|
||||
dispatch(switchArticle(key))
|
||||
if (article.status === NEW) return null
|
||||
dispatch(switchArticle(article.key))
|
||||
}
|
||||
}
|
||||
|
||||
render () {
|
||||
let { articles, activeArticle } = this.props
|
||||
let { articles, activeArticle, folders } = this.props
|
||||
|
||||
let articlesEl = articles.map(article => {
|
||||
let tags = Array.isArray(article.Tags) && article.Tags.length > 0
|
||||
? article.Tags.map(tag => {
|
||||
return (<TagLink key={tag.name} tag={tag}/>)
|
||||
let articleElements = articles.map(article => {
|
||||
let tagElements = Array.isArray(article.tags) && article.tags.length > 0
|
||||
? article.tags.map(tag => {
|
||||
return (<TagLink key={tag} tag={tag}/>)
|
||||
})
|
||||
: (<span>Not tagged yet</span>)
|
||||
let folder = _.findWhere(folders, {key: article.FolderKey})
|
||||
|
||||
return (
|
||||
<div key={'article-' + article.key}>
|
||||
<div onClick={e => this.handleArticleClick(article.key)(e)} className={'articleItem' + (activeArticle.key === article.key ? ' active' : '')}>
|
||||
<div onClick={e => this.handleArticleClick(article)(e)} className={'articleItem' + (activeArticle.key === article.key ? ' active' : '')}>
|
||||
<div className='top'>
|
||||
<FolderMark id={article.FolderId}/>
|
||||
by <ProfileImage className='profileImage' size='20' email={article.User.email}/> {article.User.profileName}
|
||||
{folder != null
|
||||
? <span><FolderMark color={folder.color}/>{folder.name}</span>
|
||||
: <span><FolderMark color={-1}/>Unknown</span>
|
||||
}
|
||||
<span className='updatedAt'>{article.status != null ? article.status : moment(article.updatedAt).fromNow()}</span>
|
||||
</div>
|
||||
<div className='middle'>
|
||||
<ModeIcon className='mode' mode={article.mode}/> <div className='title'>{article.status !== NEW ? article.title : '(New article)'}</div>
|
||||
</div>
|
||||
<div className='bottom'>
|
||||
<div className='tags'><i className='fa fa-fw fa-tags'/>{tags}</div>
|
||||
<div className='tags'><i className='fa fa-fw fa-tags'/>{tagElements}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='divider'></div>
|
||||
@@ -46,13 +58,14 @@ export default class ArticleList extends React.Component {
|
||||
|
||||
return (
|
||||
<div className='ArticleList'>
|
||||
{articlesEl}
|
||||
{articleElements}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
ArticleList.propTypes = {
|
||||
folders: PropTypes.array,
|
||||
articles: PropTypes.array,
|
||||
activeArticle: PropTypes.shape(),
|
||||
dispatch: PropTypes.func
|
||||
|
||||
@@ -36,38 +36,25 @@ export default class ArticleNavigator extends React.Component {
|
||||
}
|
||||
|
||||
render () {
|
||||
let { activeUser, status } = this.props
|
||||
if (activeUser == null) return (<div className='ArticleNavigator'/>)
|
||||
let { status, folders } = this.props
|
||||
let { targetFolders } = status
|
||||
if (targetFolders == null) targetFolders = []
|
||||
|
||||
let folders = activeUser.Folders != null
|
||||
? activeUser.Folders.map((folder, index) => {
|
||||
let isActive = findWhere(targetFolders, {id: folder.id})
|
||||
let folderElememts = folders.map((folder, index) => {
|
||||
let isActive = findWhere(targetFolders, {key: folder.key})
|
||||
|
||||
return (
|
||||
<button onClick={e => this.handleFolderButtonClick(folder.name)(e)} key={'folder-' + folder.id} className={isActive ? 'active' : ''}>
|
||||
<FolderMark id={folder.id}/> {folder.name} {folder.public ? null : <i className='fa fa-fw fa-lock'/>}</button>
|
||||
)
|
||||
})
|
||||
: []
|
||||
|
||||
let members = Array.isArray(activeUser.Members) ? activeUser.Members.sort((a, b) => {
|
||||
return new Date(a._pivot_createdAt) - new Date(b._pivot_createdAt)
|
||||
}).map(member => {
|
||||
return (
|
||||
<div key={'member-' + member.id}>
|
||||
<ProfileImage className='memberImage' email={member.email} size='22'/>
|
||||
<div className='memberProfileName'>{member.profileName}</div>
|
||||
</div>
|
||||
<button onClick={e => this.handleFolderButtonClick(folder.name)(e)} key={'folder-' + folder.key} className={isActive ? 'active' : ''}>
|
||||
<FolderMark color={folder.color}/> {folder.name}
|
||||
</button>
|
||||
)
|
||||
}) : null
|
||||
})
|
||||
|
||||
return (
|
||||
<div className='ArticleNavigator'>
|
||||
<div className='userInfo'>
|
||||
<div className='userProfileName'>{activeUser.profileName}</div>
|
||||
<div className='userName'>{activeUser.name}</div>
|
||||
<div className='userProfileName'>{process.env.USER}</div>
|
||||
<div className='userName'>local</div>
|
||||
<button onClick={e => this.handlePreferencesButtonClick(e)} className='settingBtn'><i className='fa fa-fw fa-chevron-down'/></button>
|
||||
</div>
|
||||
|
||||
@@ -82,22 +69,9 @@ export default class ArticleNavigator extends React.Component {
|
||||
</div>
|
||||
<div className='folderList'>
|
||||
<button onClick={e => this.handleAllFoldersButtonClick(e)} className={targetFolders.length === 0 ? 'active' : ''}>All folders</button>
|
||||
{folders}
|
||||
{folderElememts}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{activeUser.userType === 'team' ? (
|
||||
<div className='members'>
|
||||
<div className='header'>
|
||||
<div className='title'>Members</div>
|
||||
<button className='addBtn'><i className='fa fa-fw fa-plus'/></button>
|
||||
</div>
|
||||
<div className='memberList'>
|
||||
{members}
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -105,6 +79,7 @@ export default class ArticleNavigator extends React.Component {
|
||||
|
||||
ArticleNavigator.propTypes = {
|
||||
activeUser: PropTypes.object,
|
||||
folders: PropTypes.array,
|
||||
status: PropTypes.shape({
|
||||
folderId: PropTypes.number
|
||||
}),
|
||||
|
||||
@@ -17,11 +17,9 @@ export default class ArticleTopBar extends React.Component {
|
||||
<i className='fa fa-search fa-fw' />
|
||||
<input value={this.props.status.search} onChange={e => this.handleSearchChange(e)} placeholder='Search' type='text'/>
|
||||
</div>
|
||||
<button className='refreshBtn'><i className='fa fa-fw fa-refresh'/></button>
|
||||
</div>
|
||||
<div className='right'>
|
||||
<button>?</button>
|
||||
<button>i</button>
|
||||
<ExternalLink className='logo' href='http://b00st.io'>
|
||||
<img src='../../resources/favicon-230x230.png' width='44' height='44'/>
|
||||
</ExternalLink>
|
||||
|
||||
0
browser/main/HomePage/untitled
Normal file
0
browser/main/HomePage/untitled
Normal file
@@ -6,7 +6,6 @@
|
||||
|
||||
<link rel="stylesheet" href="../../node_modules/font-awesome/css/font-awesome.min.css" media="screen" charset="utf-8">
|
||||
<link rel="stylesheet" href="../../node_modules/devicon/devicon.min.css">
|
||||
<!-- <link rel="stylesheet" href="../styles/main/index.css" media="screen" charset="utf-8"> -->
|
||||
<link rel="shortcut icon" href="favicon.ico">
|
||||
|
||||
<style>
|
||||
@@ -53,7 +52,7 @@
|
||||
<div id="content"></div>
|
||||
|
||||
<script src="../../submodules/ace/src-min/ace.js"></script>
|
||||
<script>
|
||||
<script type='text/javascript'>
|
||||
var version = require('remote').require('app').getVersion()
|
||||
document.title = 'Boost' + ((version == null || version.length === 0) ? ' DEV' : '')
|
||||
document.addEventListener('mousewheel', function(e) {
|
||||
@@ -62,7 +61,7 @@
|
||||
}
|
||||
})
|
||||
var scriptUrl = process.env.BOOST_ENV === 'development'
|
||||
? 'http://localhost:8080/assets/bundle.js'
|
||||
? 'http://localhost:8080/assets/main.js'
|
||||
: '../../compiled/main.js'
|
||||
var scriptEl=document.createElement('script')
|
||||
scriptEl.setAttribute("type","text/javascript")
|
||||
|
||||
@@ -1,29 +1,23 @@
|
||||
import React from 'react'
|
||||
import { Provider } from 'react-redux'
|
||||
import { updateUser } from 'boost/actions'
|
||||
import { fetchCurrentUser } from 'boost/api'
|
||||
// import { updateUser } from 'boost/actions'
|
||||
import { Router, Route, IndexRoute } from 'react-router'
|
||||
import MainPage from './MainPage'
|
||||
import LoginPage from './LoginPage'
|
||||
import SignupPage from './SignupPage'
|
||||
import HomePage from './HomePage'
|
||||
import auth from 'boost/auth'
|
||||
import store, { devToolElement } from 'boost/store'
|
||||
// import auth from 'boost/auth'
|
||||
import store from 'boost/store'
|
||||
let ReactDOM = require('react-dom')
|
||||
require('../styles/main/index.styl')
|
||||
|
||||
function onlyUser (state, replaceState) {
|
||||
let currentUser = auth.user()
|
||||
if (currentUser == null) return replaceState('login', '/login')
|
||||
if (state.location.pathname === '/') return replaceState('user', '/users/' + currentUser.id)
|
||||
// let currentUser = auth.user()
|
||||
// if (currentUser == null) return replaceState('login', '/login')
|
||||
// if (state.location.pathname === '/') return replaceState('user', '/users/' + currentUser.id)
|
||||
}
|
||||
|
||||
let routes = (
|
||||
<Route path='/' component={MainPage}>
|
||||
<Route name='login' path='login' component={LoginPage}/>
|
||||
<Route name='signup' path='signup' component={SignupPage}/>
|
||||
<IndexRoute name='home' component={HomePage} onEnter={onlyUser}/>
|
||||
<Route name='user' path='/users/:userId' component={HomePage} onEnter={onlyUser}/>
|
||||
<IndexRoute name='home' component={HomePage}/>
|
||||
</Route>
|
||||
)
|
||||
|
||||
@@ -34,26 +28,25 @@ ReactDOM.render((
|
||||
<Provider store={store}>
|
||||
<Router>{routes}</Router>
|
||||
</Provider>
|
||||
{devToolElement}
|
||||
</div>
|
||||
), el, function () {
|
||||
let loadingCover = document.getElementById('loadingCover')
|
||||
loadingCover.parentNode.removeChild(loadingCover)
|
||||
|
||||
// Refresh user information
|
||||
if (auth.user() != null) {
|
||||
fetchCurrentUser()
|
||||
.then(function (res) {
|
||||
let user = res.body
|
||||
store.dispatch(updateUser(user))
|
||||
})
|
||||
.catch(function (err) {
|
||||
if (err.status === 401) {
|
||||
auth.clear()
|
||||
if (window != null) window.location.reload()
|
||||
}
|
||||
console.error(err.message)
|
||||
console.log('Fetch failed')
|
||||
})
|
||||
}
|
||||
// if (auth.user() != null) {
|
||||
// fetchCurrentUser()
|
||||
// .then(function (res) {
|
||||
// let user = res.body
|
||||
// store.dispatch(updateUser(user))
|
||||
// })
|
||||
// .catch(function (err) {
|
||||
// if (err.status === 401) {
|
||||
// auth.clear()
|
||||
// if (window != null) window.location.reload()
|
||||
// }
|
||||
// console.error(err.message)
|
||||
// console.log('Fetch failed')
|
||||
// })
|
||||
// }
|
||||
})
|
||||
|
||||
@@ -4,22 +4,27 @@
|
||||
global-reset()
|
||||
@import '../shared/*'
|
||||
|
||||
iptBgColor = #E6E6E6
|
||||
iptFocusBorderColor = #369DCD
|
||||
|
||||
body
|
||||
font-family "Lato"
|
||||
color textColor
|
||||
font-size fontSize
|
||||
width 100%
|
||||
height 100%
|
||||
overflow hidden
|
||||
|
||||
.Finder
|
||||
absolute top bottom left right
|
||||
.FinderInput
|
||||
position absolute
|
||||
top 11px
|
||||
left 11px
|
||||
right 11px
|
||||
padding 11px
|
||||
margin 0 auto
|
||||
height 44px
|
||||
height 55px
|
||||
box-sizing border-box
|
||||
border-bottom solid 1px borderColor
|
||||
background-color iptBgColor
|
||||
z-index 200
|
||||
input
|
||||
display block
|
||||
width 100%
|
||||
@@ -29,9 +34,9 @@ body
|
||||
height 33px
|
||||
border-radius 5px
|
||||
box-sizing border-box
|
||||
border-radius 16.5px
|
||||
border-radius 5px
|
||||
&:focus, &.focus
|
||||
border-color brandBorderColor
|
||||
border-color iptFocusBorderColor
|
||||
outline none
|
||||
.FinderList
|
||||
absolute left bottom
|
||||
@@ -40,6 +45,7 @@ body
|
||||
box-sizing border-box
|
||||
width 250px
|
||||
overflow-y auto
|
||||
z-index 0
|
||||
&>ul>li
|
||||
.articleItem
|
||||
padding 10px
|
||||
@@ -60,25 +66,29 @@ body
|
||||
absolute right bottom
|
||||
top 55px
|
||||
left 250px
|
||||
box-shadow 0px 0px 10px 0 #CCC
|
||||
z-index 100
|
||||
.header
|
||||
absolute top left right
|
||||
height 44px
|
||||
height 55px
|
||||
box-sizing border-box
|
||||
padding 0 10px
|
||||
border-bottom solid 1px borderColor
|
||||
line-height 44px
|
||||
font-size 1.3em
|
||||
line-height 55px
|
||||
font-size 18px
|
||||
white-space nowrap
|
||||
text-overflow ellipsis
|
||||
overflow-x hidden
|
||||
.content
|
||||
.ace_editor, .marked
|
||||
position absolute
|
||||
top 49px
|
||||
left 5px
|
||||
right 5px
|
||||
bottom 5px
|
||||
box-sizing border-box
|
||||
.marked
|
||||
position absolute
|
||||
top 55px
|
||||
padding 10px
|
||||
bottom 0
|
||||
left 0
|
||||
right 0
|
||||
box-sizing border-box
|
||||
overflow-y auto
|
||||
.MarkdownPreview
|
||||
marked()
|
||||
overflow-y auto
|
||||
.CodeEditor
|
||||
absolute top bottom left right
|
||||
|
||||
@@ -1,9 +1,10 @@
|
||||
noTagsColor = #999
|
||||
iptFocusBorderColor = #369DCD
|
||||
|
||||
.ArticleDetail
|
||||
absolute right bottom
|
||||
top 60px
|
||||
left 510px
|
||||
left 450px
|
||||
padding 10px
|
||||
background-color #E6E6E6
|
||||
border-top 1px solid borderColor
|
||||
@@ -79,25 +80,52 @@ noTagsColor = #999
|
||||
&.edit
|
||||
.detailInfo
|
||||
.left
|
||||
.Select
|
||||
.Select-control
|
||||
border none
|
||||
background-color transparent
|
||||
.folder.Select
|
||||
.folder
|
||||
border none
|
||||
width 150px
|
||||
.Select-control
|
||||
&:hover
|
||||
background-color darken(white, 5%)
|
||||
&.is-focused
|
||||
.Select-control
|
||||
background-color white
|
||||
.tags.Select
|
||||
.Select-control
|
||||
white-space nowrap
|
||||
overflow-x auto
|
||||
position relative
|
||||
.Select-arrow-zone, .Select-arrow
|
||||
display none
|
||||
height 27px
|
||||
outline none
|
||||
background-color darken(white, 5%)
|
||||
&:hover
|
||||
background-color white
|
||||
.TagSelect
|
||||
white-space nowrap
|
||||
overflow-x auto
|
||||
position relative
|
||||
margin-top 5px
|
||||
noSelect()
|
||||
.tagItem
|
||||
background-color brandColor
|
||||
border-radius 2px
|
||||
color white
|
||||
margin 0 2px
|
||||
padding 0
|
||||
button.tagRemoveBtn
|
||||
color white
|
||||
border-radius 2px
|
||||
border none
|
||||
background-color transparent
|
||||
padding 4px 2px
|
||||
border-right 1px solid #E6E6E6
|
||||
font-size 8px
|
||||
line-height 12px
|
||||
transition 0.1s
|
||||
&:hover
|
||||
background-color lighten(brandColor, 10%)
|
||||
.tagLabel
|
||||
padding 4px 4px
|
||||
font-size 12px
|
||||
line-height 12px
|
||||
input.tagInput
|
||||
background-color white
|
||||
outline none
|
||||
border-radius 2px
|
||||
border 1px solid borderColor
|
||||
transition 0.1s
|
||||
&:focus
|
||||
border-color iptFocusBorderColor
|
||||
|
||||
|
||||
.right
|
||||
button
|
||||
cursor pointer
|
||||
|
||||
@@ -4,7 +4,7 @@ articleItemColor = #777
|
||||
.ArticleList
|
||||
absolute bottom
|
||||
top 60px
|
||||
left 260px
|
||||
left 200px
|
||||
width 250px
|
||||
border-top 1px solid borderColor
|
||||
border-right 1px solid borderColor
|
||||
|
||||
@@ -2,8 +2,7 @@ articleNavBgColor = #353535
|
||||
|
||||
.ArticleNavigator
|
||||
background-color articleNavBgColor
|
||||
absolute top bottom
|
||||
left 60px
|
||||
absolute top bottom left
|
||||
width 200px
|
||||
border-right 1px solid borderColor
|
||||
color white
|
||||
|
||||
@@ -11,7 +11,7 @@ infoBtnActiveBgColor = #3A3A3A
|
||||
|
||||
.ArticleTopBar
|
||||
absolute top right
|
||||
left 260px
|
||||
left 200px
|
||||
height 60px
|
||||
background-color bgColor
|
||||
&>.left
|
||||
@@ -79,8 +79,6 @@ infoBtnActiveBgColor = #3A3A3A
|
||||
border-radius 11px
|
||||
border none
|
||||
transition 0.1s
|
||||
&:nth-child(1)
|
||||
right 109px
|
||||
&:hover
|
||||
background-color infoBtnActiveBgColor
|
||||
|
||||
|
||||
@@ -1,4 +1,7 @@
|
||||
marked()
|
||||
h1, h2, h3, h4, h5, h6, p
|
||||
&:first-child
|
||||
margin-top 0
|
||||
hr
|
||||
border-top none
|
||||
border-bottom solid 1px borderColor
|
||||
|
||||
Reference in New Issue
Block a user