Implement real-time event refresh functionality
- Backend: Add GET /api/calendar/events/:uid endpoint for single event refresh - Backend: Implement fetch_event_by_uid method to retrieve updated events from CalDAV - Frontend: Add event click callback system to trigger refresh on interaction - Frontend: Display loading state with orange pulsing animation during refresh - Frontend: Smart event data updates without full calendar reload - Frontend: Graceful error handling with fallback to cached data - CSS: Add refreshing animation for visual feedback during updates Events now automatically refresh from CalDAV server when clicked, ensuring users always see the most current event data including changes made in other calendar applications. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Connor Johnstone
57
src/app.rs
57
src/app.rs
@@ -110,6 +110,7 @@ fn CalendarView() -> Html {
|
||||
let events = use_state(|| HashMap::<NaiveDate, Vec<CalendarEvent>>::new());
|
||||
let loading = use_state(|| true);
|
||||
let error = use_state(|| None::<String>);
|
||||
let refreshing_event = use_state(|| None::<String>);
|
||||
|
||||
// Get current auth token
|
||||
let auth_token: Option<String> = LocalStorage::get("auth_token").ok();
|
||||
@@ -118,6 +119,57 @@ fn CalendarView() -> Html {
|
||||
let current_year = today.year();
|
||||
let current_month = today.month();
|
||||
|
||||
// Event refresh callback
|
||||
let on_event_click = {
|
||||
let events = events.clone();
|
||||
let refreshing_event = refreshing_event.clone();
|
||||
let auth_token = auth_token.clone();
|
||||
|
||||
Callback::from(move |event: CalendarEvent| {
|
||||
if let Some(token) = auth_token.clone() {
|
||||
let events = events.clone();
|
||||
let refreshing_event = refreshing_event.clone();
|
||||
let uid = event.uid.clone();
|
||||
|
||||
refreshing_event.set(Some(uid.clone()));
|
||||
|
||||
wasm_bindgen_futures::spawn_local(async move {
|
||||
let calendar_service = CalendarService::new();
|
||||
|
||||
match calendar_service.refresh_event(&token, &uid).await {
|
||||
Ok(Some(refreshed_event)) => {
|
||||
// Update the event in the existing events map
|
||||
let mut updated_events = (*events).clone();
|
||||
for (_, day_events) in updated_events.iter_mut() {
|
||||
for existing_event in day_events.iter_mut() {
|
||||
if existing_event.uid == uid {
|
||||
*existing_event = refreshed_event.clone();
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
events.set(updated_events);
|
||||
}
|
||||
Ok(None) => {
|
||||
// Event was deleted, remove it from the map
|
||||
let mut updated_events = (*events).clone();
|
||||
for (_, day_events) in updated_events.iter_mut() {
|
||||
day_events.retain(|e| e.uid != uid);
|
||||
}
|
||||
events.set(updated_events);
|
||||
}
|
||||
Err(_err) => {
|
||||
// Log error but don't show it to user - keep using cached event
|
||||
// Silently fall back to cached event data
|
||||
}
|
||||
}
|
||||
|
||||
refreshing_event.set(None);
|
||||
});
|
||||
}
|
||||
})
|
||||
};
|
||||
|
||||
// Fetch events when component mounts
|
||||
{
|
||||
let events = events.clone();
|
||||
@@ -165,15 +217,16 @@ fn CalendarView() -> Html {
|
||||
</div>
|
||||
}
|
||||
} else if let Some(err) = (*error).clone() {
|
||||
let dummy_callback = Callback::from(|_: CalendarEvent| {});
|
||||
html! {
|
||||
<div class="calendar-error">
|
||||
<p>{format!("Error: {}", err)}</p>
|
||||
<Calendar events={HashMap::new()} />
|
||||
<Calendar events={HashMap::new()} on_event_click={dummy_callback} refreshing_event_uid={(*refreshing_event).clone()} />
|
||||
</div>
|
||||
}
|
||||
} else {
|
||||
html! {
|
||||
<Calendar events={(*events).clone()} />
|
||||
<Calendar events={(*events).clone()} on_event_click={on_event_click} refreshing_event_uid={(*refreshing_event).clone()} />
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -8,6 +8,9 @@ use crate::components::EventModal;
|
||||
pub struct CalendarProps {
|
||||
#[prop_or_default]
|
||||
pub events: HashMap<NaiveDate, Vec<CalendarEvent>>,
|
||||
pub on_event_click: Callback<CalendarEvent>,
|
||||
#[prop_or_default]
|
||||
pub refreshing_event_uid: Option<String>,
|
||||
}
|
||||
|
||||
#[function_component]
|
||||
@@ -105,18 +108,24 @@ pub fn Calendar(props: &CalendarProps) -> Html {
|
||||
events.iter().take(2).map(|event| {
|
||||
let event_clone = event.clone();
|
||||
let selected_event_clone = selected_event.clone();
|
||||
let on_event_click = props.on_event_click.clone();
|
||||
let event_click = Callback::from(move |e: MouseEvent| {
|
||||
e.stop_propagation(); // Prevent day selection
|
||||
on_event_click.emit(event_clone.clone());
|
||||
selected_event_clone.set(Some(event_clone.clone()));
|
||||
});
|
||||
|
||||
let title = event.get_title();
|
||||
let is_refreshing = props.refreshing_event_uid.as_ref() == Some(&event.uid);
|
||||
let class_name = if is_refreshing { "event-box refreshing" } else { "event-box" };
|
||||
html! {
|
||||
<div class="event-box"
|
||||
<div class={class_name}
|
||||
title={title.clone()}
|
||||
onclick={event_click}>
|
||||
{
|
||||
if title.len() > 15 {
|
||||
if is_refreshing {
|
||||
"🔄 Refreshing...".to_string()
|
||||
} else if title.len() > 15 {
|
||||
format!("{}...", &title[..12])
|
||||
} else {
|
||||
title
|
||||
|
||||
@@ -193,4 +193,43 @@ impl CalendarService {
|
||||
|
||||
grouped
|
||||
}
|
||||
|
||||
/// Refresh a single event by UID from the CalDAV server
|
||||
pub async fn refresh_event(&self, token: &str, uid: &str) -> Result<Option<CalendarEvent>, String> {
|
||||
let window = web_sys::window().ok_or("No global window exists")?;
|
||||
|
||||
let opts = RequestInit::new();
|
||||
opts.set_method("GET");
|
||||
opts.set_mode(RequestMode::Cors);
|
||||
|
||||
let url = format!("{}/calendar/events/{}", self.base_url, uid);
|
||||
let request = Request::new_with_str_and_init(&url, &opts)
|
||||
.map_err(|e| format!("Request creation failed: {:?}", e))?;
|
||||
|
||||
request.headers().set("Authorization", &format!("Bearer {}", token))
|
||||
.map_err(|e| format!("Authorization header setting failed: {:?}", e))?;
|
||||
|
||||
let resp_value = JsFuture::from(window.fetch_with_request(&request))
|
||||
.await
|
||||
.map_err(|e| format!("Network request failed: {:?}", e))?;
|
||||
|
||||
let resp: Response = resp_value.dyn_into()
|
||||
.map_err(|e| format!("Response cast failed: {:?}", e))?;
|
||||
|
||||
let text = JsFuture::from(resp.text()
|
||||
.map_err(|e| format!("Text extraction failed: {:?}", e))?)
|
||||
.await
|
||||
.map_err(|e| format!("Text promise failed: {:?}", e))?;
|
||||
|
||||
let text_string = text.as_string()
|
||||
.ok_or("Response text is not a string")?;
|
||||
|
||||
if resp.ok() {
|
||||
let event: Option<CalendarEvent> = serde_json::from_str(&text_string)
|
||||
.map_err(|e| format!("JSON parsing failed: {}", e))?;
|
||||
Ok(event)
|
||||
} else {
|
||||
Err(format!("Request failed with status {}: {}", resp.status(), text_string))
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user