mirror of
https://github.com/BoostIo/Boostnote
synced 2025-12-13 17:56:25 +00:00
Going LIte
This commit is contained in:
Rokt33r
@@ -1,7 +1,8 @@
|
||||
var BrowserWindow = require('browser-window')
|
||||
var path = require('path')
|
||||
|
||||
var finderWindow = new BrowserWindow({
|
||||
width: 600,
|
||||
width: 640,
|
||||
height: 400,
|
||||
show: false,
|
||||
frame: false,
|
||||
@@ -15,7 +16,9 @@ var finderWindow = new BrowserWindow({
|
||||
'standard-window': false
|
||||
})
|
||||
|
||||
finderWindow.loadUrl('file://' + __dirname + '/browser/finder/index.html')
|
||||
var url = path.resolve(__dirname, '../browser/finder/index.html')
|
||||
|
||||
finderWindow.loadUrl('file://' + url)
|
||||
|
||||
finderWindow.on('blur', function () {
|
||||
finderWindow.hide()
|
||||
|
||||
@@ -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>
|
||||
</head>
|
||||
<body>
|
||||
<div id="content"></div>
|
||||
<script src="../../submodules/ace/src-min/ace.js"></script>
|
||||
<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>
|
||||
|
||||
require("babel-core/register")
|
||||
require('./index.jsx')
|
||||
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>
|
||||
<button onClick={e => this.handleFolderButtonClick(folder.name)(e)} key={'folder-' + folder.key} className={isActive ? 'active' : ''}>
|
||||
<FolderMark color={folder.color}/> {folder.name}
|
||||
</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>
|
||||
)
|
||||
}) : 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
|
||||
top 55px
|
||||
padding 10px
|
||||
bottom 0
|
||||
left 0
|
||||
right 0
|
||||
box-sizing border-box
|
||||
.marked
|
||||
marked()
|
||||
overflow-y auto
|
||||
.MarkdownPreview
|
||||
marked()
|
||||
.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
|
||||
.folder
|
||||
border none
|
||||
background-color transparent
|
||||
.folder.Select
|
||||
width 150px
|
||||
.Select-control
|
||||
&:hover
|
||||
height 27px
|
||||
outline none
|
||||
background-color darken(white, 5%)
|
||||
&.is-focused
|
||||
.Select-control
|
||||
&:hover
|
||||
background-color white
|
||||
.tags.Select
|
||||
.Select-control
|
||||
.TagSelect
|
||||
white-space nowrap
|
||||
overflow-x auto
|
||||
position relative
|
||||
.Select-arrow-zone, .Select-arrow
|
||||
display none
|
||||
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
|
||||
|
||||
@@ -1,11 +1,9 @@
|
||||
// Action types
|
||||
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_CREATE = 'FOLDER_CREATE'
|
||||
export const FOLDER_DESTROY = 'FOLDER_DESTROY'
|
||||
|
||||
export const SWITCH_USER = 'SWITCH_USER'
|
||||
export const SWITCH_FOLDER = 'SWITCH_FOLDER'
|
||||
export const SWITCH_MODE = 'SWITCH_MODE'
|
||||
export const SWITCH_ARTICLE = 'SWITCH_ARTICLE'
|
||||
@@ -23,46 +21,31 @@ export const SYNCING = 'SYNCING'
|
||||
export const UNSYNCED = 'UNSYNCED'
|
||||
|
||||
// DB
|
||||
export function updateUser (user) {
|
||||
return {
|
||||
type: USER_UPDATE,
|
||||
data: { user }
|
||||
}
|
||||
}
|
||||
|
||||
export function refreshArticles (userId, articles) {
|
||||
return {
|
||||
type: ARTICLE_REFRESH,
|
||||
data: { userId, articles }
|
||||
}
|
||||
}
|
||||
|
||||
export function updateArticle (userId, article) {
|
||||
export function updateArticle (article) {
|
||||
return {
|
||||
type: ARTICLE_UPDATE,
|
||||
data: { userId, article }
|
||||
data: { article }
|
||||
}
|
||||
}
|
||||
|
||||
export function destroyArticle (userId, articleKey) {
|
||||
export function destroyArticle (articleKey) {
|
||||
return {
|
||||
type: ARTICLE_DESTROY,
|
||||
data: { userId, articleKey }
|
||||
data: { articleKey }
|
||||
}
|
||||
}
|
||||
|
||||
export function destroyFolder (userId, folderId) {
|
||||
export function createFolder (folder) {
|
||||
return {
|
||||
type: FOLDER_CREATE,
|
||||
data: { folder }
|
||||
}
|
||||
}
|
||||
|
||||
export function destroyFolder (key) {
|
||||
return {
|
||||
type: FOLDER_DESTROY,
|
||||
data: { userId, folderId }
|
||||
}
|
||||
}
|
||||
|
||||
// Nav
|
||||
export function switchUser (userId) {
|
||||
return {
|
||||
type: SWITCH_USER,
|
||||
data: userId
|
||||
data: { key }
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import React from 'react'
|
||||
let ReactDOM = require('react-dom')
|
||||
import ReactDOM from 'react-dom'
|
||||
var ace = window.ace
|
||||
|
||||
module.exports = React.createClass({
|
||||
@@ -15,17 +15,21 @@ module.exports = React.createClass({
|
||||
readOnly: false
|
||||
}
|
||||
},
|
||||
componentWillReceiveProps: function (nextProps) {
|
||||
if (nextProps.readOnly !== this.props.readOnly) {
|
||||
this.editor.setReadOnly(!!nextProps.readOnly)
|
||||
}
|
||||
},
|
||||
componentDidMount: function () {
|
||||
var el = ReactDOM.findDOMNode(this.refs.target)
|
||||
var editor = ace.edit(el)
|
||||
var editor = this.editor = ace.edit(el)
|
||||
editor.$blockScrolling = Infinity
|
||||
editor.setValue(this.props.code)
|
||||
editor.renderer.setShowGutter(true)
|
||||
editor.setTheme('ace/theme/xcode')
|
||||
editor.clearSelection()
|
||||
if (this.props.readOnly) {
|
||||
editor.setReadOnly(true)
|
||||
}
|
||||
|
||||
editor.setReadOnly(!!this.props.readOnly)
|
||||
|
||||
var session = editor.getSession()
|
||||
if (this.props.mode != null && this.props.mode.length > 0) {
|
||||
|
||||
@@ -34,7 +34,7 @@ function getColorByIndex (index) {
|
||||
|
||||
export default class FolderMark extends React.Component {
|
||||
render () {
|
||||
let color = getColorByIndex(this.props.id)
|
||||
let color = getColorByIndex(this.props.color)
|
||||
return (
|
||||
<i className='fa fa-square fa-fw' style={{color: color}}/>
|
||||
)
|
||||
@@ -42,5 +42,5 @@ export default class FolderMark extends React.Component {
|
||||
}
|
||||
|
||||
FolderMark.propTypes = {
|
||||
id: PropTypes.number
|
||||
color: PropTypes.number
|
||||
}
|
||||
|
||||
@@ -4,17 +4,15 @@ import { setTagFilter } from '../actions'
|
||||
|
||||
export default class TagLink extends React.Component {
|
||||
handleClick (e) {
|
||||
store.dispatch(setTagFilter(this.props.tag.name))
|
||||
store.dispatch(setTagFilter(this.props.tag))
|
||||
}
|
||||
render () {
|
||||
return (
|
||||
<a onClick={e => this.handleClick(e)}>{this.props.tag.name}</a>
|
||||
<a onClick={e => this.handleClick(e)}>{this.props.tag}</a>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
TagLink.propTypes = {
|
||||
tag: PropTypes.shape({
|
||||
name: PropTypes.string
|
||||
})
|
||||
tag: PropTypes.string
|
||||
}
|
||||
|
||||
77
lib/components/TagSelect.js
Normal file
77
lib/components/TagSelect.js
Normal file
@@ -0,0 +1,77 @@
|
||||
import React, { PropTypes } from 'react'
|
||||
import ReactDOM from 'react-dom'
|
||||
import _ from 'lodash'
|
||||
import linkState from 'boost/linkState'
|
||||
|
||||
export default class TagSelect extends React.Component {
|
||||
constructor (props) {
|
||||
super(props)
|
||||
|
||||
this.state = {
|
||||
input: ''
|
||||
}
|
||||
}
|
||||
|
||||
handleKeyDown (e) {
|
||||
if (e.keyCode !== 13) return false
|
||||
e.preventDefault()
|
||||
|
||||
let tags = this.props.tags.slice(0)
|
||||
let newTag = this.state.input
|
||||
|
||||
tags.push(newTag)
|
||||
tags = _.uniq(tags)
|
||||
|
||||
if (_.isFunction(this.props.onChange)) {
|
||||
this.props.onChange(newTag, tags)
|
||||
}
|
||||
this.setState({input: ''})
|
||||
}
|
||||
|
||||
handleThisClick (e) {
|
||||
ReactDOM.findDOMNode(this.refs.tagInput).focus()
|
||||
}
|
||||
|
||||
handleItemRemoveButton (tag) {
|
||||
return e => {
|
||||
e.stopPropagation()
|
||||
|
||||
let tags = this.props.tags.slice(0)
|
||||
tags.splice(tags.indexOf(tag), 1)
|
||||
|
||||
if (_.isFunction(this.props.onChange)) {
|
||||
this.props.onChange(null, tags)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
render () {
|
||||
var tagElements = _.isArray(this.props.tags)
|
||||
? this.props.tags.map(tag => (
|
||||
<span key={tag} className='tagItem'>
|
||||
<button onClick={e => this.handleItemRemoveButton(tag)(e)} className='tagRemoveBtn'><i className='fa fa-fw fa-times'/></button>
|
||||
<span className='tagLabel'>{tag}</span>
|
||||
</span>))
|
||||
: null
|
||||
|
||||
return (
|
||||
<div className='TagSelect' onClick={e => this.handleThisClick(e)}>
|
||||
{tagElements}
|
||||
<input
|
||||
type='text'
|
||||
onKeyDown={e => this.handleKeyDown(e)}
|
||||
ref='tagInput'
|
||||
valueLink={this.linkState('input')}
|
||||
placeholder='new tag'
|
||||
className='tagInput'/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
TagSelect.propTypes = {
|
||||
tags: PropTypes.arrayOf(PropTypes.string),
|
||||
onChange: PropTypes.func
|
||||
}
|
||||
|
||||
TagSelect.prototype.linkState = linkState
|
||||
@@ -1,7 +1,8 @@
|
||||
import React, { PropTypes } from 'react'
|
||||
import linkState from 'boost/linkState'
|
||||
import api from 'boost/api'
|
||||
import { pick } from 'lodash'
|
||||
import keygen from 'boost/keygen'
|
||||
import { createFolder } from 'boost/actions'
|
||||
import store from 'boost/store'
|
||||
|
||||
export default class CreateNewFolder extends React.Component {
|
||||
constructor (props) {
|
||||
@@ -9,54 +10,42 @@ export default class CreateNewFolder extends React.Component {
|
||||
|
||||
this.state = {
|
||||
name: '',
|
||||
public: false
|
||||
alert: null
|
||||
}
|
||||
}
|
||||
|
||||
handleCloseButton (e) {
|
||||
this.props.close()
|
||||
}
|
||||
|
||||
handlePublicButtonClick (value) {
|
||||
console.log(value)
|
||||
return e => {
|
||||
this.setState({public: value})
|
||||
}
|
||||
}
|
||||
|
||||
handleConfirmButton (e) {
|
||||
let { user, close } = this.props
|
||||
let input = pick(this.state, ['public', 'name'])
|
||||
input.UserId = user.id
|
||||
let { close } = this.props
|
||||
let key = keygen()
|
||||
let name = this.state.name
|
||||
let input = {
|
||||
name,
|
||||
key,
|
||||
createAt: new Date(),
|
||||
updatedAt: new Date(),
|
||||
// random number (0-7)
|
||||
color: Math.round(Math.random() * 7)
|
||||
}
|
||||
|
||||
api.createFolder(input)
|
||||
.then(res => {
|
||||
console.log(res.body)
|
||||
store.dispatch(createFolder(input))
|
||||
try {
|
||||
} catch (e) {
|
||||
this.setState({alert: {
|
||||
type: 'error',
|
||||
message: e.message
|
||||
}})
|
||||
return
|
||||
}
|
||||
close()
|
||||
})
|
||||
.catch(err => {
|
||||
console.log(err)
|
||||
var alert
|
||||
if (err.code === 'ECONNREFUSED') {
|
||||
alert = {
|
||||
type: 'error',
|
||||
message: 'Can\'t connect to API server.'
|
||||
}
|
||||
} else if (err.status != null) {
|
||||
alert = {
|
||||
type: 'error',
|
||||
message: err.response.body.message
|
||||
}
|
||||
} else {
|
||||
throw err
|
||||
}
|
||||
|
||||
this.setState({alert: alert})
|
||||
})
|
||||
}
|
||||
|
||||
render () {
|
||||
let alert = this.state.alert
|
||||
let alertEl = alert != null ? (
|
||||
let alertElement = alert != null ? (
|
||||
<p className={`alert ${alert.type}`}>
|
||||
{alert.message}
|
||||
</p>
|
||||
@@ -69,13 +58,7 @@ export default class CreateNewFolder extends React.Component {
|
||||
<div className='title'>Create new folder</div>
|
||||
|
||||
<input className='ipt' type='text' valueLink={this.linkState('name')} placeholder='Enter folder name'/>
|
||||
|
||||
<div className='public'>
|
||||
<button className={!this.state.public ? 'active' : ''} onClick={e => this.handlePublicButtonClick(false)(e)}>Private</button>
|
||||
<span className='divider'>/</span>
|
||||
<button className={this.state.public ? 'active' : ''} onClick={e => this.handlePublicButtonClick(true)(e)}>Public</button>
|
||||
</div>
|
||||
{alertEl}
|
||||
{alertElement}
|
||||
|
||||
<button onClick={e => this.handleConfirmButton(e)} className='confirmBtn'>Create</button>
|
||||
</div>
|
||||
@@ -84,7 +67,6 @@ export default class CreateNewFolder extends React.Component {
|
||||
}
|
||||
|
||||
CreateNewFolder.propTypes = {
|
||||
user: PropTypes.shape(),
|
||||
close: PropTypes.func
|
||||
}
|
||||
|
||||
|
||||
@@ -1,6 +1,24 @@
|
||||
import React, { PropTypes } from 'react'
|
||||
import React from 'react'
|
||||
import linkState from 'boost/linkState'
|
||||
import remote from 'remote'
|
||||
import ipc from 'ipc'
|
||||
|
||||
export default class AppSettingTab extends React.Component {
|
||||
constructor (props) {
|
||||
super(props)
|
||||
let keymap = remote.getGlobal('keymap')
|
||||
|
||||
this.state = {
|
||||
toggleFinder: keymap.toggleFinder
|
||||
}
|
||||
}
|
||||
|
||||
handleSaveButtonClick (e) {
|
||||
ipc.send('hotkeyUpdated', {
|
||||
toggleFinder: this.state.toggleFinder
|
||||
})
|
||||
}
|
||||
|
||||
render () {
|
||||
return (
|
||||
<div className='AppSettingTab content'>
|
||||
@@ -8,10 +26,10 @@ export default class AppSettingTab extends React.Component {
|
||||
<div className='sectionTitle'>Hotkey</div>
|
||||
<div className='sectionInput'>
|
||||
<label>Toggle Finder(popup)</label>
|
||||
<input type='text'/>
|
||||
<input valueLink={this.linkState('toggleFinder')} type='text'/>
|
||||
</div>
|
||||
<div className='sectionConfirm'>
|
||||
<button>Save</button>
|
||||
<button onClick={e => this.handleSaveButtonClick(e)}>Save</button>
|
||||
</div>
|
||||
<div className='description'>
|
||||
<ul>
|
||||
@@ -38,3 +56,5 @@ export default class AppSettingTab extends React.Component {
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
AppSettingTab.prototype.linkState = linkState
|
||||
|
||||
@@ -24,21 +24,7 @@ class Preferences extends React.Component {
|
||||
super(props)
|
||||
|
||||
this.state = {
|
||||
currentTab: PROFILE,
|
||||
currentTeamId: props.status.userId,
|
||||
profile: {
|
||||
userInfo: {
|
||||
profileName: props.currentUser.profileName,
|
||||
email: props.currentUser.email,
|
||||
alert: null
|
||||
},
|
||||
password: {
|
||||
currentPassword: '',
|
||||
newPassword: '',
|
||||
confirmation: '',
|
||||
error: null
|
||||
}
|
||||
}
|
||||
currentTab: APP
|
||||
}
|
||||
}
|
||||
|
||||
@@ -56,12 +42,8 @@ class Preferences extends React.Component {
|
||||
let content = this.renderContent()
|
||||
|
||||
let tabs = [
|
||||
{target: PROFILE, label: 'Profile'},
|
||||
{target: APP, label: 'Preferences'},
|
||||
{target: HELP, label: 'Help & Feedback'},
|
||||
{target: TEAM, label: 'Team setting'},
|
||||
{target: MEMBER, label: 'Manage member'},
|
||||
{target: FOLDER, label: 'Manage folder'}
|
||||
{target: APP, label: 'Preferences'}
|
||||
// {target: FOLDER, label: 'Manage folder'}
|
||||
]
|
||||
|
||||
let navButtons = tabs.map(tab => (
|
||||
@@ -85,42 +67,12 @@ class Preferences extends React.Component {
|
||||
}
|
||||
|
||||
renderContent () {
|
||||
let currentTeamId = parseInt(this.state.currentTeamId, 10)
|
||||
let teams = [this.props.currentUser].concat(this.props.currentUser.Teams)
|
||||
|
||||
switch (this.state.currentTab) {
|
||||
case APP:
|
||||
return (<AppSettingTab/>)
|
||||
case HELP:
|
||||
return (<HelpTab/>)
|
||||
case TEAM:
|
||||
return (
|
||||
<TeamSettingTab
|
||||
currentTeamId={currentTeamId}
|
||||
teams={teams}
|
||||
switchTeam={teamId => this.switchTeam(teamId)}
|
||||
/>
|
||||
)
|
||||
case MEMBER:
|
||||
return (
|
||||
<MemberSettingTab
|
||||
currentUser={this.props.currentUser}
|
||||
currentTeamId={currentTeamId}
|
||||
teams={teams}
|
||||
switchTeam={teamId => this.switchTeam(teamId)}
|
||||
/>
|
||||
)
|
||||
case FOLDER:
|
||||
return (
|
||||
<FolderSettingTab
|
||||
currentTeamId={currentTeamId}
|
||||
teams={teams}
|
||||
switchTeam={teamId => this.switchTeam(teamId)}
|
||||
/>
|
||||
)
|
||||
case PROFILE:
|
||||
case APP:
|
||||
default:
|
||||
return this.renderProfile()
|
||||
return (<AppSettingTab/>)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
122
lib/reducer.js
122
lib/reducer.js
@@ -1,7 +1,10 @@
|
||||
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, FOLDER_DESTROY, IDLE_MODE, CREATE_MODE } from './actions'
|
||||
import _ from 'lodash'
|
||||
import { SWITCH_FOLDER, SWITCH_MODE, SWITCH_ARTICLE, SET_SEARCH_FILTER, SET_TAG_FILTER, USER_UPDATE, ARTICLE_UPDATE, ARTICLE_DESTROY, FOLDER_CREATE, FOLDER_DESTROY, IDLE_MODE, CREATE_MODE } from './actions'
|
||||
import auth from 'boost/auth'
|
||||
import keygen from 'boost/keygen'
|
||||
|
||||
let defaultContent = '**Boost**は全く新しいエンジニアライクのノートアプリです。\n\n# ◎特徴\nBoostはエンジニアの仕事を圧倒的に効率化するいくつかの機能を備えています。\nその一部をご紹介します。\n1. Folderで情報を分類\n2. 豊富なsyantaxに対応\n3. Finder機能\n4. チーム機能（リアルタイム搭載）\n\n＊ ＊ ＊ ＊\n\n# 1. Folderで情報を分類、欲しい情報にすぐアクセス。\n左側のバーに存在する「Folders」。\n今すぐプラスボタンを押しましょう。\n分類の仕方も自由自在です。\n- 言語やフレームワークごとにFolderを作成\n- 自分用のカジュアルなメモをまとめる場としてFolderを作成\n\n\n# 2. 豊富なsyantaxに対応、自分の脳の代わりに。\nプログラミングに関する情報を全て、手軽に保存しましょう。\n- mdで、apiの仕様をまとめる\n- よく使うモジュールやスニペット\n\nBoostに保存しておくことで、何度も同じコードを書いたり調べたりする必要がなくなります。\n\n# 3. Finder機能を搭載、もうコマンドを手打ちする必要はありません。\n**「shift+cmd+tab」** を同時に押してみてください。\nここでは、一瞬でBoostの中身を検索するウィンドウを表示させることができます。\n\n矢印キーで選択、Enterを押し、cmd+vでペーストすると…続きはご自身の目でお確かめください。\n- sqlやlinux等の、よく使うが手打ちが面倒なコマンド\n- （メールやカスタマーサポート等でよく使うフレーズ）\n\n私たちは、圧倒的な効率性を支援します。\n\n# 4. チーム機能を搭載、シームレスな情報共有の場を実現。\n開発の設計思想やmdファイルの共有等、チームによって用途は様々ですが、Boostは多くの情報共有の課題について解決策を投げかけます。\n魅力を感じたら、左下のプラスボタンを今すぐクリック。\n\n\n＊ ＊ ＊ ＊\n\n\n## ◎詳しくは\nこちらのブログ( http://blog-jp.b00st.io )にて随時更新しています。\n\nそれでは素晴らしいエンジニアライフを！\n\n## Hack your memory＊＊'
|
||||
|
||||
const initialStatus = {
|
||||
mode: IDLE_MODE,
|
||||
@@ -9,18 +12,30 @@ const initialStatus = {
|
||||
}
|
||||
|
||||
function getInitialArticles () {
|
||||
let initialCurrentUser = auth.user()
|
||||
if (initialCurrentUser == null) return []
|
||||
let data = JSON.parse(localStorage.getItem('local'))
|
||||
if (data == null) {
|
||||
let defaultFolder = {
|
||||
name: 'default',
|
||||
key: keygen()
|
||||
}
|
||||
let defaultArticle = {
|
||||
title: 'Boostとは',
|
||||
tags: ['boost', 'intro'],
|
||||
content: defaultContent,
|
||||
mode: 'markdown',
|
||||
key: keygen(),
|
||||
FolderKey: defaultFolder.key
|
||||
}
|
||||
|
||||
let teams = Array.isArray(initialCurrentUser.Teams) ? initialCurrentUser.Teams : []
|
||||
data = {
|
||||
articles: [defaultArticle],
|
||||
folders: [defaultFolder],
|
||||
version: require('remote').require('app').getVersion()
|
||||
}
|
||||
localStorage.setItem('local', JSON.stringify(data))
|
||||
}
|
||||
|
||||
let users = [initialCurrentUser, ...teams]
|
||||
let initialArticles = users.reduce((res, user) => {
|
||||
res['team-' + user.id] = JSON.parse(localStorage.getItem('team-' + user.id))
|
||||
return res
|
||||
}, {})
|
||||
|
||||
return initialArticles
|
||||
return data.articles
|
||||
}
|
||||
|
||||
function currentUser (state, action) {
|
||||
@@ -37,14 +52,10 @@ function currentUser (state, action) {
|
||||
|
||||
function status (state, action) {
|
||||
switch (action.type) {
|
||||
case SWITCH_USER:
|
||||
state.userId = action.data
|
||||
state.mode = IDLE_MODE
|
||||
state.search = ''
|
||||
return state
|
||||
case SWITCH_FOLDER:
|
||||
state.mode = IDLE_MODE
|
||||
state.search = `in:${action.data} `
|
||||
|
||||
return state
|
||||
case SWITCH_MODE:
|
||||
state.mode = action.data
|
||||
@@ -54,14 +65,17 @@ function status (state, action) {
|
||||
case SWITCH_ARTICLE:
|
||||
state.articleKey = action.data
|
||||
state.mode = IDLE_MODE
|
||||
|
||||
return state
|
||||
case SET_SEARCH_FILTER:
|
||||
state.search = action.data
|
||||
state.mode = IDLE_MODE
|
||||
|
||||
return state
|
||||
case SET_TAG_FILTER:
|
||||
state.search = `#${action.data}`
|
||||
state.mode = IDLE_MODE
|
||||
|
||||
return state
|
||||
default:
|
||||
if (state == null) return initialStatus
|
||||
@@ -69,62 +83,62 @@ function status (state, action) {
|
||||
}
|
||||
}
|
||||
|
||||
function genKey (id) {
|
||||
return 'team-' + id
|
||||
}
|
||||
|
||||
function articles (state, action) {
|
||||
switch (action.type) {
|
||||
case ARTICLE_REFRESH:
|
||||
{
|
||||
let { userId, articles } = action.data
|
||||
let teamKey = genKey(userId)
|
||||
localStorage.setItem(teamKey, JSON.stringify(articles))
|
||||
state[teamKey] = articles
|
||||
}
|
||||
|
||||
return state
|
||||
case ARTICLE_UPDATE:
|
||||
{
|
||||
let { userId, article } = action.data
|
||||
let teamKey = genKey(userId)
|
||||
let articles = JSON.parse(localStorage.getItem(teamKey))
|
||||
console.log(action)
|
||||
let data = JSON.parse(localStorage.getItem('local'))
|
||||
let { articles } = data
|
||||
let article = action.data.article
|
||||
|
||||
let targetIndex = findIndex(articles, _article => article.key === _article.key)
|
||||
console.log('before')
|
||||
console.log(articles)
|
||||
let targetIndex = _.findIndex(articles, _article => article.key === _article.key)
|
||||
if (targetIndex < 0) articles.unshift(article)
|
||||
else articles.splice(targetIndex, 1, article)
|
||||
console.log('after')
|
||||
console.log(articles)
|
||||
|
||||
localStorage.setItem(teamKey, JSON.stringify(articles))
|
||||
state[teamKey] = articles
|
||||
localStorage.setItem('local', JSON.stringify(data))
|
||||
state.articles = articles
|
||||
}
|
||||
return state
|
||||
case ARTICLE_DESTROY:
|
||||
{
|
||||
let { userId, articleKey } = action.data
|
||||
let teamKey = genKey(userId)
|
||||
let articles = JSON.parse(localStorage.getItem(teamKey))
|
||||
console.log(articles)
|
||||
console.log(articleKey)
|
||||
let targetIndex = findIndex(articles, _article => articleKey === _article.key)
|
||||
let data = JSON.parse(localStorage.getItem('local'))
|
||||
let { articles } = data
|
||||
let articleKey = action.data.articleKey
|
||||
|
||||
let targetIndex = _.findIndex(articles, _article => articleKey === _article.key)
|
||||
if (targetIndex >= 0) articles.splice(targetIndex, 1)
|
||||
|
||||
localStorage.setItem(teamKey, JSON.stringify(articles))
|
||||
state[teamKey] = articles
|
||||
state.articles = articles
|
||||
localStorage.setItem('local', JSON.stringify(data))
|
||||
}
|
||||
return state
|
||||
case FOLDER_CREATE:
|
||||
{
|
||||
let data = JSON.parse(localStorage.getItem('local'))
|
||||
let { folders } = data
|
||||
let newFolder = action.data.folder
|
||||
|
||||
let conflictFolder = _.findWhere(folders, {name: newFolder.name})
|
||||
if (conflictFolder != null) throw new Error('name conflicted!')
|
||||
folders.push(newFolder)
|
||||
|
||||
localStorage.setItem('local', JSON.stringify(data))
|
||||
state.folders = folders
|
||||
}
|
||||
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)
|
||||
let data = JSON.parse(localStorage.getItem('local'))
|
||||
let { folderKey } = action.data
|
||||
let articles = data.articles
|
||||
articles = articles.filter(article => article.FolderKey !== folderKey)
|
||||
let folders = data.folders
|
||||
folders = folders.filter(folder => folder.key !== folderKey)
|
||||
|
||||
localStorage.setItem(teamKey, JSON.stringify(articles))
|
||||
state[teamKey] = articles
|
||||
localStorage.setItem('local', JSON.stringify(data))
|
||||
state.folders = folders
|
||||
state.articles = articles
|
||||
}
|
||||
return state
|
||||
default:
|
||||
|
||||
40
lib/search.js
Normal file
40
lib/search.js
Normal file
@@ -0,0 +1,40 @@
|
||||
'use strict'
|
||||
|
||||
var _ = require('lodash')
|
||||
|
||||
const TEXT_FILTER = 'TEXT_FILTER'
|
||||
const FOLDER_FILTER = 'FOLDER_FILTER'
|
||||
const TAG_FILTER = 'TAG_FILTER'
|
||||
|
||||
export default function search (articles, search) {
|
||||
let filters = 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 (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.name.match(new RegExp(tagFilter.value, 'i')))
|
||||
})
|
||||
}, articles)
|
||||
}
|
||||
|
||||
return articles
|
||||
}
|
||||
@@ -3,5 +3,4 @@ import { createStore } from 'redux'
|
||||
|
||||
let store = createStore(reducer)
|
||||
|
||||
export let devToolElement = null
|
||||
export default store
|
||||
|
||||
105
main.js
105
main.js
@@ -96,59 +96,58 @@ app.on('ready', function () {
|
||||
mainWindow.show()
|
||||
})
|
||||
|
||||
// finderWindow = require('./atom-lib/finder-window')
|
||||
finderWindow = require('./atom-lib/finder-window')
|
||||
|
||||
// var globalShortcut = require('global-shortcut')
|
||||
// console.log('jetpack launch')
|
||||
// var userDataPath = app.getPath('userData')
|
||||
// if (!jetpack.cwd(userDataPath).exists('keymap.json')) {
|
||||
// jetpack.cwd(userDataPath).file('keymap.json', {content: '{}'})
|
||||
// }
|
||||
// try {
|
||||
// global.keymap = JSON.parse(jetpack.cwd(userDataPath).read('keymap.json', 'utf-8'))
|
||||
// } catch (err) {
|
||||
// jetpack.cwd(userDataPath).file('keymap.json', {content: '{}'})
|
||||
// global.keymap = {}
|
||||
// }
|
||||
// if (global.keymap.toggleFinder == null) global.keymap.toggleFinder = 'ctrl+tab+shift'
|
||||
// var toggleFinderKey = global.keymap.toggleFinder
|
||||
var globalShortcut = require('global-shortcut')
|
||||
var userDataPath = app.getPath('userData')
|
||||
if (!jetpack.cwd(userDataPath).exists('keymap.json')) {
|
||||
jetpack.cwd(userDataPath).file('keymap.json', {content: '{}'})
|
||||
}
|
||||
try {
|
||||
global.keymap = JSON.parse(jetpack.cwd(userDataPath).read('keymap.json', 'utf-8'))
|
||||
} catch (err) {
|
||||
jetpack.cwd(userDataPath).file('keymap.json', {content: '{}'})
|
||||
global.keymap = {}
|
||||
}
|
||||
if (global.keymap.toggleFinder == null) global.keymap.toggleFinder = 'ctrl+tab+shift'
|
||||
var toggleFinderKey = global.keymap.toggleFinder
|
||||
|
||||
// try {
|
||||
// globalShortcut.register(toggleFinderKey, function () {
|
||||
// if (mainWindow != null && !mainWindow.isFocused()) {
|
||||
// mainWindow.hide()
|
||||
// }
|
||||
// finderWindow.show()
|
||||
// })
|
||||
// } catch (err) {
|
||||
// console.log(err.name)
|
||||
// }
|
||||
|
||||
// ipc.on('hotkeyUpdated', function (event, newKeymap) {
|
||||
// console.log('got new keymap')
|
||||
// console.log(newKeymap)
|
||||
// globalShortcut.unregisterAll()
|
||||
// global.keymap = JSON.parse(newKeymap)
|
||||
// jetpack.cwd(userDataPath).file('keymap.json', {content: JSON.stringify(global.keymap)})
|
||||
|
||||
// var toggleFinderKey = global.keymap.toggleFinder != null ? global.keymap.toggleFinder : 'ctrl+tab+shift'
|
||||
// try {
|
||||
// globalShortcut.register(toggleFinderKey, function () {
|
||||
// if (mainWindow != null && !mainWindow.isFocused()) {
|
||||
// mainWindow.hide()
|
||||
// }
|
||||
// finderWindow.show()
|
||||
// })
|
||||
// } catch (err) {
|
||||
// console.log(err.name)
|
||||
// }
|
||||
// })
|
||||
|
||||
// global.hideFinder = function () {
|
||||
// if (!mainWindow.isVisible()) {
|
||||
// Menu.sendActionToFirstResponder('hide:')
|
||||
// } else {
|
||||
// mainWindow.focus()
|
||||
// }
|
||||
// }
|
||||
try {
|
||||
globalShortcut.register(toggleFinderKey, function () {
|
||||
if (mainWindow != null && !mainWindow.isFocused()) {
|
||||
mainWindow.hide()
|
||||
}
|
||||
finderWindow.show()
|
||||
})
|
||||
} catch (err) {
|
||||
console.log(err.name)
|
||||
}
|
||||
|
||||
ipc.on('hotkeyUpdated', function (event, newKeymap) {
|
||||
console.log('got new keymap')
|
||||
console.log(newKeymap)
|
||||
globalShortcut.unregisterAll()
|
||||
global.keymap = newKeymap
|
||||
jetpack.cwd(userDataPath).file('keymap.json', {content: JSON.stringify(global.keymap)})
|
||||
|
||||
var toggleFinderKey = global.keymap.toggleFinder != null ? global.keymap.toggleFinder : 'ctrl+tab+shift'
|
||||
try {
|
||||
globalShortcut.register(toggleFinderKey, function () {
|
||||
if (mainWindow != null && !mainWindow.isFocused()) {
|
||||
mainWindow.hide()
|
||||
}
|
||||
finderWindow.show()
|
||||
})
|
||||
} catch (err) {
|
||||
console.log(err.name)
|
||||
}
|
||||
})
|
||||
|
||||
global.hideFinder = function () {
|
||||
if (!mainWindow.isVisible()) {
|
||||
Menu.sendActionToFirstResponder('hide:')
|
||||
} else {
|
||||
mainWindow.focus()
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "boost",
|
||||
"version": "0.4.0-alpha.4",
|
||||
"version": "0.4.0-alpha.5",
|
||||
"description": "Boost App",
|
||||
"main": "main.js",
|
||||
"scripts": {
|
||||
|
||||
@@ -6,7 +6,8 @@ var NodeTargetPlugin = require('webpack/lib/node/NodeTargetPlugin')
|
||||
var ExternalsPlugin = webpack.ExternalsPlugin
|
||||
var opt = {
|
||||
path: path.join(__dirname, 'compiled'),
|
||||
filename: 'bundle.js',
|
||||
filename: '[name].js',
|
||||
sourceMapFilename: '[name].map',
|
||||
libraryTarget: 'commonjs2',
|
||||
publicPath: 'http://localhost:8080/assets/'
|
||||
}
|
||||
@@ -26,10 +27,11 @@ var config = {
|
||||
]
|
||||
},
|
||||
debug: true,
|
||||
devtool: 'cheap-module-eval-source-map',
|
||||
entry: [
|
||||
'./browser/main/index.js'
|
||||
],
|
||||
devtool: 'eval-source-map',
|
||||
entry: {
|
||||
main: './browser/main/index.js',
|
||||
finder: './browser/finder/index.js'
|
||||
},
|
||||
output: opt,
|
||||
resolve: {
|
||||
extensions: ['', '.js', '.jsx'],
|
||||
|
||||
Reference in New Issue
Block a user