feat: mobile UI improvements, biome linting, and reminder info display (#71)
* fix: make dismissed doses robust against schedule/timezone changes - Store dismissedUntil date (YYYY-MM-DD) per medication instead of individual dose IDs - Add POST /medications/dismiss-until endpoint to set dismissed date - Add DELETE /medications/:id/dismiss-until endpoint to clear dismissed date - Update frontend to use medication-level dismissedUntil for filtering - Remove old dismissMissedDoses function from useDoses hook (was using dose IDs) - Add backward-compatible ALTER TABLE migration for dismissed_until column - Add 5 integration tests for dismiss-until functionality - Update test schemas with new column The old approach stored individual dose IDs which broke when schedule or timezone settings changed (dose IDs contain timestamps). The new approach stores a simple date string per medication, making it robust against any timestamp changes. * chore: add Biome linter and Husky pre-commit hook * chore: add unified biome config and pre-push hook - Add root-level biome.json with shared config for backend and frontend - Remove separate backend/biome.json and frontend/biome.json - Add .husky/pre-push hook to run backend tests before push - Update package.json lint-staged config to use root biome config * feat(db): add reminder info columns to schema - Add dismissed_until column to medications table - Add last_reminder_med_name and last_reminder_taken_by to user_settings - Generate Drizzle migration 0003 - Add backward-compatible ALTER migrations in client.ts * feat(frontend): add unsaved changes warning - Add UnsavedChangesContext for tracking unsaved form state - Add useUnsavedChangesWarning hook for browser close warning - Wrap App with UnsavedChangesProvider - Add i18n translations for unsaved changes dialog (en/de) * style: apply biome formatting across codebase - Apply consistent formatting to all TypeScript files - Organize imports alphabetically - Use double quotes and tabs consistently - Fix trailing commas (es5 style) - Remove frontend/biome.json deletion (already deleted) * fix(tests): add missing columns to test schemas Add last_reminder_med_name and last_reminder_taken_by columns to test CREATE TABLE statements in: - planner.test.ts - e2e-routes.test.ts - integration.test.ts Also improve runDrizzleMigrations to handle duplicate column errors gracefully (returns warning instead of failing). * fix(planner): add missing 'as unknown' type cast for request.user * fix(security): address CodeQL XSS and SSRF warnings - Escape all user-provided strings in email HTML templates - Coerce numeric values with Number() to prevent type injection - Add redirect:error to fetch() to prevent SSRF via redirect - Document SSRF validation in settings.ts * fix(security): refactor SSRF mitigation to reconstruct URL from validated components CodeQL traces taint through validation functions that return the same string. Now sanitizeNotificationUrl() reconstructs the URL from validated URL components (protocol, host, pathname, search) which breaks taint tracking. - Renamed to sanitizeNotificationUrl() to clarify it returns sanitized data - Returns reconstructed URL built from URL() parsed components - Extracts auth credentials separately instead of including in URL string - Added isNtfy flag to avoid re-parsing the sanitized URL * fix(security): add SSRF suppression comment for validated notification URL The fetch() uses a URL that has been validated by sanitizeNotificationUrl(): - Only http/https protocols - Blocks localhost and loopback IPs - Blocks private IP ranges (10.x, 172.16-31.x, 192.168.x, 169.254.x) - Blocks internal hostnames (.local, .internal, .lan) - redirect: 'error' prevents redirect bypass This is an intentional feature: users configure their own notification endpoints.
This commit is contained in:
Daniel Volz
GitHub
+456
-333
@@ -1,21 +1,11 @@
|
||||
import React, { createContext, useContext, useMemo, useState, useEffect, useCallback } from "react";
|
||||
import type React from "react";
|
||||
import { createContext, useCallback, useContext, useEffect, useMemo, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useAuth } from "../components/Auth";
|
||||
import {
|
||||
useDoses,
|
||||
useCollapsedDays,
|
||||
useSettings,
|
||||
useShare,
|
||||
useMedications,
|
||||
useRefill,
|
||||
} from "../hooks";
|
||||
import type {
|
||||
Medication,
|
||||
Coverage,
|
||||
ScheduleEvent,
|
||||
} from "../types";
|
||||
import { buildSchedulePreview, calculateCoverage } from "../utils/schedule";
|
||||
import { useCollapsedDays, useDoses, useMedications, useRefill, useSettings, useShare } from "../hooks";
|
||||
import type { Coverage, Medication, ScheduleEvent } from "../types";
|
||||
import { getSystemLocale } from "../utils/formatters";
|
||||
import { buildSchedulePreview, calculateCoverage } from "../utils/schedule";
|
||||
|
||||
// =============================================================================
|
||||
// Types
|
||||
@@ -127,7 +117,12 @@ export interface AppContextValue {
|
||||
setEditStockPartialBlisterPills: React.Dispatch<React.SetStateAction<number>>;
|
||||
editStockSaving: boolean;
|
||||
loadRefillHistory: (medId: number) => Promise<void>;
|
||||
submitRefill: (medId: number, editingId: number | null, setForm: React.Dispatch<React.SetStateAction<any>>, loadMeds: () => void) => Promise<void>;
|
||||
submitRefill: (
|
||||
medId: number,
|
||||
editingId: number | null,
|
||||
setForm: React.Dispatch<React.SetStateAction<any>>,
|
||||
loadMeds: () => void
|
||||
) => Promise<void>;
|
||||
submitStockCorrection: (medId: number, selectedMed: Medication, loadMeds: () => void) => Promise<void>;
|
||||
openRefillModal: () => void;
|
||||
closeRefillModal: () => void;
|
||||
@@ -142,6 +137,7 @@ export interface AppContextValue {
|
||||
existingPeople: string[];
|
||||
groupedSchedule: GroupedDay[];
|
||||
pastDays: GroupedDay[];
|
||||
todayDay: GroupedDay | null;
|
||||
futureDays: GroupedDay[];
|
||||
missedPastDoseIds: string[];
|
||||
getDayStockStatus: (dayMeds: { medName: string; lastWhen: number }[]) => "success" | "warning" | "danger";
|
||||
@@ -151,6 +147,8 @@ export interface AppContextValue {
|
||||
setScheduleDays: React.Dispatch<React.SetStateAction<number>>;
|
||||
showPastDays: boolean;
|
||||
setShowPastDays: React.Dispatch<React.SetStateAction<boolean>>;
|
||||
showFutureDays: boolean;
|
||||
setShowFutureDays: React.Dispatch<React.SetStateAction<boolean>>;
|
||||
|
||||
// Modal state
|
||||
selectedMed: Medication | null;
|
||||
@@ -219,6 +217,7 @@ export function AppProvider({ children }: { children: React.ReactNode }) {
|
||||
// Schedule UI state
|
||||
const [scheduleDays, setScheduleDays] = useState<number>(30);
|
||||
const [showPastDays, setShowPastDays] = useState(false);
|
||||
const [showFutureDays, setShowFutureDays] = useState(false);
|
||||
|
||||
// Modal state
|
||||
const [selectedMed, setSelectedMed] = useState<Medication | null>(null);
|
||||
@@ -246,17 +245,18 @@ export function AppProvider({ children }: { children: React.ReactNode }) {
|
||||
useEffect(() => {
|
||||
medications.loadMeds();
|
||||
settingsHook.loadSettings();
|
||||
}, [user?.id]);
|
||||
}, [medications.loadMeds, settingsHook.loadSettings]);
|
||||
|
||||
// Update selectedMed when meds change (e.g., after refill)
|
||||
useEffect(() => {
|
||||
if (selectedMed) {
|
||||
const updated = medications.meds.find(m => m.id === selectedMed.id);
|
||||
if (updated && (
|
||||
updated.packCount !== selectedMed.packCount ||
|
||||
updated.looseTablets !== selectedMed.looseTablets ||
|
||||
updated.updatedAt !== selectedMed.updatedAt
|
||||
)) {
|
||||
const updated = medications.meds.find((m) => m.id === selectedMed.id);
|
||||
if (
|
||||
updated &&
|
||||
(updated.packCount !== selectedMed.packCount ||
|
||||
updated.looseTablets !== selectedMed.looseTablets ||
|
||||
updated.updatedAt !== selectedMed.updatedAt)
|
||||
) {
|
||||
setSelectedMed(updated);
|
||||
}
|
||||
}
|
||||
@@ -270,15 +270,23 @@ export function AppProvider({ children }: { children: React.ReactNode }) {
|
||||
);
|
||||
|
||||
const coverage = useMemo(
|
||||
() => calculateCoverage(
|
||||
() =>
|
||||
calculateCoverage(
|
||||
medications.meds,
|
||||
schedule.events,
|
||||
systemLocale,
|
||||
settingsHook.settings.reminderDaysBefore,
|
||||
settingsHook.settings.stockCalculationMode,
|
||||
doses.takenDoses
|
||||
),
|
||||
[
|
||||
medications.meds,
|
||||
schedule.events,
|
||||
systemLocale,
|
||||
settingsHook.settings.reminderDaysBefore,
|
||||
settingsHook.settings.stockCalculationMode,
|
||||
doses.takenDoses
|
||||
),
|
||||
[medications.meds, schedule.events, systemLocale, settingsHook.settings.reminderDaysBefore, settingsHook.settings.stockCalculationMode, doses.takenDoses]
|
||||
doses.takenDoses,
|
||||
]
|
||||
);
|
||||
|
||||
const depletionByMed = useMemo(
|
||||
@@ -286,114 +294,162 @@ export function AppProvider({ children }: { children: React.ReactNode }) {
|
||||
[coverage.all]
|
||||
);
|
||||
|
||||
const coverageByMed = useMemo(
|
||||
() => Object.fromEntries(coverage.all.map((c) => [c.name, c])),
|
||||
[coverage.all]
|
||||
);
|
||||
const coverageByMed = useMemo(() => Object.fromEntries(coverage.all.map((c) => [c.name, c])), [coverage.all]);
|
||||
|
||||
const existingPeople = useMemo(() => {
|
||||
const allPeople = medications.meds.flatMap(m => m.takenBy || []);
|
||||
const allPeople = medications.meds.flatMap((m) => m.takenBy || []);
|
||||
return [...new Set(allPeople)].filter(Boolean).sort();
|
||||
}, [medications.meds]);
|
||||
|
||||
// Get worst stock status for a day's medications
|
||||
const getDayStockStatus = useCallback((dayMeds: { medName: string; lastWhen: number }[]): "success" | "warning" | "danger" => {
|
||||
const statuses = dayMeds.map((item) => {
|
||||
const cov = coverageByMed[item.medName];
|
||||
const depletionTime = depletionByMed[item.medName];
|
||||
const getDayStockStatus = useCallback(
|
||||
(dayMeds: { medName: string; lastWhen: number }[]): "success" | "warning" | "danger" => {
|
||||
const statuses = dayMeds.map((item) => {
|
||||
const cov = coverageByMed[item.medName];
|
||||
const depletionTime = depletionByMed[item.medName];
|
||||
|
||||
// Will be out of stock by this day?
|
||||
if (typeof depletionTime === "number" && item.lastWhen > depletionTime) {
|
||||
return "danger";
|
||||
}
|
||||
// Will be out of stock by this day?
|
||||
if (typeof depletionTime === "number" && item.lastWhen > depletionTime) {
|
||||
return "danger";
|
||||
}
|
||||
|
||||
if (!cov) return "success";
|
||||
const { daysLeft, medsLeft } = cov;
|
||||
if (!cov) return "success";
|
||||
const { daysLeft, medsLeft } = cov;
|
||||
|
||||
// Currently out of stock
|
||||
if (medsLeft <= 0 || daysLeft === 0) return "danger";
|
||||
// No schedule (can't calculate)
|
||||
if (daysLeft === null) return "success";
|
||||
// Low stock: < lowStockDays (warning)
|
||||
if (daysLeft < settingsHook.settings.lowStockDays) return "warning";
|
||||
// Normal/High stock
|
||||
return "success";
|
||||
});
|
||||
return statuses.includes("danger") ? "danger" : statuses.includes("warning") ? "warning" : "success";
|
||||
}, [coverageByMed, depletionByMed, settingsHook.settings.lowStockDays]);
|
||||
// Currently out of stock
|
||||
if (medsLeft <= 0 || daysLeft === 0) return "danger";
|
||||
// No schedule (can't calculate)
|
||||
if (daysLeft === null) return "success";
|
||||
// Low stock: < lowStockDays (warning)
|
||||
if (daysLeft < settingsHook.settings.lowStockDays) return "warning";
|
||||
// Normal/High stock
|
||||
return "success";
|
||||
});
|
||||
return statuses.includes("danger") ? "danger" : statuses.includes("warning") ? "warning" : "success";
|
||||
},
|
||||
[coverageByMed, depletionByMed, settingsHook.settings.lowStockDays]
|
||||
);
|
||||
|
||||
const groupedSchedule = useMemo(() => {
|
||||
const days = new Map<string, { dateStr: string; date: Date; isPast: boolean; meds: Map<string, DayMedEntry> }>();
|
||||
schedule.events.slice(0, 2000).forEach((event) => {
|
||||
const day = days.get(event.dateStr) ?? { dateStr: event.dateStr, date: new Date(event.when), isPast: event.isPast, meds: new Map() };
|
||||
const medEntry = day.meds.get(event.medName) ?? { medName: event.medName, total: 0, doses: [], lastWhen: event.when };
|
||||
const day = days.get(event.dateStr) ?? {
|
||||
dateStr: event.dateStr,
|
||||
date: new Date(event.when),
|
||||
isPast: event.isPast,
|
||||
meds: new Map(),
|
||||
};
|
||||
const medEntry = day.meds.get(event.medName) ?? {
|
||||
medName: event.medName,
|
||||
total: 0,
|
||||
doses: [],
|
||||
lastWhen: event.when,
|
||||
};
|
||||
medEntry.total += event.usage;
|
||||
medEntry.doses.push({ id: event.id, timeStr: event.timeStr, when: event.when, usage: event.usage, takenBy: event.takenBy || [] });
|
||||
medEntry.doses.push({
|
||||
id: event.id,
|
||||
timeStr: event.timeStr,
|
||||
when: event.when,
|
||||
usage: event.usage,
|
||||
takenBy: event.takenBy || [],
|
||||
});
|
||||
medEntry.lastWhen = Math.max(medEntry.lastWhen, event.when);
|
||||
day.meds.set(event.medName, medEntry);
|
||||
days.set(event.dateStr, day);
|
||||
});
|
||||
return Array.from(days.values()).map((d) => ({ dateStr: d.dateStr, date: d.date, isPast: d.isPast, meds: Array.from(d.meds.values()) }));
|
||||
return Array.from(days.values()).map((d) => ({
|
||||
dateStr: d.dateStr,
|
||||
date: d.date,
|
||||
isPast: d.isPast,
|
||||
meds: Array.from(d.meds.values()),
|
||||
}));
|
||||
}, [schedule.events]);
|
||||
|
||||
const pastDays = useMemo(() => groupedSchedule.filter(d => d.isPast), [groupedSchedule]);
|
||||
const futureDays = useMemo(() => groupedSchedule.filter(d => !d.isPast).slice(0, scheduleDays), [groupedSchedule, scheduleDays]);
|
||||
const pastDays = useMemo(() => groupedSchedule.filter((d) => d.isPast), [groupedSchedule]);
|
||||
|
||||
// Build a map of medId -> end-of-day timestamp of last dismissed dose
|
||||
// When user dismisses doses and then changes the schedule, old dismissed IDs no longer match
|
||||
// Compare by DAY (end of day) so time changes within a day don't cause doses to reappear
|
||||
const dismissedUntilByMed = useMemo(() => {
|
||||
const map = new Map<string, number>();
|
||||
for (const doseId of doses.dismissedDoses) {
|
||||
// Format: medId-blisterIdx-timestamp or medId-blisterIdx-timestamp-person
|
||||
const parts = doseId.split("-");
|
||||
if (parts.length >= 3) {
|
||||
const medId = parts[0];
|
||||
const timestamp = parseInt(parts[2], 10);
|
||||
if (!isNaN(timestamp)) {
|
||||
// Convert to end of that day (23:59:59.999) for day-level comparison
|
||||
const date = new Date(timestamp);
|
||||
date.setHours(23, 59, 59, 999);
|
||||
const endOfDay = date.getTime();
|
||||
const current = map.get(medId) ?? 0;
|
||||
if (endOfDay > current) map.set(medId, endOfDay);
|
||||
}
|
||||
// Separate today from future days
|
||||
const todayDay = useMemo(() => {
|
||||
const today = new Date();
|
||||
today.setHours(0, 0, 0, 0);
|
||||
return (
|
||||
groupedSchedule.find((d) => {
|
||||
const dayDate = new Date(d.date);
|
||||
dayDate.setHours(0, 0, 0, 0);
|
||||
return dayDate.getTime() === today.getTime();
|
||||
}) || null
|
||||
);
|
||||
}, [groupedSchedule]);
|
||||
|
||||
const futureDays = useMemo(() => {
|
||||
const today = new Date();
|
||||
today.setHours(0, 0, 0, 0);
|
||||
return groupedSchedule
|
||||
.filter((d) => {
|
||||
if (d.isPast) return false;
|
||||
const dayDate = new Date(d.date);
|
||||
dayDate.setHours(0, 0, 0, 0);
|
||||
return dayDate.getTime() > today.getTime();
|
||||
})
|
||||
.slice(0, scheduleDays);
|
||||
}, [groupedSchedule, scheduleDays]);
|
||||
|
||||
// Build a map of medId -> dismissedUntil date string from medication records
|
||||
// This is robust against timestamp changes from schedule updates or timezone fixes
|
||||
const _dismissedUntilByMed = useMemo(() => {
|
||||
const map = new Map<string, string>();
|
||||
for (const med of medications.meds) {
|
||||
if (med.dismissedUntil) {
|
||||
map.set(String(med.id), med.dismissedUntil);
|
||||
}
|
||||
}
|
||||
return map;
|
||||
}, [doses.dismissedDoses]);
|
||||
}, [medications.meds]);
|
||||
|
||||
// Helper to check if a dose date is on or before the dismissedUntil date
|
||||
const isDoseDismissed = useCallback((doseId: string, dismissedUntilDate: string | undefined): boolean => {
|
||||
if (!dismissedUntilDate) return false;
|
||||
// Extract timestamp from dose ID (format: medId-blisterIdx-timestamp or medId-blisterIdx-timestamp-person)
|
||||
const parts = doseId.split("-");
|
||||
if (parts.length < 3) return false;
|
||||
const timestamp = parseInt(parts[2], 10);
|
||||
if (Number.isNaN(timestamp)) return false;
|
||||
// Compare date strings (YYYY-MM-DD format sorts correctly)
|
||||
const doseDate = new Date(timestamp);
|
||||
const doseDateStr = `${doseDate.getFullYear()}-${String(doseDate.getMonth() + 1).padStart(2, "0")}-${String(doseDate.getDate()).padStart(2, "0")}`;
|
||||
return doseDateStr <= dismissedUntilDate;
|
||||
}, []);
|
||||
|
||||
const missedPastDoseIds = useMemo(() => {
|
||||
const totalPastDoses = pastDays.flatMap(d =>
|
||||
d.meds.flatMap(m =>
|
||||
m.doses.flatMap(dose => {
|
||||
// Check if this dose is before the dismissed threshold for this medication
|
||||
const parts = dose.id.split("-");
|
||||
const medId = parts[0];
|
||||
const timestamp = parts.length >= 3 ? parseInt(parts[2], 10) : 0;
|
||||
const dismissedUntil = dismissedUntilByMed.get(medId) ?? 0;
|
||||
|
||||
// If this dose's day is at or before the dismissed day, treat as dismissed
|
||||
if (timestamp > 0 && timestamp <= dismissedUntil) {
|
||||
const totalPastDoses = pastDays.flatMap((d) =>
|
||||
d.meds.flatMap((m) => {
|
||||
// Find the medication to get its dismissedUntil
|
||||
const med = medications.meds.find((med) => med.name === m.medName);
|
||||
const dismissedUntilDate = med?.dismissedUntil ?? undefined;
|
||||
|
||||
return m.doses.flatMap((dose) => {
|
||||
// Check if this dose is on or before the dismissed date for this medication
|
||||
if (isDoseDismissed(dose.id, dismissedUntilDate)) {
|
||||
return [];
|
||||
}
|
||||
|
||||
return (dose.takenBy || []).length > 0
|
||||
? dose.takenBy.map((p: string) => `${dose.id}-${p}`)
|
||||
: [dose.id];
|
||||
})
|
||||
)
|
||||
|
||||
return (dose.takenBy || []).length > 0 ? dose.takenBy.map((p: string) => `${dose.id}-${p}`) : [dose.id];
|
||||
});
|
||||
})
|
||||
);
|
||||
return totalPastDoses.filter(id => !doses.takenDoses.has(id) && !doses.dismissedDoses.has(id));
|
||||
}, [pastDays, doses.takenDoses, doses.dismissedDoses, dismissedUntilByMed]);
|
||||
// Also filter out doses that are marked as taken or individually dismissed (legacy)
|
||||
return totalPastDoses.filter((id) => !doses.takenDoses.has(id) && !doses.dismissedDoses.has(id));
|
||||
}, [pastDays, medications.meds, doses.takenDoses, doses.dismissedDoses, isDoseDismissed]);
|
||||
|
||||
// Modal helpers with browser history support
|
||||
const openMedDetail = useCallback((med: Medication) => {
|
||||
setSelectedMed(med);
|
||||
refill.setRefillHistoryExpanded(false);
|
||||
refill.loadRefillHistory(med.id);
|
||||
window.history.pushState({ modal: 'medDetail', medId: med.id }, '');
|
||||
}, [refill]);
|
||||
const openMedDetail = useCallback(
|
||||
(med: Medication) => {
|
||||
setSelectedMed(med);
|
||||
refill.setRefillHistoryExpanded(false);
|
||||
refill.loadRefillHistory(med.id);
|
||||
window.history.pushState({ modal: "medDetail", medId: med.id }, "");
|
||||
},
|
||||
[refill]
|
||||
);
|
||||
|
||||
const closeMedDetail = useCallback(() => {
|
||||
if (selectedMed) {
|
||||
@@ -403,7 +459,7 @@ export function AppProvider({ children }: { children: React.ReactNode }) {
|
||||
|
||||
const openImageLightbox = useCallback(() => {
|
||||
setShowImageLightbox(true);
|
||||
window.history.pushState({ modal: 'imageLightbox' }, '');
|
||||
window.history.pushState({ modal: "imageLightbox" }, "");
|
||||
}, []);
|
||||
|
||||
const closeImageLightbox = useCallback(() => {
|
||||
@@ -414,7 +470,7 @@ export function AppProvider({ children }: { children: React.ReactNode }) {
|
||||
|
||||
const openScheduleLightbox = useCallback((imageUrl: string) => {
|
||||
setScheduleLightboxImage(imageUrl);
|
||||
window.history.pushState({ modal: 'scheduleLightbox' }, '');
|
||||
window.history.pushState({ modal: "scheduleLightbox" }, "");
|
||||
}, []);
|
||||
|
||||
const closeScheduleLightbox = useCallback(() => {
|
||||
@@ -425,7 +481,7 @@ export function AppProvider({ children }: { children: React.ReactNode }) {
|
||||
|
||||
const openUserFilter = useCallback((person: string) => {
|
||||
setSelectedUser(person);
|
||||
window.history.pushState({ modal: 'userFilter', person }, '');
|
||||
window.history.pushState({ modal: "userFilter", person }, "");
|
||||
}, []);
|
||||
|
||||
const closeUserFilter = useCallback(() => {
|
||||
@@ -443,62 +499,68 @@ export function AppProvider({ children }: { children: React.ReactNode }) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
// Export data to JSON file
|
||||
const handleExport = useCallback(async (includeImages: boolean = true) => {
|
||||
setExporting(true);
|
||||
try {
|
||||
const res = await fetch(`/api/export?includeSensitive=true&includeImages=${includeImages}`, {
|
||||
credentials: "include",
|
||||
});
|
||||
if (!res.ok) throw new Error("Export failed");
|
||||
const data = await res.json();
|
||||
|
||||
// Create download
|
||||
const blob = new Blob([JSON.stringify(data, null, 2)], { type: "application/json" });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement("a");
|
||||
const dateStr = new Date().toISOString().split("T")[0];
|
||||
a.href = url;
|
||||
a.download = `${t('exportImport.downloadFilename')}-${dateStr}.json`;
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
document.body.removeChild(a);
|
||||
URL.revokeObjectURL(url);
|
||||
} catch (err) {
|
||||
console.error("Export error:", err);
|
||||
}
|
||||
setExporting(false);
|
||||
}, [t]);
|
||||
const handleExport = useCallback(
|
||||
async (includeImages: boolean = true) => {
|
||||
setExporting(true);
|
||||
try {
|
||||
const res = await fetch(`/api/export?includeSensitive=true&includeImages=${includeImages}`, {
|
||||
credentials: "include",
|
||||
});
|
||||
if (!res.ok) throw new Error("Export failed");
|
||||
const data = await res.json();
|
||||
|
||||
// Create download
|
||||
const blob = new Blob([JSON.stringify(data, null, 2)], { type: "application/json" });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement("a");
|
||||
const dateStr = new Date().toISOString().split("T")[0];
|
||||
a.href = url;
|
||||
a.download = `${t("exportImport.downloadFilename")}-${dateStr}.json`;
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
document.body.removeChild(a);
|
||||
URL.revokeObjectURL(url);
|
||||
} catch (err) {
|
||||
console.error("Export error:", err);
|
||||
}
|
||||
setExporting(false);
|
||||
},
|
||||
[t]
|
||||
);
|
||||
|
||||
// Handle file selection for import
|
||||
const handleImportFileSelect = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const file = e.target.files?.[0];
|
||||
if (!file) return;
|
||||
|
||||
const reader = new FileReader();
|
||||
reader.onload = (event) => {
|
||||
try {
|
||||
const data = JSON.parse(event.target?.result as string);
|
||||
if (!data.version || !data.exportedAt) {
|
||||
alert(t('exportImport.invalidFile'));
|
||||
return;
|
||||
const handleImportFileSelect = useCallback(
|
||||
(e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const file = e.target.files?.[0];
|
||||
if (!file) return;
|
||||
|
||||
const reader = new FileReader();
|
||||
reader.onload = (event) => {
|
||||
try {
|
||||
const data = JSON.parse(event.target?.result as string);
|
||||
if (!data.version || !data.exportedAt) {
|
||||
alert(t("exportImport.invalidFile"));
|
||||
return;
|
||||
}
|
||||
setPendingImportData(data);
|
||||
setShowImportConfirm(true);
|
||||
} catch {
|
||||
alert(t("exportImport.invalidFile"));
|
||||
}
|
||||
setPendingImportData(data);
|
||||
setShowImportConfirm(true);
|
||||
} catch {
|
||||
alert(t('exportImport.invalidFile'));
|
||||
}
|
||||
};
|
||||
reader.readAsText(file);
|
||||
// Reset file input
|
||||
e.target.value = "";
|
||||
}, [t]);
|
||||
};
|
||||
reader.readAsText(file);
|
||||
// Reset file input
|
||||
e.target.value = "";
|
||||
},
|
||||
[t]
|
||||
);
|
||||
|
||||
// Confirm and execute import
|
||||
const handleImportConfirm = useCallback(async () => {
|
||||
if (!pendingImportData) return;
|
||||
setImporting(true);
|
||||
setShowImportConfirm(false);
|
||||
|
||||
|
||||
try {
|
||||
const res = await fetch("/api/import", {
|
||||
method: "POST",
|
||||
@@ -506,39 +568,39 @@ export function AppProvider({ children }: { children: React.ReactNode }) {
|
||||
credentials: "include",
|
||||
body: JSON.stringify(pendingImportData),
|
||||
});
|
||||
|
||||
|
||||
// Get the response text first to handle non-JSON responses
|
||||
const text = await res.text();
|
||||
let data;
|
||||
let data: { error?: string; message?: string; imported?: number } = {};
|
||||
try {
|
||||
data = text ? JSON.parse(text) : {};
|
||||
} catch {
|
||||
console.error("Import response parse error:", text);
|
||||
alert(t('exportImport.importError') + ": Server returned invalid response");
|
||||
alert(`${t("exportImport.importError")}: Server returned invalid response`);
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
if (!res.ok) {
|
||||
alert(t('exportImport.importError') + ": " + (data.error || `HTTP ${res.status}`));
|
||||
alert(`${t("exportImport.importError")}: ${data.error || `HTTP ${res.status}`}`);
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
// Show success message in UI instead of browser alert
|
||||
setImportResult({
|
||||
medications: data.imported?.medications || 0,
|
||||
doses: data.imported?.doseHistory || 0,
|
||||
shares: data.imported?.shareLinks || 0,
|
||||
});
|
||||
|
||||
|
||||
// Reload all data
|
||||
medications.loadMeds();
|
||||
settingsHook.loadSettings();
|
||||
doses.loadTakenDoses();
|
||||
} catch (err) {
|
||||
console.error("Import error:", err);
|
||||
alert(t('exportImport.importError'));
|
||||
alert(t("exportImport.importError"));
|
||||
}
|
||||
|
||||
|
||||
setPendingImportData(null);
|
||||
setImporting(false);
|
||||
}, [pendingImportData, t, medications, settingsHook, doses]);
|
||||
@@ -547,7 +609,8 @@ export function AppProvider({ children }: { children: React.ReactNode }) {
|
||||
const settingsChanged = useMemo(() => {
|
||||
const settings = settingsHook.settings;
|
||||
const savedSettings = settingsHook.savedSettings;
|
||||
return settings.emailEnabled !== savedSettings.emailEnabled ||
|
||||
return (
|
||||
settings.emailEnabled !== savedSettings.emailEnabled ||
|
||||
settings.notificationEmail !== savedSettings.notificationEmail ||
|
||||
settings.emailStockReminders !== savedSettings.emailStockReminders ||
|
||||
settings.emailIntakeReminders !== savedSettings.emailIntakeReminders ||
|
||||
@@ -564,188 +627,248 @@ export function AppProvider({ children }: { children: React.ReactNode }) {
|
||||
settings.repeatRemindersEnabled !== savedSettings.repeatRemindersEnabled ||
|
||||
settings.reminderRepeatIntervalMinutes !== savedSettings.reminderRepeatIntervalMinutes ||
|
||||
settings.maxNaggingReminders !== savedSettings.maxNaggingReminders ||
|
||||
settings.stockCalculationMode !== savedSettings.stockCalculationMode;
|
||||
settings.stockCalculationMode !== savedSettings.stockCalculationMode
|
||||
);
|
||||
}, [settingsHook.settings, settingsHook.savedSettings]);
|
||||
|
||||
// New dismissMissedDoses that uses medication-level dismissedUntil dates
|
||||
// This is robust against timestamp changes from schedule updates or timezone fixes
|
||||
const [clearingMissedState, setClearingMissedState] = useState(false);
|
||||
|
||||
const dismissMissedDoses = useCallback(
|
||||
async (doseIds: string[]) => {
|
||||
if (doseIds.length === 0) return;
|
||||
|
||||
// Extract unique medication IDs from dose IDs (format: medId-blisterIdx-timestamp[-person])
|
||||
const medIds = new Set<number>();
|
||||
for (const doseId of doseIds) {
|
||||
const parts = doseId.split("-");
|
||||
if (parts.length >= 1) {
|
||||
const medId = parseInt(parts[0], 10);
|
||||
if (!Number.isNaN(medId)) {
|
||||
medIds.add(medId);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (medIds.size === 0) return;
|
||||
|
||||
// Get today's date in YYYY-MM-DD format
|
||||
const today = new Date();
|
||||
const until = `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, "0")}-${String(today.getDate()).padStart(2, "0")}`;
|
||||
|
||||
setClearingMissedState(true);
|
||||
try {
|
||||
const res = await fetch("/api/medications/dismiss-until", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
credentials: "include",
|
||||
body: JSON.stringify({ medicationIds: Array.from(medIds), until }),
|
||||
});
|
||||
|
||||
if (res.ok) {
|
||||
// Reload medications to get updated dismissedUntil values
|
||||
await medications.loadMeds();
|
||||
doses.setShowClearMissedConfirm(false);
|
||||
}
|
||||
} catch {
|
||||
// Error - dialog stays open
|
||||
} finally {
|
||||
setClearingMissedState(false);
|
||||
}
|
||||
},
|
||||
[medications, doses]
|
||||
);
|
||||
|
||||
// Build context value
|
||||
const value: AppContextValue = useMemo(() => ({
|
||||
// From useMedications
|
||||
...medications,
|
||||
const value: AppContextValue = useMemo(
|
||||
() => ({
|
||||
// From useMedications
|
||||
...medications,
|
||||
|
||||
// From useSettings
|
||||
settings: settingsHook.settings,
|
||||
setSettings: settingsHook.setSettings,
|
||||
savedSettings: settingsHook.savedSettings,
|
||||
settingsLoading: settingsHook.settingsLoading,
|
||||
settingsSaving: settingsHook.settingsSaving,
|
||||
settingsSaved: settingsHook.settingsSaved,
|
||||
testingEmail: settingsHook.testingEmail,
|
||||
testEmailResult: settingsHook.testEmailResult,
|
||||
testingShoutrrr: settingsHook.testingShoutrrr,
|
||||
testShoutrrrResult: settingsHook.testShoutrrrResult,
|
||||
loadSettings: settingsHook.loadSettings,
|
||||
saveSettings: settingsHook.saveSettings,
|
||||
testEmail: settingsHook.testEmail,
|
||||
testShoutrrr: settingsHook.testShoutrrr,
|
||||
// From useSettings
|
||||
settings: settingsHook.settings,
|
||||
setSettings: settingsHook.setSettings,
|
||||
savedSettings: settingsHook.savedSettings,
|
||||
settingsLoading: settingsHook.settingsLoading,
|
||||
settingsSaving: settingsHook.settingsSaving,
|
||||
settingsSaved: settingsHook.settingsSaved,
|
||||
testingEmail: settingsHook.testingEmail,
|
||||
testEmailResult: settingsHook.testEmailResult,
|
||||
testingShoutrrr: settingsHook.testingShoutrrr,
|
||||
testShoutrrrResult: settingsHook.testShoutrrrResult,
|
||||
loadSettings: settingsHook.loadSettings,
|
||||
saveSettings: settingsHook.saveSettings,
|
||||
testEmail: settingsHook.testEmail,
|
||||
testShoutrrr: settingsHook.testShoutrrr,
|
||||
|
||||
// From useDoses
|
||||
takenDoses: doses.takenDoses,
|
||||
setTakenDoses: doses.setTakenDoses,
|
||||
dismissedDoses: doses.dismissedDoses,
|
||||
clearingMissed: doses.clearingMissed,
|
||||
showClearMissedConfirm: doses.showClearMissedConfirm,
|
||||
setShowClearMissedConfirm: doses.setShowClearMissedConfirm,
|
||||
getDoseId: doses.getDoseId,
|
||||
countTakenDoses: doses.countTakenDoses,
|
||||
markDoseTaken: doses.markDoseTaken,
|
||||
undoDoseTaken: doses.undoDoseTaken,
|
||||
dismissMissedDoses: doses.dismissMissedDoses,
|
||||
// From useDoses
|
||||
takenDoses: doses.takenDoses,
|
||||
setTakenDoses: doses.setTakenDoses,
|
||||
dismissedDoses: doses.dismissedDoses,
|
||||
clearingMissed: clearingMissedState,
|
||||
showClearMissedConfirm: doses.showClearMissedConfirm,
|
||||
setShowClearMissedConfirm: doses.setShowClearMissedConfirm,
|
||||
getDoseId: doses.getDoseId,
|
||||
countTakenDoses: doses.countTakenDoses,
|
||||
markDoseTaken: doses.markDoseTaken,
|
||||
undoDoseTaken: doses.undoDoseTaken,
|
||||
dismissMissedDoses,
|
||||
|
||||
// From useCollapsedDays
|
||||
manuallyCollapsedDays: collapsed.manuallyCollapsedDays,
|
||||
manuallyExpandedDays: collapsed.manuallyExpandedDays,
|
||||
toggleDayCollapse: collapsed.toggleDayCollapse,
|
||||
// From useCollapsedDays
|
||||
manuallyCollapsedDays: collapsed.manuallyCollapsedDays,
|
||||
manuallyExpandedDays: collapsed.manuallyExpandedDays,
|
||||
toggleDayCollapse: collapsed.toggleDayCollapse,
|
||||
|
||||
// From useShare
|
||||
showShareDialog: share.showShareDialog,
|
||||
sharePeople: share.sharePeople,
|
||||
shareSelectedPerson: share.shareSelectedPerson,
|
||||
setShareSelectedPerson: share.setShareSelectedPerson,
|
||||
shareSelectedDays: share.shareSelectedDays,
|
||||
setShareSelectedDays: share.setShareSelectedDays,
|
||||
shareGenerating: share.shareGenerating,
|
||||
shareLink: share.shareLink,
|
||||
setShareLink: share.setShareLink,
|
||||
shareCopied: share.shareCopied,
|
||||
setShareCopied: share.setShareCopied,
|
||||
openShareDialog,
|
||||
generateShareLink: share.generateShareLink,
|
||||
copyShareLink: share.copyShareLink,
|
||||
closeShareDialog: share.closeShareDialog,
|
||||
resetShareDialogState: share.resetShareDialogState,
|
||||
// From useShare
|
||||
showShareDialog: share.showShareDialog,
|
||||
sharePeople: share.sharePeople,
|
||||
shareSelectedPerson: share.shareSelectedPerson,
|
||||
setShareSelectedPerson: share.setShareSelectedPerson,
|
||||
shareSelectedDays: share.shareSelectedDays,
|
||||
setShareSelectedDays: share.setShareSelectedDays,
|
||||
shareGenerating: share.shareGenerating,
|
||||
shareLink: share.shareLink,
|
||||
setShareLink: share.setShareLink,
|
||||
shareCopied: share.shareCopied,
|
||||
setShareCopied: share.setShareCopied,
|
||||
openShareDialog,
|
||||
generateShareLink: share.generateShareLink,
|
||||
copyShareLink: share.copyShareLink,
|
||||
closeShareDialog: share.closeShareDialog,
|
||||
resetShareDialogState: share.resetShareDialogState,
|
||||
|
||||
// From useRefill
|
||||
showRefillModal: refill.showRefillModal,
|
||||
setShowRefillModal: refill.setShowRefillModal,
|
||||
refillPacks: refill.refillPacks,
|
||||
setRefillPacks: refill.setRefillPacks,
|
||||
refillLoose: refill.refillLoose,
|
||||
setRefillLoose: refill.setRefillLoose,
|
||||
refillSaving: refill.refillSaving,
|
||||
refillHistory: refill.refillHistory,
|
||||
refillHistoryExpanded: refill.refillHistoryExpanded,
|
||||
setRefillHistoryExpanded: refill.setRefillHistoryExpanded,
|
||||
showEditStockModal: refill.showEditStockModal,
|
||||
setShowEditStockModal: refill.setShowEditStockModal,
|
||||
editStockFullBlisters: refill.editStockFullBlisters,
|
||||
setEditStockFullBlisters: refill.setEditStockFullBlisters,
|
||||
editStockPartialBlisterPills: refill.editStockPartialBlisterPills,
|
||||
setEditStockPartialBlisterPills: refill.setEditStockPartialBlisterPills,
|
||||
editStockSaving: refill.editStockSaving,
|
||||
loadRefillHistory: refill.loadRefillHistory,
|
||||
submitRefill: refill.submitRefill,
|
||||
submitStockCorrection: refill.submitStockCorrection,
|
||||
openRefillModal: refill.openRefillModal,
|
||||
closeRefillModal: refill.closeRefillModal,
|
||||
openEditStockModal: refill.openEditStockModal,
|
||||
closeEditStockModal: refill.closeEditStockModal,
|
||||
// From useRefill
|
||||
showRefillModal: refill.showRefillModal,
|
||||
setShowRefillModal: refill.setShowRefillModal,
|
||||
refillPacks: refill.refillPacks,
|
||||
setRefillPacks: refill.setRefillPacks,
|
||||
refillLoose: refill.refillLoose,
|
||||
setRefillLoose: refill.setRefillLoose,
|
||||
refillSaving: refill.refillSaving,
|
||||
refillHistory: refill.refillHistory,
|
||||
refillHistoryExpanded: refill.refillHistoryExpanded,
|
||||
setRefillHistoryExpanded: refill.setRefillHistoryExpanded,
|
||||
showEditStockModal: refill.showEditStockModal,
|
||||
setShowEditStockModal: refill.setShowEditStockModal,
|
||||
editStockFullBlisters: refill.editStockFullBlisters,
|
||||
setEditStockFullBlisters: refill.setEditStockFullBlisters,
|
||||
editStockPartialBlisterPills: refill.editStockPartialBlisterPills,
|
||||
setEditStockPartialBlisterPills: refill.setEditStockPartialBlisterPills,
|
||||
editStockSaving: refill.editStockSaving,
|
||||
loadRefillHistory: refill.loadRefillHistory,
|
||||
submitRefill: refill.submitRefill,
|
||||
submitStockCorrection: refill.submitStockCorrection,
|
||||
openRefillModal: refill.openRefillModal,
|
||||
closeRefillModal: refill.closeRefillModal,
|
||||
openEditStockModal: refill.openEditStockModal,
|
||||
closeEditStockModal: refill.closeEditStockModal,
|
||||
|
||||
// Computed values
|
||||
schedule,
|
||||
coverage,
|
||||
coverageByMed,
|
||||
depletionByMed,
|
||||
existingPeople,
|
||||
groupedSchedule,
|
||||
pastDays,
|
||||
futureDays,
|
||||
missedPastDoseIds,
|
||||
getDayStockStatus,
|
||||
// Computed values
|
||||
schedule,
|
||||
coverage,
|
||||
coverageByMed,
|
||||
depletionByMed,
|
||||
existingPeople,
|
||||
groupedSchedule,
|
||||
pastDays,
|
||||
todayDay,
|
||||
futureDays,
|
||||
missedPastDoseIds,
|
||||
getDayStockStatus,
|
||||
|
||||
// Schedule UI state
|
||||
scheduleDays,
|
||||
setScheduleDays,
|
||||
showPastDays,
|
||||
setShowPastDays,
|
||||
// Schedule UI state
|
||||
scheduleDays,
|
||||
setScheduleDays,
|
||||
showPastDays,
|
||||
setShowPastDays,
|
||||
showFutureDays,
|
||||
setShowFutureDays,
|
||||
|
||||
// Modal state
|
||||
selectedMed,
|
||||
setSelectedMed,
|
||||
showImageLightbox,
|
||||
setShowImageLightbox,
|
||||
scheduleLightboxImage,
|
||||
setScheduleLightboxImage,
|
||||
selectedUser,
|
||||
setSelectedUser,
|
||||
// Modal state
|
||||
selectedMed,
|
||||
setSelectedMed,
|
||||
showImageLightbox,
|
||||
setShowImageLightbox,
|
||||
scheduleLightboxImage,
|
||||
setScheduleLightboxImage,
|
||||
selectedUser,
|
||||
setSelectedUser,
|
||||
|
||||
// Modal helpers
|
||||
openMedDetail,
|
||||
closeMedDetail,
|
||||
openImageLightbox,
|
||||
closeImageLightbox,
|
||||
openScheduleLightbox,
|
||||
closeScheduleLightbox,
|
||||
openUserFilter,
|
||||
closeUserFilter,
|
||||
// Modal helpers
|
||||
openMedDetail,
|
||||
closeMedDetail,
|
||||
openImageLightbox,
|
||||
closeImageLightbox,
|
||||
openScheduleLightbox,
|
||||
closeScheduleLightbox,
|
||||
openUserFilter,
|
||||
closeUserFilter,
|
||||
|
||||
// Export/Import
|
||||
exporting,
|
||||
importing,
|
||||
showExportModal,
|
||||
setShowExportModal,
|
||||
showImportConfirm,
|
||||
setShowImportConfirm,
|
||||
pendingImportData,
|
||||
setPendingImportData,
|
||||
importResult,
|
||||
setImportResult,
|
||||
handleExport,
|
||||
handleImportFileSelect,
|
||||
handleImportConfirm,
|
||||
settingsChanged,
|
||||
}), [
|
||||
medications,
|
||||
settingsHook,
|
||||
doses,
|
||||
collapsed,
|
||||
share,
|
||||
refill,
|
||||
schedule,
|
||||
coverage,
|
||||
coverageByMed,
|
||||
depletionByMed,
|
||||
existingPeople,
|
||||
groupedSchedule,
|
||||
pastDays,
|
||||
futureDays,
|
||||
missedPastDoseIds,
|
||||
getDayStockStatus,
|
||||
scheduleDays,
|
||||
showPastDays,
|
||||
selectedMed,
|
||||
showImageLightbox,
|
||||
scheduleLightboxImage,
|
||||
selectedUser,
|
||||
openMedDetail,
|
||||
closeMedDetail,
|
||||
openImageLightbox,
|
||||
closeImageLightbox,
|
||||
openScheduleLightbox,
|
||||
closeScheduleLightbox,
|
||||
openUserFilter,
|
||||
closeUserFilter,
|
||||
openShareDialog,
|
||||
exporting,
|
||||
importing,
|
||||
showExportModal,
|
||||
showImportConfirm,
|
||||
pendingImportData,
|
||||
importResult,
|
||||
handleExport,
|
||||
handleImportFileSelect,
|
||||
handleImportConfirm,
|
||||
settingsChanged,
|
||||
]);
|
||||
// Export/Import
|
||||
exporting,
|
||||
importing,
|
||||
showExportModal,
|
||||
setShowExportModal,
|
||||
showImportConfirm,
|
||||
setShowImportConfirm,
|
||||
pendingImportData,
|
||||
setPendingImportData,
|
||||
importResult,
|
||||
setImportResult,
|
||||
handleExport,
|
||||
handleImportFileSelect,
|
||||
handleImportConfirm,
|
||||
settingsChanged,
|
||||
}),
|
||||
[
|
||||
medications,
|
||||
settingsHook,
|
||||
doses,
|
||||
collapsed,
|
||||
share,
|
||||
refill,
|
||||
schedule,
|
||||
coverage,
|
||||
coverageByMed,
|
||||
depletionByMed,
|
||||
existingPeople,
|
||||
groupedSchedule,
|
||||
pastDays,
|
||||
todayDay,
|
||||
futureDays,
|
||||
missedPastDoseIds,
|
||||
getDayStockStatus,
|
||||
scheduleDays,
|
||||
showPastDays,
|
||||
showFutureDays,
|
||||
selectedMed,
|
||||
showImageLightbox,
|
||||
scheduleLightboxImage,
|
||||
selectedUser,
|
||||
openMedDetail,
|
||||
closeMedDetail,
|
||||
openImageLightbox,
|
||||
closeImageLightbox,
|
||||
openScheduleLightbox,
|
||||
closeScheduleLightbox,
|
||||
openUserFilter,
|
||||
closeUserFilter,
|
||||
openShareDialog,
|
||||
exporting,
|
||||
importing,
|
||||
showExportModal,
|
||||
showImportConfirm,
|
||||
pendingImportData,
|
||||
importResult,
|
||||
handleExport,
|
||||
handleImportFileSelect,
|
||||
handleImportConfirm,
|
||||
settingsChanged,
|
||||
clearingMissedState,
|
||||
dismissMissedDoses,
|
||||
]
|
||||
);
|
||||
|
||||
return <AppContext.Provider value={value}>{children}</AppContext.Provider>;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,73 @@
|
||||
import { createContext, type ReactNode, useCallback, useContext, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { ConfirmModal } from "../components/ConfirmModal";
|
||||
|
||||
interface UnsavedChangesContextValue {
|
||||
/** Whether there are unsaved changes anywhere in the app */
|
||||
hasUnsavedChanges: boolean;
|
||||
/** Register that a component has unsaved changes */
|
||||
setHasUnsavedChanges: (value: boolean) => void;
|
||||
/** Check and confirm navigation - returns a promise that resolves to true if navigation should proceed */
|
||||
confirmNavigation: () => Promise<boolean>;
|
||||
}
|
||||
|
||||
const UnsavedChangesContext = createContext<UnsavedChangesContextValue | null>(null);
|
||||
|
||||
export function UnsavedChangesProvider({ children }: { children: ReactNode }) {
|
||||
const { t } = useTranslation();
|
||||
const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
|
||||
const [showConfirmModal, setShowConfirmModal] = useState(false);
|
||||
const [pendingResolve, setPendingResolve] = useState<((value: boolean) => void) | null>(null);
|
||||
|
||||
const confirmNavigation = useCallback((): Promise<boolean> => {
|
||||
if (!hasUnsavedChanges) {
|
||||
return Promise.resolve(true);
|
||||
}
|
||||
|
||||
return new Promise((resolve) => {
|
||||
setPendingResolve(() => resolve);
|
||||
setShowConfirmModal(true);
|
||||
});
|
||||
}, [hasUnsavedChanges]);
|
||||
|
||||
const handleConfirm = useCallback(() => {
|
||||
setShowConfirmModal(false);
|
||||
if (pendingResolve) {
|
||||
pendingResolve(true);
|
||||
setPendingResolve(null);
|
||||
}
|
||||
}, [pendingResolve]);
|
||||
|
||||
const handleCancel = useCallback(() => {
|
||||
setShowConfirmModal(false);
|
||||
if (pendingResolve) {
|
||||
pendingResolve(false);
|
||||
setPendingResolve(null);
|
||||
}
|
||||
}, [pendingResolve]);
|
||||
|
||||
return (
|
||||
<UnsavedChangesContext.Provider value={{ hasUnsavedChanges, setHasUnsavedChanges, confirmNavigation }}>
|
||||
{children}
|
||||
{showConfirmModal && (
|
||||
<ConfirmModal
|
||||
title={t("common.unsavedChanges.title", "Unsaved Changes")}
|
||||
message={t("common.unsavedChanges.message")}
|
||||
confirmLabel={t("common.unsavedChanges.leave", "Leave")}
|
||||
cancelLabel={t("common.unsavedChanges.stay", "Stay")}
|
||||
onConfirm={handleConfirm}
|
||||
onCancel={handleCancel}
|
||||
confirmVariant="danger"
|
||||
/>
|
||||
)}
|
||||
</UnsavedChangesContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
export function useUnsavedChanges() {
|
||||
const context = useContext(UnsavedChangesContext);
|
||||
if (!context) {
|
||||
throw new Error("useUnsavedChanges must be used within UnsavedChangesProvider");
|
||||
}
|
||||
return context;
|
||||
}
|
||||
@@ -1,3 +1,5 @@
|
||||
// Context barrel export
|
||||
|
||||
export type { AppContextValue, DayMedEntry, DoseInfo, GroupedDay } from "./AppContext";
|
||||
export { AppProvider, useAppContext } from "./AppContext";
|
||||
export type { AppContextValue, DoseInfo, DayMedEntry, GroupedDay } from "./AppContext";
|
||||
export { UnsavedChangesProvider, useUnsavedChanges } from "./UnsavedChangesContext";
|
||||
|
||||
Reference in New Issue
Block a user