29 - List View Route for Blog Posts

Author: codingforentrepreneurs

full_stack_python/blog/__init__.py

@@ -1,5 +1,9 @@
+from .list import blog_post_list_page
 from .model import BlogPostModel
+from .state import BlogPostState
 
 __all__= [
-    'BlogPostModel'
+    'blog_post_list_page',
+    'BlogPostModel',
+    'BlogPostState'
 ]

full_stack_python/blog/list.py

@@ -0,0 +1,43 @@
+import reflex as rx 
+
+from .. import navigation
+from ..ui.base import base_page
+
+from . import state, model
+
+def blog_post_detail_link(child: rx.Component, post: model.BlogPostModel):
+    if post is None:
+        return rx.fragment(child)
+    post_id = post.id
+    if post_id is None:
+        return rx.fragment(child)
+    root_path = navigation.routes.BLOG_POSTS_ROUTE
+    post_detail_url = f"{root_path}/{post_id}"
+    return rx.link(
+        child,
+        href=post_detail_url
+    )
+
+def blog_post_list_item(post: model.BlogPostModel):
+    return rx.box(
+        blog_post_detail_link(
+            rx.heading(post.title),
+            post
+        ),
+        padding='1em'
+    )
+
+# def foreach_callback(text):
+#     return rx.box(rx.text(text))
+
+def blog_post_list_page() ->rx.Component:
+    return base_page(
+        rx.vstack(
+            rx.heading("Blog Posts", size="5"),
+            # rx.foreach(["abc", "abc", "cde"], foreach_callback),
+            rx.foreach(state.BlogPostState.posts, blog_post_list_item),
+            spacing="5",
+            align="center",
+            min_height="85vh",
+        )
+    ) 

full_stack_python/blog/state.py

@@ -13,7 +13,7 @@ def load_posts(self):
         with rx.session() as session:
             result = session.exec(
                 select(BlogPostModel)
-            )
+            ).all()
             self.posts = result
         # return
 

full_stack_python/full_stack_python.py

@@ -48,6 +48,14 @@ def index() -> rx.Component:
 app.add_page(index)
 app.add_page(pages.about_page, 
              route=navigation.routes.ABOUT_US_ROUTE)
+
+app.add_page(
+    blog.blog_post_list_page, 
+    route=navigation.routes.BLOG_POSTS_ROUTE,
+    on_load=blog.BlogPostState.load_posts
+    
+)
+
 app.add_page(contact.contact_page, 
              route=navigation.routes.CONTACT_US_ROUTE)
 app.add_page(

full_stack_python/navigation/routes.py

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

full_stack_python/navigation/state.py

@@ -7,6 +7,8 @@ def to_home(self):
         return rx.redirect(routes.HOME_ROUTE)
     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_contact(self):
         return rx.redirect(routes.CONTACT_US_ROUTE)
     def to_pricing(self):

full_stack_python/ui/nav.py

@@ -33,6 +33,7 @@ def navbar() -> rx.Component:
                 rx.hstack(
                     navbar_link("Home", navigation.routes.HOME_ROUTE),
                     navbar_link("About", navigation.routes.ABOUT_US_ROUTE),
+                    navbar_link("Blog", navigation.routes.BLOG_POSTS_ROUTE),
                     navbar_link("Pricing", navigation.routes.PRICING_ROUTE),
                     navbar_link("Contact", navigation.routes.CONTACT_US_ROUTE),
                     spacing="5",
@@ -75,6 +76,8 @@ def navbar() -> rx.Component:
                             on_click=navigation.NavState.to_home),
                         rx.menu.item("About", 
                             on_click=navigation.NavState.to_about_us),
+                        rx.menu.item("Blog", 
+                            on_click=navigation.NavState.to_blog),
                         rx.menu.item("Pricing", 
                             on_click=navigation.NavState.to_pricing),
                         rx.menu.item("Contact",