...
 
Commits (3)
import React from 'react'
const ConfirmationModal = (props) => {
return (
<div className={'modal ' + (props.active ? 'is-active' : '')}>
<div className='modal-background' onClick={props.onCancel} />
<div className='modal-card'>
<header className='modal-card-head'>
<p className='modal-card-title '>{props.contentText || 'Are you sure?'}</p>
</header>
<footer className='modal-card-footer'>
<div className='field is-grouped'>
<button className={'button is-fullwidth ' + (props.color || 'is-success')} onClick={props.onConfirm}>
{props.confirmText || 'Save changes'}
</button>
<button className='button is-fullwidth' onClick={props.onCancel}>
{props.cancelText || 'Cancel'}
</button>
</div>
</footer>
</div>
<button className='modal-close is-large' aria-label='close' />
</div>
)
}
export default ConfirmationModal
import React from 'react'
import ConfirmationModal from '../../components/ConfirmationModal.jsx'
import * as api from '../../api.jsx'
const BackButton = (props) => (
......@@ -20,12 +21,22 @@ const SaveButton = (props) => (
</button>
)
const DeleteButton = (props) => (
<button className='button is-link is-fullwidth is-danger' disabled={!props.exists} onClick={props.onClick}>
<span className='icon is-small'>
<i className='fa fa-trash' />
</span>
<span>{'delete'}</span>
</button>
)
class EditPanel extends React.Component {
state = {
id: null,
name: '',
description: '',
score: ''
score: '',
deleting: false
}
static getDerivedStateFromProps (nextProps, prevState) {
......@@ -73,7 +84,7 @@ class EditPanel extends React.Component {
if (this.state.id) {
fb.id = this.state.id
api.put(uri, fb)
.then(() => this.props.goBack)
.then(() => this.props.goBack())
} else {
api.post(uri, fb)
.then(() => {
......@@ -87,6 +98,13 @@ class EditPanel extends React.Component {
}
}
deleteFeedback = () => {
if (this.state.id) {
api.del('feedback/' + this.props.problemID + '/' + this.state.id)
.then(() => this.props.goBack())
}
}
render () {
return (
<nav className='panel'>
......@@ -137,6 +155,10 @@ class EditPanel extends React.Component {
<BackButton onClick={this.props.goBack} />
<SaveButton onClick={this.saveFeedback} exists={this.props.feedback}
disabled={!this.state.name || !this.state.score || isNaN(parseInt(this.state.score))} />
<DeleteButton onClick={() => { this.setState({deleting: true}) }} exists={this.props.feedback} />
<ConfirmationModal contentText='Do you want to irreversibly delete this feedback?'
color='is-danger' confirmText='Delete feedback' active={this.state.deleting}
onConfirm={this.deleteFeedback} onCancel={() => { this.setState({deleting: false}) }} />
</div>
</nav>
)
......