As seen in the screenshot attached, I have a pretty simple CRUD app in which users have calendars. I have a livewire component to choose the current calendar (the dropdown in the upper left of the picture.) The “settings” panel here is also a livewire component. When a user changes the dropdown to a different calendar, an event fires and changes the settings to show the newly selected calendar.
I am converting this over from Vue, and in Vue I used shared state between components to keep the calendars and the dropdown choosing them in sync.
The problem is demonstrated when a user deletes a calendar from the settings screen. I have to emit an event to let the dropdown know to refresh, and then the dropdown component emits another event to tell the settings panel to update, it just seems super kludgy and hard to troubleshoot.
What would you all do to keep the components synced and aware of both the list of calendars and the selected calendar? I need to keep them separate components, as there are other components that also change based on the calendar, and when a user switches the calendar each component needs to be using the selected calendar.
