not working

frontend/src/components/Landing.jsx

           <div className="mb-16 -mt-12 md:mt-5 flex flex-col lg:flex-row justify-between items-center gap-90p">
             <div className="flex flex-col gap-8p">
               <h6 className="subheading">
-                {data.subheading}
+                {/* {data.subheading} */}
               </h6>
               <h1 className="heading">
                 Software Solutions Tailored to Each Client
               </h1>
               <p className="paragraph">
-                {data.paragraph}
+                {/* {data.paragraph} */}
 
               </p>
             </div>

frontend/src/hooks/useDataApi.js

 
 
 
-//Reducer
 const dataFetchReducer = (state, action) => {
-    switch (action.type) {
-      case 'FETCH_INIT':
-        return {
-          ...state,
-          isLoading: true,
-          isError: false,
-        };
-      case 'FETCH_SUCCESS':
-        return {
-          ...state,
-          isLoading: false,
-          isError: false,
-          data: action.payload,
-        };
-      case 'FETCH_FAILURE':
-        return {
-          ...state,
-          isLoading: false,
-          isError: true,
-        };
-      default:
-        throw new Error();
-    }
-  };
+  switch (action.type) {
+    case 'FETCH_INIT':
+      return {
+        ...state,
+        isLoading: true,
+        isError: false
+      };
+    case 'FETCH_SUCCESS':
+      return {
+        ...state,
+        isLoading: false,
+        isError: false,
+        data: action.payload,
+      };
+    case 'FETCH_FAILURE':
+      return {
+        ...state,
+        isLoading: false,
+        isError: true,
+      };
+    default:
+      throw new Error();
+  }
+};
+
 
-//hook
 const useDataApi = (initialUrl, initialData) => {
-    const [url, setUrl] = useState(initialUrl);
-  
-    const [state, dispatch] = useReducer(dataFetchReducer, {
-      isLoading: false,
-      isError: false,
-      data: initialData,
-    });
+  const [url, setUrl] = useState(initialUrl);
+
+  const [state, dispatch] = useReducer(dataFetchReducer, {
+    isLoading: false,
+    isError: false,
+    data: initialData,
+  });
+
+  useEffect(() => {
+    let didCancel = false;
+
+    const fetchData = async () => {
+      dispatch({ type: 'FETCH_INIT' });
+
+      try {
+        const result = await axios(url);
+
+        if (!didCancel) {
+          dispatch({ type: 'FETCH_SUCCESS', payload: result.data });
+        }
+      } catch (error) {
+        if (!didCancel) {
+          dispatch({ type: 'FETCH_FAILURE' });
+        }
+      }
+    };
+
+    fetchData();
 
-    //getData
-    useEffect(() => {
-        const fetchData = async () => {
-          dispatch({ type: 'FETCH_INIT' });
-    
-          try {
-            const result = await axios(url);
-    
-            dispatch({ type: 'FETCH_SUCCESS', payload: result.data });
-          } catch (error) {
-            dispatch({ type: 'FETCH_FAILURE' });
-          }
-        };
-    
-        fetchData();
-      }, [url]);
-  
+    return () => {
+      didCancel = true;
+    };
+  }, [url]);
 
-  
-    return [state, setUrl];
-  };
+  return [state, setUrl];
+};
 
-  export default useDataApi;
+export default useDataApi

frontend/src/pages/Home.jsx

 import PortfolioSection from '../components/PortfolioSection';
 import PageLayout from '../layout/PageLayout';
 import MapDilig from '../components/Map';
