EntityDetail.jsx 5.33 KB
Newer Older
Jaden's avatar
Jaden committed
1
// @flow
2
import * as React from 'react';
Jaden's avatar
Jaden committed
3
4
5
6
import {
	Container,
	Row,
	Col,
7
8
9
10
11
	TabContent,
	TabPane,
	Nav,
	NavItem,
	NavLink,
Jaden's avatar
Jaden committed
12
13
} from 'reactstrap';

14
15
16
17
import { connect } from 'react-redux';

import cn from 'classnames';

18
import * as Actions from '@store/actions.js';
19
import * as Selectors from '@store/selectors.js';
Jaden's avatar
Jaden committed
20
21
22
23
24
25

import {
	Route,
	Link
} from 'react-router-dom';

26
import type { BeatObject } from '@helpers/beat';
27
import { getDefaultEntityObject } from '@helpers/beat';
28
import ValidSchemaBadge from './ValidSchemaBadge.jsx';
29

30
31
32
33
34
35
import DataformatEditorContainer from './dataformat';
import AlgorithmEditorContainer from './algorithm';
import LibraryEditorContainer from './library';
import DatabaseEditorContainer from './database';
import ExperimentEditorContainer from './experiment';
import ToolchainEditorContainer from './toolchain';
Jaden DIEFENBAUGH's avatar
Jaden DIEFENBAUGH committed
36
import PlotterEditorContainer from './plotter';
37
import PlotterparameterEditorContainer from './plotterparameter';
38

Jaden's avatar
Jaden committed
39
type Props = {
40
	match: any,
41
	history: any,
42
	getEntityObject: () => BeatObject,
43
	updateFunc: (BeatObject) => any,
Jaden's avatar
Jaden committed
44
45
};

46
type Tab = '0' | '1' | '2';
Jaden's avatar
Jaden committed
47

48
49
50
type State = {
	activeTab: Tab,
};
51

52
export class EntityDetail extends React.Component<Props, State> {
53
54
	constructor(props: Props){
		super(props);
55
56
	}

57
58
59
	state = {
		activeTab: '0',
	}
60

61
62
63
64
65
66
	switchToTab = (tab: Tab) => {
		this.setState({
			activeTab: tab
		});
	}

67
68
69
70
	saveChanges = (newObj: BeatObject) => {
		this.props.updateFunc(newObj);
	}

71
72
	render () {
		return (
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
103
104
105
106
107
108
109
110
111
112
113
114
115
			<Container>
				<Row>
					<Col>
						<h4 style={{'textAlign': 'center'}}>
							<span style={{'textTransform': 'capitalize'}}>
								{ this.props.match.params.entity }
							</span>
							{' '}
							<pre style={{display: 'inline'}}>
								{ this.props.getEntityObject().name }
							</pre>
							<ValidSchemaBadge entity={this.props.match.params.entity} obj={this.props.getEntityObject()} />
						</h4>
					</Col>
				</Row>
				<Row>
					<Col sm='12'>
						<Nav tabs className='nav-fill'>
							<NavItem>
								<NavLink
									className={cn({ active: this.state.activeTab === '0' })}
									onClick={() => this.switchToTab('0')}
								>
									Editor
								</NavLink>
							</NavItem>
							<NavItem>
								<NavLink
									className={cn({ active: this.state.activeTab === '1' })}
									onClick={() => this.switchToTab('1')}
								>
									Documentation
								</NavLink>
							</NavItem>
							<NavItem>
								<NavLink
									className={cn({ active: this.state.activeTab === '2' })}
									onClick={() => this.switchToTab('2')}
								>
									Raw JSON
								</NavLink>
							</NavItem>
						</Nav>
116
						<TabContent activeTab={this.state.activeTab} className='mt-2'>
117
118
119
							<TabPane tabId='0'>
								{
									this.props.match.params.entity === 'algorithm' &&
120
										<AlgorithmEditorContainer
121
122
123
124
125
126
											data={this.props.getEntityObject()}
											saveFunc={this.saveChanges}
										/>
								}
								{
									this.props.match.params.entity === 'dataformat' &&
127
										<DataformatEditorContainer
128
129
130
131
132
133
											data={this.props.getEntityObject()}
											saveFunc={this.saveChanges}
										/>
								}
								{
									this.props.match.params.entity === 'library' &&
134
										<LibraryEditorContainer
135
136
137
138
											data={this.props.getEntityObject()}
											saveFunc={this.saveChanges}
										/>
								}
Jaden DIEFENBAUGH's avatar
Jaden DIEFENBAUGH committed
139
140
								{
									this.props.match.params.entity === 'database' &&
141
										<DatabaseEditorContainer
Jaden DIEFENBAUGH's avatar
Jaden DIEFENBAUGH committed
142
143
144
145
											data={this.props.getEntityObject()}
											saveFunc={this.saveChanges}
										/>
								}
146
147
148
149
150
151
152
								{
									this.props.match.params.entity === 'experiment' &&
										<ExperimentEditorContainer
											data={this.props.getEntityObject()}
											saveFunc={this.saveChanges}
										/>
								}
153
154
155
156
157
158
159
								{
									this.props.match.params.entity === 'toolchain' &&
										<ToolchainEditorContainer
											data={this.props.getEntityObject()}
											saveFunc={this.saveChanges}
										/>
								}
Jaden DIEFENBAUGH's avatar
Jaden DIEFENBAUGH committed
160
161
162
163
164
165
166
								{
									this.props.match.params.entity === 'plotter' &&
										<PlotterEditorContainer
											data={this.props.getEntityObject()}
											saveFunc={this.saveChanges}
										/>
								}
167
168
169
170
171
172
173
								{
									this.props.match.params.entity === 'plotterparameter' &&
										<PlotterparameterEditorContainer
											data={this.props.getEntityObject()}
											saveFunc={this.saveChanges}
										/>
								}
174
175
							</TabPane>
							<TabPane tabId='1'>
176
177
								<Row>
									<Col>
178
										<h4 style={{textAlign: 'center'}}>Under construction 😄</h4>
179
180
									</Col>
								</Row>
181
182
183
184
185
186
187
188
							</TabPane>
							<TabPane tabId='2'>
								<pre>{ JSON.stringify(this.props.getEntityObject(), null, 4) }</pre>
							</TabPane>
						</TabContent>
					</Col>
				</Row>
			</Container>
189
190
191
192
		);
	}
}

193
const mapStateToProps = (state, ownProps) => {
194
195
196
	const entity = ownProps.match.params.entity;
	const name = ownProps.match.params.name;
	const obj = {
197
		getEntityObject: (): BeatObject => Selectors[`${ entity }Get`](state).find(o => o.name === name) || getDefaultEntityObject(),
198
199
200
201
202
	};

	return obj;
};

203
const mapDispatchToProps = (dispatch, ownProps) => ({
204
205
206
207
208
209
	updateFunc: (obj) => {
		dispatch(Actions[`${ ownProps.match.params.entity }Update`](ownProps.match.params.name, obj));
		ownProps.history.push(`/${ ownProps.match.params.entity }/${ obj.name }`);
	},
});

210
export default connect(mapStateToProps, mapDispatchToProps)(EntityDetail);