From b2aa735a82fa3a5f9a400baba4dca0d333fa2697 Mon Sep 17 00:00:00 2001 From: Juan Pakpahan <pakpahanjuan46@gmail.com> Date: Mon, 25 Nov 2019 19:05:06 +0700 Subject: [PATCH 1/3] reduce code duplication by making parent class for ApplyModal and InfoModal --- assets/js/components/ApplyModal.jsx | 55 ++----------------------- assets/js/components/GeneralModal.jsx | 58 +++++++++++++++++++++++++++ assets/js/components/InfoModal.jsx | 53 +----------------------- 3 files changed, 63 insertions(+), 103 deletions(-) create mode 100644 assets/js/components/GeneralModal.jsx diff --git a/assets/js/components/ApplyModal.jsx b/assets/js/components/ApplyModal.jsx index 17db0d87..dd32c9c3 100755 --- a/assets/js/components/ApplyModal.jsx +++ b/assets/js/components/ApplyModal.jsx @@ -11,59 +11,10 @@ import { } from 'semantic-ui-react'; import ModalAlert from './../components/ModalAlert'; import Server from './../lib/Server'; +import GeneralModal from './GeneralModal'; -export default class ApplyModal extends React.Component { - static propTypes = { - data: PropTypes.object.isRequired, - active: PropTypes.bool.isRequired, - buttonTitle: PropTypes.string.isRequired, - resume: PropTypes.string, - studentId: PropTypes.number.isRequired, - updateStatus: PropTypes.func.isRequired, - }; - - constructor(props) { - super(props); - /* istanbul ignore next */ - this.state = { - modalOpen: false, - coverLetter: '', - load: false, - }; - this.handleChange = this.handleChange.bind(this); - this.handleOpen = this.handleOpen.bind(this); - this.handleApply = this.handleApply.bind(this); - } - - componentWillUpdate() { - this.fixBody(); - } - - componentDidUpdate() { - this.fixBody(); - } - - fixBody = () => { - const anotherModal = document.getElementsByClassName('ui page modals') - .length; - if (anotherModal > 0) - document.body.classList.add('scrolling', 'dimmable', 'dimmed'); - }; - - handleChange(event) { - this.setState({ coverLetter: event.target.value }); - } - - handleOpen() { - this.setState({ modalOpen: true }); - } - - handleClose = () => - this.setState({ - modalOpen: false, - load: false, - }); - +export default class ApplyModal extends GeneralModal { + handleApply = () => { if (this.props.resume) { this.setState({ load: true }); diff --git a/assets/js/components/GeneralModal.jsx b/assets/js/components/GeneralModal.jsx new file mode 100644 index 00000000..f38e6089 --- /dev/null +++ b/assets/js/components/GeneralModal.jsx @@ -0,0 +1,58 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import ModalAlert from './../components/ModalAlert'; + +export default class GeneralModal extends React.Component { + static propTypes = { + data: PropTypes.object.isRequired, + active: PropTypes.bool.isRequired, + buttonTitle: PropTypes.string.isRequired, + resume: PropTypes.string, + studentId: PropTypes.number.isRequired, + updateStatus: PropTypes.func.isRequired, + }; + + constructor(props) { + super(props); + /* istanbul ignore next */ + this.state = { + modalOpen: false, + coverLetter: '', + load: false, + }; + this.handleChange = this.handleChange.bind(this); + this.handleOpen = this.handleOpen.bind(this); + this.handleApply = this.handleApply.bind(this); + } + + componentWillUpdate() { + this.fixBody(); + } + + componentDidUpdate() { + this.fixBody(); + } + + fixBody = () => { + const anotherModal = document.getElementsByClassName('ui page modals') + .length; + if (anotherModal > 0) + document.body.classList.add('scrolling', 'dimmable', 'dimmed'); + }; + + handleChange(event) { + this.setState({ coverLetter: event.target.value }); + } + + handleOpen() { + this.setState({ modalOpen: true }); + } + + handleClose = () => + this.setState({ + modalOpen: false, + load: false, + }); + + } +} diff --git a/assets/js/components/InfoModal.jsx b/assets/js/components/InfoModal.jsx index 18921da2..940aba74 100644 --- a/assets/js/components/InfoModal.jsx +++ b/assets/js/components/InfoModal.jsx @@ -2,58 +2,9 @@ import React from 'react'; import PropTypes from 'prop-types'; import { Modal, Button } from 'semantic-ui-react'; import ModalAlert from './../components/ModalAlert'; +import GeneralModal from './GeneralModal'; -export default class InfoModal extends React.Component { - static propTypes = { - data: PropTypes.object.isRequired, - active: PropTypes.bool.isRequired, - buttonTitle: PropTypes.string.isRequired, - resume: PropTypes.string, - studentId: PropTypes.number.isRequired, - updateStatus: PropTypes.func.isRequired, - }; - - constructor(props) { - super(props); - /* istanbul ignore next */ - this.state = { - modalOpen: false, - coverLetter: '', - load: false, - }; - this.handleChange = this.handleChange.bind(this); - this.handleOpen = this.handleOpen.bind(this); - this.handleApply = this.handleApply.bind(this); - } - - componentWillUpdate() { - this.fixBody(); - } - - componentDidUpdate() { - this.fixBody(); - } - - fixBody = () => { - const anotherModal = document.getElementsByClassName('ui page modals') - .length; - if (anotherModal > 0) - document.body.classList.add('scrolling', 'dimmable', 'dimmed'); - }; - - handleChange(event) { - this.setState({ coverLetter: event.target.value }); - } - - handleOpen() { - this.setState({ modalOpen: true }); - } - - handleClose = () => - this.setState({ - modalOpen: false, - load: false, - }); +export default class InfoModal extends GeneralModal { handleApply = () => { this.setState({ load: true }); -- GitLab From e1d23294c4da3c0caf00f6cf8e4caecb341f3a9e Mon Sep 17 00:00:00 2001 From: Juan Pakpahan <juan.alexander@ui.ac.id> Date: Tue, 26 Nov 2019 20:39:57 +0700 Subject: [PATCH 2/3] fix GeneralModal class error --- assets/js/components/GeneralModal.jsx | 101 +++++++++++++------------- 1 file changed, 50 insertions(+), 51 deletions(-) diff --git a/assets/js/components/GeneralModal.jsx b/assets/js/components/GeneralModal.jsx index f38e6089..7ffc6fd0 100644 --- a/assets/js/components/GeneralModal.jsx +++ b/assets/js/components/GeneralModal.jsx @@ -3,56 +3,55 @@ import PropTypes from 'prop-types'; import ModalAlert from './../components/ModalAlert'; export default class GeneralModal extends React.Component { - static propTypes = { - data: PropTypes.object.isRequired, - active: PropTypes.bool.isRequired, - buttonTitle: PropTypes.string.isRequired, - resume: PropTypes.string, - studentId: PropTypes.number.isRequired, - updateStatus: PropTypes.func.isRequired, - }; - - constructor(props) { - super(props); - /* istanbul ignore next */ - this.state = { - modalOpen: false, - coverLetter: '', - load: false, - }; - this.handleChange = this.handleChange.bind(this); - this.handleOpen = this.handleOpen.bind(this); - this.handleApply = this.handleApply.bind(this); - } - - componentWillUpdate() { - this.fixBody(); - } - - componentDidUpdate() { - this.fixBody(); - } - - fixBody = () => { - const anotherModal = document.getElementsByClassName('ui page modals') - .length; - if (anotherModal > 0) - document.body.classList.add('scrolling', 'dimmable', 'dimmed'); + static propTypes = { + data: PropTypes.object.isRequired, + active: PropTypes.bool.isRequired, + buttonTitle: PropTypes.string.isRequired, + resume: PropTypes.string, + studentId: PropTypes.number.isRequired, + updateStatus: PropTypes.func.isRequired, + }; + + constructor(props) { + super(props); + /* istanbul ignore next */ + this.state = { + modalOpen: false, + coverLetter: '', + load: false, }; - - handleChange(event) { - this.setState({ coverLetter: event.target.value }); - } - - handleOpen() { - this.setState({ modalOpen: true }); - } - - handleClose = () => - this.setState({ - modalOpen: false, - load: false, - }); - - } + this.handleChange = this.handleChange.bind(this); + this.handleOpen = this.handleOpen.bind(this); + this.handleApply = this.handleApply.bind(this); + } + + componentWillUpdate() { + this.fixBody(); + } + + componentDidUpdate() { + this.fixBody(); + } + + fixBody = () => { + const anotherModal = document.getElementsByClassName('ui page modals') + .length; + if (anotherModal > 0) + document.body.classList.add('scrolling', 'dimmable', 'dimmed'); + }; + + handleChange(event) { + this.setState({ coverLetter: event.target.value }); + } + + handleOpen() { + this.setState({ modalOpen: true }); + } + + handleClose = () => + this.setState({ + modalOpen: false, + load: false, + }); } + -- GitLab From ef5ba699a805bd17cc1267dba15a4ffdd310bc3d Mon Sep 17 00:00:00 2001 From: Juan Pakpahan <juan.alexander@ui.ac.id> Date: Tue, 26 Nov 2019 21:02:03 +0700 Subject: [PATCH 3/3] try fix handleApply issue on GeneralModal --- assets/js/components/GeneralModal.jsx | 4 ++++ assets/js/components/InfoModal.jsx | 4 ---- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/assets/js/components/GeneralModal.jsx b/assets/js/components/GeneralModal.jsx index 7ffc6fd0..de77b992 100644 --- a/assets/js/components/GeneralModal.jsx +++ b/assets/js/components/GeneralModal.jsx @@ -53,5 +53,9 @@ export default class GeneralModal extends React.Component { modalOpen: false, load: false, }); + + handleApply = () => { + this.setState({ load: true }); + }; } diff --git a/assets/js/components/InfoModal.jsx b/assets/js/components/InfoModal.jsx index 940aba74..228223a2 100644 --- a/assets/js/components/InfoModal.jsx +++ b/assets/js/components/InfoModal.jsx @@ -6,10 +6,6 @@ import GeneralModal from './GeneralModal'; export default class InfoModal extends GeneralModal { - handleApply = () => { - this.setState({ load: true }); - }; - render() { return ( <Modal -- GitLab