[js] calculate object index once instead of running `find` every time data changes

conda/js/src/components/EntityDetail.jsx

@@ -49,6 +49,8 @@ type Props = {
 	history: any,
 	// gets the object based on the current URL
 	getEntityObject: () => BeatObject,
+	// gets the object's index # in the Redux array based on the current URL
+	getEntityIndex: () => number,
 	// updates the current object
 	updateFunc: (BeatObject) => any,
 	// the current BEAT entity being show
@@ -90,6 +92,8 @@ export class EntityDetail extends React.Component<Props, State> {
 
 	render () {
 		const name = this.props.match.params.name;
+		const obj = this.props.getEntityObject();
+		const index = this.props.getEntityIndex();
 		return (
 			<Container>
 				<Row className='mb-1'>
@@ -103,7 +107,7 @@ export class EntityDetail extends React.Component<Props, State> {
 							<pre style={{display: 'inline'}}>
 								{ name }
 							</pre>
-							<ValidSchemaBadge entity={this.props.entity} obj={this.props.getEntityObject()} />
+							<ValidSchemaBadge entity={this.props.entity} obj={obj} />
 						</h4>
 						{/* path line */}
 						<InputGroup>
@@ -142,62 +146,63 @@ export class EntityDetail extends React.Component<Props, State> {
 								{
 									this.props.entity === 'algorithm' &&
 										<AlgorithmEditorContainer
-											data={this.props.getEntityObject()}
+											data={obj}
 											saveFunc={this.saveChanges}
 										/>
 								}
 								{
 									this.props.entity === 'dataformat' &&
 										<DataformatEditorContainer
-											data={this.props.getEntityObject()}
+											data={obj}
 											saveFunc={this.saveChanges}
 										/>
 								}
 								{
 									this.props.entity === 'library' &&
 										<LibraryEditorContainer
-											data={this.props.getEntityObject()}
+											data={obj}
 											saveFunc={this.saveChanges}
+											index={index}
 										/>
 								}
 								{
 									this.props.entity === 'database' &&
 										<DatabaseEditorContainer
-											data={this.props.getEntityObject()}
+											data={obj}
 											saveFunc={this.saveChanges}
 										/>
 								}
 								{
 									this.props.entity === 'experiment' &&
 										<ExperimentEditorContainer
-											data={this.props.getEntityObject()}
+											data={obj}
 											saveFunc={this.saveChanges}
 										/>
 								}
 								{
 									this.props.entity === 'toolchain' &&
 										<ToolchainEditorContainer
-											data={this.props.getEntityObject()}
+											data={obj}
 											saveFunc={this.saveChanges}
 										/>
 								}
 								{
 									this.props.entity === 'plotter' &&
 										<PlotterEditorContainer
-											data={this.props.getEntityObject()}
+											data={obj}
 											saveFunc={this.saveChanges}
 										/>
 								}
 								{
 									this.props.entity === 'plotterparameter' &&
 										<PlotterparameterEditorContainer
-											data={this.props.getEntityObject()}
+											data={obj}
 											saveFunc={this.saveChanges}
 										/>
 								}
 							</TabPane>
 							<TabPane tabId='1'>
-								<pre>{ JSON.stringify(this.props.getEntityObject(), null, 4) }</pre>
+								<pre>{ JSON.stringify(obj, null, 4) }</pre>
 							</TabPane>
 						</TabContent>
 					</Col>
@@ -216,6 +221,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(),
+		getEntityIndex: (): number => Selectors[`${ entity }Get`](state).findIndex(o => o.name === name),
 		entity,
 		prefix: Selectors.settingsGet(state).prefix,
 	};

conda/js/src/components/library/LibraryEditor.jsx

@@ -173,7 +173,7 @@ const mapStateToProps = (state, ownProps) => {
 	const libs = Selectors.libraryGet(state);
 	const obj = {
 		libraries: libs,
-		data: libs.find(l => l.name === ownProps.data.name) || getValidObj()
+		data: libs[ownProps.index] || getValidObj()
 	};
 	return obj;
 };