Application design for step by step filling information data flow

Question

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.

Answer 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,

Answer 2

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.