diff --git a/website/package-lock.json b/website/package-lock.json index bb6d16f..8ec6d16 100644 --- a/website/package-lock.json +++ b/website/package-lock.json @@ -370,11 +370,6 @@ "integrity": "sha1-GcenYEc3dEaPILLS0DNyrX1Mv10=", "dev": true }, - "auto-bind2": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/auto-bind2/-/auto-bind2-1.0.3.tgz", - "integrity": "sha512-+br9nya9M8ayHjai7m9rdpRxuEr8xcYRDrIp7HybNe0ixUHbc1kDiWXKMb0ldsfWb9Zi+SqJ9JfjW8nTkYD0QQ==" - }, "autobind-decorator": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/autobind-decorator/-/autobind-decorator-2.1.0.tgz", diff --git a/website/package.json b/website/package.json index 0b44dc4..5639bcb 100644 --- a/website/package.json +++ b/website/package.json @@ -4,7 +4,6 @@ "private": true, "dependencies": { "animejs": "^2.2.0", - "auto-bind2": "^1.0.2", "autobind-decorator": "^2.1.0", "eventemitter3": "^2.0.3", "npm": "^5.7.1", diff --git a/website/src/App.js b/website/src/App.js index 84518ba..dc5638f 100644 --- a/website/src/App.js +++ b/website/src/App.js @@ -9,8 +9,8 @@ import logoImage from 'images/logo.png' import { versionInfo } from './version' import { sizeInfo, colorInfo } from 'ui/style' import { api } from 'src/API' -import { reactAutoBind } from 'auto-bind2' import PropTypes from 'prop-types' +import autobind from 'autobind-decorator' export class App extends Component { static propTypes = { @@ -19,16 +19,11 @@ export class App extends Component { constructor(props) { super(props) - reactAutoBind(this) this.state = { loggedInUser: api.loggedInUser } } - handleUpdate() { - this.setState({ loggedInUser: api.loggedInUser }) - } - componentDidMount() { api.addListener('login', this.handleUpdate) api.addListener('logout', this.handleUpdate) @@ -39,6 +34,11 @@ export class App extends Component { api.removeListener('logout', this.handleUpdate) } + @autobind + handleUpdate() { + this.setState({ loggedInUser: api.loggedInUser }) + } + handleLogout() { // We have to use window here because App does not have history in it's props window.location.replace('/logout') @@ -52,6 +52,7 @@ export class App extends Component { window.location.replace('/profile') } + @autobind handleChangeTitle(title) { this.setState({ title }) } diff --git a/website/src/Auth/Login.js b/website/src/Auth/Login.js index 6462eec..339ba63 100644 --- a/website/src/Auth/Login.js +++ b/website/src/Auth/Login.js @@ -7,7 +7,7 @@ import { Box, Image, Link, Text, Row, Column, BoundInput, BoundCheckbox, BoundBu import headerLogo from 'images/deighton.png' import { versionInfo } from '../version' import { FormBinder } from 'react-form-binder' -import { reactAutoBind } from 'auto-bind2' +import autobind from 'autobind-decorator' import { sizeInfo, colorInfo } from 'ui/style' export class Login extends Component { @@ -36,7 +36,6 @@ export class Login extends Component { constructor(props) { super(props) - reactAutoBind(this) this.state = { waitModal: false, messageModal: null, @@ -44,6 +43,7 @@ export class Login extends Component { } } + @autobind handleSubmit(e) { e.preventDefault() e.stopPropagation() @@ -79,6 +79,7 @@ export class Login extends Component { } } + @autobind handleMessageModalDismiss() { this.setState({ messageModal: null, diff --git a/website/src/Modal/ChangeEmailModal.js b/website/src/Modal/ChangeEmailModal.js index 9ac20ef..6c77cec 100644 --- a/website/src/Modal/ChangeEmailModal.js +++ b/website/src/Modal/ChangeEmailModal.js @@ -1,6 +1,6 @@ import React from 'react' import PropTypes from 'prop-types' -import { autoBind } from 'auto-bind2' +import autobind from 'autobind-decorator' import { Modal, Button, Row, Column, BoundInput, BoundButton, Text } from 'ui' import { regExpPattern } from 'regexp-pattern' import { FormBinder } from 'react-form-binder' @@ -25,7 +25,6 @@ export class ChangeEmailModal extends React.Component { constructor(props) { super(props) - autoBind(this, (name) => (name.startsWith('handle'))) this.state = { binder: new FormBinder({}, ChangeEmailModal.bindings) } @@ -36,10 +35,12 @@ export class ChangeEmailModal extends React.Component { this.props.onDismiss(newEmail) } + @autobind handleClose() { this.close(null) } + @autobind handleSubmit(e) { e.preventDefault() let newEmail = null @@ -51,6 +52,7 @@ export class ChangeEmailModal extends React.Component { this.close(newEmail) } + @autobind handleClick(e) { this.close(null) } diff --git a/website/src/Modal/ChangePasswordModal.js b/website/src/Modal/ChangePasswordModal.js index 09b748e..bc2362a 100644 --- a/website/src/Modal/ChangePasswordModal.js +++ b/website/src/Modal/ChangePasswordModal.js @@ -1,6 +1,6 @@ import React from 'react' import PropTypes from 'prop-types' -import { autoBind } from 'auto-bind2' +import autobind from 'autobind-decorator' import { Modal, Button, Icon, Column, Row, Text, BoundInput, BoundButton } from 'ui' import { FormBinder } from 'react-form-binder' @@ -31,7 +31,6 @@ export class ChangePasswordModal extends React.Component { constructor(props) { super(props) - autoBind(this, (name) => (name.startsWith('handle'))) this.state = { binder: new FormBinder({}, ChangePasswordModal.bindings) } @@ -42,10 +41,12 @@ export class ChangePasswordModal extends React.Component { this.props.onDismiss(passwords) } + @autobind handleClose() { - close(null) + this.close(null) } + @autobind handleSubmit(e) { e.preventDefault() let passwords = null @@ -58,6 +59,7 @@ export class ChangePasswordModal extends React.Component { this.close(passwords) } + @autobind handleClick(e) { this.close(null) } diff --git a/website/src/Modal/YesNoMessageModal.js b/website/src/Modal/YesNoMessageModal.js index c5c6190..694b79b 100644 --- a/website/src/Modal/YesNoMessageModal.js +++ b/website/src/Modal/YesNoMessageModal.js @@ -2,7 +2,7 @@ import React from 'react' import PropTypes from 'prop-types' import { Modal, Button, Row, Column, Text, Icon } from 'ui' import { sizeInfo } from 'ui/style' -import { reactAutoBind } from 'auto-bind2' +import autobind from 'autobind-decorator' export class YesNoMessageModal extends React.Component { static propTypes = { @@ -11,11 +11,7 @@ export class YesNoMessageModal extends React.Component { onDismiss: PropTypes.func } - constructor(props) { - super(props) - reactAutoBind(this) - } - + @autobind onSubmit(e, yes) { e.preventDefault() e.stopPropagation() diff --git a/website/src/Profile/Profile.js b/website/src/Profile/Profile.js index 54c3f45..b4e5f72 100644 --- a/website/src/Profile/Profile.js +++ b/website/src/Profile/Profile.js @@ -2,12 +2,11 @@ import React from 'react' import { ProfileForm } from './ProfileForm' import { api } from 'src/API' import { WaitModal, MessageModal, ChangePasswordModal, ChangeEmailModal } from '../Modal' -import { autoBind } from 'auto-bind2' +import autobind from 'autobind-decorator' export class Profile extends React.Component { constructor(props) { super(props) - autoBind(this, (name) => (name.startsWith('handle'))) const user = api.loggedInUser this.state = { @@ -29,6 +28,7 @@ export class Profile extends React.Component { api.removeListener('newProfileImage', this.handleNewProfileImage) } + @autobind handleSaved(user) { this.setState({ waitModal: { message: 'Updating Profile' } }) api.updateUser(user).then((updatedUser) => { @@ -44,14 +44,17 @@ export class Profile extends React.Component { }) } + @autobind handleMessageModalDismiss() { this.setState({ messageModal: null }) } + @autobind handleChangePassword() { this.setState({ changePasswordModal: true }) } + @autobind handleProgress(uploadData) { if (this.state.progressModal) { this.setState({ uploadPercent: Math.round(uploadData.uploadedChunks / uploadData.numberOfChunks * 100) }) @@ -61,10 +64,12 @@ export class Profile extends React.Component { } } + @autobind handleUploadCancel(result) { this.setState({ progressModal: null }) } + @autobind handleChangePasswordDismiss(passwords) { this.setState({ changePasswordModal: false }) @@ -86,10 +91,12 @@ export class Profile extends React.Component { } } + @autobind handleChangeEmail() { this.setState({ changeEmailModal: {} }) } + @autobind handleChangeEmailDismiss(newEmail) { this.setState({ changeEmailModal: null }) if (!newEmail) { diff --git a/website/src/Users/UserForm.js b/website/src/Users/UserForm.js index 003cd50..d01ccd1 100644 --- a/website/src/Users/UserForm.js +++ b/website/src/Users/UserForm.js @@ -1,6 +1,6 @@ import React from 'react' import PropTypes from 'prop-types' -import { reactAutoBind } from 'auto-bind2' +import autobind from 'autobind-decorator' import { regExpPattern } from 'regexp-pattern' import { api } from 'src/API' import { Row, Column, BoundInput, BoundButton, BoundCheckbox, BoundEmailIcon } from 'ui' @@ -65,7 +65,6 @@ export class UserForm extends React.Component { constructor(props) { super(props) - reactAutoBind(this) this.state = { binder: new FormBinder(this.props.user, UserForm.bindings, this.props.onModifiedChanged) } @@ -79,6 +78,7 @@ export class UserForm extends React.Component { } } + @autobind handleSubmit(e) { e.preventDefault() @@ -89,6 +89,7 @@ export class UserForm extends React.Component { } } + @autobind handleReset() { const { user, onModifiedChanged } = this.props @@ -99,10 +100,12 @@ export class UserForm extends React.Component { } } + @autobind handleChangeEmail() { this.props.onChangeEmail() } + @autobind handleResendEmail() { this.props.onResendEmail() } diff --git a/website/src/Users/Users.js b/website/src/Users/Users.js index a7cf411..d7ecc25 100644 --- a/website/src/Users/Users.js +++ b/website/src/Users/Users.js @@ -1,6 +1,6 @@ import React, { Component, Fragment } from 'react' import PropTypes from 'prop-types' -import { reactAutoBind } from 'auto-bind2' +import autobind from 'autobind-decorator' import { UserList } from './UserList' import { UserForm } from './UserForm' import { UserFormPlaceholder } from './UserFormPlaceholder' @@ -16,7 +16,6 @@ export class Users extends Component { constructor(props) { super(props) - reactAutoBind(this) this.state = { modified: false, selectedUser: null, @@ -57,6 +56,7 @@ export class Users extends Component { } } + @autobind handleUserListClick(e, index) { let user = this.state.users[index] @@ -74,6 +74,7 @@ export class Users extends Component { } } + @autobind handleSave(user) { if (user._id) { this.setState({ waitModal: { message: 'Updating User' } }) @@ -118,10 +119,12 @@ export class Users extends Component { } } + @autobind handleChangeEmail() { this.setState({ changeEmailModal: { oldEmail: this.state.selectedUser.email } }) } + @autobind handleResendEmail() { this.setState({ waitModal: { message: 'Resending Email...' } @@ -147,6 +150,7 @@ export class Users extends Component { }) } + @autobind handleChangeEmailDismiss(newEmail) { this.setState({ changeEmailModal: null }) if (!newEmail) { @@ -178,6 +182,7 @@ export class Users extends Component { } } + @autobind handleRemove() { this.setState({ yesNoModal: { @@ -187,6 +192,7 @@ export class Users extends Component { }) } + @autobind handleRemoveModalDismiss(yes) { if (yes) { // TODO: Pass the _id back from the dialog input data @@ -219,6 +225,7 @@ export class Users extends Component { }) } + @autobind handleModifiedModalDismiss(yes) { if (yes) { this.setState({ @@ -234,14 +241,17 @@ export class Users extends Component { }) } + @autobind handleMessageModalDismiss() { this.setState({ messageModal: null }) } + @autobind handleModifiedChanged(modified) { this.setState({ modified: modified }) } + @autobind handleAddNewUser() { let newUser = {} let newUsers = [newUser].concat(this.state.users) diff --git a/website/src/ui/Anime.js b/website/src/ui/Anime.js index 7d0ebeb..f984c66 100644 --- a/website/src/ui/Anime.js +++ b/website/src/ui/Anime.js @@ -2,7 +2,7 @@ import React from 'react' import anime from 'animejs' import PropTypes from 'prop-types' -export default class Anime extends React.Component { +export class Anime extends React.Component { static propTypes = { as: PropTypes.string, children: PropTypes.node, diff --git a/website/src/ui/BoundButton.js b/website/src/ui/BoundButton.js index ebe8e94..b09c752 100644 --- a/website/src/ui/BoundButton.js +++ b/website/src/ui/BoundButton.js @@ -1,9 +1,9 @@ import React from 'react' import PropTypes from 'prop-types' import { Button } from 'ui' -import { reactAutoBind } from 'auto-bind2' +import autobind from 'autobind-decorator' -export default class BoundButton extends React.Component { +export class BoundButton extends React.Component { static propTypes = { name: PropTypes.string.isRequired, text: PropTypes.string, @@ -15,14 +15,12 @@ export default class BoundButton extends React.Component { constructor(props) { super(props) - reactAutoBind(this) - let { name, binder } = this.props - binder.addListener(name, this.updateValue) this.state = binder.getFieldState(name) } + @autobind updateValue(e) { this.setState(e.state) } diff --git a/website/src/ui/BoundCheckbox.js b/website/src/ui/BoundCheckbox.js index 40da197..440cfc1 100644 --- a/website/src/ui/BoundCheckbox.js +++ b/website/src/ui/BoundCheckbox.js @@ -1,10 +1,10 @@ import React from 'react' import PropTypes from 'prop-types' import { Checkbox } from 'ui' -import { reactAutoBind } from 'auto-bind2' +import autobind from 'autobind-decorator' import { fontInfo } from 'ui/style' -export default class BoundCheckbox extends React.Component { +export class BoundCheckbox extends React.Component { static propTypes = { name: PropTypes.string.isRequired, label: PropTypes.string, @@ -13,10 +13,10 @@ export default class BoundCheckbox extends React.Component { constructor(props) { super(props) - reactAutoBind(this) this.state = props.binder.getFieldState(props.name) } + @autobind handleChange(e, data) { const { binder, name } = this.props const state = binder.getFieldState(name) diff --git a/website/src/ui/BoundEmailIcon.js b/website/src/ui/BoundEmailIcon.js index a3acdc4..3ed8e97 100644 --- a/website/src/ui/BoundEmailIcon.js +++ b/website/src/ui/BoundEmailIcon.js @@ -3,7 +3,7 @@ import PropTypes from 'prop-types' import { Text, Icon } from 'ui' import { sizeInfo } from 'ui/style' -export default class BoundEmailIcon extends React.Component { +export class BoundEmailIcon extends React.Component { static propTypes = { name: PropTypes.string, binder: PropTypes.object, diff --git a/website/src/ui/BoundInput.js b/website/src/ui/BoundInput.js index af6c27e..1a3f8d7 100644 --- a/website/src/ui/BoundInput.js +++ b/website/src/ui/BoundInput.js @@ -1,9 +1,9 @@ import React from 'react' import PropTypes from 'prop-types' import { Input, Text } from 'ui' -import { reactAutoBind } from 'auto-bind2' +import autobind from 'autobind-decorator' -export default class BoundInput extends React.Component { +export class BoundInput extends React.Component { static propTypes = { name: PropTypes.string.isRequired, message: PropTypes.string, @@ -15,10 +15,10 @@ export default class BoundInput extends React.Component { constructor(props) { super(props) - reactAutoBind(this) this.state = props.binder.getFieldState(props.name) } + @autobind handleChange(e) { const { binder, name } = this.props const state = binder.getFieldState(name) diff --git a/website/src/ui/Box.js b/website/src/ui/Box.js index faed3c7..333043b 100644 --- a/website/src/ui/Box.js +++ b/website/src/ui/Box.js @@ -2,7 +2,8 @@ import Radium from 'radium' import PropTypes from 'prop-types' import React, { Component } from 'react' -class Box extends Component { +@Radium +export class Box extends Component { static propTypes = { borderTop: PropTypes.object, borderBottom: PropTypes.object, @@ -53,5 +54,3 @@ class Box extends Component { ) } } - -export default Radium(Box) diff --git a/website/src/ui/Button.js b/website/src/ui/Button.js index f8b7fe2..98f6a44 100644 --- a/website/src/ui/Button.js +++ b/website/src/ui/Button.js @@ -3,7 +3,8 @@ import PropTypes from 'prop-types' import React, { Component } from 'react' import { fontInfo, colorInfo, sizeInfo } from './style' -class Button extends Component { +@Radium +export class Button extends Component { static propTypes = { text: PropTypes.node, visible: PropTypes.bool, @@ -54,5 +55,3 @@ class Button extends Component { ) } } - -export default Radium(Button) diff --git a/website/src/ui/Checkbox.js b/website/src/ui/Checkbox.js index b806df0..8232755 100644 --- a/website/src/ui/Checkbox.js +++ b/website/src/ui/Checkbox.js @@ -1,10 +1,11 @@ import Radium from 'radium' import PropTypes from 'prop-types' import React, { Component } from 'react' -import { reactAutoBind } from 'auto-bind2' +import autobind from 'autobind-decorator' import { colorInfo, sizeInfo } from './style' -class Checkbox extends Component { +@Radium +export class Checkbox extends Component { static propTypes = { value: PropTypes.bool, disabled: PropTypes.bool, @@ -62,7 +63,6 @@ class Checkbox extends Component { constructor(props) { super(props) - reactAutoBind(this) this.state = { checked: props.value } @@ -74,7 +74,8 @@ class Checkbox extends Component { } } - onClick(e) { + @autobind + handleClick(e) { const checked = !this.state.checked this.setState({ checked }) @@ -90,12 +91,10 @@ class Checkbox extends Component { return (