From 7dfee09361a7c38d2e996cac28a67e3e704fd469 Mon Sep 17 00:00:00 2001
From: VividTruthKeeper <mr.aydogdy02@gmail.com>
Date: Fri, 19 Aug 2022 23:17:50 +0500
Subject: [PATCH] api fetch type fixed

---
 src/components/global/VideoPlayer.tsx   |  6 ++++--
 src/components/main/CalendarSection.tsx | 22 +++++++++++++++-------
 src/pages/AboutUs.tsx                   | 15 ++++++++++++---
 3 files changed, 31 insertions(+), 12 deletions(-)

diff --git a/src/components/global/VideoPlayer.tsx b/src/components/global/VideoPlayer.tsx
index 2d834b8..37b1ada 100644
--- a/src/components/global/VideoPlayer.tsx
+++ b/src/components/global/VideoPlayer.tsx
@@ -6,9 +6,11 @@ import { hosting } from "../../links";
 import PlayIcon from "./PlayIcon";
 
 // Types
-import { playerInterface } from "../../types/players";
+interface Props {
+  videoUrl: string;
+}
 
-const VideoPlayer = ({ videoUrl }: playerInterface) => {
+const VideoPlayer = ({ videoUrl }: Props) => {
   return (
     <div className="player">
       <ReactPlayer
diff --git a/src/components/main/CalendarSection.tsx b/src/components/main/CalendarSection.tsx
index c922a7a..55ac992 100644
--- a/src/components/main/CalendarSection.tsx
+++ b/src/components/main/CalendarSection.tsx
@@ -1,5 +1,5 @@
 // Modules
-import { useState, useEffect } from "react";
+import React, { useState, useEffect } from "react";
 import { Swiper, SwiperSlide } from "swiper/react";
 import "swiper/css";
 import { v4 as uuidv4 } from "uuid";
@@ -11,6 +11,7 @@ import Calendar from "../global/Calendar";
 
 // Types
 import { playerType } from "../../types/players";
+import { Video } from "../../types/video";
 
 // Helpers
 import { getVideos } from "../../helpers/apiRequests";
@@ -22,14 +23,21 @@ import useMediaQuery from "../../hooks/useMediaQuery";
 
 const CalendarSection = () => {
   const [video, setVideo]: playerType = useState("");
-  const [videoData, setVideoData]: any = useState();
+  const [videoData, setVideoData]: [Video[], React.Dispatch<Video[]>] =
+    useState([
+      {
+        id: -1,
+        video: "",
+        poster: "",
+      },
+    ]);
+
   const widthBounds: boolean = useMediaQuery("(max-width: 750px)");
+
   useEffect(() => {
-    getVideos((res: any) => {
-      setVideoData(res);
-      setVideo(res[0].video);
-    });
+    getVideos(setVideoData, setVideo);
   }, []);
+
   return (
     <section className="calendars-outer">
       <div className="container">
@@ -52,7 +60,7 @@ const CalendarSection = () => {
                 slidesPerView={widthBounds ? 2 : 3}
                 loop={false}
               >
-                {videoData
+                {videoData[0].id !== -1
                   ? videoData.map((vid: any) => {
                       return (
                         <SwiperSlide key={uuidv4()}>
diff --git a/src/pages/AboutUs.tsx b/src/pages/AboutUs.tsx
index 2d7cc97..7a3470d 100644
--- a/src/pages/AboutUs.tsx
+++ b/src/pages/AboutUs.tsx
@@ -16,16 +16,25 @@ import VideoPlayer from "../components/global/VideoPlayer";
 import SectionTitle from "../components/global/SectionTitle";
 import TeamSlider from "../components/about_us/TeamSlider";
 
+// Types
+import { Video } from "../types/video";
+
 const AboutUs = () => {
   const [about, setAbout]: [any, React.Dispatch<any>] = useState();
-  const [video, setVideo]: [any, React.Dispatch<any>] = useState();
+  const [video, setVideo]: [Video[], React.Dispatch<Video[]>] = useState([
+    {
+      id: -1,
+      video: "",
+      poster: "",
+    },
+  ]);
 
   useEffect(() => {
     window.scrollTo(0, 0);
   }, []);
   useEffect(() => {
     getAbout(setAbout);
-    getVideos(setVideo);
+    getVideos(setVideo, () => null);
   }, []);
 
   const breakpoint = useMediaQuery("(max-width: 500px)");
@@ -158,7 +167,7 @@ const AboutUs = () => {
           </div>
           <div className="about-us-video">
             <SectionTitle title="Вводный видео ролик" />
-            {video ? (
+            {video[0].id !== -1 ? (
               <VideoPlayer videoUrl={video[0].video} />
             ) : (
               <Skeleton highlightColor={highlightColor} height={"40rem"} />