Add Link tag to EventCard

SpaceyaTech · Apr 11, 2024 · 3c7f328 · 3c7f328
1 parent 0cdc2f3
commit 3c7f328
Show file tree

Hide file tree

Showing 10 changed files with 152 additions and 328 deletions.
diff --git a/src/APP/index.js b/src/APP/index.js
@@ -15,7 +15,6 @@ import Blogs from "./pages/blogs/Blogs";
 import IndividualChapter from "./pages/chapter/pages/IndividualChapter";
 import CommunityPage from "./pages/community/CommunityPage";
 import SingleEvent from "./pages/community/sections/eventsSection/SingleEvents/SingleEvent";
-import SingleEvent2 from "./pages/community/sections/eventsSection/SingleEvents/SingleEvent2";
 import DonatePage from "./pages/donate/DonatePage";
 import SingleProductDonation from "./pages/donate/pages/SingleProductDonatePage";
 import Error400 from "./pages/errorPages/Error400";
@@ -55,7 +54,6 @@ export {
   CommunityPage,
   DonatePage,
   SingleEvent,
-  SingleEvent2,
   Blogs,
   Blog,
   Blog2,

diff --git a/src/APP/pages/community/sections/eventsSection/SingleEvents/SingleEvent.jsx b/src/APP/pages/community/sections/eventsSection/SingleEvents/SingleEvent.jsx
diff --git a/src/APP/pages/community/sections/eventsSection/SingleEvents/SingleEvent2.jsx b/src/APP/pages/community/sections/eventsSection/SingleEvents/SingleEvent2.jsx
diff --git a/src/APP/pages/community/sections/eventsSection/SingleEvents/sections/EventCard.jsx b/src/APP/pages/community/sections/eventsSection/SingleEvents/sections/EventCard.jsx
@@ -1,12 +1,15 @@
+import PropTypes from "prop-types";
 import React from "react";
 
 import LocationTag from "./LocationTag";
 import { eventCardPhysical, eventCardVirtual } from "@/assets/images/community";
+import { Link } from "react-router-dom";
 
 function EventCard({ event }) {
   const isVirtual = event?.mode === "Virtual";
   return (
-    <article
+    <Link
+      to={`/events/${event?.id}`}
       className="w-full h-[530px] flex flex-col rounded-xl bg-cover bg-no-repeat overflow-hidden"
       style={{
         backgroundImage: `url(${
@@ -180,8 +183,47 @@ function EventCard({ event }) {
           Join
         </button>
       </div>
-    </article>
+    </Link>
   );
 }
 
 export default EventCard;
+
+EventCard.propTypes = {
+  event: PropTypes.shape({
+    id: PropTypes.number.isRequired,
+    name: PropTypes.string.isRequired,
+    about: PropTypes.string.isRequired,
+    link: PropTypes.string.isRequired,
+    location: PropTypes.string.isRequired,
+    mode: PropTypes.string.isRequired,
+    city: PropTypes.string.isRequired,
+    country: PropTypes.string.isRequired,
+    start_date: PropTypes.string.isRequired,
+    end_date: PropTypes.string.isRequired,
+    start_time: PropTypes.string.isRequired,
+    end_time: PropTypes.string.isRequired,
+    poster: PropTypes.string.isRequired,
+    category: PropTypes.shape({
+      id: PropTypes.number.isRequired,
+      name: PropTypes.string.isRequired,
+    }).isRequired,
+    chapter: PropTypes.shape({
+      id: PropTypes.number.isRequired,
+      name: PropTypes.string.isRequired,
+      about: PropTypes.string.isRequired,
+      city: PropTypes.string.isRequired,
+      country: PropTypes.string.isRequired,
+      socials: PropTypes.shape({
+        Twitter: PropTypes.string,
+      }),
+      members: PropTypes.number.isRequired,
+    }).isRequired,
+    created_at: PropTypes.string.isRequired,
+    updated_at: PropTypes.string.isRequired,
+  }),
+};
+
+EventCard.defaultProps = {
+  event: {},
+};
diff --git a/src/APP/pages/community/sections/eventsSection/SingleEvents/sections/EventDescription.jsx b/src/APP/pages/community/sections/eventsSection/SingleEvents/sections/EventDescription.jsx
@@ -1,3 +1,4 @@
+import PropTypes from "prop-types";
 import React from "react";
 
 function EventDescription({ eventDesc }) {
@@ -9,3 +10,7 @@ function EventDescription({ eventDesc }) {
 }
 
 export default EventDescription;
+
+EventDescription.propTypes = {
+  eventDesc: PropTypes.string.isRequired,
+};
diff --git a/src/APP/pages/community/sections/eventsSection/SingleEvents/sections/Hero.jsx b/src/APP/pages/community/sections/eventsSection/SingleEvents/sections/Hero.jsx
@@ -1,6 +1,5 @@
-/* eslint-disable import/extensions */
-/* eslint-disable import/no-unresolved */
-/* eslint-disable react/prop-types */
+/* eslint-disable react/no-unknown-property */
+import PropTypes from "prop-types";
 import React from "react";
 import { eventsPhysicalBg, eventsVirtualBg } from "@/assets/images/community";
 
@@ -188,3 +187,42 @@ ${isVirtual ? "text-white" : "text-green-header"}
 }
 
 export default Hero;
+
+Hero.propTypes = {
+  event: PropTypes.shape({
+    id: PropTypes.number.isRequired,
+    name: PropTypes.string.isRequired,
+    about: PropTypes.string.isRequired,
+    link: PropTypes.string.isRequired,
+    location: PropTypes.string.isRequired,
+    mode: PropTypes.string.isRequired,
+    city: PropTypes.string.isRequired,
+    country: PropTypes.string.isRequired,
+    start_date: PropTypes.string.isRequired,
+    end_date: PropTypes.string.isRequired,
+    start_time: PropTypes.string.isRequired,
+    end_time: PropTypes.string.isRequired,
+    poster: PropTypes.string.isRequired,
+    category: PropTypes.shape({
+      id: PropTypes.number.isRequired,
+      name: PropTypes.string.isRequired,
+    }).isRequired,
+    chapter: PropTypes.shape({
+      id: PropTypes.number.isRequired,
+      name: PropTypes.string.isRequired,
+      about: PropTypes.string.isRequired,
+      city: PropTypes.string.isRequired,
+      country: PropTypes.string.isRequired,
+      socials: PropTypes.shape({
+        Twitter: PropTypes.string,
+      }),
+      members: PropTypes.number.isRequired,
+    }).isRequired,
+    created_at: PropTypes.string.isRequired,
+    updated_at: PropTypes.string.isRequired,
+  }),
+};
+
+Hero.defaultProps = {
+  event: {},
+};
diff --git a/src/APP/pages/community/sections/eventsSection/SingleEvents/sections/LocationTag.jsx b/src/APP/pages/community/sections/eventsSection/SingleEvents/sections/LocationTag.jsx
@@ -1,3 +1,4 @@
+import PropTypes from "prop-types";
 import React from "react";
 
 function LocationTag({ isVirtual }) {
@@ -43,3 +44,7 @@ function LocationTag({ isVirtual }) {
 }
 
 export default LocationTag;
+
+LocationTag.propTypes = {
+  isVirtual: PropTypes.bool.isRequired,
+};
diff --git a/src/APP/pages/community/sections/eventsSection/SingleEvents/sections/SimilarEvents.jsx b/src/APP/pages/community/sections/eventsSection/SingleEvents/sections/SimilarEvents.jsx
@@ -1,4 +1,5 @@
-import React from "react";
+import PropTypes from "prop-types";
+import React, { useEffect } from "react";
 import { useParams } from "react-router-dom";
 
 import { useEventsData } from "../../../../../../../hooks/Queries/eventsSection/useEvents";
@@ -12,32 +13,50 @@ function SimilarEvents({ eventCategory }) {
     isError,
     isPending,
     isSuccess,
+    refetch: refetchSimilarEvents,
   } = useEventsData(eventCategory);
 
+  useEffect(() => {
+    refetchSimilarEvents();
+  }, [refetchSimilarEvents, id]);
+
   const similarEvents = eventsData?.results.filter(
     (event) => Number(event.id) !== Number(id)
   );
 
   return (
     <>
-      {isError && <p>Error fetching similar events!</p>}
+      {isError && (
+        <p className="mx-auto py-6 max-w-1216 w-full flex-center text-red-400 font-bold text-lg text-center">
+          Error fetching similar events!
+        </p>
+      )}
       {isPending && (
         <div className="flex flex-col items-center justify-center gap-4 py-10">
           <Loader />
           <p className="text-lg font-medium text-primary">Loading event...</p>
         </div>
       )}
-      {isSuccess && eventsData.results.length > 0 ? (
-        <div className="mx-auto my-6 max-w-1216 w-full grid grid-cols-1 sm:grid-cols-2 place-content-center lg:grid-cols-3 gap-8 justify-between px-2 md:px-4 xl:px-0">
-          {similarEvents.map((event) => (
-            <EventCard key={event.id} event={event} />
-          ))}
-        </div>
-      ) : (
-        <p>No Similar Events</p>
+      {Array.isArray(similarEvents) && similarEvents.length === 0 && (
+        <p className="mx-auto py-6 max-w-1216 w-full flex-center font-bold text-lg text-center">
+          No Similar Events!
+        </p>
       )}
+      {isSuccess &&
+        Array.isArray(similarEvents) &&
+        similarEvents.length > 0 && (
+          <div className="mx-auto my-6 max-w-1216 w-full grid grid-cols-1 sm:grid-cols-2 place-content-center lg:grid-cols-3 gap-8 justify-between px-2 md:px-4 xl:px-0">
+            {similarEvents.map((event) => (
+              <EventCard key={event.id} event={event} />
+            ))}
+          </div>
+        )}
     </>
   );
 }
 
 export default SimilarEvents;
+
+SimilarEvents.propTypes = {
+  eventCategory: PropTypes.string.isRequired,
+};
diff --git a/src/APP/pages/community/sections/index.js b/src/APP/pages/community/sections/index.js
@@ -2,7 +2,6 @@ export { default as WelcomeSection } from "./WelcomeSection";
 export { default as ChaptersSection } from "./chaptersSection/ChaptersSection";
 export { default as ChapterCard } from "./chaptersSection/ChapterCard";
 export { default as SingleEvent } from "./eventsSection/SingleEvents/SingleEvent";
-export { default as SingleEvent2 } from "./eventsSection/SingleEvents/SingleEvent2";
 export { default as GallerySection } from "./gallerySection/GallerySection";
 export { default as PartnerCard } from "./partnerSection/PartnerCard";
 export { default as PartnerSection } from "./partnerSection/PartnerSection";
diff --git a/src/router/index.jsx b/src/router/index.jsx
@@ -23,8 +23,7 @@ import {
   ResetPassword,
   Resources,
   SignUp,
-  // SingleEvent,
-  SingleEvent2,
+  SingleEvent,
   Blogs,
 } from "../APP";
 
@@ -87,8 +86,8 @@ const router = createBrowserRouter([
         element: <Checkout />,
       },
       {
-        path: "/events/:id", // New route path
-        element: <SingleEvent2 />,
+        path: "/events/:id",
+        element: <SingleEvent />,
       },
       {
         path: "/resources",