public/Boostnote
1
0
Fork 0
mirror of https://github.com/BoostIo/Boostnote synced 2026-04-12 12:08:47 +00:00
Code Issues Releases Wiki Activity

clean code

Browse Source
This commit is contained in:
Rokt33r
2016-05-03 15:41:11 +09:00
parent ea8e31561e
commit 10aae90ae2
15 changed files with 84 additions and 625 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
browser/main/HomePage/ArticleDetail/index.js
View File

@@ -2,10 +2,6 @@ import React, { PropTypes } from 'react'
import ReactDOM from 'react-dom'
import moment from 'moment'
import _ from 'lodash'
import {
switchFolder,
updateArticle
} from '../../actions'
import linkState from 'browser/lib/linkState'
import TagSelect from 'browser/components/TagSelect'
import ModeSelect from 'browser/components/ModeSelect'
@@ -67,25 +63,25 @@ export default class ArticleDetail extends React.Component {
constructor (props) {
super(props)
this.deleteHandler = e => {
this.deleteHandler = (e) => {
if (isModalOpen()) return true
this.handleDeleteButtonClick()
}
this.uncacheHandler = e => {
this.uncacheHandler = (e) => {
if (isModalOpen()) return true
this.handleUncache()
}
this.titleHandler = e => {
this.titleHandler = (e) => {
if (isModalOpen()) return true
if (this.refs.title) {
this.focusTitle()
}
}
this.editHandler = e => {
this.editHandler = (e) => {
if (isModalOpen()) return true
if (this.refs.editor) this.refs.editor.switchEditMode()
}
this.previewHandler = e => {
this.previewHandler = (e) => {
if (isModalOpen()) return true
if (this.refs.editor) this.refs.editor.switchPreviewMode()
}
@@ -100,7 +96,7 @@ export default class ArticleDetail extends React.Component {
componentDidMount () {
this.refreshTimer = setInterval(() => this.forceUpdate(), 60 * 1000)
this.shareDropdownInterceptor = e => {
this.shareDropdownInterceptor = (e) => {
e.stopPropagation()
}
@@ -159,12 +155,12 @@ export default class ArticleDetail extends React.Component {
updatedAt: new Date()
})
dispatch(updateArticle(article))
// dispatch(updateArticle(article))
let targetFolderKey = e.target.value
if (status.targetFolders.length > 0) {
let targetFolder = _.findWhere(folders, {key: targetFolderKey})
dispatch(switchFolder(targetFolder.name))
// dispatch(switchFolder(targetFolder.name))
}
}
@@ -174,7 +170,7 @@ export default class ArticleDetail extends React.Component {
title: e.target.value,
updatedAt: new Date()
})
dispatch(updateArticle(article))
// dispatch(updateArticle(article))
}
handleTagsChange (newTag, tags) {
@@ -184,7 +180,7 @@ export default class ArticleDetail extends React.Component {
updatedAt: new Date()
})
dispatch(updateArticle(article))
// dispatch(updateArticle(article))
}
handleModeChange (value) {
@@ -194,7 +190,7 @@ export default class ArticleDetail extends React.Component {
updatedAt: new Date()
})
dispatch(updateArticle(article))
// dispatch(updateArticle(article))
this.switchEditMode()
}
@@ -206,7 +202,7 @@ export default class ArticleDetail extends React.Component {
updatedAt: new Date()
})
dispatch(updateArticle(article))
// dispatch(updateArticle(article))
}
}
@@ -254,7 +250,7 @@ export default class ArticleDetail extends React.Component {
render () {
let { folders, status, tags, activeArticle, modified, user } = this.props
if (activeArticle == null) return this.renderEmpty()
let folderOptions = folders.map(folder => {
let folderOptions = folders.map((folder) => {
return (
<option key={folder.key} value={folder.key}>{folder.name}</option>
)
@@ -269,7 +265,7 @@ export default class ArticleDetail extends React.Component {
<select
className='ArticleDetail-info-folder'
value={activeArticle.FolderKey}
onChange={e => this.handleFolderKeyChange(e)}
onChange={(e) => this.handleFolderKeyChange(e)}
>
{folderOptions}
</select>
@@ -282,25 +278,14 @@ export default class ArticleDetail extends React.Component {
/>
<div className='ArticleDetail-info-control'>
{/*<div className={'ArticleDetail-info-control-save' + (!isUnsaved ? ' hide' : '')}>
<button
onClick={e => this.handleSaveButtonClick(e)}
className='ArticleDetail-info-control-save-button'
disabled={!isUnsaved}
>
<i className='fa fa-fw fa-save'/>&nbsp;Save
<span className='tooltip' children={`Save Post (${OSX ? '⌘' : '^'} + S)`}/>
</button>
</div>*/}
<ShareButton
article={activeArticle}
user={user}
/>
<button className='ArticleDetail-info-control-delete-button' onClick={e => this.handleOthersButtonClick(e)}>
<button className='ArticleDetail-info-control-delete-button' onClick={(e) => this.handleOthersButtonClick(e)}>
<i className='fa fa-fw fa-trash'/>
<span className='tooltip' children={`Delete Post (^ + Del)`}/>
<span className='tooltip'>Delete Post (^ + Del)</span>
</button>
</div>
</div>
@@ -319,11 +304,11 @@ export default class ArticleDetail extends React.Component {
<div className='ArticleDetail-panel-header'>
<div className='ArticleDetail-panel-header-title'>
<input
onKeyDown={e => this.handleTitleKeyDown(e)}
onKeyDown={(e) => this.handleTitleKeyDown(e)}
placeholder='(Untitled)'
ref='title'
value={activeArticle.title}
onChange={e => this.handleTitleChange(e)}
onChange={(e) => this.handleTitleChange(e)}
style={{
fontFamily: this.state.fontFamily
}}
@@ -331,8 +316,8 @@ export default class ArticleDetail extends React.Component {
</div>
<ModeSelect
ref='mode'
onChange={e => this.handleModeChange(e)}
onKeyDown={e => this.handleModeSelectKeyDown(e)}
onChange={(e) => this.handleModeChange(e)}
onKeyDown={(e) => this.handleModeSelectKeyDown(e)}
value={activeArticle.mode}
className='ArticleDetail-panel-header-mode'
/>
@@ -341,7 +326,7 @@ export default class ArticleDetail extends React.Component {
<ArticleEditor
ref='editor'
article={activeArticle}
onChange={content => this.handleContentChange(content)}
onChange={(content) => this.handleContentChange(content)}
/>
</div>
</div>
@@ -351,11 +336,6 @@ export default class ArticleDetail extends React.Component {
ArticleDetail.propTypes = {
dispatch: PropTypes.func,
status: PropTypes.shape(),
tags: PropTypes.array,
user: PropTypes.shape(),
folders: PropTypes.array,
modified: PropTypes.array,
activeArticle: PropTypes.shape()
repositories: PropTypes.array
}
ArticleDetail.prototype.linkState = linkState

48
browser/main/HomePage/ArticleList.js
View File

@@ -2,7 +2,6 @@ import React, { PropTypes } from 'react'
import ReactDOM from 'react-dom'
import ModeIcon from 'browser/components/ModeIcon'
import moment from 'moment'
import { switchArticle } from '../actions'
import FolderMark from 'browser/components/FolderMark'
import TagLink from './TagLink'
import _ from 'lodash'
@@ -15,7 +14,7 @@ export default class ArticleList extends React.Component {
constructor (props) {
super(props)
this.focusHandler = e => this.focus()
this.focusHandler = (e) => this.focus()
}
componentDidMount () {
@@ -30,8 +29,8 @@ export default class ArticleList extends React.Component {
}
componentDidUpdate () {
let { articles, activeArticle } = this.props
var index = articles.indexOf(activeArticle)
return false
var index = articles.indexOf(null)
var el = ReactDOM.findDOMNode(this)
var li = el.querySelectorAll('.ArticleList>div')[index]
@@ -130,16 +129,12 @@ export default class ArticleList extends React.Component {
}
render () {
let { articles, modified, activeArticle, folders } = this.props
let articleElements = articles.map(article => {
let modifiedArticle = _.findWhere(modified, {key: article.key})
let articles = []
let folders = []
let articleElements = articles.map((article) => {
let originalArticle = article
if (modifiedArticle) {
article = Object.assign({}, article)
}
let tagElements = Array.isArray(article.tags) && article.tags.length > 0
? article.tags.slice().map(tag => {
? article.tags.slice().map((tag) => {
return (<TagLink key={tag} tag={tag}/>)
})
: (<span>Not tagged yet</span>)
@@ -153,27 +148,21 @@ export default class ArticleList extends React.Component {
return (
<div key={'article-' + article.key}>
<div onClick={e => this.handleArticleClick(article)(e)} className={'ArticleList-item' + (activeArticle.key === article.key ? ' active' : '')}>
<div onClick={(e) => this.handleArticleClick(article)(e)} className={'ArticleList-item' + (article.key === 'ACTIVE_POST_KEY' ? ' active' : '')}>
<div className='ArticleList-item-top'>
{folder != null
? folderChanged
? <span className='folderName'>
<FolderMark color={originalFolder.color}/>{originalFolder.name}
->
<FolderMark color={folder.color}/>{folder.name}
</span>
<FolderMark color={originalFolder.color}/>{originalFolder.name}
->
<FolderMark color={folder.color}/>{folder.name}
</span>
: <span className='folderName'>
<FolderMark color={folder.color}/>{folder.name}
</span>
<FolderMark color={folder.color}/>{folder.name}
</span>
: <span><FolderMark color={-1}/>Unknown</span>
}
<span className='updatedAt'
children={
modifiedArticle != null
? <span><span className='unsaved-mark'>●</span> Unsaved</span>
: moment(article.updatedAt).fromNow()
}
/>
<span className='updatedAt'>{moment(article.updatedAt).fromNow()}</span>
</div>
<div className='ArticleList-item-middle'>
<ModeIcon className='mode' mode={article.mode}/> <div className='title' children={title}/>
@@ -191,7 +180,7 @@ export default class ArticleList extends React.Component {
})
return (
<div tabIndex='3' onKeyDown={e => this.handleArticleListKeyDown(e)} className='ArticleList'>
<div tabIndex='3' onKeyDown={(e) => this.handleArticleListKeyDown(e)} className='ArticleList'>
{articleElements}
</div>
)
@@ -200,8 +189,5 @@ export default class ArticleList extends React.Component {
ArticleList.propTypes = {
dispatch: PropTypes.func,
folders: PropTypes.array,
articles: PropTypes.array,
modified: PropTypes.array,
activeArticle: PropTypes.shape()
repositories: PropTypes.array
}

59
browser/main/HomePage/ArticleTopBar.js
View File

@@ -1,13 +1,10 @@
import React, { PropTypes } from 'react'
import ReactDOM from 'react-dom'
import ExternalLink from 'browser/components/ExternalLink'
import { setSearchFilter, clearSearch, toggleTutorial, saveArticle, switchFolder } from '../actions'
import { isModalOpen } from 'browser/lib/modal'
import keygen from 'browser/lib/keygen'
import activityRecord from 'browser/lib/activityRecord'
const electron = require('electron')
const remote = electron.remote
const ipc = electron.ipcRenderer
const OSX = global.process.platform === 'darwin'
@@ -83,7 +80,7 @@ export default class ArticleTopBar extends React.Component {
this.setState({isLinksDropdownOpen: true})
}
}
this.linksButton.addEventListener('click', this.showLinksDropdown)
// this.linksButton.addEventListener('click', this.showLinksDropdown)
this.hideLinksDropdown = e => {
if (this.state.isLinksDropdownOpen) {
this.setState({isLinksDropdownOpen: false})
@@ -118,11 +115,6 @@ export default class ArticleTopBar extends React.Component {
}
escape () {
let { status, dispatch } = this.props
if (status.search.length > 0) {
dispatch(clearSearch())
return
}
}
focusInput () {
@@ -136,7 +128,7 @@ export default class ArticleTopBar extends React.Component {
handleSearchChange (e) {
let { dispatch } = this.props
dispatch(setSearchFilter(e.target.value))
// dispatch(setSearchFilter(e.target.value))
this.handleTooltipRequest()
}
@@ -146,35 +138,13 @@ export default class ArticleTopBar extends React.Component {
}
handleNewPostButtonClick (e) {
let { dispatch, folders, status } = this.props
let { targetFolders } = status
let isFolderFilterApplied = targetFolders.length > 0
let FolderKey = isFolderFilterApplied
? targetFolders[0].key
: folders[0].key
let newArticle = {
key: keygen(),
title: '',
content: '',
mode: 'markdown',
tags: [],
FolderKey: FolderKey,
craetedAt: new Date(),
updatedAt: new Date()
}
dispatch(saveArticle(newArticle.key, newArticle, true))
if (isFolderFilterApplied) dispatch(switchFolder(targetFolders[0].name))
remote.getCurrentWebContents().send('detail-title')
activityRecord.emit('ARTICLE_CREATE')
}
handleTutorialButtonClick (e) {
let { dispatch } = this.props
dispatch(toggleTutorial())
// dispatch(toggleTutorial())
}
render () {
@@ -186,16 +156,16 @@ export default class ArticleTopBar extends React.Component {
<i className='fa fa-search fa-fw' />
<input
ref='searchInput'
onFocus={e => this.handleSearchChange(e)}
onBlur={e => this.handleSearchChange(e)}
value={this.props.status.search}
onChange={e => this.handleSearchChange(e)}
onFocus={(e) => this.handleSearchChange(e)}
onBlur={(e) => this.handleSearchChange(e)}
value={'this.props.status.search'}
onChange={(e) => this.handleSearchChange(e)}
placeholder='Search'
type='text'
/>
{
this.props.status.search != null && this.props.status.search.length > 0
? <button onClick={e => this.handleSearchClearButton(e)} className='ArticleTopBar-left-search-clear-button'><i className='fa fa-times'/></button>
'sadf' > 0
? <button onClick={(e) => this.handleSearchClearButton(e)} className='ArticleTopBar-left-search-clear-button'><i className='fa fa-times'/></button>
: null
}
<div className={'tooltip' + (this.state.isTooltipHidden ? ' hide' : '')}>
@@ -207,19 +177,16 @@ export default class ArticleTopBar extends React.Component {
</div>
</div>
{status.isTutorialOpen ? searchTutorialElement : null}
<div className={'ArticleTopBar-left-control'}>
<button className='ArticleTopBar-left-control-new-post-button' onClick={e => this.handleNewPostButtonClick(e)}>
<button className='ArticleTopBar-left-control-new-post-button' onClick={(e) => this.handleNewPostButtonClick(e)}>
<i className='fa fa-plus'/>
<span className='tooltip'>New Post ({OSX ? '⌘' : '^'} + n)</span>
</button>
{status.isTutorialOpen ? newPostTutorialElement : null}
</div>
</div>
<div className='ArticleTopBar-right'>
<button onClick={e => this.handleTutorialButtonClick(e)}>?<span className='tooltip'>How to use</span>
<button onClick={(e) => this.handleTutorialButtonClick(e)}>?<span className='tooltip'>How to use</span>
</button>
<a ref='links' className='ArticleTopBar-right-links-button' href>
<img src='../resources/app.png' width='44' height='44'/>
@@ -240,9 +207,9 @@ export default class ArticleTopBar extends React.Component {
}
</div>
{status.isTutorialOpen ? (
{false ? (
<div className='tutorial'>
<div onClick={e => this.handleTutorialButtonClick(e)} className='clickJammer'/>
<div onClick={(e) => this.handleTutorialButtonClick(e)} className='clickJammer'/>
<svg width='500' height='250' className='finder'>
<text x='100' y='25' fontSize='32' fill={BRAND_COLOR}>Also, you can open Finder!!</text>
<text x='150' y='55' fontSize='18' fill={BRAND_COLOR} children={'with pressing ' + (OSX ? '`⌘ + Alt + s`' : '`Win + Alt + s`')}/>

5
browser/main/HomePage/TagLink.js
View File

@@ -1,14 +1,11 @@
import React, { PropTypes } from 'react'
import store from '../store'
import { setTagFilter } from '../actions'
export default class TagLink extends React.Component {
handleClick (e) {
store.dispatch(setTagFilter(this.props.tag))
}
render () {
return (
<a onClick={e => this.handleClick(e)}>{this.props.tag}</a>
<a onClick={(e) => this.handleClick(e)}>{this.props.tag}</a>
)
}
}

41
browser/main/HomePage/UserNavigator.js
View File

@@ -1,41 +0,0 @@
import React, { Component, PropTypes } from 'react'
import { Link } from 'react-router'
import ProfileImage from 'browser/components/ProfileImage'
export default class UserNavigator extends Component {
renderUserList () {
if (this.props.users == null) return null
var users = this.props.users.map((user, index) => (
<li key={'user-' + user.id}>
<Link to={'/users/' + user.id} activeClassName='active'>
<ProfileImage email={user.email} size='44'/>
<div className='userTooltip'>{user.name}</div>
{index < 9 ? <div className='keyLabel'>{'⌘' + (index + 1)}</div> : null}
</Link>
</li>
))
return (
<ul className='userList'>
{users}
</ul>
)
}
render () {
return (
<div className='UserNavigator'>
{this.renderUserList()}
<button className='createTeamBtn'>
+
<div className='tooltip'>Create a new team</div>
</button>
</div>
)
}
}
UserNavigator.propTypes = {
users: PropTypes.array
}