cach response hook for all project

src/Components/Info/Info.tsx

@@ -1,7 +1,8 @@
 import HeaderLink from '../Ui/HeaderLink'
 import { InfoProps } from '../../type/InfoProps';
+import Spinner from '../Utils/Loading/Spinner';
 
-const Info = ({headerText,title,response}:InfoProps) => {
+const Info = ({headerText,title,response,isLoading}:InfoProps) => {
   const {t} = useTranslation();
   
   return (
@@ -12,11 +13,13 @@ const Info = ({headerText,title,response}:InfoProps) => {
           <img className="info_image" src="/App/WhiteBg.png" alt="MDN" />
       </picture>
 
+        {isLoading? <Spinner/> :
         <div className="info_content">
           <HeaderLink text={headerText}/>
           <h1>{t(title)}</h1>
           <p>{response}</p>
         </div>
+        }
     </div>
   )
 }

src/Components/contact/Contact.tsx

@@ -1,6 +1,5 @@
-import { THeaderPage, TPageHeader } from '../../type/app'
+import { THeaderPage} from '../../type/app'
 import HeaderLink from '../Ui/HeaderLink'
-import LoadingAntd from '../Utils/Loading/LoadingAntd'
 import Spinner from '../Utils/Loading/Spinner'
 import ContactOneSection from './ContactOneSection'
 

src/Hooks/useFetchData.tsx

@@ -0,0 +1,19 @@
+import { useQuery } from 'react-query';
+import { BaseURL } from '../api/config';
+
+const fetchData = async (fetchApi:any) => {
+  const response = await fetch(`${BaseURL}${fetchApi}`);
+    
+  if (!response.ok) {
+    throw new Error('Network response was not ok');
+  }
+  return response.json();
+};
+
+export const useFetchData = (fetchApi:any) => {
+    return useQuery(['data', fetchApi], () => fetchData(fetchApi), {
+        refetchOnWindowFocus: false,
+        staleTime: Infinity,
+        cacheTime: Infinity,
+      });
+};

src/Layout/Footer.tsx

@@ -3,17 +3,19 @@ import SingleLink from '../Components/Ui/SingleLink';
 import { HomelinksArray, QuicklinksArray, ServicelinksArray } from '../data/Links';
 import FooterTItleWithSeparator from '../Components/Ui/FooterTItleWithSeperator';
 import ContactInfo from '../Components/Ui/ContactInfo';
-import { useGetHome } from '../api/home';
 import { BaseURL_IMAGE } from '../api/config';
+import { THeaderPage } from '../type/app';
+import Spinner from '../Components/Utils/Loading/Spinner';
 
-const Footer = () => {
+const Footer = ({data, isLoading}:THeaderPage) => {
     const { t } = useTranslation();
-    const {data} = useGetHome();
     const mediaArray = data?.Social_media
     const contactNumber = data?.Static_info[3]
     const contactEmail = data?.Static_info[4] 
     const Logo = data?.Static_info[5]
-    
+    if (isLoading){
+        return <Spinner/>
+    }
     return (
         <div className='footer_contianer'>
                 <img className='footer_image' src="/Layout/FooterImage.png" alt="footer_image" />

src/Layout/app/Header.tsx

@@ -1,21 +1,24 @@
 import { HedaerLinksArray } from '../../data/HeaderLinks'
 import AnimationButton from '../../Components/Ui/AnimationButton';
 import HeaderMenu from './HeaderMenu';
-import { useGetHome } from '../../api/home';
 import { BaseURL_IMAGE } from '../../api/config';
+import { THeaderPage } from '../../type/app';
+import Spinner from '../../Components/Utils/Loading/Spinner';
 
-const Header = () => {
-  const {data} = useGetHome();
+const Header = ({data, isLoading}:THeaderPage) => {
   const Logo = data?.Static_info[5]
   
   return (
     <div className='header_container'>
 
         <div className='image_container'>
+        { isLoading ? <Spinner/> :
           <img src={BaseURL_IMAGE + Logo?.value} alt='Misbar Logo' width={65}/>
+        }
         </div>
         <div className='Header_links'>
           {
+            isLoading ? <Spinner/> :
             HedaerLinksArray.map((link,index) => (
               <Link style={link.isOnlyDrawer ? {display:"none"}:{display:"flex"}} key={index} to={link.href} className='Link'><h4>{link.name}</h4></Link>
             ))
@@ -25,7 +28,7 @@ const Header = () => {
           <AnimationButton link='/contact' text='Contact Us Now' icon={<FaTelegram/>}/>
         </div>
 
-          <HeaderMenu/>
+          <HeaderMenu data={data} isLoading={isLoading}/>
     </div>
   )
 }

src/Layout/app/HeaderMenu.tsx

@@ -3,8 +3,13 @@ import { Button } from 'antd';
 import { MenuOutlined } from '@ant-design/icons';
 import { HedaerLinksArray } from '../../data/HeaderLinks';
 import DrawerLink from '../../Components/Ui/DrawerLink';
+import { THeaderPage } from '../../type/app';
+import { BaseURL_IMAGE } from '../../api/config';
+import Spinner from '../../Components/Utils/Loading/Spinner';
+
+const HeaderMenu = ({data, isLoading}:THeaderPage) => {
+  const Logo = data?.Static_info[5]
 
-const HeaderMenu = () => {
   return (
     <div className='menu_nav'>
       <WithDrawer
@@ -14,7 +19,9 @@ const HeaderMenu = () => {
         {({ closeDrawer }) => (
           <>
             <div className='header_logo'>
-              <img src='./Logo/MisbarLogo.png' alt='logo' className='logo_drawer' />
+            { isLoading ? <Spinner/> :
+              <img src={BaseURL_IMAGE + Logo?.value} alt='Misbar Logo' width={65}/>
+            }            
             </div>
             <ul className='DrawerLinks'>
               {HedaerLinksArray.map((drawerLink, index) => (

src/Layout/app/Layout.tsx

@@ -1,17 +1,17 @@
 import React from 'react';
 import Header from './Header';
 import Footer from '../Footer';
+import { useFetchData } from '../../Hooks/useFetchData';
 
 const Layout = (({ children, className = "" }: { children: React.ReactNode, className?: string }) => {
-
-
+  const { data, isLoading } = useFetchData('api/home');
   return (
     <div className='Layout'>
-      <Header />
+      <Header data={data} isLoading={isLoading} />
       <main className={`${className} Layout_Body`}>
         {children}
       </main>
-      <Footer />
+      <Footer data={data}  isLoading={isLoading}/>
     </div>
   );
 });

src/Pages/About/Page.tsx

@@ -1,11 +1,12 @@
 import About from '../../Components/about/About'
-import { useGetHome } from '../../api/home';
+import { useFetchData } from '../../Hooks/useFetchData';
 
 const AboutUS = () => {
-  const {data} = useGetHome();
+  const { data, isLoading } = useFetchData('api/home');
+
   return (
     <>
-      <About data={data} isHaveHeader={true} />
+      <About data={data} isHaveHeader={true} isLoading={isLoading} />
     </>
   )
 }

src/Pages/Contact/Page.tsx

@@ -1,12 +1,12 @@
 import Contact from "../../Components/contact/Contact"
-import { useGetHome } from "../../api/home"
+import { useFetchData } from "../../Hooks/useFetchData";
 
 const Page = () => {
-  const {data} = useGetHome();
+  const { data, isLoading } = useFetchData('api/home');
 
   return (
     <div className='contact_container'>
-      <Contact data={data} isHaveHeader={true}/>
+      <Contact isLoading={isLoading} data={data} isHaveHeader={true} />
     </div>
   )
 }

src/Pages/Home/Page.tsx

@@ -4,12 +4,11 @@ import Service from "../../Components/Service/Service";
 import Works from "../../Components/Works/Works";
 import About from "../../Components/about/About";
 import Contact from "../../Components/contact/Contact";
-import { useGetHome } from "../../api/home";
+import { useFetchData } from "../../Hooks/useFetchData";
 
 
 const Page = () => {
-  const {data,isLoading} = useGetHome()
-  console.log(data); 
+  const { data, isLoading } = useFetchData('api/home');
 
   return (
     <>

src/Pages/Privacy/Page.tsx

@@ -1,10 +1,8 @@
 import Info from "../../Components/Info/Info"
-import { useGetHome } from "../../api/home";
-import { PrivacyData } from "../../data/Info"
+import { useFetchData } from "../../Hooks/useFetchData";
 
 const Page = () => {
-  const {data} = useGetHome();
-  console.log(data?.Static_info);
+  const { data, isLoading } = useFetchData('api/home');
 
   const privacyData = data?.Static_info[2];
   return (
@@ -12,6 +10,7 @@ const Page = () => {
       headerText="Privacy Policy"
       title={privacyData?.key}
       response={privacyData?.value}
+      isLoading={isLoading}
     />
   )
 }

src/Pages/Projects/Page.tsx

@@ -1,16 +1,14 @@
 import { IoIosArrowDroprightCircle } from "react-icons/io";
 import AnimationButton from "../../Components/Ui/AnimationButton";
 import HeaderLink from "../../Components/Ui/HeaderLink"
-import { ProjectsArray } from "../../data/Projects";
 import ProjectCard from "../../Components/Projects/ProjectCard";
-import { useGetProject } from "../../api/project";
 import Spinner from "../../Components/Utils/Loading/Spinner";
+import { useFetchData } from "../../Hooks/useFetchData";
 
 const Page = () => {
   const {t} = useTranslation();
-  const {data ,isLoading} = useGetProject();
-  console.log(data);
-  // const projectData = data?.
+  const { data, isLoading} = useFetchData('api/project');
+
   
   return (
     <div className="projects">

src/Pages/Services/Page.tsx

@@ -1,12 +1,13 @@
 import Service from '../../Components/Service/Service'
+import { useFetchData } from '../../Hooks/useFetchData';
 import { useGetHome } from '../../api/home';
 
 const Services = () => {
-  const {data} = useGetHome();
+  const { data, isLoading } = useFetchData('api/home');
 
   return (
     <>
-      <Service data={data} isHaveHeader={true}/>
+      <Service isLoading={isLoading} data={data} isHaveHeader={true} />
     </>
   )
 }

src/Pages/SingleProject/Page.tsx

@@ -3,16 +3,16 @@ import { useParams } from 'react-router-dom';
 import { IoIosArrowDroprightCircle } from "react-icons/io";
 import AnimationButton from "../../Components/Ui/AnimationButton";
 import HeaderLink from "../../Components/Ui/HeaderLink";
-import { useGetProject } from '../../api/project';
 import { BaseURL_IMAGE } from '../../api/config';
 import Spinner from '../../Components/Utils/Loading/Spinner';
 import ReactPlayer from 'react-player';
+import { useFetchData } from '../../Hooks/useFetchData';
 
 const SingleProjectPage = () => {
   const { id } = useParams<{ id: string }>();
-  const { data, isLoading } = useGetProject();
-  const [playing, setPlaying] = useState(false);
+  const { data, isLoading} = useFetchData('api/project');
   
+  const [playing, setPlaying] = useState(false);
   const project = data?.find((p: { id: { toString: () => string | undefined; }; }) => p.id.toString() === id);
 
   const handlePlayPause = () => {

src/Pages/Terms/Page.tsx

@@ -1,8 +1,8 @@
 import Info from "../../Components/Info/Info"
-import { useGetHome } from "../../api/home";
+import { useFetchData } from "../../Hooks/useFetchData";
 
 const Page = () => {
-  const {data} = useGetHome();
+  const { data, isLoading } = useFetchData('api/home');
 
   const TermsData = data?.Static_info[1];
   return (
@@ -10,6 +10,7 @@ const Page = () => {
       headerText="Terms & Conditions"
       title={TermsData?.key}
       response={TermsData?.value}
+      isLoading={isLoading}
     />
   )
 }

src/api/home.ts

@@ -1,7 +1,7 @@
 import useGetQuery from "./helper/useGetQuery"
 
 const API = {
-    GET:"/api/home",
+    GET:"api/home",
 }
 
 const KEY = "Home"

src/api/project.ts

@@ -1,7 +1,7 @@
 import useGetQuery from "./helper/useGetQuery"
 
 const API = {
-    GET:"/api/project",
+    GET:"api/project",
 }
 
 const KEY = "PROJECT"

src/lib/ReactQueryProvider.tsx

@@ -3,7 +3,15 @@ import { QueryClient, QueryClientProvider } from 'react-query'
 
 function QueryProvider({ children }: any) {
   
-  const queryClient = new QueryClient()
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: {
+        refetchOnWindowFocus:false,
+        cacheTime:Infinity,
+        staleTime: Infinity,
+      },
+    },
+  })
 
   return (
     <QueryClientProvider  client={queryClient}>

src/type/InfoProps.ts

@@ -2,4 +2,5 @@ export interface InfoProps{
     headerText:string,
     title:string,
     response:string,
+    isLoading:boolean
 }