Commit ac831105 authored by Jaden DIEFENBAUGH's avatar Jaden DIEFENBAUGH

[js][df] refactor dataformat editor & tests

parent 26eb6b0d
......@@ -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);
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment