EntityDetail.jsx 2.48 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
18
19
import { connect } from 'react-redux';
import type { MapStateToProps, MapDispatchToProps } from 'react-redux';

import cn from 'classnames';

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
27
import type { BeatObject } from '@helpers/beat';

Jaden DIEFENBAUGH's avatar
Jaden DIEFENBAUGH committed
28
29
import DataformatEditor from './DataformatEditor.jsx';
import AlgorithmEditor from './AlgorithmEditor.jsx';
30

Jaden's avatar
Jaden committed
31
type Props = {
32
33
	match: any,
	getEntityObject: () => BeatObject,
Jaden's avatar
Jaden committed
34
35
};

36
type Tab = '0' | '1' | '2';
Jaden's avatar
Jaden committed
37

38
39
40
type State = {
	activeTab: Tab,
};
41

42
43
44
45
46
47
48
const mapStateToProps: MapStateToProps<*,*,*> = (state, ownProps) => {
	const entity = ownProps.match.params.entity;
	const name = ownProps.match.params.name;
	console.log(`${ entity }: ${ name }`);
	const obj = {
		getEntityObject: (): BeatObject => Selectors[`${ entity }Get`](state).find(o => o.name === name) || {name: '', contents: {}},
	};
49

50
51
	return obj;
};
52

53
54
55
56
class EntityDetail extends React.Component<Props, State> {
	constructor(props: Props){
		super(props);
		console.log(props.match);
57
58
	}

59
60
61
	state = {
		activeTab: '0',
	}
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
	switchToTab = (tab: Tab) => {
		this.setState({
			activeTab: tab
		});
	}

	render () {
		return (
			<div>
				<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>
				<TabContent activeTab={this.state.activeTab}>
					<TabPane tabId='0'>
Jaden DIEFENBAUGH's avatar
Jaden DIEFENBAUGH committed
100
101
						{ this.props.match.params.entity === 'algorithm' && <AlgorithmEditor data={this.props.getEntityObject()} /> }
						{ this.props.match.params.entity === 'dataformat' && <DataformatEditor data={this.props.getEntityObject()} /> }
102
103
104
105
106
107
108
109
110
111
112
113
114
					</TabPane>
					<TabPane tabId='1'>
					</TabPane>
					<TabPane tabId='2'>
						<pre>{ JSON.stringify(this.props.getEntityObject(), null, 4) }</pre>
					</TabPane>
				</TabContent>
			</div>
		);
	}
}

export default connect(mapStateToProps)(EntityDetail);