30 - Dyanmic URL Routing for Detail Pages

Author: codingforentrepreneurs

full_stack_python/blog/__init__.py

@@ -1,10 +1,12 @@
 from .add import blog_post_add_page
+from .detail import blog_post_detail_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_list_page',
     'BlogPostModel',
     'BlogPostState'

full_stack_python/blog/detail.py

@@ -0,0 +1,18 @@
+import reflex as rx 
+
+from ..ui.base import base_page
+
+from . import state
+
+# @rx.page(route='/about')
+def blog_post_detail_page() -> rx.Component:
+    my_child = rx.vstack(
+            rx.heading(state.BlogPostState.post.title, size="9"),
+            rx.text(
+                state.BlogPostState.post.content,
+            ),
+            spacing="5",
+            align="center",
+            min_height="85vh"
+        )
+    return base_page(my_child)

full_stack_python/blog/state.py

@@ -9,6 +9,25 @@ class BlogPostState(rx.State):
     posts: List['BlogPostModel'] = []
     post: Optional['BlogPostModel'] = None
 
+    @rx.var
+    def blog_post_id(self):
+        return self.router.page.params.get("blog_id", "")
+
+    def get_post_detail(self):
+        with rx.session() as session:
+            if self.blog_post_id == "":
+                self.post = None
+                return
+            result = session.exec(
+                select(BlogPostModel).where(
+                    BlogPostModel.id == self.blog_post_id
+                )
+            ).one_or_none()
+            self.post = result
+        # return
+
+
+
     def load_posts(self):
         with rx.session() as session:
             result = session.exec(

full_stack_python/full_stack_python.py

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