Setting pages.

[daniele97]

Hi, is it possible to create more than one setting page and to switch among them through buttons?

[Gondwana]

Yes. Here are some snippets from something of mine. This is highly ugly, but does work. For greater elegance and maintainability, think of your settings page as a state machine and centralise responsibility for setting the relevant menu-control settings when changing states.

    <Page>
      {props.settings.menu === 'false' ? null : (
        <Section title={
          <Text bold align="center">
            MENU
          </Text>
        }>
          <Button
            label="Defaults"
            onClick={() => {
              props.settingsStorage.setItem('menu', 'false');
              props.settingsStorage.setItem('defaults', 'true');
              props.settingsStorage.setItem('slideSettings', 'false');
              props.settingsStorage.setItem('editSlide', 'false');
              props.settingsStorage.setItem('deleteSlide', 'false');
            }}
          />
          {slides.length>=MAX_SLIDES? null : (
            <Button
              label="Add a slide"
              onClick={() => {
                props.settingsStorage.setItem('menu', 'false');
                props.settingsStorage.setItem('slideSettings', 'true');
              }}
            />
          )}
   ...

      {props.settings.defaults === 'false' ? null : (
        <Section title={
          <Text bold align="center">
            Defaults
          </Text>
        }>
          <Button
            label="Back to menu"
            onClick={() => {
              props.settingsStorage.setItem('menu', 'true');
              props.settingsStorage.setItem('defaults', 'false');
            }}
          />
        </Section>
      )}

      {props.settings.slideSettings === 'false' ? null : (
        <Section title={
          <Text bold align="center">
            Slide Settings
          </Text>
        }>
...

[daniele97]

Hi and thanks for the answer! Your solution seems to work, even if i can't properly run your example.

What i've done yesterday is create a function at the event onClick on the back button that call registerSettingsPage with the menu page as argument. Something like this:

function backMain(){

registerSettingsPage(showMainPage);

}

I defined some functions like that to allows me showing different pages, i don't know if it's the best solution, but it works fine.

[Gondwana]

I never thought of that, and had no idea that it would work. It could well lead to better-structured code than my spaghetti-laden mess.