[js][df] refactor dataformat editor & tests

conda/js/src/components/dataformat/DataformatEditor.jsx

@@ -31,6 +31,7 @@ import CacheInput from '../CacheInput.jsx';
 import DeleteInputBtn from '../DeleteInputBtn.jsx';
 import TypedField from '../TypedField.jsx';
 
+import * as Actions from '@store/actions.js';
 import { BUILTIN_TYPES, getValidDataformatObj as getValidObj } from '@helpers/beat';
 import type {
 	BeatObject,
@@ -42,10 +43,7 @@ type Props = {
 	data: BeatObject,
 	dataformats: BeatObject[],
 	saveFunc: (BeatObject) => any,
-};
-
-type State = {
-	cache: any,
+	updateFunc: (BeatObject) => any,
 };
 
 const isObj = (obj): boolean => !Array.isArray(obj) && typeof obj === 'object' && obj !== null;
@@ -223,36 +221,24 @@ const RecursiveObj = ({ obj, dfs, updateFunc }: {obj: any, dfs: string[], update
 	</div>
 );
 
-export class DataformatEditor extends React.Component<Props, State> {
+export class DataformatEditor extends React.Component<Props> {
 	constructor(props: Props) {
 		super(props);
 	}
 
-	state = {
-		cache: getValidObj(this.props.data),
-	}
-
-	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,
 			}
 		});
 	}
 
 	allDfs = () => this.props.dataformats.map(d => d.name).concat(BUILTIN_TYPES);
 
-	filteredContents = (obj: any = this.state.cache.contents) => Object.entries(obj).filter(([n, v]) => n !== '#description').reduce((o, [n, v]) => ({...o, [n]: v}), {});
+	filteredContents = (obj: any = this.props.data.contents) => Object.entries(obj).filter(([n, v]) => n !== '#description').reduce((o, [n, v]) => ({...o, [n]: v}), {});
 
 	render = () => (
 		<div>
@@ -261,9 +247,9 @@ export class DataformatEditor 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='dataformat' obj={this.state.cache} />)
+					Save Changes (Changes are <ValidSchemaBadge entity='dataformat' obj={this.props.data} />)
 				</Button>
 			</div>
 			<Form onSubmit={(e) => e.preventDefault()}>
@@ -274,8 +260,8 @@ export class DataformatEditor extends React.Component<Props, State> {
 							type='text'
 							name='description'
 							placeholder='Dataformat 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>
@@ -287,10 +273,20 @@ export class DataformatEditor extends React.Component<Props, State> {
 }
 
 const mapStateToProps = (state, ownProps) => {
+	const dfs = Selectors.dataformatGet(state);
 	const obj = {
-		dataformats: Selectors.dataformatGet(state),
+		dataformats: dfs,
+		data: dfs[ownProps.index] || getValidObj()
 	};
 	return obj;
 };
 
-export default connect(mapStateToProps)(DataformatEditor);
+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[`dataformatUpdate`](obj.name, obj));
+	},
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(DataformatEditor);