Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add Confirmation Prompt for Cancelling and Deleting Student Questions #71

Merged
merged 9 commits into from
Mar 19, 2018
1 change: 1 addition & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ with the current date and the next changes should go under a **[Next]** header.

* Improve spacing of course buttons on homepage. ([@nwalters512](https://github.com/nwalters512) in [#60](https://github.com/illinois/queue/pull/60))
* Add support and tooling for Sequelize database migrations. ([@nwalters512](https://github.com/nwalters512) in [#56](https://github.com/illinois/queue/pull/56))
* Add confirmation prompt for cancelling and deleting student questions. ([@muakasan](https://github.com/muakasan) in [#71](https://github.com/illinois/queue/pull/71))

## 13 March 2018

Expand Down
16 changes: 16 additions & 0 deletions components/ConfirmCancelQuestionModal.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import React from 'react'
import ConfirmModal from './ConfirmModal'

const ConfirmCancelQuestionModal = props => (
<ConfirmModal
isOpen={props.isOpen}
toggle={props.toggle}
confirm={props.confirm}
descText="You will stop answering this question."
confirmText="Cancel question"
/>
)

ConfirmCancelQuestionModal.propTypes = ConfirmModal.propTypes

export default ConfirmCancelQuestionModal
16 changes: 16 additions & 0 deletions components/ConfirmDeleteQuestionModal.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import React from 'react'
import ConfirmModal from './ConfirmModal'

const ConfirmDeleteQuestionModal = props => (
<ConfirmModal
isOpen={props.isOpen}
toggle={props.toggle}
confirm={props.confirm}
descText="This question will be deleted."
confirmText="Delete question"
/>
)

ConfirmDeleteQuestionModal.propTypes = ConfirmModal.propTypes

export default ConfirmDeleteQuestionModal
30 changes: 9 additions & 21 deletions components/ConfirmDeleteQueueModal.js
Original file line number Diff line number Diff line change
@@ -1,28 +1,16 @@
import React from 'react'
import PropTypes from 'prop-types'
import { Modal, ModalHeader, ModalBody, ModalFooter, Button } from 'reactstrap'
import ConfirmModal from './ConfirmModal'

const ConfirmDeleteQueueModal = props => (
<Modal isOpen={props.isOpen} toggle={props.toggle}>
<ModalHeader>Are you sure?</ModalHeader>
<ModalBody>
This queue and all its open questions will be deleted.
</ModalBody>
<ModalFooter>
<Button color="danger" onClick={props.confirm}>
Delete queue
</Button>
<Button color="secondary" onClick={props.toggle}>
Cancel
</Button>
</ModalFooter>
</Modal>
<ConfirmModal
isOpen={props.isOpen}
toggle={props.toggle}
confirm={props.confirm}
descText="This queue and all its open questions will be deleted."
confirmText="Delete queue"
/>
)

ConfirmDeleteQueueModal.propTypes = {
isOpen: PropTypes.bool.isRequired,
toggle: PropTypes.func.isRequired,
confirm: PropTypes.func.isRequired,
}
ConfirmDeleteQueueModal.propTypes = ConfirmModal.propTypes

export default ConfirmDeleteQueueModal
31 changes: 9 additions & 22 deletions components/ConfirmLeaveQueueModal.js
Original file line number Diff line number Diff line change
@@ -1,29 +1,16 @@
import React from 'react'
import PropTypes from 'prop-types'
import { Modal, ModalHeader, ModalBody, ModalFooter, Button } from 'reactstrap'
import ConfirmModal from './ConfirmModal'

const ConfirmLeaveQueueModal = props => (
<Modal isOpen={props.isOpen} toggle={props.toggle}>
<ModalHeader>Are you sure?</ModalHeader>
<ModalBody>
If you leave the queue, you&apos;ll lose your spot and could have to wait
longer to get help.
</ModalBody>
<ModalFooter>
<Button color="danger" onClick={props.confirm}>
Leave queue
</Button>
<Button color="secondary" onClick={props.toggle}>
Cancel
</Button>
</ModalFooter>
</Modal>
<ConfirmModal
isOpen={props.isOpen}
toggle={props.toggle}
confirm={props.confirm}
descText="If you leave the queue, you'll lose your spot and could have to wait longer to get help."
confirmText="Leave queue"
/>
)

ConfirmLeaveQueueModal.propTypes = {
isOpen: PropTypes.bool.isRequired,
toggle: PropTypes.func.isRequired,
confirm: PropTypes.func.isRequired,
}
ConfirmLeaveQueueModal.propTypes = ConfirmModal.propTypes

export default ConfirmLeaveQueueModal
28 changes: 28 additions & 0 deletions components/ConfirmModal.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
import React from 'react'
import PropTypes from 'prop-types'
import { Modal, ModalHeader, ModalBody, ModalFooter, Button } from 'reactstrap'

const ConfirmModal = props => (
<Modal isOpen={props.isOpen} toggle={props.toggle}>
<ModalHeader>Are you sure?</ModalHeader>
<ModalBody>{props.descText}</ModalBody>
<ModalFooter>
<Button color="danger" onClick={props.confirm}>
{props.confirmText}
</Button>
<Button color="secondary" onClick={props.toggle}>
Cancel
</Button>
</ModalFooter>
</Modal>
)

ConfirmModal.propTypes = {
isOpen: PropTypes.bool.isRequired,
toggle: PropTypes.func.isRequired,
confirm: PropTypes.func.isRequired,
descText: PropTypes.string.isRequired,
confirmText: PropTypes.string.isRequired,
}

export default ConfirmModal
10 changes: 4 additions & 6 deletions components/Question.js
Original file line number Diff line number Diff line change
Expand Up @@ -39,10 +39,7 @@ class Question extends React.Component {
Finish Answering
</Button>
)}
<Button
color="light"
onClick={() => this.props.updateQuestionBeingAnswered(id, false)}
>
<Button color="light" onClick={() => this.props.cancelQuestion()}>
Cancel
</Button>
</Fragment>
Expand All @@ -66,7 +63,7 @@ class Question extends React.Component {
color="primary"
outline
className="mr-2"
onClick={() => this.props.updateQuestionBeingAnswered(id, true)}
onClick={() => this.props.startQuestion()}
>
Start Answering!
</Button>
Expand Down Expand Up @@ -181,7 +178,8 @@ Question.propTypes = {
didUserAskQuestion: PropTypes.bool.isRequired,
isUserCourseStaff: PropTypes.bool.isRequired,
isUserAnsweringQuestion: PropTypes.bool.isRequired,
updateQuestionBeingAnswered: PropTypes.func.isRequired,
cancelQuestion: PropTypes.func.isRequired,
startQuestion: PropTypes.func.isRequired,
editQuestion: PropTypes.func.isRequired,
finishedAnswering: PropTypes.func.isRequired,
deleteQuestion: PropTypes.func.isRequired,
Expand Down
60 changes: 54 additions & 6 deletions components/QuestionList.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,8 @@ import faSpinner from '@fortawesome/fontawesome-free-solid/faSpinner'
import Question from './Question'
import QuestionFeedback from './QuestionFeedback'
import ConfirmLeaveQueueModal from './ConfirmLeaveQueueModal'
import ConfirmDeleteQuestionModal from './ConfirmDeleteQuestionModal'
import ConfirmCancelQuestionModal from './ConfirmCancelQuestionModal'
import QuestionEdit from './QuestionEdit'

class QuestionList extends React.Component {
Expand All @@ -17,11 +19,14 @@ class QuestionList extends React.Component {

this.state = {
showFeedbackModal: false,
showLeaveModal: false,
showDeleteModal: false,
showCancelModal: false,
showQuestionEditModal: false,
attributeId: null,
feedbackId: null,
deleteId: null,
cancelId: null,
}
}

Expand Down Expand Up @@ -76,15 +81,24 @@ class QuestionList extends React.Component {
if (this.props.userId === question.askedById) {
// This user asked the question; confirm with them
this.setState({
showDeleteModal: true,
showLeaveModal: true,
deleteId: questionId,
})
} else {
// We're probably course staff, don't confirm
this.props.deleteQuestion(questionId)
// We're probably course staff
this.setState({
showDeleteModal: true,
deleteId: questionId,
})
}
}

toggleLeaveModal() {
this.setState({
showLeaveModal: !this.state.showLeaveModal,
})
}

toggleDeleteModal() {
this.setState({
showDeleteModal: !this.state.showDeleteModal,
Expand All @@ -95,6 +109,31 @@ class QuestionList extends React.Component {
this.props.deleteQuestion(this.state.deleteId)
this.setState({
showDeleteModal: false,
showLeaveModal: false,
})
}

toggleCancelModal() {
this.setState({
showCancelModal: !this.state.showCancelModal,
})
}

cancelQuestion(questionId) {
this.setState({
showCancelModal: true,
cancelId: questionId,
})
}

startQuestion(questionId) {
this.props.updateQuestionBeingAnswered(questionId, true)
}

handleConfirmedCancellation() {
this.props.updateQuestionBeingAnswered(this.state.cancelId, false)
this.setState({
showCancelModal: false,
})
}

Expand All @@ -113,9 +152,8 @@ class QuestionList extends React.Component {
}
didUserAskQuestion={this.props.userId === question.askedById}
deleteQuestion={() => this.deleteQuestion(questionId)}
updateQuestionBeingAnswered={
this.props.updateQuestionBeingAnswered
}
cancelQuestion={() => this.cancelQuestion(questionId)}
startQuestion={() => this.startQuestion(questionId)}
finishedAnswering={() => this.handleFinishedAnswering(questionId)}
editQuestion={() => this.handleEditQuestion(questionId)}
{...question}
Expand Down Expand Up @@ -159,10 +197,20 @@ class QuestionList extends React.Component {
onCancel={() => this.handleFeedbackCancel()}
/>
<ConfirmLeaveQueueModal
isOpen={this.state.showLeaveModal}
toggle={() => this.toggleLeaveModal()}
confirm={() => this.handleConfirmedDeletion()}
/>
<ConfirmDeleteQuestionModal
isOpen={this.state.showDeleteModal}
toggle={() => this.toggleDeleteModal()}
confirm={() => this.handleConfirmedDeletion()}
/>
<ConfirmCancelQuestionModal
isOpen={this.state.showCancelModal}
toggle={() => this.toggleCancelModal()}
confirm={() => this.handleConfirmedCancellation()}
/>
<QuestionEdit
question={this.props.questions[this.state.attributeId]}
isOpen={this.state.showQuestionEditModal}
Expand Down