25 - Decouple the Contact Page State & Model

codingforentrepreneurs · codingforentrepreneurs · commit 7d21558f9efd · 2024-06-12T17:34:13.000-06:00
diff --git a/full_stack_python/contact/__init__.py b/full_stack_python/contact/__init__.py
@@ -0,0 +1,9 @@
+from .form import contact_form
+from .state import ContactState
+from .page import contact_page
+
+__all__ = [
+    'contact_form',
+    'ContactState',
+    'contact_page'
+]
diff --git a/full_stack_python/contact/form.py b/full_stack_python/contact/form.py
@@ -0,0 +1,41 @@
+import reflex as rx 
+
+
+from .state import ContactState
+
+def contact_form() -> rx.Component:
+    return rx.form(
+            rx.vstack(
+                rx.hstack(
+                    rx.input(
+                        name="first_name",
+                        placeholder="First Name",
+                        required=True,
+                        type='text',
+                        width='100%',
+                    ),
+                    rx.input(
+                        name="last_name",
+                        placeholder="Last Name",
+                        type='text',
+                        width='100%',
+                    ),
+                    width='100%'
+                ),
+                rx.input(
+                    name='email',
+                    placeholder='Your email',
+                    type='email',
+                    width='100%',
+                ),
+                rx.text_area(
+                    name='message',
+                    placeholder="Your message",
+                    required=True,
+                    width='100%',
+                ),
+                rx.button("Submit", type="submit"),
+            ),
+            on_submit=ContactState.handle_submit,
+            reset_on_submit=True,
+    )
diff --git a/full_stack_python/contact/model.py b/full_stack_python/contact/model.py
@@ -0,0 +1,26 @@
+from datetime import datetime, timezone
+
+import asyncio
+import reflex as rx 
+
+import sqlalchemy
+from sqlmodel import Field
+
+
+def get_utc_now() -> datetime:
+    return datetime.now(timezone.utc)
+
+class ContactEntryModel(rx.Model, table=True):
+    user_id: int | None = None
+    first_name: str
+    last_name: str | None = None
+    email: str | None = None # = Field(nullable=True)
+    message: str
+    created_at: datetime = Field(
+        default_factory=get_utc_now,
+        sa_type=sqlalchemy.DateTime(timezone=True),
+        sa_column_kwargs={
+            'server_default': sqlalchemy.func.now()
+        },
+        nullable=False
+    )
diff --git a/full_stack_python/contact/page.py b/full_stack_python/contact/page.py
@@ -0,0 +1,36 @@
+import reflex as rx 
+
+from .. import navigation
+from ..ui.base import base_page
+
+from . import form, state
+
+def contact_page() -> rx.Component:
+    my_child = rx.vstack(
+            rx.heading("Contact Us", size="9"),
+            rx.cond(state.ContactState.did_submit, state.ContactState.thank_you, ""),
+            rx.desktop_only(
+                rx.box(
+                    form.contact_form(),
+                    width='50vw'
+                )
+            ),
+            rx.tablet_only(
+                rx.box(
+                    form.contact_form(),
+                    width='75vw'
+                )
+            ),
+            rx.mobile_only(
+                rx.box(
+                    form.contact_form(),
+                    width='95vw'
+                )
+            ),
+            spacing="5",
+            justify="center",
+            align="center",
+            min_height="85vh",
+            id='my-child'
+        )
+    return base_page(my_child)
diff --git a/full_stack_python/contact/state.py b/full_stack_python/contact/state.py
@@ -0,0 +1,41 @@
+import asyncio
+import reflex as rx 
+
+from .model import ContactEntryModel
+
+class ContactState(rx.State):
+    form_data: dict = {}
+    did_submit: bool = False
+    timeleft: int = 5
+
+    @rx.var
+    def timeleft_label(self):
+        if self.timeleft < 1:
+            return "No time left"
+        return f"{self.timeleft} seconds"
+
+    @rx.var
+    def thank_you(self):
+        first_name = self.form_data.get("first_name") or ""
+        return f"Thank you {first_name}".strip() + "!"
+
+    async def handle_submit(self, form_data: dict):
+        """Handle the form submit."""
+        # print(form_data)
+        self.form_data = form_data
+        data = {}
+        for k,v in form_data.items():
+            if v == "" or v is None:
+                continue
+            data[k] = v
+        with rx.session() as session:
+            db_entry = ContactEntryModel(
+                **data
+            )
+            session.add(db_entry)
+            session.commit()
+            self.did_submit = True
+            yield
+        await asyncio.sleep(2)
+        self.did_submit = False
+        yield
diff --git a/full_stack_python/full_stack_python.py b/full_stack_python/full_stack_python.py
@@ -5,7 +5,7 @@
 from rxconfig import config
 from .ui.base import base_page
 
-from . import navigation, pages
+from . import navigation, pages, contact
 
 class State(rx.State):
     """The app state."""
@@ -48,5 +48,7 @@ def index() -> rx.Component:
 app.add_page(index)
 app.add_page(pages.about_page, 
              route=navigation.routes.ABOUT_US_ROUTE)
+app.add_page(contact.contact_page, 
+             route=navigation.routes.CONTACT_US_ROUTE)
 app.add_page(pages.pricing_page, 
              route=navigation.routes.PRICING_ROUTE)
diff --git a/full_stack_python/pages/__init__.py b/full_stack_python/pages/__init__.py
@@ -1,9 +1,9 @@
 from .about import about_page
 from .pricing import pricing_page
-from .contact import contact_page
+# from .contact import contact_page
 
 __all__ = [ 
     'about_page',
-    'contact_page',
+    # 'contact_page',
     'pricing_page'
 ]
diff --git a/full_stack_python/pages/contact.py b/full_stack_python/pages/contact.py