-
-const api_url = process.env.REACT_APP_API_URL;
-
-export default function Home({scrollToView, forwardedRef}) {
+import useDataApi from '../hooks/useDataApi';
+
+//const api_url = process.env.REACT_APP_API_URL;
+const api_url = 'http://localhost:1337';
+
+//const query = '';
+
+const strapiPopulate = [
+  'Cards',
+  'Cards.Card1',
+  'Cards.Card1.Icon',
+  'Cards.Card2',
+  'Cards.Card2.Icon',
+  'Cards.Card3',
+  'Cards.Card3.Icon',
+  'HeroNumbers',
+  'HeroNumbers.number',
+]
+
+const stringBuilder = () => {
+  let stringQuery = '';
+  strapiPopulate.map((item,index) => {
+    if (index !== 0) stringQuery += '&';
+    stringQuery += `populate=${item}`;
+  });
+  return stringQuery;
+};
+
+export default function Home({forwardedRef}) {
   const [cnt, setCnt] = useState('');
-  const [isLoaded, setIsLoaded] = useState('');
 
   const [contactRef, setRef] = useState(forwardedRef)
-  const [contactElement, setContactElement] = useState(0);
 
-  // const UIContext = useContext(UIContext);
 
-  // const initUIValues = UIContext ?? {
-  //   tab: '',
-  //   contactRef: contactRef
-  // };
+
+  const [{data, isLoading, isError}, doFetch] = useDataApi(`${api_url}/api/w-home-page?${stringBuilder()}`);
+
+  const landingData = {
+    data
+  }
+
   useEffect(() => {
     document.title = 'Diligent Software';
   },[]);
 
-
   useEffect(() => {
-    var vid = document.getElementById('animation');
-    vid.playbackRate = 2;
-    axios
-      .get(
-        `${api_url}/api/homepage?populate[0]=landing&populate[1]=why&populate[2]=why.heading&populate[3]=why.card_left.icon&populate[4]=why.card_mid.icon&populate[5]=why.card_right.icon&populate[6]=why.card_left.icon&populate[7]=why.card_mid.icon&populate[8]=why.card_right.icon&populate[9]=landing.heading`,
-        // api/homepage?&populate[0]=why&populate[1]=why.heading&populate[2]=why.card_left.icon&populate[3]=why.card_mid.icon&populate[4]=why.card_right.icon&populate[5]=why.card_left.icon&populate[6]=why.card_mid.icon&populate[7]=why.card_right.icon
-      )
-      .then(res => {
-        setCnt(res.data.data.attributes);
-        //console.log(res)
-        setIsLoaded(true);
-      })
-      .catch(err => {
-        console.log(err);
-        setIsLoaded(false);
-      });
-  }, []);
+    console.log(data);
+    //stringBuilder();
+  },[data]);
+
+
+
+  // useEffect(() => {
+  //   var vid = document.getElementById('animation');
+  //   vid.playbackRate = 2;
+  //   axios
+  //     .get(
+  //       `${api_url}/api/homepage?populate[0]=landing&populate[1]=why&populate[2]=why.heading&populate[3]=why.card_left.icon&populate[4]=why.card_mid.icon&populate[5]=why.card_right.icon&populate[6]=why.card_left.icon&populate[7]=why.card_mid.icon&populate[8]=why.card_right.icon&populate[9]=landing.heading`,
+  //       // api/homepage?&populate[0]=why&populate[1]=why.heading&populate[2]=why.card_left.icon&populate[3]=why.card_mid.icon&populate[4]=why.card_right.icon&populate[5]=why.card_left.icon&populate[6]=why.card_mid.icon&populate[7]=why.card_right.icon
+  //     )
+  //     .then(res => {
+  //       setCnt(res.data.data.attributes);
+  //       //console.log(res)
+  //       setIsLoaded(true);
+  //     })
+  //     .catch(err => {
+  //       console.log(err);
+  //       setIsLoaded(false);
+  //     });
+  // }, []);
 
   useEffect(() => {
     
 
   }, [contactRef, cnt])
 
-  if (!isLoaded) {
+  if (isLoading) {
     return (
       <div className="z-50 w-full h-screen bg-white dark:bg-dg-primary-1700 overflow-hidden dark:text-white flex items-center justify-center text-3xl font-semibold">
         <video id="animation" width="540" height="540" autoPlay muted loop>
     </Tab.Group> */}
 
         {/* Landing Section */}
-       <Landing data={cnt.landing.heading} />
+       <Landing />
 
         {/* Why Us Section */}
         <WhySection data={cnt.why} />