OV-421: * load user templates in creations section

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

Hide file tree

Showing 4 changed files with 44 additions and 46 deletions.
diff --git a/frontend/src/bundles/template/components/creations-section/creations-section.tsx b/frontend/src/bundles/template/components/creations-section/creations-section.tsx
@@ -10,14 +10,12 @@ import { type Template } from '~/bundles/template/types/types.js';
 import { TemplateCard } from '../template-card/template-card.js';
 import styles from './styles.module.css';
 
-//TODO: Change with the backend information
-const templates: Template[] = [];
-
 type Properties = {
     onClick: () => void;
+    templates: Template[];
 };
 
-const CreationsSection: React.FC<Properties> = ({ onClick }) => {
+const CreationsSection: React.FC<Properties> = ({ onClick, templates }) => {
     return (
         <Box padding="17px 0">
             <Flex alignItems="center" marginBottom="9px">

diff --git a/frontend/src/bundles/template/components/templates-section/templates-section.tsx b/frontend/src/bundles/template/components/templates-section/templates-section.tsx
@@ -8,41 +8,25 @@ import {
     Input,
     InputGroup,
     InputLeftElement,
-    Loader,
-    Overlay,
     Select,
     SimpleGrid,
 } from '~/bundles/common/components/components.js';
-import { EMPTY_VALUE } from '~/bundles/common/constants/constants.js';
-import { DataStatus } from '~/bundles/common/enums/data-status.enum.js';
 import {
-    useAppDispatch,
     useAppForm,
-    useAppSelector,
     useCallback,
-    useEffect,
     useState,
 } from '~/bundles/common/hooks/hooks.js';
 import { IconName } from '~/bundles/common/icons/icons.js';
-import { actions as studioActions } from '~/bundles/studio/store/studio.js';
+import { type Template } from '~/bundles/template/types/types.js';
 
 import { TemplateCard } from '../template-card/template-card.js';
 import { DEFAULT_TEMPLATE_PAYLOAD } from './constants.js';
 
-const TemplatesSection: React.FC = () => {
-    const dispatch = useAppDispatch();
-
-    const { templates, dataStatus } = useAppSelector(({ studio }) => studio);
-
-    useEffect(() => {
-        if (templates.public.length === EMPTY_VALUE) {
-            void dispatch(studioActions.loadPublicTemplates());
-        }
-        if (!templates.isUserLoaded) {
-            void dispatch(studioActions.loadUserTemplates());
-        }
-    }, [dispatch, templates]);
+type Properties = {
+    templates: Template[];
+};
 
+const TemplatesSection: React.FC<Properties> = ({ templates }) => {
     const [selectedFormat, setSelectedFormat] = useState<
         'landscape' | 'portrait' | null
     >(null);
@@ -61,10 +45,6 @@ const TemplatesSection: React.FC = () => {
 
     return (
         <Box padding="17px 0">
-            <Overlay isOpen={dataStatus === DataStatus.PENDING}>
-                <Loader />
-            </Overlay>
-
             <Flex
                 alignItems="center"
                 marginBottom="9px"
@@ -134,10 +114,7 @@ const TemplatesSection: React.FC = () => {
                 </Flex>
             </Flex>
             <SimpleGrid columns={{ sm: 2, md: 3, lg: 4 }} spacing="20px">
-                {templates.public.map(({ id, ...template }) => (
-                    <TemplateCard key={id} {...template} id={id} />
-                ))}
-                {templates.user.map(({ id, ...template }) => (
+                {templates.map(({ id, ...template }) => (
                     <TemplateCard key={id} {...template} id={id} />
                 ))}
             </SimpleGrid>

diff --git a/frontend/src/bundles/template/pages/templates.tsx b/frontend/src/bundles/template/pages/templates.tsx
@@ -4,13 +4,24 @@ import {
     Flex,
     Header,
     Icon,
+    Loader,
+    Overlay,
     Sidebar,
     Text,
 } from '~/bundles/common/components/components.js';
 import { useCollapse } from '~/bundles/common/components/sidebar/hooks/use-collapse.hook.js';
+import { EMPTY_VALUE } from '~/bundles/common/constants/constants.js';
+import { DataStatus } from '~/bundles/common/enums/data-status.enum.js';
 import { AppRoute } from '~/bundles/common/enums/enums.js';
-import { useCallback, useNavigate } from '~/bundles/common/hooks/hooks.js';
+import {
+    useAppDispatch,
+    useAppSelector,
+    useCallback,
+    useEffect,
+    useNavigate,
+} from '~/bundles/common/hooks/hooks.js';
 import { IconName } from '~/bundles/common/icons/icons.js';
+import { actions as studioActions } from '~/bundles/studio/store/studio.js';
 import {
     CreationsSection,
     TemplatesSection,
@@ -19,16 +30,32 @@ import {
 import styles from './styles.module.css';
 
 const Templates: React.FC = () => {
-    const { isCollapsed } = useCollapse();
-
     const navigate = useNavigate();
+    const dispatch = useAppDispatch();
+
+    const { templates, dataStatus } = useAppSelector(({ studio }) => studio);
+
+    useEffect(() => {
+        if (templates.public.length === EMPTY_VALUE) {
+            void dispatch(studioActions.loadPublicTemplates());
+        }
+        if (!templates.isUserLoaded) {
+            void dispatch(studioActions.loadUserTemplates());
+        }
+    }, [dispatch, templates]);
+
+    const { isCollapsed } = useCollapse();
 
     const handleClick = useCallback(() => {
         navigate(AppRoute.STUDIO);
     }, [navigate]);
 
     return (
         <Box bg="background.900" minHeight="100vh">
+            <Overlay isOpen={dataStatus === DataStatus.PENDING}>
+                <Loader />
+            </Overlay>
+
             <Header />
             <Sidebar>
                 <Box
@@ -56,8 +83,11 @@ const Templates: React.FC = () => {
                             ></Button>
                         </Flex>
 
-                        <CreationsSection onClick={handleClick} />
-                        <TemplatesSection />
+                        <CreationsSection
+                            templates={templates.user}
+                            onClick={handleClick}
+                        />
+                        <TemplatesSection templates={templates.public} />
                     </Flex>
                 </Box>
             </Sidebar>

diff --git a/frontend/src/bundles/template/types/template.type.ts b/frontend/src/bundles/template/types/template.type.ts
@@ -1,8 +1 @@
-type Template = {
-    id: string;
-    name: string;
-    url: string | null;
-    previewUrl: string;
-};
-
-export { type Template };
+export { type Template } from 'shared';