SBIT-320: fix components

src/components/BlogPage/BlogArticle/BlogArticle.js

@@ -4,33 +4,58 @@ import { Link } from "gatsby"
 // import ReactMarkdown from "react-markdown"
 import MarkdownView from "react-showdown"
 import "./BlogArticle.scss"
+import PropTypes from "prop-types"
 
 const BlogArticle = ({ title, summary, image, slug, text }) => {
+  const imageArticle = image?.localFile ? getImage(image.localFile) : undefined
+
   return (
     <div className="article__container">
-      {image?.localFile ? (
+      {imageArticle ? (
         <GatsbyImage
-          image={getImage(image?.localFile)}
-          alt={title}
+          image={imageArticle}
+          alt={image?.alternativeText || title}
           className="article__image"
         />
       ) : (
-        <img src={image?.url} alt={title} className="article__image" />
+        <img src={image?.url}
+          alt={image?.alternativeText || title}
+          className="article__image"
+        />
       )}
       <div className="article__description">
         <h6>{`${title}`}</h6>
-        <div>
-          <MarkdownView markdown={`${summary}`} />
-          {/* <ReactMarkdown source={`${summary} ...`} /> */}
-        </div>
+        {summary && (
+          <div>
+            <MarkdownView markdown={`${summary}`} />
+            {/* <ReactMarkdown source={`${summary} ...`} /> */}
+          </div>
+        )}
         <div className="article__link">
           <Link to={slug}>
-            <small>{text}</small>
+            <small>{text || 'Ver más'}</small>
           </Link>
         </div>
       </div>
     </div>
   )
 }
 
-export default BlogArticle
+BlogArticle.propTypes = {
+  title: PropTypes.string.isRequired,
+  slug: PropTypes.string.isRequired,
+  summary: PropTypes.string,
+  text: PropTypes.string,
+  image: PropTypes.shape({
+    alternativeText: PropTypes.string,
+    url: PropTypes.string,
+    localFile: PropTypes.shape({
+      childImageSharp: PropTypes.shape({
+        gatsbyImageData: PropTypes.object.isRequired
+      })
+    })
+  }).isRequired
+};
+
+export default BlogArticle;
+

src/components/DualSection/DualSection.js

@@ -1,23 +1,30 @@
 import React from "react"
 import ButtonLink from "../ButtonLink/ButtonLink"
 import "./DualSection.scss"
+import MarkdownView from "react-showdown"
 
 export default function DualSection({ data }) {
   const dualSectionParts = data?.dualSectionPart
   const listSectionParts = dualSectionParts.map(section => (
     <div
       key={section.id}
-      className={`dualSection ${
-        section.length === 3 ? "col - md - 4" : "col - md - 6"
-      } my-2 p-md-3 p-xl-4`}
+      className={`dualSection ${section.length === 3 ? "col - md - 4" : "col - md - 6"
+        } my-2 p-md-3 p-xl-4`}
     >
       <div className="dualSection__image">
         <img src={section.image.url} alt="naturaleza" />
       </div>
 
       <div className="dualSection__textContainer">
         <h4>{section.title}</h4>
-        <p>{section.description}</p>
+        {section?.description && (
+          <div>
+            <MarkdownView
+              markdown={section.description}
+              dangerouslySetInnerHTML={{ __html: section.description }}
+            />
+          </div>
+        )}
         {section.button && (
           <button className="px-4">
             <ButtonLink button={section.button} />

src/components/DualSection/DualSection.scss

@@ -2,6 +2,7 @@
 
 .dualSection {
   color: $primary;
+
   h4 {
     margin-top: 1rem;
     font-weight: 700;
@@ -10,26 +11,40 @@
   &__image {
     width: 100%;
   }
+
   button {
     @include primaryBtn;
   }
+
+  &__textContainer {
+    &>div {
+
+      p,
+      a {
+        font-size: 18px;
+      }
+    }
+  }
 }
 
 
 .one_sec {
   color: $primary;
-  &-background{
+
+  &-background {
     background-size: cover;
     background-repeat: no-repeat;
     padding: 1em 0 0 0;
   }
+
   display: flex;
   flex-direction: row;
   justify-content: space-around;
   align-items: center;
   gap: 3em;
   padding-top: 3em;
   padding-bottom: 3em;
+
   button {
     @include primaryBtn;
   }
@@ -40,18 +55,26 @@
 
   &-title {
     flex-basis: 45%;
+
     h3 {
       font-weight: 700;
       font-size: 36px;
       line-height: 40px;
     }
-    &-body{
+
+    &-body {
       font-weight: 400 !important;
+
+      p,
+      a {
+        font-size: $medium;
+      }
     }
   }
 
   &-img {
     flex-basis: 55%;
+
     img {
       border-radius: 8px;
       width: 100%;
@@ -61,12 +84,13 @@
 
   @media screen and (max-width: $breakpoint-sm) {
     flex-direction: column-reverse;
+
     &-img {
       flex-basis: 100%;
     }
+
     &-title {
       flex-basis: 100%;
     }
   }
-}
-
+}

src/components/DualSection/OneSection.js

@@ -1,6 +1,7 @@
 import React from "react"
 import { useTheme } from "../../context/themeContext"
 import ButtonLink from "../ButtonLink/ButtonLink"
+import MarkdowView from 'react-showdown'
 
 const OneSection = ({ data: { id, strapi_component, dualSectionPart } }) => {
   const { theme } = useTheme()
@@ -16,17 +17,23 @@ const OneSection = ({ data: { id, strapi_component, dualSectionPart } }) => {
     <div
       className="one_sec-background"
       style={{
-        backgroundImage: `url(${
-          theme === "dark" && backgroundImageDark?.url
+        backgroundImage: `url(${theme === "dark" && backgroundImageDark?.url
             ? backgroundImageDark?.url
             : backgroundImage?.url
-        })`,
+          })`,
       }}
     >
       <div className="container one_sec" id={strapi_component + "-" + id}>
         <div className="one_sec-title">
           <h4>{title}</h4>
-          <h4 className="one_sec-title-body">{description}</h4>
+          {description && (
+            <div className="one_sec-title-body">
+              <MarkdowView
+                markdown={description}
+                dangerouslySetInnerHTML={{ __html: description }}
+              />
+            </div>
+          )}
           <button className="NavBar_Side-contact">
             <ButtonLink button={button} />
           </button>

src/components/Professionals/Professionals.js

@@ -9,41 +9,49 @@ const Professionals = ({ data }) => {
   const professionalsData = useProfessionals()
 
   const professionalsList = professionals.map(pro =>
-    professionalsData?.allStrapiProfessional?.nodes.find(professional => professional.strapiId === pro.id)  
-  ).slice(0,6)
+    professionalsData?.allStrapiProfessional?.nodes.find(professional => professional.strapiId === pro.id)
+  ).slice(0, 6)
 
   const professionalsCards = professionalsList.map((pro, idx) => {
-
-    const photo = getImage(pro.photo.localFile)
 
-    const {name, position, quote, linkedin} = pro
+    const photo = pro?.photo?.localFile ? getImage(pro.photo.localFile) : undefined
+
+    const { name, position, quote, linkedin } = pro
 
     return (
       <div
-      className="pro col-12 col-md-4 row"
-      key={`pro-${idx}`}
-      id={data.strapi_component + "-" + data.id}
-    >
-      <div className="col-6 col-md-12">
-        <GatsbyImage image={photo} alt={name} className="pro__img" />
-      </div>
-      <div className="col-6 col-md-12">
-        <div className="pro__descr">
-          <h6 className="pro__descr_title">{name}</h6>
-          {linkedin && <a href={linkedin} target="_blank"><FaLinkedinIn size={23}/></a>}
-          {position && <h6 className="pro__descr_position">{position}</h6>}
-          <p className="pro__descr_text">{quote}</p>
+        className="pro col-12 col-md-4 row"
+        key={`pro-${idx}`}
+        id={data.strapi_component + "-" + data.id}
+      >
+        <div className="col-6 col-md-12">
+          {photo ? (
+            <GatsbyImage image={photo} alt={name} className="pro__img" />
+          ) : (
+            <img
+              src={pro?.photo?.url}
+              alt={name}
+              className='pro__img'
+            />
+          )}
+        </div>
+        <div className="col-6 col-md-12">
+          <div className="pro__descr">
+            <h6 className="pro__descr_title">{name}</h6>
+            {linkedin && <a href={linkedin} target="_blank" rel='noopener noreferrer'><FaLinkedinIn size={23} /></a>}
+            {position && <h6 className="pro__descr_position">{position}</h6>}
+            <p className="pro__descr_text">{quote}</p>
+          </div>
         </div>
       </div>
-    </div>
     )
   })
 
   return (
     <div className="container pt-5 pb-1 prosSection">
       {title && <h2>{title}</h2>}
       {summary && <h6 className="prosSection__summary px-lg-3">{summary}</h6>}
-      {(professionalsCards !== undefined && professionalsCards.length > 0) && 
+      {(professionalsCards !== undefined && professionalsCards.length > 0) &&
         <div className="cases row">{professionalsCards}</div>
       }
     </div>

src/hooks/useBlog.js

@@ -14,6 +14,8 @@ const useBlog = () => {
           summary
           slug
           image {
+            url
+            alternativeText
             localFile {
               childImageSharp {
                 gatsbyImageData

src/hooks/useProfessionals.js

@@ -12,6 +12,7 @@ const useContactPage = () => {
           strapiId
           id
           photo {
+            url
             localFile {
               childImageSharp {
                 gatsbyImageData