OV-421: * load template from templates page

BinaryStudioAcademy · Sep 27, 2024 · 9e42994 · 9e42994
1 parent f77509f
commit 9e42994
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 9 deletions.
diff --git a/frontend/src/bundles/studio/pages/studio.tsx b/frontend/src/bundles/studio/pages/studio.tsx
@@ -53,7 +53,10 @@ import {
     getVoicesConfigs,
     scenesExceedScripts,
 } from '../helpers/helpers.js';
-import { selectVideoDataById } from '../store/selectors.js';
+import {
+    selectTemplateDataById,
+    selectVideoDataById,
+} from '../store/selectors.js';
 import { actions as studioActions } from '../store/studio.js';
 
 const Studio: React.FC = () => {
@@ -64,6 +67,10 @@ const Studio: React.FC = () => {
         selectVideoDataById(state, locationState?.id),
     );
 
+    const templateData = useAppSelector((state) =>
+        selectTemplateDataById(state, locationState?.templateId),
+    );
+
     const {
         scenes,
         scripts,
@@ -91,7 +98,10 @@ const Studio: React.FC = () => {
         if (videoData) {
             void dispatch(studioActions.loadVideoData(videoData));
         }
-    }, [dispatch, videoData]);
+        if (templateData) {
+            void dispatch(studioActions.loadTemplate(templateData));
+        }
+    }, [dispatch, templateData, videoData]);
 
     const handleResize = useCallback(() => {
         dispatch(studioActions.changeVideoSize());

diff --git a/frontend/src/bundles/studio/store/selectors.ts b/frontend/src/bundles/studio/store/selectors.ts
@@ -5,6 +5,7 @@ import { type RootState } from '~/bundles/common/types/types.js';
 
 import {
     type Script,
+    type Template,
     type VideoGetAllItemResponseDto,
 } from '../types/types.js';
 
@@ -13,6 +14,12 @@ const selectScrips = (state: RootState): Script[] => state.studio.scripts;
 const selectVideos = (state: RootState): VideoGetAllItemResponseDto[] =>
     state.home.videos;
 
+const selectPublicTemplates = (state: RootState): Template[] =>
+    state.studio.templates.public;
+
+const selectUserTemplates = (state: RootState): Template[] =>
+    state.studio.templates.user;
+
 const selectTotalDuration = createSelector([selectScrips], (scripts) => {
     const totalDuration = scripts.reduce(
         (total, script) => total + script.duration,
@@ -29,4 +36,17 @@ const selectVideoDataById = createSelector(
     },
 );
 
-export { selectTotalDuration, selectVideoDataById };
+const selectTemplateDataById = createSelector(
+    [selectPublicTemplates, selectUserTemplates, (_, id: string): string => id],
+    (publicTemplates, userTemplates, id) => {
+        const publicTemplate = publicTemplates.find(
+            (template) => template.id === id,
+        );
+        if (!publicTemplate) {
+            return userTemplates.find((template) => template.id === id);
+        }
+        return publicTemplate;
+    },
+);
+
+export { selectTemplateDataById, selectTotalDuration, selectVideoDataById };
diff --git a/frontend/src/bundles/template/components/creations-section/creations-section.tsx b/frontend/src/bundles/template/components/creations-section/creations-section.tsx
@@ -35,7 +35,7 @@ const CreationsSection: React.FC<Properties> = ({ onClick }) => {
                             marginRight="20px"
                             width="250px"
                         >
-                            <TemplateCard {...template} />
+                            <TemplateCard {...template} id={id} />
                         </Box>
                     ))}
                 </Box>

diff --git a/frontend/src/bundles/template/components/template-card/template-card.tsx b/frontend/src/bundles/template/components/template-card/template-card.tsx
@@ -6,21 +6,34 @@ import {
     Image,
     Text,
 } from '~/bundles/common/components/components.js';
-import { useCallback, useState } from '~/bundles/common/hooks/hooks.js';
+import { AppRoute } from '~/bundles/common/enums/enums.js';
+import {
+    useCallback,
+    useNavigate,
+    useState,
+} from '~/bundles/common/hooks/hooks.js';
 import { IconName } from '~/bundles/common/icons/icons.js';
 import { DeleteWarning } from '~/bundles/home/components/video-card/components/delete-warning.js';
 
 import styles from './styles.module.css';
 
 type Properties = {
+    id: string;
     name: string;
     previewUrl: string;
 };
 
-const TemplateCard: React.FC<Properties> = ({ name, previewUrl }) => {
+const TemplateCard: React.FC<Properties> = ({ id, name, previewUrl }) => {
+    const navigate = useNavigate();
     const [isWarningModalOpen, setIsWarningModalOpen] = useState(false);
 
-    const handleIconClick = useCallback((): void => {}, []);
+    const handleIconClick = useCallback((): void => {
+        navigate(AppRoute.STUDIO, {
+            state: {
+                templateId: id,
+            },
+        });
+    }, [id, navigate]);
 
     const handleWarningModalClose = useCallback(() => {
         setIsWarningModalOpen(false);

diff --git a/frontend/src/bundles/template/components/templates-section/templates-section.tsx b/frontend/src/bundles/template/components/templates-section/templates-section.tsx
@@ -135,10 +135,10 @@ const TemplatesSection: React.FC = () => {
             </Flex>
             <SimpleGrid columns={{ sm: 2, md: 3, lg: 4 }} spacing="20px">
                 {templates.public.map(({ id, ...template }) => (
-                    <TemplateCard key={id} {...template} />
+                    <TemplateCard key={id} {...template} id={id} />
                 ))}
                 {templates.user.map(({ id, ...template }) => (
-                    <TemplateCard key={id} {...template} />
+                    <TemplateCard key={id} {...template} id={id} />
                 ))}
             </SimpleGrid>
         </Box>