[js][db] refactored db editor & tests, reenabled creation test

conda/js/src/components/database/DatabaseEditor.jsx

@@ -35,6 +35,7 @@ import type { BeatObject } from '@helpers/beat';
 
 import * as Selectors from '@store/selectors.js';
 
+import * as Actions from '@store/actions.js';
 import ValidSchemaBadge from '../ValidSchemaBadge.jsx';
 import CacheInput from '../CacheInput.jsx';
 import DeleteInputBtn from '../DeleteInputBtn.jsx';
@@ -48,10 +49,10 @@ type Props = {
 	saveFunc: (BeatObject) => any,
 	databases: BeatObject[],
 	dataformats: BeatObject[],
+	updateFunc: (BeatObject) => any,
 };
 
 type State = {
-	cache: any,
 	activeProtocol: number,
 };
 
@@ -80,24 +81,15 @@ export class DatabaseEditor extends React.Component<Props, State> {
 	}
 
 	state = {
-		cache: getValidObj(this.props.data),
 		activeProtocol: 0,
 	}
 
-	componentWillReceiveProps (nextProps: Props) {
-		this.setState({
-			cache: getValidObj(nextProps.data),
-		});
-	}
-
 	setContents = (newContents: any) => {
-		this.setState({
-			cache: {
-				...this.state.cache,
-				contents: {
-					'description': this.state.cache.contents['description'],
-					...newContents,
-				}
+		this.props.updateFunc({
+			...this.props.data,
+			contents: {
+				'description': this.props.data.contents['description'],
+				...newContents,
 			}
 		});
 	}
@@ -108,13 +100,13 @@ export class DatabaseEditor extends React.Component<Props, State> {
 
 	updateProtocol = (index: number, obj: Protocol) => {
 		this.setContents({
-			...this.state.cache.contents,
-			protocols: this.state.cache.contents.protocols.map((o, i) => i === index ? obj : o)
+			...this.props.data.contents,
+			protocols: this.props.data.contents.protocols.map((o, i) => i === index ? obj : o)
 		});
 	}
 
 	updateSet = (idxProtocol: number, idxSet: number, obj: Set) => {
-		const protocol = this.state.cache.contents.protocols[idxProtocol];
+		const protocol = this.props.data.contents.protocols[idxProtocol];
 		this.updateProtocol(
 			idxProtocol,
 			{
@@ -507,7 +499,7 @@ export class DatabaseEditor extends React.Component<Props, State> {
 
 	render = () => {
 		const protocolIdx = this.state.activeProtocol;
-		const protocol = protocolIdx > -1 ? this.state.cache.contents.protocols[protocolIdx] || undefined : undefined;
+		const protocol = protocolIdx > -1 ? this.props.data.contents.protocols[protocolIdx] || undefined : undefined;
 
 		return (
 			<div className='databaseEditor'>
@@ -516,12 +508,12 @@ export class DatabaseEditor extends React.Component<Props, State> {
 						className='mx-auto'
 						outline
 						color='secondary'
-						onClick={() => this.props.saveFunc(this.state.cache)}
+						onClick={() => this.props.saveFunc(this.props.data)}
 					>
-						Save Changes (Changes are <ValidSchemaBadge entity='database' obj={this.state.cache} />)
+						Save Changes (Changes are <ValidSchemaBadge entity='database' obj={this.props.data} />)
 					</Button>
 					<TemplateButton
-						data={this.state.cache}
+						data={this.props.data}
 						entity={'database'}
 					/>
 				</div>
@@ -533,8 +525,8 @@ export class DatabaseEditor extends React.Component<Props, State> {
 								type='text'
 								name='description'
 								placeholder='Database description...'
-								value={this.state.cache.contents['description']}
-								onChange={e => this.setContents({ ...this.state.cache.contents, 'description': e.target.value})}
+								value={this.props.data.contents['description']}
+								onChange={e => this.setContents({ ...this.props.data.contents, 'description': e.target.value})}
 							/>
 						</FormGroup>
 						<FormGroup>
@@ -543,8 +535,8 @@ export class DatabaseEditor extends React.Component<Props, State> {
 								type='text'
 								name='rootFolder'
 								placeholder='Valid system path...'
-								value={this.state.cache.contents['root_folder']}
-								onChange={e => this.setContents({ ...this.state.cache.contents, 'root_folder': e.target.value})}
+								value={this.props.data.contents['root_folder']}
+								onChange={e => this.setContents({ ...this.props.data.contents, 'root_folder': e.target.value})}
 							/>
 						</FormGroup>
 					</FormGroup>
@@ -563,15 +555,15 @@ export class DatabaseEditor extends React.Component<Props, State> {
 							</DropdownToggle>
 							<DropdownMenu>
 								{
-									this.state.cache.contents.protocols
+									this.props.data.contents.protocols
 									.map((p, i) =>
 										<DropdownItem
 											id={`protocolChoice${ i }`}
 											key={i}
 											onClick={() => this.activateProtocol(i)}
 										>
-											{ this.state.cache.contents.protocols[i].name }{' '}
-											({ this.state.cache.contents.protocols[i].template })
+											{ this.props.data.contents.protocols[i].name }{' '}
+											({ this.props.data.contents.protocols[i].template })
 										</DropdownItem>
 									)
 								}
@@ -580,11 +572,11 @@ export class DatabaseEditor extends React.Component<Props, State> {
 						<ButtonGroup>
 							<Button outline color='danger'
 								onClick={e => {
-									const protocols = this.state.cache.contents.protocols
+									const protocols = this.props.data.contents.protocols
 									.filter((p, i) => i !== protocolIdx);
 
 									this.setContents({
-										...this.state.cache.contents,
+										...this.props.data.contents,
 										protocols
 									});
 
@@ -595,7 +587,7 @@ export class DatabaseEditor extends React.Component<Props, State> {
 							</Button>
 							<Button outline color='secondary'
 								onClick={e => {
-									const protocols = [...this.state.cache.contents.protocols];
+									const protocols = [...this.props.data.contents.protocols];
 									protocols.splice(
 										protocolIdx + 1,
 										0,
@@ -603,7 +595,7 @@ export class DatabaseEditor extends React.Component<Props, State> {
 									);
 
 									this.setContents({
-										...this.state.cache.contents,
+										...this.props.data.contents,
 										protocols
 									});
 
@@ -618,14 +610,14 @@ export class DatabaseEditor extends React.Component<Props, State> {
 							color='success'
 							id='newProtocol'
 							onClick={e => {
-								const protocols = [...this.state.cache.contents.protocols, {
+								const protocols = [...this.props.data.contents.protocols, {
 									name: '',
 									template: '',
 									sets: [],
 								}];
 
 								this.setContents({
-									...this.state.cache.contents,
+									...this.props.data.contents,
 									protocols
 								});
 
@@ -644,7 +636,7 @@ export class DatabaseEditor extends React.Component<Props, State> {
 					<h4>Quick Jump:</h4>
 					<ListGroup>
 						{
-							this.state.cache.contents.protocols.map((p, i) => {
+							this.props.data.contents.protocols.map((p, i) => {
 								const setList = (
 									<ListGroup className='mt-1'>
 										{
@@ -744,11 +736,11 @@ export class DatabaseEditor extends React.Component<Props, State> {
 											<ButtonGroup className='float-right'>
 												<Button size='sm' outline color='danger'
 													onClick={e => {
-														const protocols = this.state.cache.contents.protocols
+														const protocols = this.props.data.contents.protocols
 														.filter((p, i) => i !== protocolIdx);
 
 														this.setContents({
-															...this.state.cache.contents,
+															...this.props.data.contents,
 															protocols
 														});
 
@@ -759,7 +751,7 @@ export class DatabaseEditor extends React.Component<Props, State> {
 												</Button>
 												<Button size='sm' outline color='secondary'
 													onClick={e => {
-														const protocols = [...this.state.cache.contents.protocols];
+														const protocols = [...this.props.data.contents.protocols];
 														protocols.splice(
 															protocolIdx + 1,
 															0,
@@ -767,7 +759,7 @@ export class DatabaseEditor extends React.Component<Props, State> {
 														);
 
 														this.setContents({
-															...this.state.cache.contents,
+															...this.props.data.contents,
 															protocols
 														});
 
@@ -785,14 +777,14 @@ export class DatabaseEditor extends React.Component<Props, State> {
 						}
 						<ListGroupItem tag='button' action className='text-primary'
 							onClick={e => {
-								const protocols = [...this.state.cache.contents.protocols, {
+								const protocols = [...this.props.data.contents.protocols, {
 									name: '',
 									template: '',
 									sets: [],
 								}];
 
 								this.setContents({
-									...this.state.cache.contents,
+									...this.props.data.contents,
 									protocols
 								});
 
@@ -809,11 +801,21 @@ export class DatabaseEditor extends React.Component<Props, State> {
 }
 
 const mapStateToProps = (state, ownProps) => {
+	const dbs = Selectors.databaseGet(state);
 	const obj = {
-		databases: Selectors.databaseGet(state),
+		databases: dbs,
 		dataformats: Selectors.dataformatGet(state),
+		data: dbs[ownProps.index] || getValidObj()
 	};
 	return obj;
 };
 
-export default connect(mapStateToProps)(DatabaseEditor);
+const mapDispatchToProps = (dispatch, ownProps) => ({
+	// replace the obj in the Redux store with the new object
+	updateFunc: (obj) => {
+		console.log(`dispatching for ${ obj.name }`);
+		dispatch(Actions[`databaseUpdate`](obj.name, obj));
+	},
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(DatabaseEditor);