feat(frontend): popup on edit wheel screen when user leaves bb-466 (#617

) * feat(frontend): add popup on edit wheel screen when user leaves without saving changes bb-466 * fix(frontend): fix 'Discard changes' button state after discarding changes bb-466 * refactor(frontend): fix call of changing state of 'Discard changes' button bb-466 * fix(frontend): change calls logic bb-466 --------- Co-authored-by: Farid Shabanov <[email protected]>
BinaryStudioAcademy · Sep 28, 2024 · b0627e1 · b0627e1
1 parent c9ff3c3
commit b0627e1
Showing 1 changed file with 44 additions and 25 deletions.
diff --git a/.../pages/root/components/user-wheel/libs/components/scores-edit-modal/scores-edit-modal.tsx b/.../pages/root/components/user-wheel/libs/components/scores-edit-modal/scores-edit-modal.tsx
@@ -1,10 +1,12 @@
-import { Button, Slider } from "~/libs/components/components.js";
+import runImg from "~/assets/img/run.svg";
+import { Button, Popup, Slider } from "~/libs/components/components.js";
 import {
 	useAppDispatch,
 	useAppSelector,
 	useCallback,
 	useEffect,
 	useState,
+	useUnsavedChangesBlocker,
 } from "~/libs/hooks/hooks.js";
 import { actions as quizActions } from "~/modules/quiz/quiz.js";
 import { type QuizScoresGetAllItemResponseDto } from "~/modules/quiz/quiz.js";
@@ -80,37 +82,54 @@ const ScoresEditModal: React.FC<Properties> = ({
 		setScores(originalScores);
 
 		if (areChangesDiscarded) {
-			setAreChangesDiscarded((previousValue) => !previousValue);
 			setIsDiscardButtonDisabled(IS_DISCARD_BUTTON_DISABLED_INITIAL_VALUE);
 		}
 	}, [areChangesDiscarded, setScores, originalScores]);
 
+	const { handlePopupCancel, handlePopupConfirm, isBlocked } =
+		useUnsavedChangesBlocker({
+			hasUnsavedChanges: !isDiscardButtonDisabled,
+			reset: handleDiscardChanges,
+		});
+
 	return (
-		<div className={styles["container"]}>
-			<p className={styles["text"]}>
-				Do you feel any changes in anything? Estimate the fields from 1 to 10
-			</p>
-			<div className={styles["scores-container"]}>
-				{scores.map((item, index) => (
-					<Slider
-						id={item.categoryId}
-						key={index}
-						label={item.categoryName}
-						onValueChange={handleSliderChange}
-						value={item.score}
+		<>
+			<Popup
+				closeButtonLabel="CANCEL"
+				confirmButtonLabel="YES"
+				hasCloseIcon
+				icon={runImg}
+				isOpen={!isDiscardButtonDisabled && isBlocked}
+				onClose={handlePopupCancel}
+				onConfirm={handlePopupConfirm}
+				title="Unsaved changes will be lost. Continue?"
+			/>
+			<div className={styles["container"]}>
+				<p className={styles["text"]}>
+					Do you feel any changes in anything? Estimate the fields from 1 to 10
+				</p>
+				<div className={styles["scores-container"]}>
+					{scores.map((item, index) => (
+						<Slider
+							id={item.categoryId}
+							key={index}
+							label={item.categoryName}
+							onValueChange={handleSliderChange}
+							value={item.score}
+						/>
+					))}
+				</div>
+				<div className={styles["buttons-container"]}>
+					<Button label="Save changes" onClick={handleSaveChanges} />
+					<Button
+						isDisabled={isDiscardButtonDisabled}
+						label="Discard Changes"
+						onClick={handleDiscardChanges}
+						variant="secondary"
 					/>
-				))}
-			</div>
-			<div className={styles["buttons-container"]}>
-				<Button label="Save changes" onClick={handleSaveChanges} />
-				<Button
-					isDisabled={isDiscardButtonDisabled}
-					label="Discard Changes"
-					onClick={handleDiscardChanges}
-					variant="secondary"
-				/>
+				</div>
 			</div>
-		</div>
+		</>
 	);
 };