Persist calendar month across page refreshes using localStorage
- Load saved month from localStorage on calendar initialization - Fall back to current date if no saved month exists - Save current month to localStorage on all navigation actions: - Previous month navigation - Next month navigation - Today button clicks - Use YYYY-MM-DD format for localStorage storage - Maintain month view after page refreshes from event creation/editing - Preserve user's selected month during manual browser refreshes 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -4,6 +4,7 @@ use std::collections::HashMap;
|
|||||||
use crate::services::calendar_service::{CalendarEvent, UserInfo};
|
use crate::services::calendar_service::{CalendarEvent, UserInfo};
|
||||||
use crate::components::EventModal;
|
use crate::components::EventModal;
|
||||||
use wasm_bindgen::JsCast;
|
use wasm_bindgen::JsCast;
|
||||||
|
use gloo_storage::{LocalStorage, Storage};
|
||||||
|
|
||||||
#[derive(Properties, PartialEq)]
|
#[derive(Properties, PartialEq)]
|
||||||
pub struct CalendarProps {
|
pub struct CalendarProps {
|
||||||
@@ -23,7 +24,19 @@ pub struct CalendarProps {
|
|||||||
#[function_component]
|
#[function_component]
|
||||||
pub fn Calendar(props: &CalendarProps) -> Html {
|
pub fn Calendar(props: &CalendarProps) -> Html {
|
||||||
let today = Local::now().date_naive();
|
let today = Local::now().date_naive();
|
||||||
let current_month = use_state(|| today);
|
let current_month = use_state(|| {
|
||||||
|
// Try to load saved month from localStorage
|
||||||
|
if let Ok(saved_month_str) = LocalStorage::get::<String>("calendar_current_month") {
|
||||||
|
if let Ok(saved_month) = NaiveDate::parse_from_str(&saved_month_str, "%Y-%m-%d") {
|
||||||
|
// Return the first day of the saved month
|
||||||
|
saved_month.with_day(1).unwrap_or(today)
|
||||||
|
} else {
|
||||||
|
today
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
today
|
||||||
|
}
|
||||||
|
});
|
||||||
let selected_day = use_state(|| today);
|
let selected_day = use_state(|| today);
|
||||||
let selected_event = use_state(|| None::<CalendarEvent>);
|
let selected_event = use_state(|| None::<CalendarEvent>);
|
||||||
|
|
||||||
@@ -53,6 +66,8 @@ pub fn Calendar(props: &CalendarProps) -> Html {
|
|||||||
let prev = *current_month - Duration::days(1);
|
let prev = *current_month - Duration::days(1);
|
||||||
let first_of_prev = prev.with_day(1).unwrap();
|
let first_of_prev = prev.with_day(1).unwrap();
|
||||||
current_month.set(first_of_prev);
|
current_month.set(first_of_prev);
|
||||||
|
// Save to localStorage
|
||||||
|
let _ = LocalStorage::set("calendar_current_month", first_of_prev.format("%Y-%m-%d").to_string());
|
||||||
})
|
})
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -65,6 +80,8 @@ pub fn Calendar(props: &CalendarProps) -> Html {
|
|||||||
NaiveDate::from_ymd_opt(current_month.year(), current_month.month() + 1, 1).unwrap()
|
NaiveDate::from_ymd_opt(current_month.year(), current_month.month() + 1, 1).unwrap()
|
||||||
};
|
};
|
||||||
current_month.set(next);
|
current_month.set(next);
|
||||||
|
// Save to localStorage
|
||||||
|
let _ = LocalStorage::set("calendar_current_month", next.format("%Y-%m-%d").to_string());
|
||||||
})
|
})
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -74,6 +91,8 @@ pub fn Calendar(props: &CalendarProps) -> Html {
|
|||||||
let today = Local::now().date_naive();
|
let today = Local::now().date_naive();
|
||||||
let first_of_today_month = today.with_day(1).unwrap();
|
let first_of_today_month = today.with_day(1).unwrap();
|
||||||
current_month.set(first_of_today_month);
|
current_month.set(first_of_today_month);
|
||||||
|
// Save to localStorage
|
||||||
|
let _ = LocalStorage::set("calendar_current_month", first_of_today_month.format("%Y-%m-%d").to_string());
|
||||||
})
|
})
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user