SBIT-19: iclude banner components to queries

gatsby-config.js

@@ -34,8 +34,8 @@ module.exports = {
       resolve: `gatsby-source-strapi`,
       options: {
         // apiURL: `http://lb-bitlogic-strapi-dev-48805770.sa-east-1.elb.amazonaws.com:1337`,
-        apiURL: `https://strapi.bitlogic.io`,
-        //apiURL: process.env.STRAPI_URL,
+        // apiURL: `https://strapi.bitlogic.io`,
+        apiURL: process.env.STRAPI_URL,
         queryLimit: 1000,
         collectionTypes: [
           `banners`,

src/components/Banners/BannerActionCall.js

@@ -1,11 +1,10 @@
 import React from "react"
 import { Link } from "gatsby"
-
 import { getImage, GatsbyImage } from "gatsby-plugin-image"
 import "./BannerActionCall.scss"
 
 const BannerActionCall = ({ banner }) => {
-  const icon = getImage(banner?.logo?.localFile)
+  const icon = getImage(banner?.image?.localFile)
 
   return (
     <div className="bannerActCall">

src/components/Banners/BannerActionCall.scss

@@ -18,7 +18,7 @@
     max-width: 195px;
   }
   &__logo {
-    flex-basis: 80px;
+    flex-basis: 60px;
     padding-bottom: 30px;
   }
   &__title {
@@ -67,7 +67,7 @@
       margin-top: 7rem;
     }
     &__logo {
-      flex-basis: 135px;
+      flex-basis: 110px;
       padding-bottom: 65px;
       //   transform: translateY(-10%);
     }

src/components/Banners/BannerBgImage.js

@@ -2,22 +2,18 @@ import React from "react"
 import { Link } from "gatsby"
 import { getImage } from "gatsby-plugin-image"
 import { BgImage } from "gbimage-bridge"
-import { useBanner } from "../../hooks/index"
 import showdown from "showdown"
 import "./BannerBgImage.scss"
 
 import { useTheme } from "../../context/themeContext"
 
 const BannerBgImage = ({ banner }) => {
-  const dataBanner = useBanner()
+
   const { theme } = useTheme()
 
-  const bannerSelected = dataBanner?.allStrapiBanners?.nodes.find(
-    ban => ban.strapiId === banner.id
-  )
-  const { image, imageDarkMode, link, summary } = bannerSelected
+  const { bgImage, bgImageDarkMode, link, title } = banner
 
-  const titles = summary
+  const titles = title
   let converter = new showdown.Converter()
   let post = titles
   let html = converter.makeHtml(post)
@@ -26,12 +22,12 @@ const BannerBgImage = ({ banner }) => {
     return { __html: html }
   }
 
-  const imagen = getImage(image?.localFile)
-  const imagenDM = getImage(imageDarkMode?.localFile)
+  const imagen = getImage(bgImage?.localFile)
+  const imagenDM = getImage(bgImageDarkMode?.localFile)
 
   return (
     <div className="bannerBgImage">
-      {bannerSelected.type === "bgImage" ? (
+      {banner.bgImage ? (
         <BgImage
           image={theme === "dark" && imagenDM ? imagenDM : imagen}
           className="bannerBgImage__bgImage"

src/components/Banners/BannerISO.js

@@ -1,18 +1,13 @@
 import React from "react"
 import { getImage, GatsbyImage } from "gatsby-plugin-image"
-import { useBanner } from "../../hooks/index"
 import showdown from "showdown"
 import "./BannerISO.scss"
 
-const BannerISO = ({ banner, title }) => {
-  const dataBanner = useBanner()
+const BannerISO = ({ banner }) => {
 
-  const bannerSelected = dataBanner?.allStrapiBanners?.nodes.find(
-    ban => ban.strapiId === banner.id
-  )
-  const { logo, summary } = bannerSelected
+  const { title, subtitle, image, imageDarkMode } = banner
 
-  const titles = summary
+  const titles = subtitle
   let converter = new showdown.Converter()
   let post = titles
   let html = converter.makeHtml(post)
@@ -31,7 +26,7 @@ const BannerISO = ({ banner, title }) => {
           ></div>
         </div>
         <div className="bannerISO__image ">
-          <GatsbyImage image={getImage(logo?.localFile)} alt={`img-${title}`} />
+          <GatsbyImage image={getImage(image?.localFile)} alt={`img-${title}`} />
         </div>
       </div>
     </div>

src/components/Banners/BannerLogo.js

@@ -7,21 +7,15 @@ import { useTheme } from "../../context/themeContext"
 
 import "./BannerLogo.scss"
 
-const BannerLogo = ({ banner, title }) => {
+const BannerLogo = ({ banner }) => {
   const { theme } = useTheme()
+  const { bgImage, bgImageDarkMode, image, imageDarkMode, title } = banner
 
-  const dataBanner = useBanner()
-
-  const bannerSelected = dataBanner?.allStrapiBanners?.nodes.find(
-    ban => ban.strapiId === banner.id
-  )
-  const { image, imageDarkMode, logo, logoDarkMode, summary } = bannerSelected
-
-  const imagen = getImage(image?.localFile)
-  const logoImage = getImage(logo?.localFile)
+  const imagen = getImage(bgImage?.localFile)
+  const logoImage = getImage(image?.localFile)
   // Version Dark Mode
-  const imagenDM = getImage(imageDarkMode?.localFile)
-  const logoDM = getImage(logoDarkMode?.localFile)
+  const imagenDM = getImage(bgImageDarkMode?.localFile)
+  const logoDM = getImage(imageDarkMode?.localFile)
 
   return (
     <>
@@ -40,14 +34,14 @@ const BannerLogo = ({ banner, title }) => {
           <h1 className="BannerLogo__Title">{title}</h1>
         </BgImage>
       )}
-
-      {summary ? (
+{/* 
+      {title ? (
         <div className="BannerLogo__summary">
           <div className="container ">
-            <p className="BannerLogo__summary__txt">{summary}</p>
+            <p className="BannerLogo__summary__txt">{title}</p>
           </div>
         </div>
-      ) : null}
+      ) : null} */}
     </>
   )
 }

src/components/Banners/BannerTop.js

@@ -6,11 +6,11 @@ import "./BannerTop.scss"
 import { useTheme } from "../../context/themeContext"
 
 const BannerTop = ({ banner }) => {
-  const { image, imageDarkMode, title, summary } = banner
+  const { bgImage, bgImageDarkMode, title, summary } = banner
   const { theme } = useTheme()
 
-  const imageBanner = getImage(image?.localFile)
-  const imageDM = getImage(imageDarkMode?.localFile)
+  const imageBanner = getImage(bgImage?.localFile)
+  const imageDM = getImage(bgImageDarkMode?.localFile)
 
   return (
     <div className="banner">

src/components/BitwayPage/BitwayContainer.js

@@ -15,13 +15,7 @@ const BitwayPage = () => {
   } = useBitwayPage()
 
   const sections = nodes[0]?.sections
-
-  const bannerData = useBanner()
-
-  const bannerActionCall = bannerData?.allStrapiBanners?.nodes.find(
-    banner => banner.page === "bitway" && banner.type === "actionCall"
-  )
-
+  const bannerActionCall  = nodes[0]?.actionCallBanner
   const { pageTitle, pageDescription, pageKeywords } = nodes[0]?.SEO
 
   // vista desktop

src/components/BlogPage/BlogContainer.js

@@ -1,27 +1,20 @@
 import React from "react"
-import { useBanner, useBlog } from "../../hooks"
-
+import { useBlog } from "../../hooks"
 import Layout from "../../components/layout"
 import BlogGrid from "./BlogGrid/BlogGrid"
 import BlogArticle from "./BlogArticle/BlogArticle"
-
 import { Seo, BannerActionCall } from "../index"
 
 import "./BlogContainer.scss"
 
 const Blog = () => {
-  const bannerData = useBanner()
+
   const blogData = useBlog()
+
   const data = blogData?.allStrapiBlogCategory?.nodes
   const dataArticles = blogData?.allStrapiArticle?.nodes
-
-  const bannerBlog = bannerData?.allStrapiBanners?.nodes.find(
-    banner => banner.page === "blog" && banner.type === "bgColor"
-  )
-
-  const bannerActionCall = bannerData?.allStrapiBanners?.nodes.find(
-    banner => banner.page === "blog" && banner.type === "actionCall"
-  )
+  const bannerActionCall = blogData?.allStrapiBlogPage?.nodes[0]?.actionCallBanner
+  const title = blogData?.allStrapiBlogPage?.nodes[0]?.title
 
   const filterArticle = data.map(category => dataArticles.filter(article => category.name === article.blog_category.name))
 
@@ -42,9 +35,9 @@ const Blog = () => {
       )}
       {data.length > 0 && (
         <div className="blog__container">
-          {bannerBlog && (
+          {title && (
             <div className="banner__container">
-              <h3 dangerouslySetInnerHTML={{ __html: bannerBlog.summary }} />
+              <h3 dangerouslySetInnerHTML={{ __html: title }} />
             </div>
           )}
 

src/components/EdTechPage/EdTechContainer.js

@@ -1,5 +1,5 @@
 import * as React from "react"
-import { useEdTech, useBanner } from "../../hooks"
+import { useEdTech } from "../../hooks"
 import { BannerTop, BannerActionCall, Seo } from "../index"
 import Layout from "../layout"
 
@@ -9,17 +9,12 @@ import "./EdtechContainer.scss"
 const EdTech = () => {
   const data = useEdTech()
 
-  const bannerData = useBanner()
   const edTechs = data?.allStrapiEdteches?.nodes
 
   const content = edTechs.map(tech => <Cards key={tech.id} tech={tech} />)
 
-  const bannerTop = bannerData?.allStrapiBanners?.nodes.find(
-    banner => banner.page === "edtech" && banner.type === "top"
-  )
-  const bannerActionCall = bannerData?.allStrapiBanners?.nodes.find(
-    banner => banner.page === "edtech" && banner.type === "actionCall"
-  )
+  const bannerTop = data?.allStrapiEdTechPage?.nodes[0].topBanner
+  const bannerActionCall = data?.allStrapiEdTechPage?.nodes[0].actionCallBanner
 
   const {
     pageTitle,

src/components/HomePage/HomeContainer/HomeContainer.js

@@ -1,17 +1,34 @@
 import * as React from "react"
 import { useHomePage } from "../../../hooks/index"
 import Layout from "../../layout"
-import { Seo, CustomSection } from "../../index"
+import {
+  Seo,
+  CustomSection,
+  BannerLogo,
+  BannerBgImage,
+  BannerISO,
+  ServiceCards,
+  EdTechCards,
+  PartnersSection,
+} from "../../index"
 
 import "./HomeContainer.scss"
 
 const Home = () => {
-
   const data = useHomePage()
-
-  const homeSections = data?.allStrapiHome?.nodes[0]?.sections
-  const { pageTitle, pageDescription, pageKeywords } = data?.allStrapiHome?.nodes[0]?.pageMetadata || {}
 
+  const homeSections = data?.allStrapiHome?.nodes[0]?.sections
+  const { pageTitle, pageDescription, pageKeywords } =
+    data?.allStrapiHome?.nodes[0]?.pageMetadata || {}
+  const {
+    topHomeBanner,
+    infoImgBanner,
+    infoBgBanner,
+    infoBanner,
+    servicesBlock,
+    partnersBlock,
+    edtechBlock,
+  } = data?.allStrapiHome?.nodes[0]
 
   return (
     <Layout>
@@ -22,9 +39,29 @@ const Home = () => {
           keywords={pageKeywords}
         />
       )}
-      {homeSections && (
-        <CustomSection sections={homeSections} />
+      {topHomeBanner && <BannerLogo banner={topHomeBanner} />}
+      {servicesBlock && (
+        <ServiceCards
+          title={servicesBlock?.title}
+          services={servicesBlock?.services}
+        />
+      )}
+      {edtechBlock && (
+        <EdTechCards
+          title={edtechBlock.title}
+          edteches={edtechBlock.edteches}
+        />
+      )}
+      {infoBgBanner && <BannerBgImage banner={infoBgBanner} />}
+      {infoImgBanner && <BannerISO banner={infoImgBanner} />}
+      {partnersBlock && (
+        <PartnersSection
+          title={partnersBlock.title}
+          partners={partnersBlock.partners}
+        />
       )}
+      {infoBanner && <BannerBgImage banner={infoBanner} />}
+      {homeSections && <CustomSection sections={homeSections} />}
     </Layout>
   )
 }

src/components/JobsPage/JobsPage.js

@@ -8,7 +8,7 @@ import './JobsPage.scss'
 
 export default function JobsPage() {
     const jobsData = useJobsPage()
-    const banner = jobsData?.strapiJobsPage?.banner
+    const title = jobsData?.strapiJobsPage?.title
     const { pageTitle, pageDescription, pageKeywords } = jobsData?.strapiJobsPage?.pageMetadata || {}
 
     return (
@@ -20,7 +20,7 @@ export default function JobsPage() {
                     keywords={pageKeywords}
                 />
             )}
-            <MarkdownView markdown={banner} className="banner__head" />
+            <MarkdownView markdown={title} className="banner__head" />
             <div id="cats-portal-widget" className="container widget-container"></div>
             <Helmet>
                 <script>

src/components/ServicesPage/ServicesSection.js

@@ -1,5 +1,5 @@
 import React from "react"
-import { useServices, useBanner } from "../../hooks"
+import { useServices, useBanner, useServicePage } from "../../hooks"
 import Layout from "../layout"
 import { BannerTop, BannerActionCall, ServiceCard, Seo } from "../index"
 
@@ -9,18 +9,16 @@ const ServicesSection = () => {
   const servicesData = useServices()
   const bannerData = useBanner()
 
+  const servicesPageData = useServicePage()
+
   const servicesList = servicesData?.allStrapiServices?.nodes
 
   const servicesToDisplay = servicesList?.map(service => (
     <ServiceCard key={service.id} service={service} />
   ))
 
-  const bannerTop = bannerData?.allStrapiBanners?.nodes.find(
-    banner => banner.page === "services" && banner.type === "top"
-  )
-  const bannerActionCall = bannerData?.allStrapiBanners?.nodes.find(
-    banner => banner.page === "services" && banner.type === "actionCall"
-  )
+  const bannerTop = servicesPageData?.strapiServicesPage?.topBanner
+  const bannerActionCall = servicesPageData?.strapiServicesPage?.actionCallBanner
 
   const {
     pageDescription,

src/hooks/index.js

@@ -7,6 +7,7 @@ import useHomePage from "./useHomePage"
 import useContactPage from "./useContactPage"
 import useBlog from './useBlog'
 import useJobsPage from "./useJobsPage"
+import useServicePage from "./useServicePage"
 
 export {
   useServices,
@@ -18,4 +19,5 @@ export {
   useContactPage,
   useBlog,
   useJobsPage,
+  useServicePage
 }