56 - Limited Data Results on Dashboard and Landing Page

Author: codingforentrepreneurs

full_stack_python/articles/list.py

@@ -5,7 +5,7 @@
 from ..models import BlogPostModel
 from . import state
 
-def article_link(post: BlogPostModel):
+def article_card_link(post: BlogPostModel):
     post_id = post.id
     if post_id is None:
         return rx.fragment("Not found")
@@ -24,20 +24,19 @@ def article_link(post: BlogPostModel):
         as_child=True,
     )
 
-def article_list_item(post: BlogPostModel):
-    return rx.box(
-        article_link(post),
-        padding='1em'
+def article_public_list_component(columns:int=3, spacing:int=5, limit:int=100) -> rx.Component:
+    return rx.grid(
+        rx.foreach(state.ArticlePublicState.posts, article_card_link),
+        columns=f'{columns}',
+        spacing=f'{spacing}',
+        on_mount=lambda: state.ArticlePublicState.set_limit_and_reload(limit)
     )
 
-
 def article_public_list_page() ->rx.Component:
     return base_page(
-        rx.vstack(
+        rx.box(
             rx.heading("Published Articles",  size="5"),
-            rx.foreach(state.ArticlePublicState.posts, article_list_item),
-            spacing="5",
-            align="center",
+            article_public_list_component(),
             min_height="85vh",
         )
     ) 

full_stack_python/articles/state.py

@@ -18,6 +18,7 @@ class ArticlePublicState(SessionState):
     post: Optional['BlogPostModel'] = None
     post_content: str = ""
     post_publish_active: bool = False
+    limit: int = 20
 
     @rx.var
     def post_id(self):
@@ -53,6 +54,11 @@ def get_post_detail(self):
             self.post_publish_active = self.post.publish_active
         # return
 
+    def set_limit_and_reload(self, new_limit: int=5):
+        self.limit = new_limit
+        self.load_posts()
+        yield
+
     def load_posts(self, *args, **kwargs):
         lookup_args = ( 
             (BlogPostModel.publish_active == True) &
@@ -62,7 +68,7 @@ def load_posts(self, *args, **kwargs):
             result = session.exec(
                 select(BlogPostModel).options(
                     sqlalchemy.orm.joinedload(BlogPostModel.userinfo)
-                ).where(lookup_args)
+                ).where(lookup_args).limit(self.limit)
             ).all()
             self.posts = result
 

full_stack_python/blog/list.py

@@ -1,5 +1,5 @@
 import reflex as rx 
-
+import reflex_local_auth
 from .. import navigation
 from ..ui.base import base_page
 from ..models import BlogPostModel
@@ -32,6 +32,7 @@ def blog_post_list_item(post: BlogPostModel):
 # def foreach_callback(text):
 #     return rx.box(rx.text(text))
 
+@reflex_local_auth.require_login
 def blog_post_list_page() ->rx.Component:
     return base_page(
         rx.vstack(

full_stack_python/full_stack_python.py

@@ -15,53 +15,26 @@
 
 
 from .articles.detail import article_detail_page
-from .articles.list import article_public_list_page
+from .articles.list import article_public_list_page, article_public_list_component
 from .articles.state import ArticlePublicState
 
 from . import blog, contact, navigation, pages
 
-class State(rx.State):
-    """The app state."""
-    label = "Welcome to Reflex!"
-
-    def handle_title_input_change(self, val):
-        self.label = val
-
-    def did_click(self):
-        print("Hello world did click")
-        return rx.redirect(navigation.routes.ABOUT_US_ROUTE)
-
 def index() -> rx.Component:
-    # Welcome Page (Index)
-    my_user_obj = SessionState.authenticated_user_info
-    my_child = rx.vstack(
-            rx.heading(State.label, size="9"),
-            rx.text(my_user_obj.to_string()),
-            rx.text(my_user_obj.user.username),
-            rx.text(
-                "Get started by editing ",
-                rx.code(f"{config.app_name}/{config.app_name}.py"),
-                size="5",
-            ),
-            # rx.button("About us", on_click=State.did_click),
-            rx.link(
-                rx.button("About us"), 
-                href=navigation.routes.ABOUT_US_ROUTE
-            ),
-            spacing="5",
-            justify="center",
-            align="center",
-            # text_align="center",
-            min_height="85vh",
-            id='my-child'
+    return base_page(
+        rx.cond(SessionState.is_authenticated,
+            pages.dashboard_component(),
+            pages.landing_component(),
         )
-    return base_page(my_child)
+    )
 
 
 
 
 app = rx.App()
-app.add_page(index)
+app.add_page(index,
+        on_load=ArticlePublicState.load_posts         
+    )
 # reflex_local_auth pages
 app.add_page(
     my_login_page,

full_stack_python/pages/__init__.py

@@ -1,11 +1,15 @@
 from .about import about_page
+from .dashboard import dashboard_component
+from .landing import landing_component
 from .pricing import pricing_page
 from .protected import protected_page
 # from .contact import contact_page
 
 __all__ = [ 
     'about_page',
     # 'contact_page',
+    'dashboard_component',
+    'landing_component',
     'pricing_page',
     'protected_page'
 ]

full_stack_python/pages/dashboard.py

@@ -0,0 +1,11 @@
+import reflex as rx 
+
+from ..articles.list import article_public_list_component
+
+def dashboard_component() -> rx.Component:
+    return rx.box(
+        rx.heading("Welcome back", size='2'),
+        rx.divider(margin_top='1em', margin_bottom='1em'),
+        article_public_list_component(columns=3, limit=20),
+        min_height="85vh",
+    )

full_stack_python/pages/landing.py

@@ -0,0 +1,22 @@
+import reflex as rx 
+
+from .. import navigation
+from ..articles.list import article_public_list_component
+
+def landing_component() -> rx.Component:
+    return rx.vstack(
+            rx.heading("Welcome to SaaS", size="9"),
+            rx.link(
+                rx.button("About us"), 
+                href=navigation.routes.ABOUT_US_ROUTE
+            ),
+            rx.divider(),
+            rx.heading("Recent Articles", size="5"),
+            article_public_list_component(columns=1, limit=1),
+            spacing="5",
+            justify="center",
+            align="center",
+            # text_align="center",
+            min_height="85vh",
+            id='my-child'
+        )

full_stack_python/ui/nav.py

@@ -35,7 +35,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("Articles", navigation.routes.ARTICLE_LIST_ROUTE),
                     navbar_link("Pricing", navigation.routes.PRICING_ROUTE),
                     navbar_link("Contact", navigation.routes.CONTACT_US_ROUTE),
                     spacing="5",
@@ -88,8 +88,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("Articles", 
+                            on_click=navigation.NavState.to_articles),
                         rx.menu.item("Pricing", 
                             on_click=navigation.NavState.to_pricing),
                         rx.menu.item("Contact",