30 - Form, State, and Page for New Blog Posts

Author: codingforentrepreneurs

full_stack_python/blog/__init__.py

@@ -1,8 +1,10 @@
+from .add import blog_post_add_page
 from .list import blog_post_list_page
 from .model import BlogPostModel
 from .state import BlogPostState
 
 __all__= [
+    'blog_post_add_page',
     'blog_post_list_page',
     'BlogPostModel',
     'BlogPostState'

full_stack_python/blog/add.py

@@ -0,0 +1,32 @@
+import reflex as rx 
+
+from ..ui.base import base_page
+from . import forms
+
+def blog_post_add_page() -> rx.Component:
+    my_form = forms.blog_post_add_form()
+    my_child = rx.vstack(
+            rx.heading("New 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/blog/forms.py

@@ -0,0 +1,30 @@
+import reflex as rx 
+
+
+from . import state
+
+def blog_post_add_form() -> rx.Component:
+    return rx.form(
+            rx.vstack(
+                rx.hstack(
+                    rx.input(
+                        name="title",
+                        placeholder="Title",
+                        required=True,
+                        type='text',
+                        width='100%',
+                    ),
+                    width='100%'
+                ),
+                rx.text_area(
+                    name='content',
+                    placeholder="Your message",
+                    required=True,
+                    height='50vh',
+                    width='100%',
+                ),
+                rx.button("Submit", type="submit"),
+            ),
+            on_submit=state.BlogAddPostFormState.handle_submit,
+            reset_on_submit=True,
+    )

full_stack_python/blog/list.py

@@ -33,7 +33,11 @@ def blog_post_list_item(post: model.BlogPostModel):
 def blog_post_list_page() ->rx.Component:
     return base_page(
         rx.vstack(
-            rx.heading("Blog Posts", size="5"),
+            rx.heading("Blog Posts",  size="5"),
+            rx.link(
+                rx.button("New Post"),
+                href=navigation.routes.BLOG_POST_ADD_ROUTE
+            ),
             # rx.foreach(["abc", "abc", "cde"], foreach_callback),
             rx.foreach(state.BlogPostState.posts, blog_post_list_item),
             spacing="5",

full_stack_python/blog/model.py

@@ -8,6 +8,7 @@
 
 class BlogPostModel(rx.Model, table=True):
     # user
+    # id: int -> primary key
     title: str
     content: str
     created_at: datetime = Field(

full_stack_python/blog/state.py

@@ -17,9 +17,27 @@ def load_posts(self):
             self.posts = result
         # return
 
+    def add_post(self, form_data:dict):
+        with rx.session() as session:
+            post = BlogPostModel(**form_data)
+            # print("adding", post)
+            session.add(post)
+            session.commit()
+            session.refresh(post) # post.id
+            # print("added", post)
+            self.post = post
     # def get_post(self):
     #     with rx.session() as session:
     #         result = session.exec(
     #             select(BlogPostModel)
     #         )
-    #         self.posts = result
+    #         self.posts = result
+
+
+class BlogAddPostFormState(BlogPostState):
+    form_data: dict = {}
+
+    def handle_submit(self, form_data):
+        self.form_data = form_data
+        self.add_post(form_data)
+        # redirect

full_stack_python/full_stack_python.py

@@ -56,6 +56,11 @@ def index() -> rx.Component:
 
 )
 
+app.add_page(
+    blog.blog_post_add_page, 
+    route=navigation.routes.BLOG_POST_ADD_ROUTE
+)
+
 app.add_page(contact.contact_page, 
              route=navigation.routes.CONTACT_US_ROUTE)
 app.add_page(

full_stack_python/navigation/routes.py

@@ -1,6 +1,7 @@
 HOME_ROUTE="/"
 ABOUT_US_ROUTE="/about"
 BLOG_POSTS_ROUTE="/blog"
+BLOG_POST_ADD_ROUTE="/blog/add"
 CONTACT_US_ROUTE="/contact"
 CONTACT_ENTRIES_ROUTE="/contact/entries"
 PRICING_ROUTE="/pricing"

full_stack_python/navigation/state.py

@@ -9,6 +9,10 @@ def to_about_us(self):
         return rx.redirect(routes.ABOUT_US_ROUTE)
     def to_blog(self):
         return rx.redirect(routes.BLOG_POSTS_ROUTE)
+    def to_blog_add(self):
+        return rx.redirect(routes.BLOG_POST_ADD_ROUTE)
+    def to_blog_create(self):
+        return self.to_blog_add()
     def to_contact(self):
         return rx.redirect(routes.CONTACT_US_ROUTE)
     def to_pricing(self):