connor/calendar
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

Implement real-time event refresh functionality

Browse Source 
- 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
2025-08-28 17:51:30 -04:00
parent 1c4857ccad
commit d945c46e5a
7 changed files with 178 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
backend/src/calendar.rs
View File

@@ -192,6 +192,17 @@ impl CalDAVClient {
Ok(events)
}
/// Fetch a single calendar event by UID from the CalDAV server
pub async fn fetch_event_by_uid(&self, calendar_path: &str, uid: &str) -> Result<Option<CalendarEvent>, CalDAVError> {
// First fetch all events and find the one with matching UID
let events = self.fetch_events(calendar_path).await?;
// Find event with matching UID
let event = events.into_iter().find(|e| e.uid == uid);
Ok(event)
}
/// Extract calendar data sections from CalDAV XML response
fn extract_calendar_data(&self, xml_response: &str) -> Vec<CalendarDataSection> {
let mut sections = Vec::new();

48
backend/src/handlers.rs
View File

@@ -1,5 +1,5 @@
use axum::{
extract::{State, Query},
extract::{State, Query, Path},
http::HeaderMap,
response::Json,
};
@@ -73,6 +73,52 @@ pub async fn get_calendar_events(
Ok(Json(filtered_events))
}
pub async fn refresh_event(
State(_state): State<Arc<AppState>>,
Path(uid): Path<String>,
headers: HeaderMap,
) -> Result<Json<Option<CalendarEvent>>, ApiError> {
// Verify authentication (extract token from Authorization header)
let _token = if let Some(auth_header) = headers.get("authorization") {
let auth_str = auth_header
.to_str()
.map_err(|_| ApiError::Unauthorized("Invalid authorization header".to_string()))?;
if auth_str.starts_with("Bearer ") {
auth_str.strip_prefix("Bearer ").unwrap().to_string()
} else {
return Err(ApiError::Unauthorized("Invalid authorization format".to_string()));
}
} else {
return Err(ApiError::Unauthorized("Missing authorization header".to_string()));
};
// TODO: Validate JWT token here
// Load CalDAV configuration
let config = CalDAVConfig::from_env()
.map_err(|e| ApiError::Internal(format!("Failed to load CalDAV config: {}", e)))?;
let client = CalDAVClient::new(config);
// Discover calendars if needed
let calendar_paths = client.discover_calendars()
.await
.map_err(|e| ApiError::Internal(format!("Failed to discover calendars: {}", e)))?;
if calendar_paths.is_empty() {
return Ok(Json(None)); // No calendars found
}
// Fetch the specific event by UID from the first calendar
let calendar_path = &calendar_paths[0];
let event = client.fetch_event_by_uid(calendar_path, &uid)
.await
.map_err(|e| ApiError::Internal(format!("Failed to fetch event: {}", e)))?;
Ok(Json(event))
}
pub async fn register(
State(state): State<Arc<AppState>>,
Json(request): Json<RegisterRequest>,

1
backend/src/lib.rs
View File

@@ -53,6 +53,7 @@ pub async fn run_server() -> Result<(), Box<dyn std::error::Error>> {
.route("/api/auth/login", post(handlers::login))
.route("/api/auth/verify", get(handlers::verify_token))
.route("/api/calendar/events", get(handlers::get_calendar_events))
.route("/api/calendar/events/:uid", get(handlers::refresh_event))
.layer(
CorsLayer::new()
.allow_origin(Any)

57
src/app.rs
View File

@@ -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()} />
}
}
}

13
src/components/calendar.rs
View File

@@ -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

39
src/services/calendar_service.rs
View File

@@ -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))
}
}
}

14
styles.css
View File

@@ -359,6 +359,20 @@ body {
background: #1976d2;
}
.event-box.refreshing {
background: #ff9800;
animation: pulse 1.5s ease-in-out infinite alternate;
}
@keyframes pulse {
0% {
opacity: 0.7;
}
100% {
opacity: 1;
}
}
.event-dot {
background: #ff9800;
height: 6px;