remove state inheritance docs (#1441)

* remove state inheritance docs

* fix imports

* restore some stuff and clean up

* remove line

* add warning for component state in foreach

---------

Co-authored-by: Alek Petuskey <[email protected]>

Author: Lendemor

blog/2024-04-16-custom-components.md

@@ -10,7 +10,7 @@ meta: [
 ---
 
 ```python exec
-from pcweb.pages.docs import wrapping_react, custom_components, styling, events, getting_started, substates
+from pcweb.pages.docs import wrapping_react, custom_components, styling, events, getting_started, state_structure
 from pcweb.pages.docs.custom_components import custom_components as cc
 ```
 
@@ -118,7 +118,7 @@ def counter_sum():
     )
 ```
 
-See the [Component State]({substates.component_state.path}) page for more details on how to use this class.
+See the [Component State]({state_structure.component_state.path}) page for more details on how to use this class.
 
 ## Testing and Publishing
 

docs/substates/component_state.md docs/state_structure/component_state.mddocs/substates/component_state.md renamed to docs/state_structure/component_state.md

@@ -13,6 +13,10 @@ instance of a component, rather than existing globally in the app. A Component S
 [Event Handlers]({events.events_overview.path}),
 and is useful for creating reusable components which operate independently of each other.
 
+```md alert warning
+# ComponentState cannot be used inside `rx.foreach()` as it will only create one state instance for all elements in the loop. Each iteration of the foreach will share the same state, which may lead to unexpected behavior.
+```
+
 ## Using ComponentState
 
 ```python demo exec

docs/substates/overview.md docs/state_structure/overview.mddocs/substates/overview.md renamed to docs/state_structure/overview.md

@@ -90,38 +90,6 @@ def index():
     )
 ```
 
-## State Inheritance
-
-A substate can also inherit from another substate other than `rx.State`, allowing you to create a hierarchy of states.
-
-For example, you can create a base state that defines variables and event handlers that are common to all pages in your app, such as the current logged in user.
-
-```python
-class BaseState(rx.State):
-    """Define your base state here."""
-
-    current_user: str = ""
-
-    def logout(self):
-        self.current_user = ""
-
-
-class LoginState(BaseState):
-    """Define your login state here."""
-
-    username: str = ""
-    password: str = ""
-
-    def login(self, username, password):
-        # authenticate
-        authenticate(...)
-
-        # Set the var on the parent state.
-        self.current_user = username
-```
-
-You can access the parent state properties from a child substate automatically.
-
 ## Accessing Arbitrary States
 
 An event handler in a particular state can access and modify vars in another state instance by calling
@@ -261,4 +229,4 @@ data is loaded for processing events for a particular page or component.
 Avoid defining computed vars inside a state that contains a large amount of data, as
 states with computed vars are always loaded to ensure the values are recalculated.
 When using computed vars, it better to define them in a state that directly inherits from `rx.State` and
-does not have other states inheriting from it, to avoid loading unnecessary data.
+does not have other states inheriting from it, to avoid loading unnecessary data.

pcweb/components/docpage/sidebar/sidebar.py

@@ -137,7 +137,7 @@ def sidebar_icon(name):
         "Wrapping React": "atom",
         "Vars": "variable",
         "Events": "arrow-left-right",
-        "Substates": "boxes",
+        "State Structure": "boxes",
         "API Routes": "route",
         "Client Storage": "package-open",
         "Database": "database",

pcweb/components/docpage/sidebar/sidebar_items/learn.py

@@ -117,10 +117,10 @@ def get_sidebar_items_backend():
         api_routes,
         authentication,
         client_storage,
+        state_structure,
         database,
         events,
         state,
-        substates,
         utility_methods,
         vars,
     )
@@ -154,10 +154,10 @@ def get_sidebar_items_backend():
             ],
         ),
         create_item(
-            "Substates",
+            "State Structure",
             children=[
-                substates.overview,
-                substates.component_state,
+                state_structure.overview,
+                state_structure.component_state,
             ],
         ),
         create_item(

pcweb/pages/docs/__init__.py

@@ -122,9 +122,9 @@ def exec_blocks(doc, href):
     "docs/custom-components/overview.md": "Custom Components Overview",
     "docs/api-routes/overview.md": "API Routes Overview",
     "docs/client_storage/overview.md": "Client Storage Overview",
+    "docs/state_structure/overview.md": "State Structure Overview", 
     "docs/state/overview.md": "State Overview",
     "docs/styling/overview.md": "Styling Overview",
-    "docs/substates/overview.md": "Substates Overview",
     "docs/ui/overview.md": "UI Overview",
     "docs/wrapping-react/overview.md": "Wrapping React Overview",
     "docs/library/html/html.md": "HTML Elements",

pcweb/pcweb.py

@@ -104,7 +104,7 @@
     ("/docs/wrapping-react", "/docs/wrapping-react/overview"),
     ("/docs/vars", "/docs/vars/base-vars"),
     ("/docs/events", "/docs/events/events-overview"),
-    ("/docs/substates", "/docs/substates/overview"),
+    ("/docs/state-structure", "/docs/state-structure/overview"),
     ("/docs/api-routes", "/docs/api-routes/overview"),
     ("/docs/client-storage", "/docs/client-storage/overview"),
     ("/docs/authentication", "/docs/authentication/authentication-overview"),