1

Suppose, my application consists of many components, where users need to fill theirs information, something like this:

-Select city
`-Select library
 `-Select book
  `-... a lot of components like above 

So, application has determined data flow, first user need to select city, then library, then book, etc.

The data flow looks like this, for example, when user chooses city, in next step, there will be list of libraries specially for chosen city, then user selects library, and list of books in chosen library will be shown respectively.

The problem is, that when user has selected city, library and book, he wants to choose another city, it must load again libraries, obviously, then what should I do in application with selected book, other selected components? I understand, need to reset them, set selected book to null, whatever the reset works.

However, do I really need to manually describe all steps, like in pseudocode:

onCitySelected(selectedCity) {
 currentCity = selectedCity;
 getLibraries(selectedCity);
 resetBooks();
 //reset...
 //a lot of reset functions...
}

?


How can I avoid such verbose code, which application design should I use?

I'm using React+Redux, if it helps.

1

You could do this more generic:

class SelectList {
  constructor(callbackOnChange, items) {
    // we call this method when our selected one changes
    this.callbackOnChange = callbackOnChange;

    // list of items available
    this.items = items;

    // selected item
    this.selectedItem = null;
  }

  select(item) {
    this.selectedItem = item;
    this.callbackOnChange(this, item);
  }

  reset() {
    this.selectedItem = null;
  }

}

class SelectListsWorkflow() {
  constructor() {
    this.lists = [
      new SelectList(this.handleChange, ['city 1', 'city 2']),
      new SelectList(this.handleChange, ['library 1', 'library2']),
      new SelectList(this.handleChange, ['book 1', 'book 2']),
    ];
  }

  handleChange(selectedList, selectedItem) {
    // your logic to unset the selected value in lists after the current list
    // for example:
    let startReset = false;
    this.lists.each((list) => {
      if(list === selectedList) {
        startReset = true;
      }
      if(startReset) {
        list.reset();
      }
    });
  }
}

That way you can relatively easy add more lists to it and keep the logic consistent. Also the responsibilities are more separated. Workflow handles it's own logic,

  • Seems great, however, instead of new SelectList, I have <SelectList/> react components, maybe you know, how do I supposed to call reset in <SelectList/> from inside SelectListsWorkflow? – Yurii N. Feb 10 '17 at 10:22
1

I would delay resetting the component until you need to show that component again. You should hide or disable components that aren't needed yet. Before you show a component, you test the data associated for that component, if the data is no longer valid, then clear the component before showing it.

This also has the benefit that if there's any non-linear data, then you have the option to not reset the data. In your example, if a user wants to search a particular book in multiple libraries, they won't need to fill the book again.

  • It's another fine approach, but it also adds problem with checking is valid data or not, because it would be non-linear. – Yurii N. Feb 10 '17 at 10:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.