Merge pull request #21 from she-code-africa/fix-leak

Fix leak

package.json

@@ -21,12 +21,14 @@
     "react-scripts": "5.0.1",
     "react-slick": "^0.30.2",
     "react-toastify": "^10.0.5",
+    "serve": "^14.2.3",
     "slick-carousel": "^1.8.1",
     "web-vitals": "^2.1.4",
     "yup": "^1.4.0"
   },
   "scripts": {
-    "start": "react-scripts start",
+    "start": "serve -s build",
+    "dev": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"

src/assets/images/index.jsx

@@ -2,12 +2,6 @@ import scaLogo from "./SCA-LOGO.png";
 import cpu from "./activities/Cpu.png";
 import codingHeroImage from "./activities/codingHeroImage.png";
 import flower from "./activities/Group.png";
-import cardPhoto from "./activities/cardPhoto.png";
-import cardPhoto2 from "./activities/cardPhoto2.png";
-import cardPhoto3 from "./activities/cardPhoto3.png";
-import cardPhoto4 from "./activities/cardPhoto4.png";
-import cardPhoto5 from "./activities/cardPhoto5.png";
-import cardPhoto6 from "./activities/cardPhoto6.png";
 import upcomingEventPhoto from "./activities/eventsPhoto.png";
 import girlChild from "./activities/girlChild.png";
 import quotes from "./activities/Quotes.png";
@@ -29,12 +23,6 @@ export {
   cpu,
   codingHeroImage,
   flower,
-  cardPhoto,
-  cardPhoto2,
-  cardPhoto3,
-  cardPhoto4,
-  cardPhoto5,
-  cardPhoto6,
   upcomingEventPhoto,
   girlChild,
   quotes,

src/components/Recaptcha.jsx

@@ -1,3 +1,4 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import React, { useEffect, useRef } from "react";
 
 function GoogleRecaptcha({ onToken }) {

src/components/activities/UpcomingEvents.jsx

@@ -30,6 +30,11 @@ const UpcomingEvents = ({ activityTitle }) => {
     queryFn: () => getActivityEvents(activityId),
     enabled: !!activityId && !isLoading,
   });
+
+  const filteredEvents =
+    activityData &&
+    activityData.length > 0 &&
+    activityData.filter((event) => event.state === "published");
   return (
     <>
       <InfoCardHeader
@@ -39,10 +44,10 @@ const UpcomingEvents = ({ activityTitle }) => {
 
       {isEventLoading ? (
         <ApiLoading />
-      ) : !!activityData && activityData.length > 0 ? (
+      ) : filteredEvents && filteredEvents.length > 0 ? (
         <EventsSlider
           settings={upcomingEventSettings}
-          sliderData={activityData}
+          sliderData={filteredEvents}
           imageH="h-[403px]"
         />
       ) : (

src/components/activities/coding-page/TestimonialsSlider.jsx

@@ -1,7 +1,6 @@
 import React from "react";
 import { quotes } from "../../../assets/images";
 import Slider from "react-slick";
-// import { testimonialSliderContent } from "../../../utils/appData";
 import { FaArrowLeftLong, FaArrowRightLong } from "react-icons/fa6";
 import { useQuery } from "@tanstack/react-query";
 import { getAllTestimonials } from "../../../services/queries";

src/components/activities/coding-page/index.jsx

@@ -5,20 +5,16 @@ import {
   InfoCard,
 } from "../../shared-components";
 import { codingHeroImage } from "../../../assets/images";
-// import { coursesSlider } from "../../../utils/appData";
 import UpcomingEvents from "../UpcomingEvents";
 import ReadyToCode from "../ReadyToCode";
-
 import { useQuery } from "@tanstack/react-query";
 import {
   getActivityCourses,
   getAllActivities,
 } from "../../../services/queries";
 import { ApiLoading, EmptyResponse } from "../../index";
 import { codingHeroSubContent } from "../../../utils/appData";
-// import useInfiniteScroll from "react-easy-infinite-scroll-hook";
 import InfiniteScroll from "react-infinite-scroll-component";
-// import InfoCard from "../../shared-components/activities/info-card/InfoCard";
 
 const CodingPageComponent = () => {
   const {
@@ -94,11 +90,10 @@ const CodingPageComponent = () => {
             <UpcomingEvents activityTitle="coding" />
           </div> */}
         </section>
-        <section>
-        </section>
+        <section></section>
         <section>
           <div className=" w-[100%] ">
-            <ReadyToCode  />
+            <ReadyToCode />
           </div>
         </section>
         <section className="w-[90%] max-w-[1280px] mx-auto ">
@@ -129,8 +124,6 @@ const CodingPageComponent = () => {
                         title={item.title}
                         cardImage={item.image}
                         paragraph={item.description}
-                        index={item.index}
-                        // imageH={imageH}
                         link={item.link}
                       />
                     ))}

src/components/activities/game-development/index.jsx

@@ -6,7 +6,6 @@ import {
 } from "../../shared-components";
 import InfiniteScroll from "react-infinite-scroll-component";
 import { gameDevHeroImage } from "../../../assets/images";
-// import { coursesSlider } from "../../../utils/appData";
 import UpcomingEvents from "../UpcomingEvents";
 import { useQuery } from "@tanstack/react-query";
 import {
@@ -104,8 +103,6 @@ const GameDevelopmentPage = () => {
                       title={item.title}
                       cardImage={item.image}
                       paragraph={item.description}
-                      index={item.index}
-                      // imageH={imageH}
                       link={item.link}
                     />
                   ))}

src/components/activities/robotics/index.jsx

@@ -6,7 +6,6 @@ import {
 } from "../../shared-components";
 import InfiniteScroll from "react-infinite-scroll-component";
 import { roboticsHeroImage } from "../../../assets/images";
-// import { coursesSlider } from "../../../utils/appData";
 import UpcomingEvents from "../UpcomingEvents";
 
 import { useQuery } from "@tanstack/react-query";
@@ -46,8 +45,6 @@ const RoboticsPageComponent = () => {
     enabled: !!activityId && !isLoading,
   });
 
-  console.log({ activityCourses });
-
   // inifinite scrolling
   const filteredCourses =
     activityCourses &&
@@ -110,8 +107,6 @@ const RoboticsPageComponent = () => {
                       title={item.title}
                       cardImage={item.image}
                       paragraph={item.description}
-                      index={item.index}
-                      // imageH={imageH}
                       link={item.link}
                     />
                   ))}

src/components/index.jsx

@@ -3,7 +3,6 @@ import CodingPageComponent from "./activities/coding-page";
 import RoboticsPageComponent from "./activities/robotics";
 import GameDevelopmentPage from "./activities/game-development";
 import ApiLoading from "./loaders/ApiLoading";
-import ErrorComponent from "./error/ErrorComponent";
 import EmptyResponse from "./empty-repsonse";
 import ContactUsComponent from "./contact-us";
 import PrimaryInput from "./inputs/PrimaryInput";
@@ -14,7 +13,6 @@ export {
   RoboticsPageComponent,
   GameDevelopmentPage,
   ApiLoading,
-  ErrorComponent,
   EmptyResponse,
   ContactUsComponent,
   PrimaryInput,

src/components/modals/NewsLetter.jsx

@@ -24,7 +24,7 @@ const NewsLetter = ({ setShowNewsLetterModal }) => {
   } = useForm({
     resolver: yupResolver(schema),
   });
-  const onsubmit = (data) => console.log(data);
+  const onsubmit = (data) => console.log("submitted form");
   return (
     <section className="fixed bg-[rgba(0,0,0,0.5)] top-0 bottom-0 left-0 right-0 z-[3] flex items-center justify-center py-5">
       <div className="bg-white max-w-[500px] w-[90%] mx-auto py-4 px-4">

src/components/navbar/MenuLinks.jsx

@@ -10,7 +10,7 @@ const MenuLinks = ({ menuItem, isOpen, onToggle }) => {
       {menuItem.isDropdown ? (
         <li className={`text-base font-medium cursor-pointer relative `}>
           <span
-            className={`flex gap-1 items-center ${
+            className={`flex gap-1 items-center hover:text-primaryPink ${
               pathname.includes(menuItem.pathname.toLowerCase()) &&
               "text-primaryPink font-bold"
             }`}
@@ -47,7 +47,7 @@ const MenuLinks = ({ menuItem, isOpen, onToggle }) => {
         </li>
       ) : (
         <li
-          className={`text-base font-medium ${
+          className={`text-base font-medium hover:text-primaryPink ${
             pathname === menuItem.path && "text-primaryPink font-bold"
           }`}
         >

src/components/shared-components/activities/info-card/InfoCard.jsx

@@ -4,7 +4,6 @@ import { Link } from "react-router-dom";
 import { FaAngleRight } from "react-icons/fa6";
 
 const InfoCard = ({
-  index,
   title,
   paragraph,
   cardImage,

src/components/shared-components/activities/info-card/InfoCardSlider.jsx

@@ -14,7 +14,6 @@ const InfoCardSlider = ({ sliderData, imageH, settings }) => {
                   title={item.title}
                   cardImage={item.image}
                   paragraph={item.description}
-                  index={item.index}
                   imageH={imageH}
                   link={item.link}
                 />

src/pages/stem-clubs/page.jsx

@@ -5,7 +5,6 @@ import ActivitiesSection from "../../components/shared-components/activities/act
 // import Schools from "../../components/schools";
 import { InfoCardHeader } from "../../components/shared-components";
 import ImpactStoryCard from "../../components/cards/impact-stories-card";
-// import { impactStories } from "../../utils/appData";
 import { clubStudentsImage, floralWhiteImage } from "../../assets/images";
 import { useQuery } from "@tanstack/react-query";
 import { getAllImpactStories } from "../../services/queries";