55 - Public Articles Display

Author: codingforentrepreneurs

full_stack_python/articles/__init__.py

@@ -0,0 +1,28 @@
+import reflex as rx 
+
+from ..ui.base import base_page
+
+from . import state
+
+from ..blog.notfound import blog_post_not_found
+
+
+def article_detail_page() -> rx.Component:
+    my_child = rx.cond(state.ArticlePublicState.post, rx.vstack(
+            rx.hstack(
+                rx.heading(state.ArticlePublicState.post.title, size="9"),
+                align='end'
+            ),
+            rx.text("By ", state.ArticlePublicState.post.userinfo.user.username),
+            rx.text(state.ArticlePublicState.post.publish_date),
+            rx.text(
+                state.ArticlePublicState.post.content,
+                white_space='pre-wrap'
+            ),
+            spacing="5",
+            align="center",
+            min_height="85vh"
+        ), 
+        blog_post_not_found()
+        )
+    return base_page(my_child)

full_stack_python/articles/detail.py

@@ -0,0 +1,43 @@
+import reflex as rx 
+
+from .. import navigation
+from ..ui.base import base_page
+from ..models import BlogPostModel
+from . import state
+
+def article_link(post: BlogPostModel):
+    post_id = post.id
+    if post_id is None:
+        return rx.fragment("Not found")
+    root_path = navigation.routes.ARTICLE_LIST_ROUTE
+    post_detail_url = f"{root_path}/{post_id}"
+    return rx.card(
+        rx.link(
+            rx.flex(
+                rx.box(
+                    rx.heading(post.title),
+                ),
+                spacing="2",
+            ),
+            href=post_detail_url
+        ),
+        as_child=True,
+    )
+
+def article_list_item(post: BlogPostModel):
+    return rx.box(
+        article_link(post),
+        padding='1em'
+    )
+
+
+def article_public_list_page() ->rx.Component:
+    return base_page(
+        rx.vstack(
+            rx.heading("Published Articles",  size="5"),
+            rx.foreach(state.ArticlePublicState.posts, article_list_item),
+            spacing="5",
+            align="center",
+            min_height="85vh",
+        )
+    ) 

full_stack_python/articles/list.py

@@ -0,0 +1,72 @@
+from datetime import datetime
+from typing import Optional, List
+import reflex as rx 
+
+import sqlalchemy
+from sqlmodel import select
+
+from .. import navigation
+from ..auth.state import SessionState
+from ..models import BlogPostModel, UserInfo
+
+ARTICLE_LIST_ROUTE = navigation.routes.ARTICLE_LIST_ROUTE
+if ARTICLE_LIST_ROUTE.endswith("/"):
+    ARTICLE_LIST_ROUTE = ARTICLE_LIST_ROUTE[:-1]
+
+class ArticlePublicState(SessionState):
+    posts: List['BlogPostModel'] = []
+    post: Optional['BlogPostModel'] = None
+    post_content: str = ""
+    post_publish_active: bool = False
+
+    @rx.var
+    def post_id(self):
+        return self.router.page.params.get("post_id", "")
+
+    @rx.var
+    def post_url(self):
+        if not self.post:
+            return f"{ARTICLE_LIST_ROUTE}"
+        return f"{ARTICLE_LIST_ROUTE}/{self.post.id}"
+
+    def get_post_detail(self):
+        lookups = (
+            (BlogPostModel.publish_active == True) &
+            (BlogPostModel.publish_date < datetime.now()) &
+            (BlogPostModel.id == self.post_id)
+        )
+        with rx.session() as session:
+            if self.post_id == "":
+                self.post = None
+                self.post_content = ""
+                self.post_publish_active = False
+                return
+            sql_statement = select(BlogPostModel).options(
+                sqlalchemy.orm.joinedload(BlogPostModel.userinfo).joinedload(UserInfo.user)
+            ).where(lookups)
+            result = session.exec(sql_statement).one_or_none()
+            self.post = result
+            if result is None:
+                self.post_content = ""
+                return
+            self.post_content = self.post.content
+            self.post_publish_active = self.post.publish_active
+        # return
+
+    def load_posts(self, *args, **kwargs):
+        lookup_args = ( 
+            (BlogPostModel.publish_active == True) &
+            (BlogPostModel.publish_date < datetime.now())
+        )
+        with rx.session() as session:
+            result = session.exec(
+                select(BlogPostModel).options(
+                    sqlalchemy.orm.joinedload(BlogPostModel.userinfo)
+                ).where(lookup_args)
+            ).all()
+            self.posts = result
+    
+    def to_post(self):
+        if not self.post:
+            return rx.redirect(ARTICLE_LIST_ROUTE)
+        return rx.redirect(f"{self.post_url}")

full_stack_python/articles/state.py

@@ -13,6 +13,11 @@
 )
 from .auth.state import SessionState
 
+
+from .articles.detail import article_detail_page
+from .articles.list import article_public_list_page
+from .articles.state import ArticlePublicState
+
 from . import blog, contact, navigation, pages
 
 class State(rx.State):
@@ -85,6 +90,20 @@ def index() -> rx.Component:
     on_load=SessionState.on_load
 )
 
+
+app.add_page(
+    article_public_list_page, 
+    route=navigation.routes.ARTICLE_LIST_ROUTE,
+    on_load=ArticlePublicState.load_posts
+)
+
+app.add_page(
+    article_detail_page, 
+    route=f"{navigation.routes.ARTICLE_LIST_ROUTE}/[post_id]",
+    on_load=ArticlePublicState.get_post_detail
+)
+
+
 app.add_page(
     blog.blog_post_list_page, 
     route=navigation.routes.BLOG_POSTS_ROUTE,

full_stack_python/full_stack_python.py

@@ -1,5 +1,6 @@
 HOME_ROUTE="/"
 ABOUT_US_ROUTE="/about"
+ARTICLE_LIST_ROUTE="/articles"
 BLOG_POSTS_ROUTE="/blog"
 BLOG_POST_ADD_ROUTE="/blog/add"
 CONTACT_US_ROUTE="/contact"

full_stack_python/navigation/routes.py

@@ -17,6 +17,10 @@ def to_logout(self):
 
     def to_about_us(self):
         return rx.redirect(routes.ABOUT_US_ROUTE)
+    
+    def to_articles(self):
+        return rx.redirect(routes.ARTICLE_LIST_ROUTE)
+    
     def to_blog(self):
         return rx.redirect(routes.BLOG_POSTS_ROUTE)
     def to_blog_add(self):

full_stack_python/navigation/state.py

@@ -130,6 +130,7 @@ def sidebar_item(
 def sidebar_items() -> rx.Component:
     return rx.vstack(
         sidebar_item("Dashboard", "layout-dashboard", navigation.routes.HOME_ROUTE),
+        sidebar_item("Articles", "globe", navigation.routes.ARTICLE_LIST_ROUTE),
         sidebar_item("Blog", "newspaper", navigation.routes.BLOG_POSTS_ROUTE),
         sidebar_item("Create post", "notebook-pen", navigation.routes.BLOG_POST_ADD_ROUTE),
         sidebar_item("Contact", "mail", navigation.routes.CONTACT_US_ROUTE),