States in modules

[NanoscaleSimulations]

Hello there Pynecone community,

I am having trouble creating a module for my pynecone projects that can be used by simply importing and adding the component.
Basically, I want to create a module which contains a button, which shows a modal when pressed. I want to be able to use the same module for different projects.
However, I seem to have problems understanding how to make it work. It seems that the problem lies in the Modal State because it is in the module and not in the main script. Am I misunderstanding how States work? Or am I making some other dumb mistake?

The main file:

from pcconfig import config

import pynecone as pc
from .Modal import ModalComponent

class State(pc.State):
    show: bool = False

    def Change_state(self):
        self.show = not (self.show)

    def Get_state(self):
        return self.show


def index() -> pc.Component:
    return pc.center(
        ModalComponent.SubscribeInterface.Interface(),
        height = '100vh',
    )


# Add state and page to the app.
app = pc.App(state=State)
app.add_page(index)
app.compile()

The module:

import pynecone as pc

class ModalState(pc.State):
	show: bool = False

	def Change_state(self):
		self.show = not (self.show)

class SubscribeInterface:
	def Interface():
		button = pc.button('Subscribe', on_click=ModalState.Change_state)
		modal = pc.modal(
			pc.modal_overlay(
				pc.modal_content(
					pc.modal_header('Subscribe'),
					pc.modal_body(
						'Signup for our mailing list'
					),
					pc.modal_footer(
						pc.button(
							'Subscribe'
						)
					),
				)
			),
			is_open = ModalState.show
		)
		return pc.center(
			button,
			modal
		)

Error:

I appreciate any type of help and guidance. Thanx! 😄

[masenf]

After this PR merges, you will be able to define substates within a function. So what you will want to do is accept the main app State class as a parameter to your function, and then define ModalState as a substate of the main app state.

Since ModalState and State are not part of the same inheritance tree, and ModalState isn't passed to the app, when your app is compiled, the frontend knows nothing about modal_state.

If you extend ModalState from the app State, then your frontend will be looking for state.modal_state, which should be defined.

[NanoscaleSimulations]

So for now there is no way to do this, unless i add the modal state parameters to the State in the main file where the app is being compiled?

Sounds really awesome with substates being added soon