mirror of
https://github.com/BoostIo/Boostnote
synced 2025-12-15 10:46:32 +00:00
prepare alpha.5 (remain work: MD preview, keybind)
This commit is contained in:
Rokt33r
@@ -1,6 +1,5 @@
|
||||
import React, { PropTypes } from 'react'
|
||||
import linkState from 'boost/linkState'
|
||||
import keygen from 'boost/keygen'
|
||||
import { createFolder } from 'boost/actions'
|
||||
import store from 'boost/store'
|
||||
|
||||
@@ -20,15 +19,9 @@ export default class CreateNewFolder extends React.Component {
|
||||
|
||||
handleConfirmButton (e) {
|
||||
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)
|
||||
name
|
||||
}
|
||||
|
||||
store.dispatch(createFolder(input))
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
import React, { PropTypes } from 'react'
|
||||
import api from 'boost/api'
|
||||
import linkState from 'boost/linkState'
|
||||
import FolderMark from 'boost/components/FolderMark'
|
||||
import store from 'boost/store'
|
||||
import { updateFolder, destroyFolder } from 'boost/actions'
|
||||
|
||||
const IDLE = 'IDLE'
|
||||
const EDIT = 'EDIT'
|
||||
@@ -12,22 +13,21 @@ export default class FolderRow extends React.Component {
|
||||
super(props)
|
||||
|
||||
this.state = {
|
||||
mode: IDLE,
|
||||
name: props.folder.name,
|
||||
public: props.folder.public
|
||||
mode: IDLE
|
||||
}
|
||||
}
|
||||
|
||||
handleCancelButtonClick (e) {
|
||||
this.setState({
|
||||
mode: IDLE,
|
||||
name: this.props.folder.name,
|
||||
public: this.props.folder.public
|
||||
mode: IDLE
|
||||
})
|
||||
}
|
||||
|
||||
handleEditButtonClick (e) {
|
||||
this.setState({mode: EDIT})
|
||||
this.setState({
|
||||
mode: EDIT,
|
||||
name: this.props.folder.name
|
||||
})
|
||||
}
|
||||
|
||||
handleDeleteButtonClick (e) {
|
||||
@@ -39,31 +39,21 @@ export default class FolderRow extends React.Component {
|
||||
}
|
||||
|
||||
handleSaveButtonClick (e) {
|
||||
let { folder } = this.props
|
||||
let input = {
|
||||
name: this.state.name,
|
||||
public: !!parseInt(this.state.public, 10)
|
||||
name: this.state.name
|
||||
}
|
||||
Object.assign(folder, input)
|
||||
|
||||
api.updateFolder(this.props.folder.id, input)
|
||||
.then(res => {
|
||||
console.log(res.body)
|
||||
this.setState({mode: IDLE})
|
||||
})
|
||||
.catch(err => {
|
||||
if (err.status != null) throw err
|
||||
else console.error(err)
|
||||
})
|
||||
store.dispatch(updateFolder(folder))
|
||||
this.setState({
|
||||
mode: IDLE
|
||||
})
|
||||
}
|
||||
|
||||
handleDeleteConfirmButtonClick (e) {
|
||||
api.destroyFolder(this.props.folder.id)
|
||||
.then(res => {
|
||||
console.log(res.body)
|
||||
})
|
||||
.catch(err => {
|
||||
if (err.status != null) throw err
|
||||
else console.error(err)
|
||||
})
|
||||
let { folder } = this.props
|
||||
store.dispatch(destroyFolder(folder.key))
|
||||
}
|
||||
|
||||
render () {
|
||||
@@ -76,12 +66,6 @@ export default class FolderRow extends React.Component {
|
||||
<div className='folderName'>
|
||||
<input valueLink={this.linkState('name')} type='text'/>
|
||||
</div>
|
||||
<div className='folderPublic'>
|
||||
<select value={this.state.public} onChange={e => this.handleFolderPublicChange(e)}>
|
||||
<option value='0'>Private</option>
|
||||
<option value='1'>Public</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className='folderControl'>
|
||||
<button onClick={e => this.handleSaveButtonClick(e)} className='primary'>Save</button>
|
||||
<button onClick={e => this.handleCancelButtonClick(e)}>Cancel</button>
|
||||
@@ -102,8 +86,7 @@ export default class FolderRow extends React.Component {
|
||||
default:
|
||||
return (
|
||||
<div className='FolderRow'>
|
||||
<div className='folderName'><FolderMark id={folder.id}/> {folder.name}</div>
|
||||
<div className='folderPublic'>{folder.public ? 'Public' : 'Private'}</div>
|
||||
<div className='folderName'><FolderMark color={folder.color}/> {folder.name}</div>
|
||||
<div className='folderControl'>
|
||||
<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-close'/></button>
|
||||
|
||||
@@ -1,87 +1,44 @@
|
||||
import React, { PropTypes } from 'react'
|
||||
import _ from 'lodash'
|
||||
import FolderRow from './FolderRow'
|
||||
import linkState from 'boost/linkState'
|
||||
import api from 'boost/api'
|
||||
import { createFolder } from 'boost/actions'
|
||||
|
||||
export default class FolderSettingTab extends React.Component {
|
||||
constructor (props) {
|
||||
super(props)
|
||||
|
||||
this.state = {
|
||||
name: '',
|
||||
public: 0
|
||||
name: ''
|
||||
}
|
||||
}
|
||||
|
||||
getCurrentTeam (props) {
|
||||
if (props == null) props = this.props
|
||||
return _.findWhere(props.teams, {id: props.currentTeamId})
|
||||
}
|
||||
|
||||
handleTeamSelectChange (e) {
|
||||
this.props.switchTeam(e.target.value)
|
||||
}
|
||||
|
||||
handleFolderPublicChange (e) {
|
||||
this.setState({public: e.target.value})
|
||||
}
|
||||
|
||||
handleSaveButtonClick (e) {
|
||||
let team = this.getCurrentTeam()
|
||||
let input = {
|
||||
UserId: team.id,
|
||||
name: this.state.name,
|
||||
public: !!parseInt(this.state.public, 10)
|
||||
}
|
||||
if (this.state.name.trim().length === 0) return false
|
||||
|
||||
api.createFolder(input)
|
||||
.then(res => {
|
||||
console.log(res.body)
|
||||
this.setState({
|
||||
name: '',
|
||||
public: 0
|
||||
})
|
||||
})
|
||||
.catch(err => {
|
||||
if (err.status != null) throw err
|
||||
else console.error(err)
|
||||
})
|
||||
}
|
||||
let { dispatch } = this.props
|
||||
|
||||
renderTeamOptions () {
|
||||
return this.props.teams.map(team => {
|
||||
return (
|
||||
<option key={'team-' + team.id} value={team.id}>{team.name}</option>)
|
||||
})
|
||||
dispatch(createFolder({
|
||||
name: this.state.name
|
||||
}))
|
||||
|
||||
this.setState({name: ''})
|
||||
}
|
||||
|
||||
render () {
|
||||
let team = this.getCurrentTeam()
|
||||
console.log(team.Folders)
|
||||
let folderElements = team.Folders.map(folder => {
|
||||
let { folders } = this.props
|
||||
let folderElements = folders.map(folder => {
|
||||
return (
|
||||
<FolderRow key={'folder-' + folder.id} folder={folder}/>
|
||||
<FolderRow key={'folder-' + folder.key} folder={folder}/>
|
||||
)
|
||||
})
|
||||
|
||||
return (
|
||||
<div className='FolderSettingTab content'>
|
||||
<div className='header'>
|
||||
<span>Setting of</span>
|
||||
<select
|
||||
value={this.props.currentTeamId}
|
||||
onChange={e => this.handleTeamSelectChange(e)}
|
||||
className='teamSelect'>
|
||||
{this.renderTeamOptions()}
|
||||
</select>
|
||||
</div>
|
||||
<div className='section'>
|
||||
<div className='sectionTitle'>Folders</div>
|
||||
<div className='sectionTitle'>Manage folder</div>
|
||||
<div className='folderTable'>
|
||||
<div className='folderHeader'>
|
||||
<div className='folderName'>Folder name</div>
|
||||
<div className='folderPublic'>Public/Private</div>
|
||||
<div className='folderControl'>Edit/Delete</div>
|
||||
</div>
|
||||
{folderElements}
|
||||
@@ -89,12 +46,6 @@ export default class FolderSettingTab extends React.Component {
|
||||
<div className='folderName'>
|
||||
<input valueLink={this.linkState('name')} type='text' placeholder='New Folder'/>
|
||||
</div>
|
||||
<div className='folderPublic'>
|
||||
<select value={this.state.public} onChange={e => this.handleFolderPublicChange(e)}>
|
||||
<option value='0'>Private</option>
|
||||
<option value='1'>Public</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className='folderControl'>
|
||||
<button onClick={e => this.handleSaveButtonClick(e)} className='primary'>Add</button>
|
||||
</div>
|
||||
@@ -107,9 +58,8 @@ export default class FolderSettingTab extends React.Component {
|
||||
}
|
||||
|
||||
FolderSettingTab.propTypes = {
|
||||
currentTeamId: PropTypes.number,
|
||||
teams: PropTypes.array,
|
||||
switchTeam: PropTypes.func
|
||||
folders: PropTypes.array,
|
||||
dispatch: PropTypes.func
|
||||
}
|
||||
|
||||
FolderSettingTab.prototype.linkState = linkState
|
||||
|
||||
@@ -1,22 +1,14 @@
|
||||
import React, { PropTypes } from 'react'
|
||||
import { connect, Provider } from 'react-redux'
|
||||
import linkState from 'boost/linkState'
|
||||
import api from 'boost/api'
|
||||
import store from 'boost/store'
|
||||
import AppSettingTab from './Preference/AppSettingTab'
|
||||
import HelpTab from './Preference/HelpTab'
|
||||
import TeamSettingTab from './Preference/TeamSettingTab'
|
||||
import MemberSettingTab from './Preference/MemberSettingTab'
|
||||
import FolderSettingTab from './Preference/FolderSettingTab'
|
||||
import { closeModal } from 'boost/modal'
|
||||
|
||||
var { findDOMNode } = require('react-dom')
|
||||
|
||||
const PROFILE = 'PROFILE'
|
||||
const APP = 'APP'
|
||||
const HELP = 'HELP'
|
||||
const TEAM = 'TEAM'
|
||||
const MEMBER = 'MEMBER'
|
||||
const FOLDER = 'FOLDER'
|
||||
|
||||
class Preferences extends React.Component {
|
||||
@@ -42,8 +34,8 @@ class Preferences extends React.Component {
|
||||
let content = this.renderContent()
|
||||
|
||||
let tabs = [
|
||||
{target: APP, label: 'Preferences'}
|
||||
// {target: FOLDER, label: 'Manage folder'}
|
||||
{target: APP, label: 'Preferences'},
|
||||
{target: FOLDER, label: 'Manage folder'}
|
||||
]
|
||||
|
||||
let navButtons = tabs.map(tab => (
|
||||
@@ -67,181 +59,190 @@ class Preferences extends React.Component {
|
||||
}
|
||||
|
||||
renderContent () {
|
||||
let { folders, dispatch } = this.props
|
||||
|
||||
switch (this.state.currentTab) {
|
||||
case HELP:
|
||||
return (<HelpTab/>)
|
||||
case FOLDER:
|
||||
return (
|
||||
<FolderSettingTab
|
||||
dispatch={dispatch}
|
||||
folders={folders}
|
||||
/>
|
||||
)
|
||||
case APP:
|
||||
default:
|
||||
return (<AppSettingTab/>)
|
||||
}
|
||||
}
|
||||
|
||||
handleProfileSaveButtonClick (e) {
|
||||
let profileState = this.state.profile
|
||||
profileState.userInfo.alert = {
|
||||
type: 'info',
|
||||
message: 'Sending...'
|
||||
}
|
||||
this.setState({profile: profileState}, () => {
|
||||
let input = {
|
||||
profileName: profileState.userInfo.profileName,
|
||||
email: profileState.userInfo.email
|
||||
}
|
||||
api.updateUserInfo(input)
|
||||
.then(res => {
|
||||
let profileState = this.state.profile
|
||||
profileState.userInfo.alert = {
|
||||
type: 'success',
|
||||
message: 'Successfully done!'
|
||||
}
|
||||
this.setState({profile: profileState})
|
||||
})
|
||||
.catch(err => {
|
||||
var message
|
||||
if (err.status != null) {
|
||||
message = err.response.body.message
|
||||
} else if (err.code === 'ECONNREFUSED') {
|
||||
message = 'Can\'t connect to API server.'
|
||||
} else throw err
|
||||
// handleProfileSaveButtonClick (e) {
|
||||
// let profileState = this.state.profile
|
||||
// profileState.userInfo.alert = {
|
||||
// type: 'info',
|
||||
// message: 'Sending...'
|
||||
// }
|
||||
// this.setState({profile: profileState}, () => {
|
||||
// let input = {
|
||||
// profileName: profileState.userInfo.profileName,
|
||||
// email: profileState.userInfo.email
|
||||
// }
|
||||
// api.updateUserInfo(input)
|
||||
// .then(res => {
|
||||
// let profileState = this.state.profile
|
||||
// profileState.userInfo.alert = {
|
||||
// type: 'success',
|
||||
// message: 'Successfully done!'
|
||||
// }
|
||||
// this.setState({profile: profileState})
|
||||
// })
|
||||
// .catch(err => {
|
||||
// var message
|
||||
// if (err.status != null) {
|
||||
// message = err.response.body.message
|
||||
// } else if (err.code === 'ECONNREFUSED') {
|
||||
// message = 'Can\'t connect to API server.'
|
||||
// } else throw err
|
||||
|
||||
let profileState = this.state.profile
|
||||
profileState.userInfo.alert = {
|
||||
type: 'error',
|
||||
message: message
|
||||
}
|
||||
// let profileState = this.state.profile
|
||||
// profileState.userInfo.alert = {
|
||||
// type: 'error',
|
||||
// message: message
|
||||
// }
|
||||
|
||||
this.setState({profile: profileState})
|
||||
})
|
||||
})
|
||||
}
|
||||
// this.setState({profile: profileState})
|
||||
// })
|
||||
// })
|
||||
// }
|
||||
|
||||
handlePasswordSaveButton (e) {
|
||||
let profileState = this.state.profile
|
||||
// handlePasswordSaveButton (e) {
|
||||
// let profileState = this.state.profile
|
||||
|
||||
if (profileState.password.newPassword !== profileState.password.confirmation) {
|
||||
profileState.password.alert = {
|
||||
type: 'error',
|
||||
message: 'Confirmation doesn\'t match'
|
||||
}
|
||||
this.setState({profile: profileState})
|
||||
return
|
||||
}
|
||||
// if (profileState.password.newPassword !== profileState.password.confirmation) {
|
||||
// profileState.password.alert = {
|
||||
// type: 'error',
|
||||
// message: 'Confirmation doesn\'t match'
|
||||
// }
|
||||
// this.setState({profile: profileState})
|
||||
// return
|
||||
// }
|
||||
|
||||
profileState.password.alert = {
|
||||
type: 'info',
|
||||
message: 'Sending...'
|
||||
}
|
||||
// profileState.password.alert = {
|
||||
// type: 'info',
|
||||
// message: 'Sending...'
|
||||
// }
|
||||
|
||||
this.setState({profile: profileState}, () => {
|
||||
let input = {
|
||||
password: profileState.password.currentPassword,
|
||||
newPassword: profileState.password.newPassword
|
||||
}
|
||||
api.updatePassword(input)
|
||||
.then(res => {
|
||||
let profileState = this.state.profile
|
||||
profileState.password.alert = {
|
||||
type: 'success',
|
||||
message: 'Successfully done!'
|
||||
}
|
||||
profileState.password.currentPassword = ''
|
||||
profileState.password.newPassword = ''
|
||||
profileState.password.confirmation = ''
|
||||
// this.setState({profile: profileState}, () => {
|
||||
// let input = {
|
||||
// password: profileState.password.currentPassword,
|
||||
// newPassword: profileState.password.newPassword
|
||||
// }
|
||||
// api.updatePassword(input)
|
||||
// .then(res => {
|
||||
// let profileState = this.state.profile
|
||||
// profileState.password.alert = {
|
||||
// type: 'success',
|
||||
// message: 'Successfully done!'
|
||||
// }
|
||||
// profileState.password.currentPassword = ''
|
||||
// profileState.password.newPassword = ''
|
||||
// profileState.password.confirmation = ''
|
||||
|
||||
this.setState({profile: profileState})
|
||||
})
|
||||
.catch(err => {
|
||||
var message
|
||||
if (err.status != null) {
|
||||
message = err.response.body.message
|
||||
} else if (err.code === 'ECONNREFUSED') {
|
||||
message = 'Can\'t connect to API server.'
|
||||
} else throw err
|
||||
// this.setState({profile: profileState})
|
||||
// })
|
||||
// .catch(err => {
|
||||
// var message
|
||||
// if (err.status != null) {
|
||||
// message = err.response.body.message
|
||||
// } else if (err.code === 'ECONNREFUSED') {
|
||||
// message = 'Can\'t connect to API server.'
|
||||
// } else throw err
|
||||
|
||||
let profileState = this.state.profile
|
||||
profileState.password.alert = {
|
||||
type: 'error',
|
||||
message: message
|
||||
}
|
||||
profileState.password.currentPassword = ''
|
||||
profileState.password.newPassword = ''
|
||||
profileState.password.confirmation = ''
|
||||
// let profileState = this.state.profile
|
||||
// profileState.password.alert = {
|
||||
// type: 'error',
|
||||
// message: message
|
||||
// }
|
||||
// profileState.password.currentPassword = ''
|
||||
// profileState.password.newPassword = ''
|
||||
// profileState.password.confirmation = ''
|
||||
|
||||
this.setState({profile: profileState}, () => {
|
||||
if (this.refs.currentPassword != null) findDOMNode(this.refs.currentPassword).focus()
|
||||
})
|
||||
})
|
||||
})
|
||||
}
|
||||
// this.setState({profile: profileState}, () => {
|
||||
// if (this.refs.currentPassword != null) findDOMNode(this.refs.currentPassword).focus()
|
||||
// })
|
||||
// })
|
||||
// })
|
||||
// }
|
||||
|
||||
renderProfile () {
|
||||
let profileState = this.state.profile
|
||||
return (
|
||||
<div className='content profile'>
|
||||
<div className='section userSection'>
|
||||
<div className='sectionTitle'>User Info</div>
|
||||
<div className='sectionInput'>
|
||||
<label>Profile Name</label>
|
||||
<input valueLink={this.linkState('profile.userInfo.profileName')} type='text'/>
|
||||
</div>
|
||||
<div className='sectionInput'>
|
||||
<label>E-mail</label>
|
||||
<input valueLink={this.linkState('profile.userInfo.email')} type='text'/>
|
||||
</div>
|
||||
<div className='sectionConfirm'>
|
||||
<button onClick={e => this.handleProfileSaveButtonClick(e)}>Save</button>
|
||||
// renderProfile () {
|
||||
// let profileState = this.state.profile
|
||||
// return (
|
||||
// <div className='content profile'>
|
||||
// <div className='section userSection'>
|
||||
// <div className='sectionTitle'>User Info</div>
|
||||
// <div className='sectionInput'>
|
||||
// <label>Profile Name</label>
|
||||
// <input valueLink={this.linkState('profile.userInfo.profileName')} type='text'/>
|
||||
// </div>
|
||||
// <div className='sectionInput'>
|
||||
// <label>E-mail</label>
|
||||
// <input valueLink={this.linkState('profile.userInfo.email')} type='text'/>
|
||||
// </div>
|
||||
// <div className='sectionConfirm'>
|
||||
// <button onClick={e => this.handleProfileSaveButtonClick(e)}>Save</button>
|
||||
|
||||
{this.state.profile.userInfo.alert != null
|
||||
? (
|
||||
<div className={'alert ' + profileState.userInfo.alert.type}>{profileState.userInfo.alert.message}</div>
|
||||
)
|
||||
: null}
|
||||
</div>
|
||||
</div>
|
||||
// {this.state.profile.userInfo.alert != null
|
||||
// ? (
|
||||
// <div className={'alert ' + profileState.userInfo.alert.type}>{profileState.userInfo.alert.message}</div>
|
||||
// )
|
||||
// : null}
|
||||
// </div>
|
||||
// </div>
|
||||
|
||||
<div className='section passwordSection'>
|
||||
<div className='sectionTitle'>Password</div>
|
||||
<div className='sectionInput'>
|
||||
<label>Current Password</label>
|
||||
<input ref='currentPassword' valueLink={this.linkState('profile.password.currentPassword')} type='password' placeholder='Current Password'/>
|
||||
</div>
|
||||
<div className='sectionInput'>
|
||||
<label>New Password</label>
|
||||
<input valueLink={this.linkState('profile.password.newPassword')} type='password' placeholder='New Password'/>
|
||||
</div>
|
||||
<div className='sectionInput'>
|
||||
<label>Confirmation</label>
|
||||
<input valueLink={this.linkState('profile.password.confirmation')} type='password' placeholder='Confirmation'/>
|
||||
</div>
|
||||
<div className='sectionConfirm'>
|
||||
<button onClick={e => this.handlePasswordSaveButton(e)}>Save</button>
|
||||
// <div className='section passwordSection'>
|
||||
// <div className='sectionTitle'>Password</div>
|
||||
// <div className='sectionInput'>
|
||||
// <label>Current Password</label>
|
||||
// <input ref='currentPassword' valueLink={this.linkState('profile.password.currentPassword')} type='password' placeholder='Current Password'/>
|
||||
// </div>
|
||||
// <div className='sectionInput'>
|
||||
// <label>New Password</label>
|
||||
// <input valueLink={this.linkState('profile.password.newPassword')} type='password' placeholder='New Password'/>
|
||||
// </div>
|
||||
// <div className='sectionInput'>
|
||||
// <label>Confirmation</label>
|
||||
// <input valueLink={this.linkState('profile.password.confirmation')} type='password' placeholder='Confirmation'/>
|
||||
// </div>
|
||||
// <div className='sectionConfirm'>
|
||||
// <button onClick={e => this.handlePasswordSaveButton(e)}>Save</button>
|
||||
|
||||
{profileState.password.alert != null
|
||||
? (
|
||||
<div className={'alert ' + profileState.password.alert.type}>{profileState.password.alert.message}</div>
|
||||
)
|
||||
: null}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
// {profileState.password.alert != null
|
||||
// ? (
|
||||
// <div className={'alert ' + profileState.password.alert.type}>{profileState.password.alert.message}</div>
|
||||
// )
|
||||
// : null}
|
||||
// </div>
|
||||
// </div>
|
||||
// </div>
|
||||
// )
|
||||
// }
|
||||
|
||||
}
|
||||
|
||||
Preferences.propTypes = {
|
||||
currentUser: PropTypes.shape(),
|
||||
close: PropTypes.func
|
||||
folders: PropTypes.array,
|
||||
dispatch: PropTypes.func
|
||||
}
|
||||
|
||||
Preferences.prototype.linkState = linkState
|
||||
|
||||
function remap (state) {
|
||||
let currentUser = state.currentUser
|
||||
let status = state.status
|
||||
let { folders, status } = state
|
||||
console.log(state)
|
||||
|
||||
return {
|
||||
currentUser,
|
||||
folders,
|
||||
status
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user