diff --git a/src/components/StoreWatchPage.js b/src/components/StoreWatchPage.js index 9bc4668..e1956b8 100644 --- a/src/components/StoreWatchPage.js +++ b/src/components/StoreWatchPage.js @@ -10,6 +10,7 @@ import { import { haversineDistanceKm } from '../utils/distance'; const REGION_STORAGE_KEY = 'storeWatchRegionSelection'; +const WATCH_TABLE_STATE_KEY = 'storeWatchTableState'; const columnHelper = createColumnHelper(); @@ -48,6 +49,47 @@ const ColumnSelectFilter = ({ column, options }) => { ); }; +function readWatchTableState() { + if (typeof window === 'undefined') { + return { + sorting: [], + columnFilters: [{ id: 'isOpen', value: 'true' }] + }; + } + try { + const raw = window.localStorage.getItem(WATCH_TABLE_STATE_KEY); + if (!raw) { + return { + sorting: [], + columnFilters: [{ id: 'isOpen', value: 'true' }] + }; + } + const parsed = JSON.parse(raw); + return { + sorting: Array.isArray(parsed.sorting) ? parsed.sorting : [], + columnFilters: Array.isArray(parsed.columnFilters) && parsed.columnFilters.length > 0 + ? parsed.columnFilters + : [{ id: 'isOpen', value: 'true' }] + }; + } catch { + return { + sorting: [], + columnFilters: [{ id: 'isOpen', value: 'true' }] + }; + } +} + +function persistWatchTableState(state) { + if (typeof window === 'undefined') { + return; + } + try { + window.localStorage.setItem(WATCH_TABLE_STATE_KEY, JSON.stringify(state)); + } catch { + /* ignore */ + } +} + const StoreWatchPage = ({ authorizedFetch, knownStores = [], userLocation }) => { const [regions, setRegions] = useState([]); const [selectedRegionId, setSelectedRegionId] = useState(() => { @@ -69,8 +111,9 @@ const StoreWatchPage = ({ authorizedFetch, knownStores = [], userLocation }) => const [error, setError] = useState(''); const [dirty, setDirty] = useState(false); const [saving, setSaving] = useState(false); - const [sorting, setSorting] = useState([]); - const [columnFilters, setColumnFilters] = useState([{ id: 'isOpen', value: 'true' }]); + const initialTableState = useMemo(() => readWatchTableState(), []); + const [sorting, setSorting] = useState(initialTableState.sorting); + const [columnFilters, setColumnFilters] = useState(initialTableState.columnFilters); useEffect(() => { if (typeof window === 'undefined') { @@ -83,6 +126,10 @@ const StoreWatchPage = ({ authorizedFetch, knownStores = [], userLocation }) => } }, [selectedRegionId]); + useEffect(() => { + persistWatchTableState({ sorting, columnFilters }); + }, [sorting, columnFilters]); + const watchedIds = useMemo( () => new Set(watchList.map((entry) => String(entry.storeId))), [watchList] @@ -282,11 +329,10 @@ const StoreWatchPage = ({ authorizedFetch, knownStores = [], userLocation }) => ), cell: ({ getValue }) => { const value = getValue(); - return ( - - {value ? new Date(value).toLocaleDateString('de-DE') : 'unbekannt'} - - ); + const label = value + ? new Date(value).toLocaleDateString('de-DE', { year: 'numeric', month: '2-digit', day: '2-digit' }) + : '–'; + return