Merge pull request #2472 from airqo-platform/website-clean-air

Fix: Clean air forum 2024

Author: Baalmart

website2/next.config.mjs

@@ -38,7 +38,7 @@ const nextConfig = {
     return [
       {
         source: '/clean-air/forum',
-        destination: '/clean-air-forum/about',
+        destination: '/clean-air-forum/about?slug=clean-air-forum-2024',
         permanent: true,
       },
       {

website2/src/app/clean-air-forum/glossary/page.tsx

@@ -1,69 +1,67 @@
 'use client';
+
 import DOMPurify from 'dompurify';
 import Link from 'next/link';
 import React from 'react';
 
+import Loading from '@/components/loading';
 import { Divider } from '@/components/ui';
-import { useSelector } from '@/hooks/reduxHooks';
+import { NoData } from '@/components/ui';
+import { useForumData } from '@/context/ForumDataContext';
+import { ForumEvent } from '@/types/forum';
 import { isValidGlossaryContent } from '@/utils/glossaryValidator';
 import { renderContent } from '@/utils/quillUtils';
 import SectionDisplay from '@/views/Forum/SectionDisplay';
 
-const Page: React.FC = () => {
-  // Retrieve forum events and the selected event index from Redux.
-  const { events, selectedEventIndex } = useSelector((state) => state.forum);
+const GlossaryPage: React.FC = () => {
+  // Access data from the context.
+  const { selectedEvent, eventTitles } = useForumData();
 
-  if (events.length === 0) {
-    return null;
+  // If either is not available, show a loading state.
+  if (!selectedEvent || !eventTitles) {
+    return <Loading />;
   }
 
-  const selectedEvent = events[selectedEventIndex];
+  // Extract the events list from eventTitles.
+  // If eventTitles is an array, use it directly; otherwise, assume it's a ForumTitlesResponse.
+  const eventsList: ForumEvent[] = Array.isArray(eventTitles)
+    ? eventTitles
+    : eventTitles.forum_events;
 
-  // Utility function to create a slug from the event title.
-  const createSlug = (title: string) => {
-    return title.split(',')[0].trim().toLowerCase().replace(/\s+/g, '-');
-  };
+  if (eventsList.length === 0) {
+    return <NoData message="No events found" />;
+  }
 
-  // Render the main glossary content.
+  // Render the main glossary content using the selected event.
   const glossaryHTML = renderContent(selectedEvent.glossary_details);
   const showGlossaryMain = isValidGlossaryContent(glossaryHTML);
 
-  // Filter extra sections assigned to the "glossary" page.
-  const glossarySections = selectedEvent.sections?.filter((section: any) => {
-    if (!section.pages.includes('glossary')) return false;
-    const sectionHTML = renderContent(section.content);
-    return isValidGlossaryContent(sectionHTML);
-  });
-
   return (
     <div className="px-4 lg:px-0 prose max-w-none flex flex-col gap-6">
       <Divider className="bg-black p-0 m-0 h-[1px] w-full" />
 
-      {/* Clean Air Forum Events Section */}
+      {/* Clean Air Forum Events Section (Sidebar) */}
       <div className="flex flex-col md:flex-row py-6 md:space-x-8">
         {/* Left column: Heading */}
         <div className="md:w-1/3 mb-4 md:mb-0">
-          <h3 className="text-xl font-semibold">Clean Air Forum Events</h3>
+          <h1 className="text-2xl mt-4 font-semibold">
+            Clean Air Forum Events
+          </h1>
         </div>
-        {/* Right column: List of events */}
+        {/* Right column: List of event links */}
         <div className="md:w-2/3">
           <ul className="space-y-2">
-            {events.map((event, index) => {
-              const slug = createSlug(event.title);
-              const href = `/clean-air-forum/about?slug=${encodeURIComponent(slug)}`;
+            {eventsList.map((event) => {
+              // Use the unique_title directly in the link.
+              const href = `/clean-air-forum/about?slug=${encodeURIComponent(
+                event.unique_title,
+              )}`;
               return (
                 <li key={event.id}>
                   <Link
                     href={href}
                     target="_blank"
-                    onClick={(e) => {
-                      e.preventDefault();
-                      // Open the event page in a new tab.
-                      window.open(href, '_blank');
-                    }}
-                    className={`text-blue-600 hover:underline ${
-                      selectedEventIndex === index ? 'font-bold' : ''
-                    }`}
+                    className="text-blue-600 hover:underline"
                   >
                     {event.title}
                   </Link>
@@ -81,9 +79,9 @@ const Page: React.FC = () => {
           <div className="flex flex-col py-6 md:flex-row md:space-x-8">
             {/* Left column: Heading */}
             <div className="md:w-1/3 mb-4 md:mb-0">
-              <h2 className="text-2xl font-bold text-gray-900">
+              <h1 className="text-2xl mt-4 font-bold text-gray-900">
                 Clean Air Glossary
-              </h2>
+              </h1>
             </div>
             {/* Right column: Glossary content */}
             <div
@@ -97,10 +95,9 @@ const Page: React.FC = () => {
       )}
 
       {/* Additional Glossary Sections (if any) */}
-      {glossarySections && glossarySections.length > 0 && (
+      {selectedEvent.sections && selectedEvent.sections.length > 0 && (
         <>
-          <Divider className="bg-black p-0 m-0 h-[1px] w-full" />
-          {glossarySections.map((section: any) => (
+          {selectedEvent.sections.map((section: any) => (
             <SectionDisplay key={section.id} section={section} />
           ))}
         </>
@@ -109,4 +106,4 @@ const Page: React.FC = () => {
   );
 };
 
-export default Page;
+export default GlossaryPage;

website2/src/app/clean-air-forum/layout.tsx

@@ -1,6 +1,8 @@
+// components/layouts/CleanAirLayout.tsx
 'use client';
+
 import { useSearchParams } from 'next/navigation';
-import React, { ReactNode, useEffect } from 'react';
+import React, { ReactNode } from 'react';
 
 import Footer from '@/components/layouts/Footer';
 import Navbar from '@/components/layouts/Navbar';
@@ -9,70 +11,40 @@ import Loading from '@/components/loading';
 import { NoData } from '@/components/ui';
 import mainConfig from '@/configs/mainConfigs';
 import { ForumDataProvider } from '@/context/ForumDataContext';
-import { useDispatch, useSelector } from '@/hooks/reduxHooks';
-import { useForumEvents } from '@/hooks/useApiHooks';
-import { selectEvent, setEvents } from '@/store/slices/forumSlice';
+import { useForumEventDetails, useForumEventTitles } from '@/hooks/useApiHooks';
 import BannerSection from '@/views/Forum/BannerSection';
 
 type CleanAirLayoutProps = {
   children: ReactNode;
 };
 
 const CleanAirLayout: React.FC<CleanAirLayoutProps> = ({ children }) => {
-  // Fetch forum events from the API.
-  const { data: forumEvents, isLoading } = useForumEvents();
-  const dispatch = useDispatch();
   const searchParams = useSearchParams();
-
-  // When events are fetched, update the Redux slice.
-  useEffect(() => {
-    if (forumEvents && forumEvents.length > 0) {
-      dispatch(setEvents(forumEvents));
-    }
-  }, [forumEvents, dispatch]);
-
-  // Get the slug query parameter.
+  // Get the slug query parameter; if missing, the hook returns the "latest" event.
   const slug = searchParams.get('slug');
-  const events = useSelector((state) => state.forum.events);
-  const selectedEventIndex = useSelector(
-    (state) => state.forum.selectedEventIndex,
-  );
-
-  // Only run the slug-based selection if a slug is provided.
-  useEffect(() => {
-    if (slug && events.length > 0) {
-      // Normalize the slug by replacing hyphens with spaces and lowercasing.
-      const normalizedSlug = slug.replace(/-/g, ' ').toLowerCase();
-      // Find the event whose title (taking the part before a comma) matches.
-      const index = events.findIndex((event) => {
-        const cleanTitle = event.title
-          .split(',')[0]
-          .trim()
-          .toLowerCase()
-          .replace(/-/g, ' ');
-        return cleanTitle === normalizedSlug;
-      });
-      if (index !== -1 && index !== selectedEventIndex) {
-        dispatch(selectEvent(index));
-      }
-      // If no slug match is found, you may choose to do nothing
-      // rather than resetting to index 0.
-    }
-    // Note: we do not reset the index if slug is missing.
-  }, [slug, events, selectedEventIndex, dispatch]);
 
-  const selectedEvent = events[selectedEventIndex];
+  // Get the details for the selected (or latest) event.
+  const { data: selectedEvent, isLoading: detailsLoading } =
+    useForumEventDetails(slug);
+  // Get the list of event titles (with unique_title values).
+  const { data: eventTitles, isLoading: titlesLoading } = useForumEventTitles();
 
-  if (isLoading) {
+  if (detailsLoading || titlesLoading) {
     return <Loading />;
   }
 
   if (!selectedEvent) {
     return <NoData message="No event found" />;
   }
 
+  // Provide both the selected event and the list of event titles to the context.
+  const forumData = {
+    selectedEvent,
+    eventTitles,
+  };
+
   return (
-    <ForumDataProvider data={selectedEvent}>
+    <ForumDataProvider data={forumData}>
       <div className="min-h-screen w-full flex flex-col">
         {/* Navbar */}
         <header className="sticky top-0 z-50">

website2/src/app/clean-air-forum/logistics/page.tsx

@@ -1,49 +1,52 @@
 'use client';
+
 import DOMPurify from 'dompurify';
 import React from 'react';
 
+import Loading from '@/components/loading';
 import { Divider } from '@/components/ui';
 import { useForumData } from '@/context/ForumDataContext';
 import { isValidHTMLContent } from '@/utils/htmlValidator';
 import { renderContent } from '@/utils/quillUtils';
 import SectionDisplay from '@/views/Forum/SectionDisplay';
 
-const LogisticsPage = () => {
-  const data = useForumData();
+const LogisticsPage: React.FC = () => {
+  // Destructure the selected event from the context.
+  const { selectedEvent } = useForumData();
 
-  if (!data) {
-    return null;
+  // If selectedEvent is not available, show a loading state.
+  if (!selectedEvent) {
+    return <Loading />;
   }
 
   // Render static content from the event model.
   const vaccinationHTML = renderContent(
-    data.travel_logistics_vaccination_details,
+    selectedEvent.travel_logistics_vaccination_details,
   );
-  const visaHTML = renderContent(data.travel_logistics_visa_details);
+  const visaHTML = renderContent(selectedEvent.travel_logistics_visa_details);
 
   const showVaccination = isValidHTMLContent(vaccinationHTML);
   const showVisa = isValidHTMLContent(visaHTML);
 
   // Filter extra sections assigned to the "logistics" page.
-  const logisticsSections = data.sections?.filter(
+  const logisticsSections = selectedEvent.sections?.filter(
     (section: any) =>
       section.pages.includes('logistics') &&
       isValidHTMLContent(renderContent(section.content)),
   );
 
   return (
     <div className="px-4 prose max-w-none lg:px-0">
-      {/* Render static Vaccination Section if content exists */}
+      {/* Render Vaccination Section if content exists */}
       {showVaccination && (
         <>
           <Divider className="bg-black p-0 m-0 h-[1px] w-full" />
-
           <div className="py-6">
             <div className="flex flex-col md:flex-row md:space-x-8">
               <div className="md:w-1/3 mb-4 md:mb-0">
-                <h2 className="text-2xl font-bold text-gray-900">
+                <h1 className="text-2xl mt-4 font-bold text-gray-900">
                   Vaccination
-                </h2>
+                </h1>
               </div>
               <div
                 className="md:w-2/3 space-y-4"
@@ -56,16 +59,16 @@ const LogisticsPage = () => {
         </>
       )}
 
-      {/* Render static Visa Invitation Letter Section if content exists */}
+      {/* Render Visa Invitation Letter Section if content exists */}
       {showVisa && (
         <>
           <Divider className="bg-black p-0 m-0 h-[1px] w-full" />
           <div className="py-6">
             <div className="flex flex-col md:flex-row md:space-x-8">
               <div className="md:w-1/3 mb-4 md:mb-0">
-                <h2 className="text-2xl font-bold text-gray-900">
+                <h1 className="text-2xl mt-4 font-bold text-gray-900">
                   Visa invitation letter
-                </h2>
+                </h1>
               </div>
               <div
                 className="md:w-2/3 space-y-4"
@@ -78,10 +81,9 @@ const LogisticsPage = () => {
         </>
       )}
 
-      {/* Render additional section data for Logistics using SectionDisplay */}
+      {/* Render additional Logistics Sections, if any */}
       {logisticsSections && logisticsSections.length > 0 && (
         <>
-          <Divider className="bg-black p-0 m-0 h-[1px] w-full" />
           {logisticsSections.map((section: any) => (
             <SectionDisplay key={section.id} section={section} />
           ))}