Re-Quest/frontend
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Implement cancel functionality in settings forms to revert to the last saved state and disable the cancel button when no changes are made.

Browse Source
This commit is contained in:
pradeepkumar
2026-03-20 12:53:13 +05:30
parent 2de25d7448
commit d5e3659ab2
2 changed files with 33 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
src/components/settings/NotificationsForm.tsx
View File

@@ -54,6 +54,8 @@ export function NotificationsForm({ onSave }: NotificationsFormProps) {
const [notifications, setNotifications] = useState<NotificationCategory[]>(DEFAULT_NOTIFICATIONS);
const [digestFrequency, setDigestFrequency] = useState<DigestFrequency>('instant');
const [savedNotifications, setSavedNotifications] = useState<NotificationCategory[]>(DEFAULT_NOTIFICATIONS);
const [savedDigestFrequency, setSavedDigestFrequency] = useState<DigestFrequency>('instant');
const fetchPreferences = useCallback(async () => {
if (!session) return;
@@ -67,23 +69,24 @@ export function NotificationsForm({ onSave }: NotificationsFormProps) {
const savedPrefs = response.data?.data || response.data || {};
if (savedPrefs.notifications) {
setNotifications((prev) =>
prev.map((item) => {
const saved = savedPrefs.notifications[item.id];
if (saved) {
return {
...item,
email: saved.email ?? item.email,
inApp: saved.inApp ?? item.inApp,
};
}
return item;
})
);
const updated = DEFAULT_NOTIFICATIONS.map((item) => {
const saved = savedPrefs.notifications[item.id];
if (saved) {
return {
...item,
email: saved.email ?? item.email,
inApp: saved.inApp ?? item.inApp,
};
}
return item;
});
setNotifications(updated);
setSavedNotifications(updated);
}
if (savedPrefs.digestFrequency) {
setDigestFrequency(savedPrefs.digestFrequency);
setSavedDigestFrequency(savedPrefs.digestFrequency);
}
} catch {
console.log('No saved notification preferences found, using defaults');
@@ -126,6 +129,8 @@ export function NotificationsForm({ onSave }: NotificationsFormProps) {
await api.put(endpoint, preferences);
setSavedNotifications([...notifications]);
setSavedDigestFrequency(digestFrequency);
setSuccess('Notification preferences saved successfully!');
if (onSave) {
@@ -141,9 +146,12 @@ export function NotificationsForm({ onSave }: NotificationsFormProps) {
}
};
const hasChanges = JSON.stringify(notifications) !== JSON.stringify(savedNotifications) || digestFrequency !== savedDigestFrequency;
const handleCancel = () => {
setNotifications(DEFAULT_NOTIFICATIONS);
setDigestFrequency('instant');
if (!hasChanges) return;
setNotifications([...savedNotifications]);
setDigestFrequency(savedDigestFrequency);
setError(null);
setSuccess(null);
};
@@ -297,7 +305,8 @@ export function NotificationsForm({ onSave }: NotificationsFormProps) {
<button
type="button"
onClick={handleCancel}
className="px-10 py-3 border border-[#00293D]/10 rounded-[15px] font-fractul font-bold text-[14px] text-[#00293D] hover:bg-[#00293D]/5 transition-colors"
disabled={!hasChanges || isSaving}
className="px-10 py-3 border border-[#00293D]/10 rounded-[15px] font-fractul font-bold text-[14px] text-[#00293D] hover:bg-[#00293D]/5 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
>
Cancel
</button>