further api integrations

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

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

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;

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

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

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

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

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>
             ) : (

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

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;
+    }
+  }
 }

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