Two-stage setting in settings

[Obliged]

I am creating a transit-schedule app.

The application is based on the BART example, but with several customizations. Where the BART app lists all trains leaving a station I want to be able to create station/train(s) sets where the selection of trains are whitelisted and are the only trains shown to the user.

The stations and trains are selected in settings. As in the BART example, I am currently able to set stations using `<AdditiveList>` and `<TextInput onAutoComlplete={(value) => {}}>`.
The flow is like this:

Type text --> shows list of suggested stations --> select station --> station added to additive list

However what I want is something like this:

Type text --> shows list of suggested stations --> select station --> shows toggle button-list of trains --> press save --> station/trains set added to additive list

I've tried a bunch of stuff, but haven't had any success. Any suggestions?

Roughly what i have today: https://gist.github.com/Obliged/bb9eba766058e8ba52b533139c6804b8

[Gondwana]

I've never used AdditiveList, but I have implemented what I'd call a 'two-stage setting'. Run the Slideshow app by Gondwana, and you'll see that image-specific options only become visible once an image is selected. If this is vaguely related to what you want, hit me up for more details.

[Obliged]

Yes! That looks like a solution that could work for me. I'd very much appreciate some more details.

Sidenote:
I'd like to be able to delete saved settings from the Settings menu as well, but that is step 2 at the moment and should probably be solved in a separate <Section> instead of using the AdditiveList. 

[Gondwana · Accepted solution]

My approach is rather low-brow. Every second-stage setting element is wrapped in a React conditional statement like this:

 { JSON.parse(props.settingsStorage.getItem("imageSelected")) && 
          <TextInput
            label="Caption (optional)"
            placeholder=""
            settingsKey="caption"
          />
        }

The condition (JSON.parse...) is the same for every element that needs it. (IIRC, a recent update may allow multiple elements to be wrapped within a single such test.)

The setting that triggers the change (in my case 'imageSelected') can be set in your companion index.js using whatever logic you need. You could probably do it directly in the .jsx in many cases, but I still struggle with .jsx syntax.

[Gondwana]

PS. This probably won't work on Windows companions due, I suspect, to a bug in the React implementation used by Fitbit on that platform.

[Obliged]

This worked nicely, thanks! 

The most important realisation for me was that 

props.settingsStorage.setItem(<settingName>)

 would prompt the re-rendering of the settings page. I.e. similar to changes to state in normal REACT. 
So I created this thing to control it:

  function redraw(props) {
    props.settingsStorage.setItem('redraw', 'true');
  }

This allowed me to re-render whenever I wanted to. This in turn gave me the flexibility to use a local class to contain 'temporary' data.

function mySettings(props) {

  return (
    <Page>
      { !sState.stationSelected &&
        <Section title={<Text bold align="center"> Station selection </Text>}>
          {quayPicker(props)}
        </Section>
      }
      { sState.stationSelected &&
        <Section title={<Text bold align="center"> {sState.quay.name} </Text>}>
          {linePicker(props)}
        </Section>
      }
    </Page>
  );
}

const sState = new SettingsState();

registerSettingsPage(mySettings);

[Gondwana]

Nicely structured!

I'd be interested to know if it works on Windows companions for you. I suspect that React doesn't react as it should in that environment.