State Management (Context API)
Relevant source files
The following files were used as context for generating this wiki page:
The Boda-Cris application utilizes React's Context API as its primary state management architecture. This system provides a centralized way to manage authentication, wedding content, guest lists, and UI themes across the entire component tree. By leveraging multiple specialized contexts, the application ensures a separation of concerns and facilitates real-time updates across the administrative dashboard and the public invitation page.
Each context provider is wrapped around the application in src/main.jsx, establishing a global state hierarchy. Most contexts include persistence logic using localStorage, allowing the application to maintain its state (such as customized invitation content or theme preferences) across browser sessions.
Global Provider Hierarchy
The application initializes its state by nesting providers within the root element. This structure allows child components to access any combination of global states using custom hooks.
The hierarchy of context providers as defined in the application entry point.
Sources: src/main.jsx:13-27
Content Management System
The ContentContext manages all text and media related to the wedding invitation. It serves as the single source of truth for the invitation's details, including the couple's names, event schedule, location coordinates, and gallery images.
Data Persistence and Migration
The provider initializes state by checking localStorage for weddingContent. It includes a migration layer to update old data structures (e.g., converting a single event object into an array of events) to ensure backward compatibility.
Sources: src/context/ContentContext.jsx:7-45
Core Functionality
The context exposes a comprehensive API for CRUD operations on wedding data:
| Feature | Functions | Description |
|---|---|---|
| Section Updates | updateContent | Updates a specific top-level section of the content. |
| Gallery | addGalleryImage, removeGalleryImage | Manages the array of image strings for the photo gallery. |
| Events | addEvent, updateEvent, deleteEvent | Handles the chronological schedule of wedding activities. |
| Gifts | addGiftAccount, updateGiftAccount | Manages bank account details for the gift registry. |
| Location | updateLocation | Specifically updates venue names, addresses, and map coordinates. |
Sources: src/context/ContentContext.jsx:55-156
Guest and Attendance Tracking
The GuestContext handles the lifecycle of guest records, attendance status, and RSVP data. It calculates real-time statistics used in the administrative dashboard to track the wedding's scale.
State Logic Flow
Flow of guest data management and automatic persistence.
Sources: src/context/GuestContext.jsx:7-27
Statistics Calculation
The getStats() function aggregates the guest data to provide counts for:
- Total registered guests
- Confirmation status (Confirmed, Pending, Declined)
- Total adults and children (specifically for confirmed guests)
- Total headcount (attendees)
Sources: src/context/GuestContext.jsx:37-54
Dynamic Theme Engine
The ThemeContext implements a highly customizable styling system. It translates JavaScript state into CSS variables that are injected into the document's root element, allowing for real-time visual changes.
Theme Properties
Each theme preset or custom configuration includes the following properties:
- Colors: Primary (Light/Dark variants), Secondary, Accent, Background, and Text.
- Typography: Heading font and Body font.
- UI Style: Border radius and Animation intensity.
Sources: src/context/ThemeContext.jsx:6-105
CSS Variable Injection
The system uses a useEffect hook to apply state changes to the DOM, ensuring that Tailwind CSS classes utilizing these variables update immediately.
// Example of property injection
root.style.setProperty('--color-primary', theme.primary)
root.style.setProperty('--font-heading', theme.fontHeading)
const radiusOption = BORDER_RADIUS_OPTIONS.find(o => o.value === theme.borderRadius)
root.style.setProperty('--border-radius', radiusOption?.css || '1rem')
Sources: src/context/ThemeContext.jsx:138-160
Font Synchronization
The context automatically detects the selected heading and body fonts and dynamically appends Google Fonts <link> tags to the document head if they are not already present.
Sources: src/context/ThemeContext.jsx:167-179
Authentication State
The AuthContext (implied through usage in administrative components) manages the session state for the admin panel. It controls access to sensitive editing components and ensures that state-modifying functions from other contexts are only accessible to authorized users.
Security Implementation
The administrative page uses the useAuth hook to conditionally render the AdminLogin component or the protected dashboard views.
Sources: src/pages/AdminPage.jsx:10-15
Conclusion
State management in Boda-Cris is decentralized into specialized modules, each responsible for a distinct domain of the application. The integration of localStorage ensures that the "No-Code" style editing experience provided by the ContentEditor and ThemeEditor is persistent, while the use of Context API ensures that changes are reflected instantly throughout the user interface.