Merge pull request #2440 from airqo-platform/website-update-codebase

website content update feedback
airqo-platform · Feb 6, 2025 · 02327fd · 02327fd
2 parents fe11cc2 + 13d70bf
commit 02327fd
Show file tree

Hide file tree

Showing 16 changed files with 381 additions and 170 deletions.
diff --git a/website2/package-lock.json b/website2/package-lock.json
diff --git a/website2/package.json b/website2/package.json
@@ -27,10 +27,11 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
+    "dompurify": "^3.2.4",
     "framer-motion": "^11.11.1",
     "glob": "^9.3.5",
     "lucide-react": "^0.447.0",
-    "next": "14.2.14",
+    "next": "^14.2.23",
     "quill-delta-to-html": "^0.12.1",
     "react": "^18",
     "react-dom": "^18",

diff --git a/website2/src/app/clean-air-forum/glossary/page.tsx b/website2/src/app/clean-air-forum/glossary/page.tsx
@@ -1,36 +1,89 @@
 'use client';
+import DOMPurify from 'dompurify';
+import Link from 'next/link';
+import { useRouter } from 'next/navigation';
 import React from 'react';
 
 import { Divider } from '@/components/ui';
-import { useForumData } from '@/context/ForumDataContext';
+import { useDispatch, useSelector } from '@/hooks/reduxHooks';
+import { selectEvent } from '@/store/slices/forumSlice';
 import { renderContent } from '@/utils/quillUtils';
 
-const Page = () => {
-  const data = useForumData();
+const Page: React.FC = () => {
+  const router = useRouter();
+  const dispatch = useDispatch();
+  // Retrieve forum events and selected event index from Redux.
+  const { events, selectedEventIndex } = useSelector((state) => state.forum);
 
-  if (!data) {
+  if (events.length === 0) {
     return null;
   }
 
+  const selectedEvent = events[selectedEventIndex];
+
+  // Utility function to create a slug from event title.
+  const createSlug = (title: string) => {
+    return title.split(',')[0].trim().toLowerCase().replace(/\s+/g, '-');
+  };
+
   return (
     <div className="px-4 lg:px-0 flex flex-col gap-6">
       <Divider className="bg-black p-0 m-0 h-[1px] w-full" />
 
-      {/* Split Section - Vaccination */}
-      <div>
-        <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">
-              Clear Air Glossary
-            </h2>
-          </div>
-          <div
-            className="md:w-2/3 space-y-4"
-            dangerouslySetInnerHTML={{
-              __html: renderContent(data.glossary_details),
-            }}
-          ></div>
+      {/* Clean Air Forum Events Section */}
+      <div className="flex flex-col md:flex-row 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>
+        </div>
+        {/* Right column: List of events */}
+        <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?slug=${encodeURIComponent(slug)}`;
+              return (
+                <li key={event.id}>
+                  <Link
+                    href={href}
+                    onClick={(e) => {
+                      e.preventDefault();
+                      dispatch(selectEvent(index));
+                      router.push('/clean-air-forum');
+                      window.scrollTo({ top: 0, behavior: 'smooth' });
+                    }}
+                    className={`text-blue-600 hover:underline ${
+                      selectedEventIndex === index ? 'font-bold' : ''
+                    }`}
+                  >
+                    {event.title}
+                  </Link>
+                </li>
+              );
+            })}
+          </ul>
+        </div>
+      </div>
+
+      <Divider className="bg-black p-0 m-0 h-[1px] w-full" />
+
+      {/* Clear Air Glossary Section */}
+      <div className="flex flex-col 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">
+            Clear Air Glossary
+          </h2>
         </div>
+        {/* Right column: Glossary content */}
+        <div
+          className="md:w-2/3 space-y-4"
+          dangerouslySetInnerHTML={{
+            __html: DOMPurify.sanitize(
+              renderContent(selectedEvent.glossary_details),
+            ),
+          }}
+        ></div>
       </div>
     </div>
   );