Refactor form data in ConfigurePage.js to be held in state

This change will allow dynamically modifying other state parameters and re-rendering on form data change
This commit is contained in:
VakarisZ 2021-06-30 14:24:27 +03:00
parent a82850cb64
commit 889df554ae
1 changed files with 13 additions and 10 deletions

View File

@ -27,7 +27,6 @@ class ConfigurePageComponent extends AuthComponent {
constructor(props) {
super(props);
this.currentSection = 'attack';
this.currentFormData = {};
this.initialConfig = {};
this.initialAttackConfig = {};
this.sectionsOrder = ['attack', 'basic', 'basic_network', 'ransomware', 'monkey', 'internal'];
@ -35,6 +34,7 @@ class ConfigurePageComponent extends AuthComponent {
this.state = {
attackConfig: {},
configuration: {},
currentFormData: {},
importCandidateConfig: null,
lastAction: 'none',
schema: {},
@ -213,14 +213,15 @@ class ConfigurePageComponent extends AuthComponent {
};
onChange = ({formData}) => {
this.currentFormData = formData;
let configuration = this.state.configuration;
configuration[this.state.selectedSection] = formData;
this.setState({currentFormData: formData, configuration: configuration});
};
updateConfigSection = () => {
let newConfig = this.state.configuration;
if (Object.keys(this.currentFormData).length > 0) {
newConfig[this.currentSection] = this.currentFormData;
this.currentFormData = {};
if (Object.keys(this.state.currentFormData).length > 0) {
newConfig[this.currentSection] = this.state.currentFormData;
}
this.setState({configuration: newConfig, lastAction: 'none'});
};
@ -295,8 +296,8 @@ class ConfigurePageComponent extends AuthComponent {
userChangedConfig() {
if (JSON.stringify(this.state.configuration) === JSON.stringify(this.initialConfig)) {
if (Object.keys(this.currentFormData).length === 0 ||
JSON.stringify(this.initialConfig[this.currentSection]) === JSON.stringify(this.currentFormData)) {
if (Object.keys(this.state.currentFormData).length === 0 ||
JSON.stringify(this.initialConfig[this.currentSection]) === JSON.stringify(this.state.currentFormData)) {
return false;
}
}
@ -316,7 +317,8 @@ class ConfigurePageComponent extends AuthComponent {
this.updateConfigSection();
this.currentSection = key;
this.setState({
selectedSection: key
selectedSection: key,
currentFormData: this.state.configuration[key]
});
};
@ -332,7 +334,8 @@ class ConfigurePageComponent extends AuthComponent {
this.setState({
lastAction: 'reset',
schema: res.schema,
configuration: res.configuration
configuration: res.configuration,
currentFormData: res.configuration[this.state.selectedSection]
});
this.setInitialConfig(res.configuration);
this.props.onStatusChange();
@ -407,7 +410,7 @@ class ConfigurePageComponent extends AuthComponent {
setPbaFilenameLinux: this.setPbaFilenameLinux,
selectedSection: this.state.selectedSection
})
formProperties['formData'] = this.state.configuration[this.state.selectedSection];
formProperties['formData'] = this.state.currentFormData;
formProperties['onChange'] = this.onChange;
formProperties['customFormats'] = formValidationFormats;
formProperties['transformErrors'] = transformErrors;