31 - Editing Pre-Filled Form Input Basics

Author: codingforentrepreneurs

full_stack_python/blog/__init__.py

@@ -1,12 +1,14 @@
 from .add import blog_post_add_page
 from .detail import blog_post_detail_page
+from .edit import blog_post_edit_page
 from .list import blog_post_list_page
 from .model import BlogPostModel
 from .state import BlogPostState
 
 __all__= [
     'blog_post_add_page',
     'blog_post_detail_page',
+    'blog_post_edit_page',
     'blog_post_list_page',
     'BlogPostModel',
     'BlogPostState'

full_stack_python/blog/edit.py

@@ -0,0 +1,72 @@
+import reflex as rx 
+
+from ..ui.base import base_page
+# from . import forms
+
+class EditExampleState(rx.State):
+    title: str = "Hello World"
+    content: str = "This is my blog post"
+
+    def handle_submit(self, form_data):
+        print(form_data)
+
+
+def blog_post_edit_sample_form() -> rx.Component:
+    return rx.form(
+            rx.vstack(
+                rx.hstack(
+                    rx.input(
+                        value=EditExampleState.title,
+                        on_change=EditExampleState.set_title,
+                        name="title",
+                        placeholder="Title",
+                        required=True,
+                        type='text',
+                        width='100%',
+                    ),
+                    width='100%'
+                ),
+                rx.text_area(
+                    value = EditExampleState.content,
+                    on_change = EditExampleState.set_content,
+                    name='content',
+                    placeholder="Your message",
+                    required=True,
+                    height='50vh',
+                    width='100%',
+                ),
+                rx.button("Submit", type="submit"),
+            ),
+            on_submit=EditExampleState.handle_submit,
+    )
+
+
+
+
+def blog_post_edit_page() -> rx.Component:
+    my_form = blog_post_edit_sample_form()
+    my_child = rx.vstack(
+            rx.heading("Edit Blog Post", size="9"),
+            rx.desktop_only(
+                rx.box(
+                    my_form,
+                    width='50vw'
+                )
+            ),
+            rx.tablet_only(
+                rx.box(
+                    my_form,
+                    width='75vw'
+                )
+            ),
+            rx.mobile_only(
+                rx.box(
+                    my_form,
+                    width='95vw'
+                )
+            ),
+            spacing="5",
+            align="center",
+            min_height="95vh",
+        )
+    return base_page(my_child)

full_stack_python/full_stack_python.py

@@ -67,6 +67,12 @@ def index() -> rx.Component:
     on_load=blog.BlogPostState.get_post_detail
 )
 
+app.add_page(
+    blog.blog_post_edit_page, 
+    route="/blog/[blog_id]/edit",
+    on_load=blog.BlogPostState.get_post_detail
+)
+
 app.add_page(contact.contact_page, 
              route=navigation.routes.CONTACT_US_ROUTE)
 app.add_page(