I want to refactor this code but am wondering how I should start it. I'm not sure this code is totally against clean code or not. I'm thinking to use RxJS or a JavaScript builtin method. I'd like to have some help here to learn how to have clean code or how I can minimize the code to few line or chain multiple method of RxJS or JS to get rid of if conditions.
public loadChart(): void {
this.chartDataSets = [];
let allData = this.availableDataSet;
if(this.selectedAttribute === Dashbaord.All && this.selectedComponent === Dashbaord.All) {
this.prepareIntialData();
}
if (this.selectedAttribute === Dashbaord.All && this.selectedComponent !== Dashbaord.All) {
const groupedByComponent = this.pendingActionDataSet.groupByArray(x => x.component);
allData = groupedByComponent[this.selectedComponent];
}
if (this.selectedAttribute !== Dashbaord.All && this.selectedComponent === Dashbaord.All) {
allData = this.groupedByAttribute[this.selectedAttribute].flattenArray();//["",""]
const components = allData.groupByArray(x => x.component);//["key":["values"]]
this.componentOptions = Mapper.mapToSelectItemWithAll(Object.keys(components));
}
if (this.selectedAttribute !== Dashbaord.All && this.selectedComponent !== Dashbaord.All) {
const allDataByAttribute = this.groupedByAttribute[this.selectedAttribute].flattenArray();
const groupedByComponent = allDataByAttribute.groupByArray(x => x.component);
this.componentOptions = Mapper.mapToSelectItemWithAll(Object.keys(groupedByComponent));
if (!this.componentOptions.filter(x => x.value === this.selectedComponent).length) {
this.selectedComponent = Dashbaord.All;
allData = allDataByAttribute;
} else {
allData = groupedByComponent[this.selectedComponent];
}
}
this.prepareChartData(allData);
}