From 30d4e5a788b07903c5b90c81811c32e57bc47d11 Mon Sep 17 00:00:00 2001 From: VividTruthKeeper Date: Fri, 15 Jul 2022 15:59:48 +0500 Subject: [PATCH] sliders dynamic --- src/components/main/MainSlider.tsx | 49 ++++++++++++++----------- src/components/main/MainSliderSlide.tsx | 20 +++++----- src/components/main/PartnersSection.tsx | 49 +++++++++++++++++-------- src/context/LoaderContext.ts | 3 ++ src/helpers/apiRequests.ts | 21 +++++++++++ src/links.ts | 3 ++ src/types/mainSliderSlide.ts | 8 ++-- src/types/partnersType.ts | 5 +++ 8 files changed, 106 insertions(+), 52 deletions(-) create mode 100644 src/context/LoaderContext.ts create mode 100644 src/helpers/apiRequests.ts create mode 100644 src/links.ts create mode 100644 src/types/partnersType.ts diff --git a/src/components/main/MainSlider.tsx b/src/components/main/MainSlider.tsx index 117a0d6..2cc7b38 100644 --- a/src/components/main/MainSlider.tsx +++ b/src/components/main/MainSlider.tsx @@ -1,6 +1,7 @@ // Modules import { Swiper, SwiperSlide } from "swiper/react"; import { Navigation, Autoplay } from "swiper"; +import { useState, useEffect, useMemo } from "react"; import "swiper/css"; import { v4 as uuidv4 } from "uuid"; @@ -17,17 +18,21 @@ import MainSliderSlide from "./MainSliderSlide"; // Types import { SlideProps } from "../../types/mainSliderSlide"; -const sliderData: SlideProps[] = [ - { - slideTitle: "Lorem ipsum dolor sit amet, consectetur adipiscing elit", - slideText: - "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sagittis auctor penatibus nunc leo rhoncus auctor pellentesque in.", - slideLink: "/", - slideImg: game, - }, -]; +// Helpers +import { getMainSliderData } from "../../helpers/apiRequests"; const MainSlider = () => { + // State + const [slideData, setSlideData]: [ + SlideProps[], + React.Dispatch> + ] = useState([{ id: 0, header: "", txt: "", img: "" }]); + + // Effect + useEffect(() => { + getMainSliderData(setSlideData); + }, []); + return (
{ prevEl: ".slider-prev", }} > - {sliderData.map((slide) => { - return ( - - - - ); - })} + {slideData + ? slideData.map((slide: SlideProps) => { + return ( + + + + ); + }) + : ""}
diff --git a/src/components/main/MainSliderSlide.tsx b/src/components/main/MainSliderSlide.tsx index 79559d3..8bde1f8 100644 --- a/src/components/main/MainSliderSlide.tsx +++ b/src/components/main/MainSliderSlide.tsx @@ -7,23 +7,21 @@ import arrowNext from "../../icons/arrow-right-white.svg"; // Types import { SlideProps } from "../../types/mainSliderSlide"; -const MainSliderSlide = ({ - slideImg, - slideTitle, - slideText, - slideLink, -}: SlideProps) => { +// URL +import { hosting } from "../../links"; + +const MainSliderSlide = ({ id, img, header, txt }: SlideProps) => { return ( -
+
- +
-

{slideTitle}

-

{slideText}

- +

{header}

+

{txt}

+ Click the button
diff --git a/src/components/main/PartnersSection.tsx b/src/components/main/PartnersSection.tsx index d6250e6..8b1fe0a 100644 --- a/src/components/main/PartnersSection.tsx +++ b/src/components/main/PartnersSection.tsx @@ -2,23 +2,38 @@ import { Swiper, SwiperSlide } from "swiper/react"; import { Navigation, Autoplay } from "swiper"; import { v4 as uuidv4 } from "uuid"; +import { useState, useEffect } from "react"; // Components import SectionTitle from "../global/SectionTitle"; -// Images -import tps from "../../images/tps.jpg"; -import samsung from "../../images/samsung.jpg"; -import mi from "../../images/mi.jpg"; -import dragon from "../../images/do.jpg"; - // Icons import arrowPrev from "../../icons/arrow-left-green.svg"; import arrowNext from "../../icons/arrow-right-green.svg"; -const partnersData: string[] = [tps, samsung, mi, dragon]; +// URL +import { hosting } from "../../links"; + +// Types +import { partnersType } from "../../types/partnersType"; + +// Helpers +import { getPartnerSliderData } from "../../helpers/apiRequests"; + +// const partnersData: string[] = [tps, samsung, mi, dragon]; const Partners = () => { + // State + const [partnerData, setPartnerData]: [ + partnersType[], + React.Dispatch> + ] = useState([{ id: 0, note: "", partner: "" }]); + + // Effect + useEffect(() => { + getPartnerSliderData(setPartnerData); + }, []); + return (
@@ -36,15 +51,17 @@ const Partners = () => { prevEl: ".slider-prev", }} > - {partnersData.map((image) => { - return ( - -
- -
- - ); - })} + {partnerData + ? partnerData.map((image: partnersType) => { + return ( + +
+ +
+ + ); + }) + : ""}
diff --git a/src/context/LoaderContext.ts b/src/context/LoaderContext.ts new file mode 100644 index 0000000..1e7567f --- /dev/null +++ b/src/context/LoaderContext.ts @@ -0,0 +1,3 @@ +import { createContext } from "react"; + +export const LoaderContext = createContext({}); diff --git a/src/helpers/apiRequests.ts b/src/helpers/apiRequests.ts new file mode 100644 index 0000000..79bde32 --- /dev/null +++ b/src/helpers/apiRequests.ts @@ -0,0 +1,21 @@ +// links +import axios from "axios"; +import { SlideProps } from "../types/mainSliderSlide"; +import { partnersType } from "../types/partnersType"; +import { sliderDataUrl, partners } from "../links"; + +export const getMainSliderData = ( + setState: React.Dispatch +): void => { + axios.get(sliderDataUrl).then((res) => { + setState(res.data.data); + }); +}; + +export const getPartnerSliderData = ( + setState: React.Dispatch +): void => { + axios.get(partners).then((res) => { + setState(res.data.data); + }); +}; diff --git a/src/links.ts b/src/links.ts new file mode 100644 index 0000000..9f9b653 --- /dev/null +++ b/src/links.ts @@ -0,0 +1,3 @@ +export const hosting = "http://tkf.com.tm"; +export const sliderDataUrl = hosting + "/api/v1/sliders"; +export const partners = hosting + "/api/v1/partners"; diff --git a/src/types/mainSliderSlide.ts b/src/types/mainSliderSlide.ts index 66cd46b..52460b4 100644 --- a/src/types/mainSliderSlide.ts +++ b/src/types/mainSliderSlide.ts @@ -1,8 +1,8 @@ export interface SlideProps { - slideImg: string; - slideTitle: string; - slideText: string; - slideLink: string; + id: number; + header: string; + txt: string; + img: string; } // Used in MainSlide.tsx and its' child component MainSliderSlide.tsx diff --git a/src/types/partnersType.ts b/src/types/partnersType.ts new file mode 100644 index 0000000..99e32e6 --- /dev/null +++ b/src/types/partnersType.ts @@ -0,0 +1,5 @@ +export interface partnersType { + id: number; + note: string; + partner: string; +}