moaz_dw/misbar-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

cach response hook for all project

Browse Source
This commit is contained in:
Moaz Dawalibi 2024-07-03 12:24:12 +03:00
parent d49b1c46e1
commit 2fb9a217c2
20 changed files with 104 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/Components/Info/Info.tsx
View File

@ -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>
<div className="info_content">
<HeaderLink text={headerText}/>
<h1>{t(title)}</h1>
<p>{response}</p>
</div>
{isLoading? <Spinner/> :
<div className="info_content">
<HeaderLink text={headerText}/>
<h1>{t(title)}</h1>
<p>{response}</p>
</div>
}
</div>
)
}

3
src/Components/contact/Contact.tsx
View File

@ -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'

19
src/Hooks/useFetchData.tsx Normal file
View File

@ -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,
});
};

10
src/Layout/Footer.tsx
View File

@ -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" />

11
src/Layout/app/Header.tsx
View File

@ -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>
)
}

11
src/Layout/app/HeaderMenu.tsx
View File

@ -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) => (

8
src/Layout/app/Layout.tsx
View File

@ -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>
);
});

7
src/Pages/About/Page.tsx
View File

@ -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} />
</>
)
}

6
src/Pages/Contact/Page.tsx
View File

@ -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>
)
}

11
src/Pages/Home/Page.tsx
View File

@ -4,17 +4,16 @@ 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 (
return (
<>
<HeroSection data={data} isLoading={isLoading}/>
<About isHaveHeader={false} data={data} isLoading={isLoading} />
<HeroSection data={data} isLoading={isLoading} />
<About isHaveHeader={false} data={data} isLoading={isLoading} />
<Service data={data} isHaveHeader={false} isLoading={isLoading} />
<Works data={data} isLoading={isLoading} />
<Contact data={data} isHaveHeader={false} isLoading={isLoading} />

17
src/Pages/Privacy/Page.tsx
View File

@ -1,18 +1,17 @@
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 (
<Info
headerText="Privacy Policy"
title={privacyData?.key}
response={privacyData?.value}
/>
<Info
headerText="Privacy Policy"
title={privacyData?.key}
response={privacyData?.value}
isLoading={isLoading}
/>
)
}

8
src/Pages/Projects/Page.tsx
View File

@ -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">

5
src/Pages/Services/Page.tsx
View File

@ -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} />
</>
)
}

6
src/Pages/SingleProject/Page.tsx
View File

@ -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 = () => {

5
src/Pages/Terms/Page.tsx
View File

@ -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}
/>
)
}

2
src/api/home.ts
View File

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

2
src/api/project.ts
View File

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

10
src/lib/ReactQueryProvider.tsx
View File

@ -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}>

1
src/type/InfoProps.ts
View File

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