From eb7a99d0cf1cf91cdad808628e30051b0381812e Mon Sep 17 00:00:00 2001
From: VividTruthKeeper <mr.aydogdy02@gmail.com>
Date: Sun, 17 Jul 2022 17:56:34 +0500
Subject: [PATCH] further api integrations

---
 src/App.tsx                                   |  2 +-
 src/components/event_item/EventAside.tsx      |  2 +-
 .../event_item/EventContentSkeleton.tsx       | 24 +++++++++++++++
 src/components/global/Event.tsx               | 29 ++-----------------
 src/components/main/EventsSection.tsx         |  2 +-
 src/helpers/apiRequests.ts                    | 22 ++++++++++++++
 src/links.ts                                  |  2 ++
 src/pages/EventItem.tsx                       | 29 +++++++++++++------
 src/pages/Events.tsx                          |  2 +-
 src/styles/_event-item.scss                   | 24 +++++++++++++++
 src/types/eventProps.ts                       |  2 +-
 11 files changed, 99 insertions(+), 41 deletions(-)
 create mode 100644 src/components/event_item/EventContentSkeleton.tsx

diff --git a/src/App.tsx b/src/App.tsx
index f2d97b3..7e71b6c 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -47,7 +47,7 @@ const App = () => {
             <Route path="/news" element={<Events />} />
             <Route path="/rating" element={<Rating />} />
             <Route path="/profile" element={<Profile />} />
-            <Route path="/event" element={<EventItem />} />
+            <Route path="/event/:eventId" element={<EventItem />} />
             <Route path="/structure" element={<Structure />} />
             <Route path="/contact" element={<Contacts />} />
             <Route path="/calendar" element={<Calendar />} />
diff --git a/src/components/event_item/EventAside.tsx b/src/components/event_item/EventAside.tsx
index 8552572..7783204 100644
--- a/src/components/event_item/EventAside.tsx
+++ b/src/components/event_item/EventAside.tsx
@@ -52,11 +52,11 @@ const EventAside = () => {
               return (
                 <Event
                   key={uuidv4()}
+                  id={evnt.id}
                   image={evnt.featured_images[0].path}
                   title={evnt.title}
                   time={"00:00"}
                   date={evnt.published_at}
-                  content={evnt.content_html}
                 />
               );
             })
