portfolio section

frontend/src/api/PortfolioDataLayer.jsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import useFetchCollections from '../hooks/useFetchCollections';
+import { strapiApiBuilder } from '../utils/strapiApiBuilder';
+import Animation_Diligent from '../assets/animation_diligent.webm';
+import PortfolioCard from '../components/PortfolioCard';
+import IrregularPortfolioGrid from '../layout/IrregularPortfolioGrid';
+import PortfolioCardNew from '../components/shared/PortfolioCardNew';
+
+const api_url = process.env.REACT_APP_API_URL;
+
+const strapiPopulate = [
+  'Heading',
+  'Heading.paragraphs',
+  'Stat',
+  'AboutClient.paragraph',
+  'Country',
+  'Indrustry',
+  'Domain.paragraph',
+  'Challanges.paragraph',
+  'Solution.paragraph',
+  'Results.paragraph',
+  'CaseStudyImage',
+  'Technologies.Tech',
+  'WorkTogether',
+  'BackgroundImage',
+  'SEO',
+  'SEO.metaSocial',
+  'SEO.metaImage',
+  'SEO.metaSocial.image',
+];
+
+const PortfolioDataLayer = () => {
+  const strapi = strapiApiBuilder('case-studies', strapiPopulate, '');
+
+  const [{ data, isLoading, isError }, doFetch] = useFetchCollections(strapi);
+
+  console.log(data);
+
+  if (isLoading) {
+    return (
+      <div className="z-50 w-full h-screen bg-white dark:bg-dg-primary-1700 dark:text-white flex items-center justify-center text-3xl font-semibold">
+        <video id="animation" width="540" height="540" autoPlay muted loop>
+          <source src={Animation_Diligent} type="video/webm" />
+          Loading...
+        </video>
+      </div>
+    );
+  }
+
+  return (
+    <>
+      <IrregularPortfolioGrid>
+        {data &&
+          data.length > 0 &&
+          data.map((item, index) => (
+            <PortfolioCardNew key={index} data={item.attributes} />
+          ))}
+      </IrregularPortfolioGrid>
+    </>
+  );
+};
+
+export default PortfolioDataLayer;

frontend/src/components/CardsGrid.jsx

@@ -20,7 +20,7 @@ const CardsGrid = ({ data }) => {
           // <PortfolioCard key={index} title={item.attributes.heading} img={api_url + item.attributes.img.data.attributes.formats.small.url} isLarge={item.attributes.IsLarge} />
           <PortfolioCard
             key={index}
-            title={item.title}
+            title={item.attributes.Heading.title}
             alt={item.alt}
             isLarge={false}
             link={item.link}

frontend/src/components/shared/PortfolioCardNew.jsx

@@ -0,0 +1,18 @@
+import React, { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+const api_url = process.env.REACT_APP_API_URL;
+
+const PortfolioCardNew = ({ data }) => {
+  const linkTo = useNavigate();
+
+  return (
+    <a className={'card box my-2 flex- flex-col items-center'} href={data.link}>
+      <img src={api_url + data.CaseStudyImage.data.attributes.url} alt={data.CaseStudyImage.data.attributes.alternativeText} className={'mb-12 mx-auto self-center'}></img>
+      <h3 className="h3-heading">{data.Heading.title}</h3>
+      <button className="btn text-dg-secondary mt-4">Read More</button>
+    </a>
+  );
+};
+
+export default PortfolioCardNew;

frontend/src/layout/IrregularPortfolioGrid.jsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+const IrregularPortfolioGrid = ({children}) => {
+  return (
+    <div>{children}</div>
+  )
+}
+
+export default IrregularPortfolioGrid

frontend/src/pages/Portfolio.jsx

@@ -15,6 +15,9 @@ import PageLayout from '../layout/PageLayout';
 import StrataThumb from './../assets/images/CaseStudy/StrataThumb.jpg';
 import useAnalytics from '../hooks/useAnalytics';
 import ReactHelmet from '../components/shared/ReactHelmet';
+import { strapiApiBuilder } from '../utils/strapiApiBuilder';
+import useDataApi from '../hooks/useDataApi';
+import PortfolioDataLayer from '../api/PortfolioDataLayer';
 
 const _data = {
   heading: {
@@ -74,33 +77,45 @@ const _data = {
   ],
 };
 
+const strapiPopulate = [
+  'Heading',
+  'Heading.subtitle',
+  'Heading.title',
+  'Problems',
+  'Highlighted',
+  'Highlighted.title',
+  'Highlighted.paragraph',
+  'WhyWork',
+  'WhyWork.img',
+  'Stats',
+  'SucessParagraph',
+  'Specs',
+  'Download',
+  'OfficeImg',
+  'WorkTogether',
+  'SEO',
+  'SEO.metaSocial',
+  'SEO.metaImage',
+  'SEO.metaSocial.image',
+];
+
+// const [{ data, isLoading, isError }, doFetch] = useFetchCollections(strapi);
+
 const api_url = process.env.REACT_APP_API_URL;
 
 export default function Portfolio() {
   const [cnt, setCnt] = useState('');
   const [isLoaded, setIsLoaded] = useState('');
 
-  useEffect(async () => {
-    document.title = 'Case Studies';
-    var vid = document.getElementById('animation');
-    vid.playbackRate = 2;
-    await axios
-      .get(
-        `${api_url}/api/portfoliopage?populate[0]=SEO&populate[1]=SEO.metaSocial&populate[2]=SEO.metaImage&populate[3]=SEO.metaSocial.image`,
-      )
-      .then(res => {
-        setCnt(res.data.data.attributes);
-        setIsLoaded(true);
-      })
-      .catch(err => {
-        console.log(err);
-        setIsLoaded(false);
-      });
-  }, []);
+  
+  const strapi = strapiApiBuilder('portfoliopage', strapiPopulate, '');
+
+  const [{ data, isLoading, isError }, doFetch] = useDataApi(strapi);
+
 
   useAnalytics('Case Studies');
 
-  if (!isLoaded) {
+  if (isLoading) {
     return (
       <div className="z-50 w-full h-screen bg-white dark:bg-dg-primary-1700 dark:text-white flex items-center justify-center text-3xl font-semibold">
         <video id="animation" width="540" height="540" autoPlay muted loop>
@@ -113,7 +128,7 @@ export default function Portfolio() {
 
   return (
     <PageLayout>
-      {cnt && cnt.SEO && <ReactHelmet seo={cnt.SEO} />}
+      {data && data.SEO && <ReactHelmet seo={data.SEO} />}
       <div className="flex flex-col gap-90p pt-32">
         <Wrapper>
           <h1 className="hidden">Our Work - Case Studies</h1>
@@ -128,6 +143,7 @@ export default function Portfolio() {
           </div>
         </Wrapper>
         <Wrapper>
+          <PortfolioDataLayer/>
           <CardsGrid data={_data.cards} />
         </Wrapper>
       </div>