Skip to content

Commit d1b8be3

Browse files
o-seliuchenkoo-seliuchenko
committed
Update Cancel logic
1 parent e794a63 commit d1b8be3

File tree

16 files changed

+108
-94
lines changed

16 files changed

+108
-94
lines changed

‎src/app/advice/[id]/edit/page.tsx‎

Lines changed: 8 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -46,9 +46,8 @@ export default function AdviceEditPage() {
4646
const [error, setError] = useState<string | null>(null);
4747
const [saving, setSaving] = useState(false);
4848
const [validationErrors, setValidationErrors] = useState<ValidationError[]>([]);
49-
const [showCancelModal, setShowCancelModal] = useState(false);
49+
const [showConfirmModal, setshowConfirmModal] = useState(false);
5050
const [locations, setLocations] = useState<Array<{ Key: string; Name: string }>>([]);
51-
const [editorResetKey, setEditorResetKey] = useState(0);
5251
const { setAdviceTitle } = useBreadcrumb();
5352

5453
// Form state
@@ -174,9 +173,9 @@ export default function AdviceEditPage() {
174173

175174
const handleCancel = () => {
176175
if (JSON.stringify(formData) !== JSON.stringify(originalData)) {
177-
setShowCancelModal(true);
176+
setshowConfirmModal(true);
178177
} else {
179-
router.push(`/advice/${id}`);
178+
router.push(`/advice`);
180179
}
181180
};
182181

@@ -185,9 +184,8 @@ export default function AdviceEditPage() {
185184
if (originalData) {
186185
setFormData(JSON.parse(JSON.stringify(originalData)));
187186
setValidationErrors([]);
188-
setEditorResetKey(prev => prev + 1); // Force editor remount
189187
}
190-
setShowCancelModal(false);
188+
setshowConfirmModal(false);
191189
};
192190

193191
const hasChanges = JSON.stringify(formData) !== JSON.stringify(originalData);
@@ -268,7 +266,6 @@ export default function AdviceEditPage() {
268266
placeholder="Enter the advice content..."
269267
minHeight="400px"
270268
required
271-
resetKey={editorResetKey}
272269
/>
273270
</div>
274271

@@ -293,7 +290,7 @@ export default function AdviceEditPage() {
293290
<Button
294291
type="submit"
295292
variant="primary"
296-
disabled={saving || !hasChanges}
293+
disabled={saving}
297294
>
298295
{saving ? 'Saving...' : 'Save Changes'}
299296
</Button>
@@ -304,13 +301,13 @@ export default function AdviceEditPage() {
304301

305302
{/* Cancel Confirmation Modal */}
306303
<ConfirmModal
307-
isOpen={showCancelModal}
308-
onClose={() => setShowCancelModal(false)}
304+
isOpen={showConfirmModal}
305+
onClose={() => setshowConfirmModal(false)}
309306
onConfirm={confirmCancel}
310307
title="Close without saving?"
311308
message="You may lose unsaved changes."
312309
variant="warning"
313-
confirmLabel="Discard changes"
310+
confirmLabel="Close Without Saving"
314311
cancelLabel="Continue Editing"
315312
/>
316313
</div>

‎src/app/advice/new/page.tsx‎

Lines changed: 8 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -39,24 +39,23 @@ export default function NewAdvicePage() {
3939

4040
const [saving, setSaving] = useState(false);
4141
const [validationErrors, setValidationErrors] = useState<ValidationError[]>([]);
42-
const [showCancelModal, setShowCancelModal] = useState(false);
42+
const [showConfirmModal, setshowConfirmModal] = useState(false);
4343
const [locations, setLocations] = useState<Array<{ Key: string; Name: string }>>([]);
44-
const [editorResetKey, setEditorResetKey] = useState(0);
4544
const { setAdviceTitle } = useBreadcrumb();
4645

4746
// Form state
4847
const [formData, setFormData] = useState({
4948
LocationKey: '',
5049
Title: '',
5150
Body: '',
52-
SortPosition: 0,
51+
SortPosition: 1,
5352
});
5453

5554
const initialFormData = {
5655
LocationKey: '',
5756
Title: '',
5857
Body: '',
59-
SortPosition: 0,
58+
SortPosition: 1,
6059
};
6160

6261
useEffect(() => {
@@ -130,7 +129,7 @@ export default function NewAdvicePage() {
130129

131130
const handleCancel = () => {
132131
if (JSON.stringify(formData) !== JSON.stringify(initialFormData)) {
133-
setShowCancelModal(true);
132+
setshowConfirmModal(true);
134133
} else {
135134
router.push('/advice');
136135
}
@@ -140,8 +139,7 @@ export default function NewAdvicePage() {
140139
// Revert to initial data
141140
setFormData(JSON.parse(JSON.stringify(initialFormData)));
142141
setValidationErrors([]);
143-
setEditorResetKey(prev => prev + 1); // Force editor remount
144-
setShowCancelModal(false);
142+
setshowConfirmModal(false);
145143
};
146144

147145
// const hasData = JSON.stringify(formData) !== JSON.stringify(initialFormData);
@@ -213,7 +211,6 @@ export default function NewAdvicePage() {
213211
placeholder="Enter the advice content..."
214212
minHeight="400px"
215213
required
216-
resetKey={editorResetKey}
217214
/>
218215
</div>
219216

@@ -249,13 +246,13 @@ export default function NewAdvicePage() {
249246

250247
{/* Cancel Confirmation Modal */}
251248
<ConfirmModal
252-
isOpen={showCancelModal}
253-
onClose={() => setShowCancelModal(false)}
249+
isOpen={showConfirmModal}
250+
onClose={() => setshowConfirmModal(false)}
254251
onConfirm={confirmCancel}
255252
title="Close without saving?"
256253
message="You may lose unsaved changes."
257254
variant="warning"
258-
confirmLabel="Discard changes"
255+
confirmLabel="Close Without Saving"
259256
cancelLabel="Continue Editing"
260257
/>
261258
</div>

‎src/app/banners/[id]/edit/page.tsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -271,6 +271,10 @@ export default function EditBannerPage() {
271271
}
272272
};
273273

274+
const handleCancel = () => {
275+
router.push('/banners');
276+
};
277+
274278
// Show loading while checking authorization or fetching data
275279
if (isChecking || loading) {
276280
return <LoadingSpinner />;
@@ -313,6 +317,7 @@ return (
313317
onSave={handleSave}
314318
saving={saving}
315319
validationErrors={validationErrors}
320+
onCancel={handleCancel}
316321
/>
317322
</div>
318323
</div>

‎src/app/banners/new/page.tsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -143,6 +143,10 @@ export default function NewBannerPage() {
143143
}
144144
};
145145

146+
const handleCancel = () => {
147+
router.push('/banners');
148+
};
149+
146150
// Show loading while checking authorization
147151
if (isChecking) {
148152
return <LoadingSpinner />;
@@ -173,6 +177,7 @@ export default function NewBannerPage() {
173177
onSave={handleSave}
174178
saving={saving}
175179
validationErrors={validationErrors}
180+
onCancel={handleCancel}
176181
/>
177182
</div>
178183
</div>

‎src/app/location-logos/[id]/edit/page.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -97,6 +97,10 @@ export default function EditLocationLogoPage() {
9797
}
9898
};
9999

100+
const handleCancel = () => {
101+
router.push('/location-logos');
102+
};
103+
100104
if (isChecking || loading) {
101105
return <LoadingSpinner />;
102106
}
@@ -128,7 +132,7 @@ export default function EditLocationLogoPage() {
128132
<LocationLogoForm
129133
initialData={logo}
130134
onSubmit={handleSubmit}
131-
onCancel={() => {}}
135+
onCancel={handleCancel}
132136
isEdit={true}
133137
saving={saving}
134138
/>

‎src/app/location-logos/new/page.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,10 @@ export default function CreateLocationLogoPage() {
5151
}
5252
};
5353

54+
const handleCancel = () => {
55+
router.push('/location-logos');
56+
};
57+
5458
return (
5559
<div className="min-h-screen bg-brand-q">
5660
<PageHeader title="Add New Location Logo" />
@@ -59,7 +63,7 @@ export default function CreateLocationLogoPage() {
5963
<div className="max-w-3xl mx-auto py-8">
6064
<LocationLogoForm
6165
onSubmit={handleSubmit}
62-
onCancel={() => {}}
66+
onCancel={handleCancel}
6367
saving={saving}
6468
/>
6569
</div>

‎src/app/resources/[key]/edit/page.tsx‎

Lines changed: 3 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,6 @@ export default function ResourceEditPage() {
5050
const [validationErrors, setValidationErrors] = useState<ValidationError[]>([]);
5151
const [showCancelModal, setShowCancelModal] = useState(false);
5252
const [hasUploadedFiles, setHasUploadedFiles] = useState(false); // Track if any files were uploaded
53-
const [editorResetKey, setEditorResetKey] = useState(0);
5453

5554
// Form state
5655
const [formData, setFormData] = useState({
@@ -210,20 +209,13 @@ export default function ResourceEditPage() {
210209
if (JSON.stringify(formData) !== JSON.stringify(originalData)) {
211210
setShowCancelModal(true);
212211
} else {
213-
// No changes, reset form to default (deep clone to avoid reference issues)
214-
setFormData(JSON.parse(JSON.stringify(originalData)));
215-
setValidationErrors([]);
216-
setHasUploadedFiles(false);
212+
confirmCancel();
217213
}
218214
};
219215

220216
const confirmCancel = () => {
221-
// Revert to original data (deep clone to avoid reference issues)
222-
setFormData(JSON.parse(JSON.stringify(originalData)));
223-
setValidationErrors([]);
224-
setEditorResetKey(prev => prev + 1); // Force editor remount
225217
setShowCancelModal(false);
226-
setHasUploadedFiles(false); // Reset file upload tracking
218+
router.push('/resources');
227219
};
228220

229221
// LinkList Management Functions
@@ -357,7 +349,6 @@ export default function ResourceEditPage() {
357349
onChange={(value) => setFormData({ ...formData, Body: value })}
358350
placeholder="Enter the main resource content..."
359351
minHeight="400px"
360-
resetKey={editorResetKey}
361352
/>
362353
</div>
363354

@@ -554,7 +545,7 @@ export default function ResourceEditPage() {
554545
title="Close without saving?"
555546
message="You may lose unsaved changes."
556547
variant="warning"
557-
confirmLabel="Discard changes"
548+
confirmLabel="Close Without Saving"
558549
cancelLabel="Continue Editing"
559550
/>
560551
</div>

‎src/app/swep-banners/[locationSlug]/edit/page.tsx‎

Lines changed: 3 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,6 @@ export default function SwepEditPage() {
4343
const [imagePreview, setImagePreview] = useState<string | null>(null);
4444
const [imageRemoved, setImageRemoved] = useState(false);
4545
const [showConfirmModal, setShowConfirmModal] = useState(false);
46-
const [editorResetKey, setEditorResetKey] = useState(0);
4746
const fileInputRef = useRef<HTMLInputElement>(null);
4847

4948
const [formData, setFormData] = useState<ISwepBannerFormData>({
@@ -201,28 +200,13 @@ export default function SwepEditPage() {
201200
if (originalData && JSON.stringify(formData) !== JSON.stringify(originalData)) {
202201
setShowConfirmModal(true);
203202
} else {
204-
// No changes, reset form to defaults
205-
if (originalData) {
206-
setFormData(originalData);
207-
setImageFile(null);
208-
setImagePreview(swep?.Image || null);
209-
setImageRemoved(false);
210-
setValidationErrors([]);
211-
}
203+
confirmCancel();
212204
}
213205
};
214206

215207
const confirmCancel = () => {
216-
// Revert to original data
217-
if (originalData) {
218-
setFormData(originalData);
219-
setImageFile(null);
220-
setImagePreview(swep?.Image || null);
221-
setImageRemoved(false);
222-
setValidationErrors([]);
223-
setEditorResetKey(prev => prev + 1); // Force editor remount
224-
}
225208
setShowConfirmModal(false);
209+
router.push('/swep-banners');
226210
};
227211

228212
// Show loading while checking authorization or fetching data
@@ -372,7 +356,6 @@ export default function SwepEditPage() {
372356
placeholder="Enter the SWEP banner body content..."
373357
required
374358
minHeight="300px"
375-
resetKey={editorResetKey}
376359
/>
377360

378361
{/* Emergency Contact Section */}
@@ -449,7 +432,7 @@ export default function SwepEditPage() {
449432
title="Close without saving?"
450433
message="You may lose unsaved changes."
451434
variant="warning"
452-
confirmLabel="Discard changes"
435+
confirmLabel="Close Without Saving"
453436
cancelLabel="Continue Editing"
454437
/>
455438
</div>

‎src/components/banners/BannerEditor.tsx‎

Lines changed: 16 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ interface BannerEditorProps {
4343
onDataChange: (data: IBannerFormData) => void;
4444
onSave: (data: IBannerFormData) => void;
4545
saving?: boolean;
46-
onCancel?: () => void;
46+
onCancel: () => void;
4747
errorMessage?: string | null;
4848
validationErrors?: IValidationError[];
4949
}
@@ -303,6 +303,17 @@ export function BannerEditor({ initialData, onDataChange, onSave, saving = false
303303
newData = handleTemplateTypeChange(newTemplateType, newData);
304304
}
305305

306+
// Handle background type change: when switching away from IMAGE, reset Background.Value
307+
if (path === 'Background.Type') {
308+
debugger
309+
const newBackgroundType = value as BackgroundType;
310+
const previousBackgroundType = (prev as IBannerFormData).Background.Type;
311+
312+
if (previousBackgroundType === BackgroundType.IMAGE && newBackgroundType !== BackgroundType.IMAGE) {
313+
newData.Background.Value = '#38ae8e';
314+
}
315+
}
316+
306317
// Walk the path, cloning each branch as we go using indexable records
307318
let current: Record<string, unknown> = newData as unknown as Record<string, unknown>;
308319
let source: Record<string, unknown> = prev as unknown as Record<string, unknown>;
@@ -399,7 +410,7 @@ export function BannerEditor({ initialData, onDataChange, onSave, saving = false
399410
setFormData(prev => {
400411
if ((prev.PartnershipCharter?.PartnerLogos?.length || 0) >= 5) {
401412
// Optionally, set an error message to inform the user
402-
setErrors(e => ({ ...e, PartnerLogos: 'You can only upload a maximum of 5 logos.' }));
413+
setErrors(e => ({ ...e, 'Partner Logos': 'You can only upload a maximum of 5 logos.' }));
403414
return prev;
404415
}
405416
return {
@@ -445,22 +456,13 @@ export function BannerEditor({ initialData, onDataChange, onSave, saving = false
445456
if (JSON.stringify(formData) !== JSON.stringify(originalDataRef.current)) {
446457
setShowConfirmModal(true);
447458
} else {
448-
// No changes, just close/revert
449-
if (onCancel) {
450-
onCancel();
451-
}
459+
confirmCancel();
452460
}
453461
};
454462

455463
const confirmCancel = () => {
456464
setShowConfirmModal(false);
457-
458-
// Restore the original data
459-
setFormData(JSON.parse(JSON.stringify(originalDataRef.current)));
460-
461-
if (onCancel) {
462-
onCancel();
463-
}
465+
onCancel();
464466
};
465467

466468
const cleanTemplateData = (data: IBannerFormData): IBannerFormData => {
@@ -1284,7 +1286,7 @@ export function BannerEditor({ initialData, onDataChange, onSave, saving = false
12841286
title="Close without saving?"
12851287
message="You may lose unsaved changes."
12861288
variant="warning"
1287-
confirmLabel="Discard changes"
1289+
confirmLabel="Close Without Saving"
12881290
cancelLabel="Continue Editing"
12891291
/>
12901292
</div>

0 commit comments

Comments
 (0)