Merge pull request #1596 from breatheco-de/development

Development
breatheco-de · Sep 9, 2024 · 3de19cd · 3de19cd
2 parents 39c52b3 + edb37b3
commit 3de19cd
Show file tree

Hide file tree

Showing 16 changed files with 193 additions and 325 deletions.
diff --git a/public/locales/en/exercises.json b/public/locales/en/exercises.json
@@ -24,7 +24,7 @@
   "access-solution": "Now you can access the solution",
   "similar-projects": "Now you can access similar projects",
   "open-tutorial": "OPEN TUTORIAL ONLINE",
-  "open-learnpack": "Open with LearnPack",
+  "open-learnpack": "OPEN WITH LEARNPACK",
   "clone": "CLONE LOCALLY",
   "clone-tooltip": "Clone repository",
   "how-to-clone": "Read more about cloning a project",

diff --git a/public/locales/en/footer.json b/public/locales/en/footer.json
@@ -1,5 +1,5 @@
 {
-  "copyright": "©{{name}} LLC 2019",
+  "copyright": "©{{name}} LLC {{year}}",
   "search":"Search in 4Geeks",
   "subscribe": "Subscribe for more!",
   "newsletter": {

diff --git a/public/locales/es/exercises.json b/public/locales/es/exercises.json
@@ -24,7 +24,7 @@
   "access-solution": "Ahora puedes acceder a la solucion",
   "similar-projects": "Ahora puedes acceder a proyectos similares",
   "open-tutorial": "Abrir tutorial online",
-  "open-learnpack": "Abrir con LearnPack",
+  "open-learnpack": "ABRIR CON LEARNPACK",
   "clone": "Clonar localmente",
   "clone-tooltip": "Clonar repositorio",
   "how-to-clone": "Leer más sobre cómo clonar un proyecto",

diff --git a/scripts/prepare-asset-data.js b/scripts/prepare-asset-data.js
@@ -8,10 +8,10 @@ async function prepareAssetData() {
 
   console.time('Time fetching data');
 
-  const lessons = await getAsset('LESSON,ARTICLE', { exclude_category: excludeCagetoriesFor.lessons, expand: 'technologies' }, 'lesson');
-  const excersises = await getAsset('EXERCISE', { expand: 'technologies' }, 'excersise');
-  const projects = await getAsset('PROJECT', { expand: 'technologies' }, 'project');
-  const howTos = await getAsset('LESSON,ARTICLE', { category: categoriesFor.howTo, expand: 'technologies' }, 'how-to');
+  const lessons = await getAsset('LESSON,ARTICLE', { exclude_category: excludeCagetoriesFor.lessons, expand: 'technologies,readme' }, 'lesson');
+  const excersises = await getAsset('EXERCISE', { expand: 'technologies,readme' }, 'excersise');
+  const projects = await getAsset('PROJECT', { expand: 'technologies,readme' }, 'project');
+  const howTos = await getAsset('LESSON,ARTICLE', { category: categoriesFor.howTo, expand: 'technologies,readme' }, 'how-to');
   const events = await getEvents();
   const landingTechnologies = await getLandingTechnologies([...lessons, ...projects, ...excersises, ...howTos]);
 

diff --git a/src/common/components/AttendanceModal/index.jsx b/src/common/components/AttendanceModal/index.jsx
@@ -449,7 +449,7 @@ AttendanceModal.defaultProps = {
   title: '',
   message: '',
   isOpen: true,
-  onClose: () => {},
+  onClose: () => { },
 };
 
 export default AttendanceModal;
diff --git a/src/common/components/Footer.jsx b/src/common/components/Footer.jsx
@@ -22,9 +22,9 @@ import AlertMessage from './AlertMessage';
 import useStyle from '../hooks/useStyle';
 import useAuth from '../hooks/useAuth';
 import bc from '../services/breathecode';
-import logoData from '../../../public/logo.json';
 import { GithubIcon, LogoIcon, YoutubeIcon } from './Icon/components';
 import { log } from '../../utils/logging';
+import FooterTC from './FooterTC';
 
 function Footer({ pageProps }) {
   const captcha = useRef(null);
@@ -34,14 +34,12 @@ function Footer({ pageProps }) {
   const [formStatus, setFormStatus] = useState('');
   const { isAuthenticated } = useAuth();
 
-  const copyrightName = pageProps?.existsWhiteLabel ? logoData.name : '4Geeks';
-  const actualYear = new Date().getFullYear();
   const iconogram = t('iconogram', {}, { returnObjects: true });
 
   const hideDivider = pageProps?.hideDivider === true;
   if (pageProps?.previewMode) return null;
 
-  if (isAuthenticated) return <Container as="footer" mt="3rem" />;
+  if (isAuthenticated) return <FooterTC pageProps={pageProps} />;
 
   return (
     <Container background={hexColor.backgroundColor} as="footer" maxW="none" padding="20px" position="absolute" top="100%">
@@ -345,29 +343,7 @@ function Footer({ pageProps }) {
           <Divider borderBottomWidth="2px" />
         </>
       )}
-      <Flex
-        key="copyright"
-        padding="20px 20px 0 20px"
-        justifyContent={['center', 'center', 'space-between', 'space-between']}
-        wrap={['wrap', 'wrap', 'nowrap', 'nowrap']}
-        // alignItems="center"
-        textAlign="center"
-      >
-        <Text marginBottom={['20px', '20px', '0', '0']} fontSize="sm">{t('copyright', { name: copyrightName, year: actualYear })}</Text>
-        <Flex
-          wrap={['wrap', 'wrap', 'nowrap', 'nowrap']}
-          justifyContent={['center', 'center', 'space-between', 'space-between']}
-          width={['100%', '100%', '35%', '25%']}
-        // alignItems="center"
-        >
-          <NextChakraLink href={t('terms.href')}>
-            <Text fontSize="sm">{t('terms.label')}</Text>
-          </NextChakraLink>
-          <NextChakraLink href={t('privacy.href')}>
-            <Text fontSize="sm">{t('privacy.label')}</Text>
-          </NextChakraLink>
-        </Flex>
-      </Flex>
+      <FooterTC />
     </Container>
   );
 }

diff --git a/src/common/components/FooterTC.jsx b/src/common/components/FooterTC.jsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import {
+  Container,
+  Text,
+  Flex,
+  Divider,
+} from '@chakra-ui/react';
+import PropTypes from 'prop-types';
+import useTranslation from 'next-translate/useTranslation';
+import logoData from '../../../public/logo.json';
+import NextChakraLink from './NextChakraLink';
+import useAuth from '../hooks/useAuth';
+
+function FooterTC({ pageProps }) {
+  const { t } = useTranslation('footer');
+  const copyrightName = pageProps?.existsWhiteLabel ? logoData.name : '4Geeks';
+  const actualYear = new Date().getFullYear();
+  const { isAuthenticated } = useAuth();
+
+  return (
+    <Container as={isAuthenticated && 'footer'} maxW>
+      <Divider borderBottomWidth="2px" marginTop={isAuthenticated && '50px'} />
+      <Flex
+        key="copyright"
+        padding="20px 20px 5px 20px"
+        justifyContent={['center', 'center', 'space-between', 'space-between']}
+        wrap={['wrap', 'wrap', 'nowrap', 'nowrap']}
+                // alignItems="center"
+        textAlign="center"
+      >
+        <Text marginBottom={['20px', '20px', '0', '0']} fontSize="sm">{t('copyright', { name: copyrightName, year: actualYear })}</Text>
+        <Flex
+          wrap={['wrap', 'wrap', 'nowrap', 'nowrap']}
+          justifyContent={['center', 'center', 'space-between', 'space-between']}
+          width={['100%', '100%', '35%', '25%']}
+        >
+          <NextChakraLink href={t('terms.href')}>
+            <Text fontSize="sm">{t('terms.label')}</Text>
+          </NextChakraLink>
+          <NextChakraLink href={t('privacy.href')}>
+            <Text fontSize="sm">{t('privacy.label')}</Text>
+          </NextChakraLink>
+        </Flex>
+      </Flex>
+    </Container>
+  );
+}
+
+FooterTC.propTypes = {
+  pageProps: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+};
+
+FooterTC.defaultProps = {
+  pageProps: {},
+};
+
+export default FooterTC;
diff --git a/src/common/components/Instructors.jsx b/src/common/components/Instructors.jsx
@@ -8,10 +8,18 @@ import { adjustNumberBeetwenMinMax } from '../../utils';
 import Heading from './Heading';
 import Icon from './Icon';
 
+function orderArrayByRole(array) {
+  return array.sort((a, b) => {
+    if (a.role === 'TEACHER') return -1;
+    if (b.role === 'TEACHER') return 1;
+    return 0;
+  });
+}
+
 function Instructors({ isLoading, list, limit, ...rest }) {
   const { t } = useTranslation('common');
   const { featuredColor } = useStyle();
-  const intructorsToShow = list.length > limit ? list.slice(0, limit) : list;
+  const intructorsToShow = list.length > limit ? orderArrayByRole(list.slice(0, limit)) : orderArrayByRole(list);
   const restInstructors = list.length - limit;
 
   return (

diff --git a/src/common/components/LiveEvent/index.jsx b/src/common/components/LiveEvent/index.jsx
@@ -233,15 +233,16 @@ function LiveEvent({
 
   useEffect(() => {
     let intervalVar;
-    // applyFilters();
     updateTimes();
 
-    setTimeout(() => {
+    const timeoutId = setTimeout(() => {
       updateTimes();
-      intervalVar = setInterval(updateTimes(), 60 * 1000);
+      intervalVar = setInterval(updateTimes, 60 * 1000);
     }, secondsToNextMinute * 1000);
+
     return () => {
       clearInterval(intervalVar);
+      clearTimeout(timeoutId);
     };
   }, [mainClasses, otherEvents]);
 

diff --git a/src/common/store/actions/signupAction.js b/src/common/store/actions/signupAction.js
@@ -192,7 +192,7 @@ const useSignup = () => {
               value: selectedPlanCheckoutData?.price,
               currency,
               payment_type: 'Credit card',
-              plan: selectedPlanCheckoutData?.slug,
+              plan: selectedPlanCheckoutData?.plan_slug,
               period_label: selectedPlanCheckoutData?.period_label,
               items: simplePlans,
             },

diff --git a/src/pages/checkout/index.jsx b/src/pages/checkout/index.jsx
@@ -238,6 +238,7 @@ function Checkout() {
     reportDatalayer({
       dataLayer: {
         event: 'begin_checkout',
+        plan: defaultPlan,
         path: '/checkout',
         conversion_info: userSession,
       },

diff --git a/src/pages/cohort/[cohortSlug]/[slug]/[version]/index.jsx b/src/pages/cohort/[cohortSlug]/[slug]/[version]/index.jsx
@@ -35,7 +35,6 @@ import {
   includesToLowerCase,
   getStorageItem,
   sortToNearestTodayDate,
-  syncInterval,
   getBrowserSize,
   calculateDifferenceDays,
   adjustNumberBeetwenMinMax,
@@ -266,16 +265,6 @@ function Dashboard() {
           },
         });
       });
-    syncInterval(() => {
-      setLiveClasses((prev) => {
-        const validatedEventList = prev?.length > 0
-          ? prev?.filter((l) => isValidDate(l?.starting_at) && isValidDate(l?.ending_at))
-          : [];
-        const sortDateToLiveClass = sortToNearestTodayDate(validatedEventList, TwelveHours);
-        const existentLiveClasses = sortDateToLiveClass?.filter((l) => l?.hash && l?.starting_at && l?.ending_at);
-        return existentLiveClasses;
-      });
-    });
   }, []);
 
   // Fetch cohort data with pathName structure

diff --git a/src/pages/how-to/[slug]/index.jsx b/src/pages/how-to/[slug]/index.jsx
@@ -1,5 +1,3 @@
-/* eslint-disable react/jsx-no-useless-fragment */
-/* eslint-disable no-continue */
 import { useEffect, useState } from 'react';
 import { useRouter } from 'next/router';
 import {
@@ -20,12 +18,9 @@ import TagCapsule from '../../../common/components/TagCapsule';
 import MktRecommendedCourses from '../../../common/components/MktRecommendedCourses';
 import GridContainer from '../../../common/components/GridContainer';
 import MktSideRecommendedCourses from '../../../common/components/MktSideRecommendedCourses';
-// import DynamicCallToAction from '../../../common/components/DynamicCallToAction';
-// import PodcastCallToAction from '../../../common/components/PodcastCallToAction';
 import { cleanObject } from '../../../utils/index';
 import { ORIGIN_HOST, categoriesFor } from '../../../utils/variables';
 import useStyle from '../../../common/hooks/useStyle';
-import { getCacheItem, setCacheItem } from '../../../utils/requests';
 import RelatedContent from '../../../common/components/RelatedContent';
 import MktEventCards from '../../../common/components/MktEventCards';
 
@@ -50,44 +45,33 @@ export const getStaticProps = async ({ params, locale, locales }) => {
   const { slug } = params;
 
   try {
-    let data;
-    let markdown;
-    data = await getCacheItem(slug);
-    const langPrefix = locale === 'en' ? '' : `/${locale}`;
-    if (!data) {
-      console.log(`${slug} not found on cache`);
-      const assetList = await import('../../../lib/asset-list.json')
-        .then((res) => res.default)
-        .catch(() => []);
-      data = assetList.howTos.find((l) => l?.slug === slug);
-
-      const engPrefix = {
-        us: 'en',
-        en: 'en',
-      };
+    const assetList = await import('../../../lib/asset-list.json')
+      .then((res) => res.default)
+      .catch(() => []);
+    const data = assetList.howTos.find((l) => l?.slug === slug);
 
-      const isCurrenLang = locale === engPrefix[data?.lang] || locale === data?.lang;
-
-      if (!isCurrenLang) {
-        return {
-          notFound: true,
-        };
-      }
+    const engPrefix = {
+      us: 'en',
+      en: 'en',
+    };
 
-      const markdownResp = await fetch(`${process.env.BREATHECODE_HOST}/v1/registry/asset/${slug}.md`);
+    const isCurrenLang = locale === engPrefix[data?.lang] || locale === data?.lang;
 
-      if (markdownResp?.status >= 400) {
-        return {
-          notFound: true,
-        };
-      }
+    if (!isCurrenLang) {
+      return {
+        notFound: true,
+      };
+    }
+    const langPrefix = locale === 'en' ? '' : `/${locale}`;
 
-      markdown = await markdownResp.text();
-      await setCacheItem(slug, { ...data, markdown });
-    } else {
-      markdown = data.markdown;
+    if (!data.readme?.decoded) {
+      return {
+        notFound: true,
+      };
     }
 
+    const markdown = data.readme.decoded;
+
     const {
       title, description, translations, preview,
     } = data;
@@ -203,17 +187,6 @@ export default function HowToSlug({ data, markdown }) {
       <GridContainer gridTemplateColumns="4fr repeat(12, 1fr)" margin={{ base: '0 10px', md: '0 auto' }} gridGap="36px" padding={{ base: '', md: '0 10px' }}>
         <Box display={{ base: 'none', md: 'block' }} position={{ base: 'inherit', md: 'sticky' }} top="20px" height="fit-content" gridColumn="1 / span 1" margin={{ base: '0 0 40px', md: '6.2rem 0 0 0' }}>
           <MktSideRecommendedCourses technologies={data.technologies} />
-          {/* <DynamicCallToAction
-            assetId={data.id}
-            assetTechnologies={data.technologies?.map((item) => item?.slug)}
-            assetType={data.asset_type.toLowerCase()}
-            placement="side"
-            marginTop="40px"
-          />
-          <PodcastCallToAction
-            placement="side"
-            marginTop="40px"
-          /> */}
         </Box>
         <Box
           gridColumn="2 / span 12"