[js] use only 1 save button! closes #105

conda/js/src/components/EntityDetail.jsx

@@ -23,8 +23,9 @@ import {
 	Link
 } from 'react-router-dom';
 
-import type { BeatObject } from '@helpers/beat';
+import type { BeatObject, BeatEntity } from '@helpers/beat';
 import { getDefaultEntityObject } from '@helpers/beat';
+import { genModuleApiFuncs } from '@helpers/api';
 import ValidSchemaBadge from './ValidSchemaBadge.jsx';
 
 import DataformatEditorContainer from './dataformat';
@@ -47,6 +48,8 @@ type Props = {
 	getEntityObject: () => BeatObject,
 	// updates the current object
 	updateFunc: (BeatObject) => any,
+	// the current BEAT entity being show
+	entity: BeatEntity,
 };
 
 // 3 tabs so far: editor, docs, raw json
@@ -76,6 +79,8 @@ export class EntityDetail extends React.Component<Props, State> {
 
 	saveChanges = (newObj: BeatObject) => {
 		this.props.updateFunc(newObj);
+		const put = genModuleApiFuncs(this.props.entity).put;
+		return put([newObj]);
 	}
 
 	render () {
@@ -86,13 +91,13 @@ export class EntityDetail extends React.Component<Props, State> {
 					<Col>
 						<h4 style={{'textAlign': 'center'}}>
 							<span style={{'textTransform': 'capitalize'}}>
-								{ this.props.match.params.entity }
+								{ this.props.entity }
 							</span>
 							{' '}
 							<pre style={{display: 'inline'}}>
 								{ this.props.getEntityObject().name }
 							</pre>
-							<ValidSchemaBadge entity={this.props.match.params.entity} obj={this.props.getEntityObject()} />
+							<ValidSchemaBadge entity={this.props.entity} obj={this.props.getEntityObject()} />
 						</h4>
 					</Col>
 				</Row>
@@ -128,56 +133,56 @@ export class EntityDetail extends React.Component<Props, State> {
 							{/* Uses the appropriate editor, could probably be done nicer */}
 							<TabPane tabId='0'>
 								{
-									this.props.match.params.entity === 'algorithm' &&
+									this.props.entity === 'algorithm' &&
 										<AlgorithmEditorContainer
 											data={this.props.getEntityObject()}
 											saveFunc={this.saveChanges}
 										/>
 								}
 								{
-									this.props.match.params.entity === 'dataformat' &&
+									this.props.entity === 'dataformat' &&
 										<DataformatEditorContainer
 											data={this.props.getEntityObject()}
 											saveFunc={this.saveChanges}
 										/>
 								}
 								{
-									this.props.match.params.entity === 'library' &&
+									this.props.entity === 'library' &&
 										<LibraryEditorContainer
 											data={this.props.getEntityObject()}
 											saveFunc={this.saveChanges}
 										/>
 								}
 								{
-									this.props.match.params.entity === 'database' &&
+									this.props.entity === 'database' &&
 										<DatabaseEditorContainer
 											data={this.props.getEntityObject()}
 											saveFunc={this.saveChanges}
 										/>
 								}
 								{
-									this.props.match.params.entity === 'experiment' &&
+									this.props.entity === 'experiment' &&
 										<ExperimentEditorContainer
 											data={this.props.getEntityObject()}
 											saveFunc={this.saveChanges}
 										/>
 								}
 								{
-									this.props.match.params.entity === 'toolchain' &&
+									this.props.entity === 'toolchain' &&
 										<ToolchainEditorContainer
 											data={this.props.getEntityObject()}
 											saveFunc={this.saveChanges}
 										/>
 								}
 								{
-									this.props.match.params.entity === 'plotter' &&
+									this.props.entity === 'plotter' &&
 										<PlotterEditorContainer
 											data={this.props.getEntityObject()}
 											saveFunc={this.saveChanges}
 										/>
 								}
 								{
-									this.props.match.params.entity === 'plotterparameter' &&
+									this.props.entity === 'plotterparameter' &&
 										<PlotterparameterEditorContainer
 											data={this.props.getEntityObject()}
 											saveFunc={this.saveChanges}
@@ -211,6 +216,7 @@ const mapStateToProps = (state, ownProps) => {
 		// uses a selector based off the entity and finds the obj given the name
 		// if the obj doesnt exist (huge edge case) just return a default obj to not break everything
 		getEntityObject: (): BeatObject => Selectors[`${ entity }Get`](state).find(o => o.name === name) || getDefaultEntityObject(),
+		entity,
 	};
 
 	return obj;

conda/js/src/components/MainNav.jsx

@@ -116,6 +116,9 @@ export class MainNav extends React.Component<Props, State> {
 						</NavItem>
 						*/
 					}
+					{
+						// Dont need a 'save all' button anymore
+						/*
 					<NavItem>
 						<Button outline color={this.props.unsavedChanges ? 'primary' : 'secondary'}
 							disabled={this.state.isSaving}
@@ -125,6 +128,8 @@ export class MainNav extends React.Component<Props, State> {
 							Save All
 						</Button>
 					</NavItem>
+						*/
+					}
 				</Nav>
 			</Navbar>
 		);