Livewire Interactive Components
Relevant source files
The following files were used as context for generating this wiki page:
Livewire interactive components form the backbone of the RateGuru user experience, enabling real-time, server-driven interactions without full page reloads. These components manage server state for critical features such as voting, forms, comments, and filtering, while integrating with Alpine.js for local UI state like modals and dropdowns. Sources: AGENTS.md:65-67
Architecture and Core Configuration
The project follows a "thin component" architecture where business logic is abstracted into Actions and Services, while Livewire components primarily handle request lifecycle and state synchronization. Sources: AGENTS.md:44-46
Component Structure
Components are organized into namespaces and paths defined in the application configuration. By default, components are created as Single File Components (SFC) with the class and view coupled.
| Configuration Key | Value | Description |
|---|---|---|
class_namespace | App\Livewire | Root namespace for component classes. |
class_path | app_path('Livewire') | Directory for PHP class files. |
view_path | resource_path('views/livewire') | Directory for Blade templates. |
make_command.type | sfc | Default component type for artisan commands. |
Sources: config/livewire.php:116-146, config/livewire.php:68-71
State Synchronization
Components utilize wire:model for data binding and #[Url] attributes to synchronize component properties with the browser's query string, allowing for shareable filtered states. Sources: app/Livewire/Feed/FeedPage.php:18-35, app/Livewire/Profile/ProfilePage.php:32-33
Component Communication and Events
Livewire components interact through a robust event system using the #[On] attribute for listeners and the dispatch() method for triggers. This facilitates decoupled communication between the feed, post details, and moderation tools.
Event Flow Diagram
The following diagram illustrates the interaction between the FeedPage and moderation components when a post is removed.
Key Global Events
| Event Name | Purpose | Source Component |
|---|---|---|
select-post | Triggers the display of a specific post in a drawer or overlay. | FeedPage |
post-selected | Dispatched when a post selection is confirmed. | FeedPage |
post-moderated | Signals that a moderator has approved, hidden, or rejected a post. | InlinePostModeration |
follow-state-changed | Updates follow counts on profile pages. | FollowButton |
Sources: app/Livewire/Feed/FeedPage.php:84-89, app/Livewire/Profile/ProfilePage.php:110-116, tests/Feature/Livewire/InlinePostModerationTest.php:271-278
Feed and Discovery Logic
The FeedPage component manages complex filtering and sorting states. It handles multi-select filters for origins (e.g., Homemade vs. Restaurant) and cuisines, as well as text-based search.
Filter Normalization
The component implements strict normalization to ensure that only allowed filter values are processed, preventing injection of invalid states.
private function normalizeFilterValues(mixed $value, array $allowed): array
{
return collect((array) $value)
->filter(fn ($item): bool => is_string($item) && in_array($item, $allowed, true))
->unique()
->values()
->all();
}
Sources: app/Livewire/Feed/FeedPage.php:143-150
Interaction Flow
- Search: Input is debounced; search execution requires at least 3 characters. Sources: app/Livewire/Feed/FeedPage.php:173-178
- Sorting: Supports
newest,top, andhotalgorithms. Sources: app/Livewire/Feed/FeedPage.php:123-128 - Selection: Clicking a post card dispatches
select-post, which updates theselectedPostIdand triggers the detail view. Sources: app/Livewire/Feed/FeedPage.php:84-89
Post Detail and Moderation
Post interaction is split between public viewing (PostShow, PostDrawer) and administrative actions (InlinePostModeration).
Detailed Interaction Logic
The detail components manage local Alpine.js state for UI overlays like image zoom and share menus, while Livewire handles the backend operations for deleting or reporting content.
Moderation Controls
Moderators have access to an inline panel that allows for immediate status changes. The component checks user roles (Moderator/Admin) before rendering these controls.
- Actions: Approve, Reject, Hide, Restore.
- Audit: Every action requires a
moderation_reasonwhich is logged in themoderation_logstable. - Security: Actions like
approve()are protected by authorization checks within the component method.
Sources: tests/Feature/Livewire/InlinePostModerationTest.php:164-182, tests/Feature/Livewire/InlinePostModerationTest.php:23-55
Summary
Livewire Interactive Components in RateGuru provide a bridge between the SQLite-first backend and a dynamic frontend. By leveraging Livewire's lifecycle hooks and event system, the application maintains complex state across disparate UI elements like the global feed, post drawers, and profile activity tabs while adhering to a "thin component" architecture.