Merge pull request #452 from BinaryStudioAcademy/task/OV-444-add-warning-that-progress-not-saved-on-studio-page

OV-444: + add unsaved warning

Author: nikita-remeslov

frontend/src/bundles/studio/components/warning-modal/components/components.ts

@@ -1 +1,2 @@
+export { UnsavedWarningContent } from './unsaved-warning-content.js';
 export { WarningContent } from './warning-content.js';

frontend/src/bundles/studio/components/warning-modal/components/unsaved-warning-content.tsx

@@ -0,0 +1,41 @@
+import {
+    Button,
+    Flex,
+    Heading,
+    Text,
+} from '~/bundles/common/components/components.js';
+
+type Properties = {
+    onCancel: () => void;
+    onSubmit: () => void;
+};
+
+const UnsavedWarningContent: React.FC<Properties> = ({
+    onCancel,
+    onSubmit,
+}) => {
+    return (
+        <>
+            <Heading variant="H3" color="typography.900" mb="20px">
+                Notice before you leave the page
+            </Heading>
+
+            <Text as="p" color="typography.600" mb="20px">
+                If you leave now all your unsaved changes will be lost. Please
+                save draft or submit to render before leaving.
+            </Text>
+
+            <Flex gap="10px" justify="end">
+                <Button label="Cancel" w="auto" onClick={onCancel} />
+                <Button
+                    label="Leave Anyway"
+                    w="auto"
+                    variant="secondaryOutlined"
+                    onClick={onSubmit}
+                />
+            </Flex>
+        </>
+    );
+};
+
+export { UnsavedWarningContent };

frontend/src/bundles/studio/components/warning-modal/warning-modal.tsx

@@ -6,23 +6,22 @@ import {
     ModalOverlay,
 } from '~/bundles/common/components/components.js';
 
-import { WarningContent } from './components/components.js';
-
 type Properties = {
     isOpen: boolean;
     onClose: () => void;
-    onSubmit: () => void;
 };
 
-const WarningModal: React.FC<Properties> = ({ isOpen, onClose, onSubmit }) => {
+const WarningModal: React.FC<React.PropsWithChildren<Properties>> = ({
+    isOpen,
+    onClose,
+    children,
+}) => {
     return (
         <BaseModal isOpen={isOpen} onClose={onClose} size="xl">
             <ModalOverlay />
             <ModalContent>
                 <ModalCloseButton />
-                <ModalBody p="40px">
-                    <WarningContent onCancel={onClose} onSubmit={onSubmit} />
-                </ModalBody>
+                <ModalBody p="40px">{children}</ModalBody>
             </ModalContent>
         </BaseModal>
     );

frontend/src/bundles/studio/pages/studio.tsx

@@ -1,4 +1,5 @@
 import { type PlayerRef } from '@remotion/player';
+import { useBlocker } from 'react-router-dom';
 
 import { AudioPlayer } from '~/bundles/common/components/audio-player/audio-player.js';
 import {
@@ -30,6 +31,10 @@ import {
 } from '~/bundles/common/hooks/hooks.js';
 import { IconName } from '~/bundles/common/icons/icons.js';
 import { notificationService } from '~/bundles/common/services/services.js';
+import {
+    UnsavedWarningContent,
+    WarningContent,
+} from '~/bundles/studio/components/warning-modal/components/components.js';
 
 import {
     PlayerControls,
@@ -81,6 +86,8 @@ const Studio: React.FC = () => {
         scriptPlayer,
         isVideoScriptsGenerationReady,
         isVideoScriptsGenerationPending,
+        isDraftSaved,
+        isSubmitToRender,
     } = useAppSelector(({ studio }) => studio);
 
     const playerReference = useRef<PlayerRef>(null);
@@ -131,7 +138,6 @@ const Studio: React.FC = () => {
                     message: NotificationMessage.VIDEO_SUBMITTED,
                     title: NotificationTitle.VIDEO_SUBMITTED,
                 });
-                navigate(AppRoute.ROOT);
             })
             .catch(() => {
                 notificationService.error({
@@ -140,7 +146,7 @@ const Studio: React.FC = () => {
                     title: NotificationTitle.VIDEO_SUBMIT_FAILED,
                 });
             });
-    }, [dispatch, navigate, scenes, scripts]);
+    }, [dispatch, scenes, scripts]);
 
     const handleSubmit = useCallback(() => {
         if (scenesExceedScripts(scenes, scripts)) {
@@ -242,6 +248,26 @@ const Studio: React.FC = () => {
 
     const { isPlaying, url } = scriptPlayer;
 
+    const blocker = useBlocker(
+        ({ currentLocation, nextLocation }) =>
+            !(isDraftSaved || isSubmitToRender) &&
+            currentLocation.pathname !== nextLocation.pathname,
+    );
+
+    const handleCloseUnsavedChangesModal = useCallback(() => {
+        blocker.reset?.();
+    }, [blocker]);
+
+    const handleSubmitUnsavedChangesModal = useCallback(() => {
+        blocker.proceed?.();
+    }, [blocker]);
+
+    useEffect(() => {
+        if (isSubmitToRender) {
+            navigate(AppRoute.ROOT);
+        }
+    }, [navigate, isSubmitToRender]);
+
     return (
         <>
             <Overlay isOpen={isVideoScriptsGenerationPending}>
@@ -256,11 +282,21 @@ const Studio: React.FC = () => {
                 overflowY={'hidden'}
                 className={styles['scrollableContainer']}
             >
+                <WarningModal isOpen={isModalOpen} onClose={handleCloseModal}>
+                    <WarningContent
+                        onCancel={handleCloseModal}
+                        onSubmit={handleConfirmSubmit}
+                    />
+                </WarningModal>
                 <WarningModal
-                    isOpen={isModalOpen}
-                    onClose={handleCloseModal}
-                    onSubmit={handleConfirmSubmit}
-                />
+                    isOpen={blocker.state === 'blocked'}
+                    onClose={handleCloseUnsavedChangesModal}
+                >
+                    <UnsavedWarningContent
+                        onCancel={handleCloseUnsavedChangesModal}
+                        onSubmit={handleSubmitUnsavedChangesModal}
+                    />
+                </WarningModal>
                 <Header
                     center={
                         <Button

frontend/src/bundles/studio/store/slice.ts

@@ -95,6 +95,7 @@ type State = {
     videoSize: VideoPreviewT;
     videoName: string;
     isDraftSaved: boolean;
+    isSubmitToRender: boolean;
     videoId: string | null;
     voices: Voice[];
     templates: {
@@ -126,6 +127,7 @@ const initialState: State = {
     videoSize: VideoPreview.LANDSCAPE,
     videoName: 'Untitled Video',
     isDraftSaved: true,
+    isSubmitToRender: false,
     videoId: null,
     voices: [],
     templates: {
@@ -623,6 +625,7 @@ const { reducer, actions, name } = createSlice({
             state.dataStatus = DataStatus.PENDING;
         });
         builder.addCase(renderAvatar.fulfilled, (state) => {
+            state.isSubmitToRender = true;
             state.dataStatus = DataStatus.FULFILLED;
         });
         builder.addCase(renderAvatar.rejected, (state) => {