-
Notifications
You must be signed in to change notification settings - Fork 8
/
Editor.jsx
102 lines (87 loc) · 2.8 KB
/
Editor.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
// Copyright 2019 Stanford University see LICENSE for license
import React, {Component} from 'react'
import { connect } from 'react-redux'
import { removeAllItems } from '../../actions/index'
import PropTypes from 'prop-types'
import ResourceTemplate from './ResourceTemplate'
import Header from './Header'
import RDFModal from './RDFModal'
import { getCurrentSession } from '../../selectors';
const _ = require('lodash')
class Editor extends Component {
constructor(props) {
super(props)
this.state = {
tempRtState: true,
resourceTemplateId: '',
showRdf: false
}
}
componentDidMount () {
if (this.state.tempRtState) {
if (this.props.location.state !== undefined) {
this.setState({
resourceTemplateId: this.props.location.state.resourceTemplateId
})
} else {
this.props.history.push("/templates");
}
this.setState({tempRtState: false})
}
}
handleRdfShow = () => {
this.setState({showRdf: true})
}
// NOTE: it's possible these handle methods for RDFModal could live in RDFModal component
handleRdfClose = () => {
this.setState({showRdf: false})
}
renderResourceTemplate = () => (
<ResourceTemplate resourceTemplateId = {this.state.resourceTemplateId} />
)
render() {
let authenticationMessage = <div className="alert alert-warning alert-dismissible">
<button className="close" data-dismiss="alert" aria-label="close">×</button>
Alert! No data can be saved unless you are logged in with group permissions.
</div>;
if (this.props.currentSession) {
authenticationMessage = <span/>
}
return(
<div id="editor">
<Header triggerEditorMenu={this.props.triggerHandleOffsetMenu}/>
{ authenticationMessage }
<div className="row">
<section className="col-md-3" style={{float: 'right'}}>
<button type="button" className="btn btn-primary btn-sm" onClick={this.handleRdfShow}>Preview RDF</button>
</section>
</div>
<div>
<RDFModal show={this.state.showRdf}
close={this.handleRdfClose}/>
</div>
{ _.isEmpty(this.state.resourceTemplateId) ? ( <div>Loading resource template...</div> ) : this.renderResourceTemplate() }
</div>
)
}
}
Editor.propTypes = {
children: PropTypes.array,
triggerHandleOffsetMenu: PropTypes.func,
resetStore: PropTypes.func,
location: PropTypes.object,
resourceTemplateId: PropTypes.string,
history: PropTypes.object,
currentSession: PropTypes.object
}
const mapStateToProps = (state) => {
return {
currentSession: getCurrentSession(state)
}
}
const mapDispatchToProps = dispatch => ({
resetStore(){
dispatch(removeAllItems())
}
})
export default connect(mapStateToProps, mapDispatchToProps)(Editor)