diff --git a/src/components/event_item/EventContentSkeleton.tsx b/src/components/event_item/EventContentSkeleton.tsx
new file mode 100644
index 0000000..7652c9f
--- /dev/null
+++ b/src/components/event_item/EventContentSkeleton.tsx
@@ -0,0 +1,24 @@
+const EventContentSkeleton = () => {
+  return (
+    <div className="eventitem-content skeleton">
+      <div className="eventitem-top">
+        <p></p>
+        <h2></h2>
+      </div>
+      <div className="eventitem-bottom">
+        <div className="eventitem-img"></div>
+        <div className="eventitem-content">
+          <p></p>
+          <p></p>
+          <p></p>
+          <p></p>
+          <p></p>
+          <p></p>
+          <p></p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default EventContentSkeleton;
diff --git a/src/components/global/Event.tsx b/src/components/global/Event.tsx
index bb921b1..920d9c8 100644
--- a/src/components/global/Event.tsx
+++ b/src/components/global/Event.tsx
@@ -1,7 +1,5 @@
 // Modules
 import { Link } from "react-router-dom";
-import { useContext } from "react";
-import { EventContext } from "../../context/LoaderContext";
 
 // Components
 import EventDate from "./EventDate";
@@ -9,32 +7,9 @@ import EventDate from "./EventDate";
 // Types
 import { eventProp } from "../../types/eventProps";
 
-const Event = ({ image, time, date, title, content }: eventProp) => {
-  const { setEventData } = useContext(EventContext);
+const Event = ({ id, image, time, date, title }: eventProp) => {
   return (
-    <Link
-      to={"/event"}
-      className="event"
-      onClick={() => {
-        localStorage.setItem(
-          "event",
-          JSON.stringify({
-            image: image,
-            time: time,
-            date: date,
-            title: title,
-            content: content,
-          })
-        );
-        setEventData({
-          image: image,
-          time: time,
-          date: date,
-          title: title,
-          content: content,
-        });
-      }}
-    >
+    <Link to={`/event/${id}`} className="event">
       <div className="event-top">
         <div className="event-img">
           <img src={image} alt="" />
diff --git a/src/components/main/EventsSection.tsx b/src/components/main/EventsSection.tsx
index 8cb9152..c2fee7a 100644
--- a/src/components/main/EventsSection.tsx
+++ b/src/components/main/EventsSection.tsx
@@ -56,11 +56,11 @@ const EventsSection = () => {
                   return (
                     <Event
                       key={uuidv4()}
+                      id={evnt.id}
                       image={evnt.featured_images[0].path}
                       title={evnt.title}
                       time={"00:00"}
                       date={evnt.published_at}
-                      content={evnt.content_html}
                     />
                   );
                 })
diff --git a/src/helpers/apiRequests.ts b/src/helpers/apiRequests.ts
index ffbc8f6..5f785c7 100644
--- a/src/helpers/apiRequests.ts
+++ b/src/helpers/apiRequests.ts
@@ -10,7 +10,9 @@ import {
   postsMain,
   postsAll,
   postsAside,
+  post,
 } from "../links";
+import React from "react";
 
 export const getMainSliderData = (
   setState: React.Dispatch<SlideProps[]>
@@ -60,3 +62,23 @@ export const getAsidePosts = (setState: eventType[1]): void => {
     })
     .catch();
 };
+
+export const getEvent = (
+  id: string | undefined,
+  setState: eventType[1],
+  setLoader: React.Dispatch<boolean>
+): void => {
+  axios
+    .get(`${post}/${id}?locale=ru`)
+    .then((res) => {
+      setState(res.data.data);
+      setTimeout(() => {
+        setLoader(false);
+      }, 1000);
+    })
+    .catch(() => {
+      setTimeout(() => {
+        setLoader(false);
+      }, 1000);
+    });
+};
diff --git a/src/links.ts b/src/links.ts
index 17d5000..8484421 100644
--- a/src/links.ts
+++ b/src/links.ts
@@ -9,3 +9,5 @@ export const postsAll: string =
 
 export const postsAside: string =
   hosting + "/api/v1/posts?locale=ru&per_page=4&sort_order=asc";
+
+export const post: string = hosting + "/api/v1/posts"; // /id ? locale
diff --git a/src/pages/EventItem.tsx b/src/pages/EventItem.tsx
index 13630ab..e41c39e 100644
--- a/src/pages/EventItem.tsx
+++ b/src/pages/EventItem.tsx
@@ -1,10 +1,14 @@
 // Modules
-import { useContext, useEffect } from "react";
-import { EventContext } from "../context/LoaderContext";
+import { useEffect, useState } from "react";
+import { useParams } from "react-router-dom";
 
 // Components
 import EventAside from "../components/event_item/EventAside";
 import EventDate from "../components/global/EventDate";
+import EventContentSkeleton from "../components/event_item/EventContentSkeleton";
+
+// Helpers
+import { getEvent } from "../helpers/apiRequests";
 
 // Link
 
@@ -12,28 +16,35 @@ const EventItem = () => {
   useEffect(() => {
     window.scrollTo(0, 0);
   }, []);
-  const { eventData } = useContext(EventContext);
+  const [loader, setLoader] = useState(true);
+  const [eventData, setEventData]: any = useState();
+  const { eventId } = useParams();
+  useEffect(() => {
+    setLoader(true);
+    getEvent(eventId, setEventData, setLoader);
+  }, [eventId]);
+
   return (
     <main className="eventitem">
       <div className="container">
         <div className="eventitem-inner">
           <div className="eventitem-content">
-            {eventData ? (
+            {eventData && !loader ? (
               <div className="eventitem-top">
-                <EventDate time={eventData.time} date={eventData.date} />
+                <EventDate time={"00:00"} date={eventData.published_at} />
                 <h2>{eventData.title}</h2>
               </div>
             ) : (
-              ""
+              <EventContentSkeleton />
             )}
-            {eventData ? (
+            {eventData && !loader ? (
               <div className="eventitem-bottom">
                 <div className="eventitem-img">
-                  <img src={eventData.image} alt="" />
+                  <img src={eventData.featured_images[0].path} alt="" />
                 </div>
                 <div
                   className="eventitem-content"
-                  dangerouslySetInnerHTML={{ __html: eventData.content }}
+                  dangerouslySetInnerHTML={{ __html: eventData.content_html }}
                 ></div>
               </div>
             ) : (
diff --git a/src/pages/Events.tsx b/src/pages/Events.tsx
index 60d6149..d5812d9 100644
--- a/src/pages/Events.tsx
+++ b/src/pages/Events.tsx
@@ -63,11 +63,11 @@ const Events = () => {
                   return (
                     <Event
                       key={uuidv4()}
+                      id={evnt.id}
                       image={evnt.featured_images[0].path}
                       title={evnt.title}
                       time={"00:00"}
                       date={evnt.published_at}
-                      content={evnt.content_html}
                     />
                   );
                 })
diff --git a/src/styles/_event-item.scss b/src/styles/_event-item.scss
index 4db42ce..ab37164 100644
--- a/src/styles/_event-item.scss
+++ b/src/styles/_event-item.scss
@@ -64,4 +64,28 @@
   display: flex;
   flex-direction: column;
   gap: 4rem;
+
+  &.skeleton {
+    span,
+    h2,
+    p {
+      height: 2.2rem;
+      width: 100%;
+      padding: 1rem 0;
+      @include shineLoad;
+    }
+
+    h2 {
+      height: 3rem;
+    }
+
+    .eventitem-content {
+      gap: 2rem;
+    }
+
+    .eventitem-img {
+      height: 50rem;
+      @include shineLoad;
+    }
+  }
 }
diff --git a/src/types/eventProps.ts b/src/types/eventProps.ts
index 4fc714b..a58f571 100644
--- a/src/types/eventProps.ts
+++ b/src/types/eventProps.ts
@@ -35,11 +35,11 @@ export interface eventProps {
 export type eventType = [eventProps, React.Dispatch<any>];
 
 export interface eventProp {
+  id: number;
   image: string;
   title: string;
   time: string;
   date: string;
-  content: string;
 }
 
 // Used in EventsSection.tsx and its' child component Event.tsx