Website: Code enhancement and Research Page UI improvements

website2/README.md

@@ -1,6 +1,6 @@
 This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
 
-## Getting Started 
+## Getting Started
 
 First, run the development server:
 

website2/package.json

@@ -7,6 +7,7 @@
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
+    "lint:fix": "next lint --fix",
     "format": "prettier --write .",
     "test": "jest",
     "test:watch": "jest --watch",
@@ -39,6 +40,7 @@
     "rimraf": "^4.4.1",
     "sass": "^1.79.4",
     "sharp": "^0.33.5",
+    "swr": "^2.3.0",
     "tailwind-merge": "^2.5.3",
     "tailwindcss-animate": "^1.0.7"
   },

website2/src/app/(about)/about-us/page.tsx

@@ -1,6 +1,6 @@
 import { Metadata } from 'next';
 
-import AboutPage from './AboutPage';
+import AboutPage from '@/views/about/AboutPage';
 
 export const metadata: Metadata = {
   title: 'About Us | AirQo',

website2/src/app/(about)/careers/[id]/page.tsx

@@ -1,6 +1,4 @@
-import React from 'react';
-
-import DetailsPage from './DetailsPage';
+import DetailsPage from '@/views/careers/DetailsPage';
 
 const page = ({ params }: { params: any }) => {
   return (

website2/src/app/(about)/careers/page.tsx

@@ -1,6 +1,4 @@
-import React from 'react';
-
-import CareerPage from './CareerPage';
+import CareerPage from '@/views/careers/CareerPage';
 
 const page = () => {
   return (

website2/src/app/(about)/events/[id]/page.tsx

@@ -1,6 +1,4 @@
-import React from 'react';
-
-import SingleEvent from './SingleEvent';
+import SingleEvent from '@/views/events/SingleEvent';
 
 const page = ({ params }: { params: any }) => {
   return (

website2/src/app/(about)/events/page.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import EventPage from './EventPage';
+import EventPage from '@/views/events/EventPage';
 
 const page = () => {
   return (

website2/src/app/(about)/press/page.tsx

@@ -1,6 +1,6 @@
 import { Metadata } from 'next';
 
-import PressPage from './PressPage';
+import PressPage from '@/views/press/PressPage';
 
 export const metadata: Metadata = {
   title: 'Press | AirQo in the News',

website2/src/app/(about)/resources/page.tsx

@@ -1,6 +1,6 @@
 import { Metadata } from 'next';
 
-import ResourcePage from './ResourcePage';
+import ResourcePage from '@/views/publications/ResourcePage';
 
 export const metadata: Metadata = {
   title: 'Resources | Air Quality Data and Tools by AirQo',

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

@@ -1,108 +1,53 @@
 'use client';
 
-// import { Metadata } from 'next';
-import React, { ReactNode, useEffect, useState } from 'react';
+import React, { ReactNode } from 'react';
+import { Suspense } from 'react';
 
 import Footer from '@/components/layouts/Footer';
 import Navbar from '@/components/layouts/Navbar';
 import NewsLetter from '@/components/layouts/NewsLetter';
-import BannerSection from '@/components/sections/Forum/BannerSection';
+import Loading from '@/components/loading';
 import { ForumDataProvider } from '@/context/ForumDataContext';
-import { getForumEvents } from '@/services/apiService';
-
-import Loading from '../loading';
-
-// export const metadata: Metadata = {
-//   title: 'Clean Air Forum | AirQo Africa',
-//   description:
-//     'Join the Clean Air Forum by AirQo to explore air quality initiatives, innovations, and discussions aimed at improving air quality in Africa.',
-//   keywords:
-//     'Clean Air Forum, AirQo Africa, air quality forum, air pollution, clean air Africa, environmental innovation, air quality initiatives',
-//   openGraph: {
-//     title: 'Clean Air Forum - AirQo Africa',
-//     description:
-//       'Discover AirQo’s Clean Air Forum, a platform to discuss innovations, strategies, and actions to improve air quality across Africa.',
-//     url: 'https://yourdomain.com/clean-air-forum',
-//     siteName: 'AirQo',
-//     images: [
-//       {
-//         url: 'https://yourdomain.com/static/clean-air-forum-og-image.jpg',
-//         width: 1200,
-//         height: 630,
-//         alt: 'AirQo Clean Air Forum - Improving Air Quality in Africa',
-//       },
-//     ],
-//     locale: 'en_US',
-//     type: 'website',
-//   },
-//   twitter: {
-//     card: 'summary_large_image',
-//     site: '@AirQo',
-//     title: 'Clean Air Forum - AirQo Africa',
-//     description:
-//       'Explore the Clean Air Forum by AirQo to participate in discussions about improving air quality in Africa.',
-//   },
-//   robots: {
-//     index: true,
-//     follow: true,
-//   },
-//   alternates: {
-//     canonical: 'https://yourdomain.com/clean-air-forum',
-//   },
-// };
+import { useForumEvents } from '@/hooks/useApiHooks';
+import BannerSection from '@/views/Forum/BannerSection';
 
 type CleanAirLayoutProps = {
   children: ReactNode;
 };
 
 const CleanAirLayout: React.FC<CleanAirLayoutProps> = ({ children }) => {
-  const [data, setData] = useState<any>(null); // Replace `any` with your actual data type
-  const [loading, setLoading] = useState<boolean>(true);
-
-  useEffect(() => {
-    const fetchForumEvents = async () => {
-      try {
-        const res = await getForumEvents();
-        setData(res ? res[0] : null);
-      } catch (error) {
-        console.error('Failed to fetch forum events:', error);
-        setData(null);
-      } finally {
-        setLoading(false);
-      }
-    };
-
-    fetchForumEvents();
-  }, []);
+  // Using the `useForumEvents` hook
+  const { forumEvents } = useForumEvents();
 
-  if (loading) {
-    return <Loading />;
-  }
+  // Extract the first event (if available)
+  const eventData = forumEvents?.[0] || null;
 
   return (
-    <ForumDataProvider data={data}>
-      <div className="min-h-screen w-full flex flex-col">
-        {/* Navbar */}
-        <header className="sticky top-0 z-50">
-          <Navbar />
-        </header>
-
-        {/* Pass the fetched data to BannerSection */}
-        <BannerSection data={data} />
-
-        {/* Main Content */}
-        <main className="flex-1 pb-8">{children}</main>
-
-        {/* Action Buttons Section */}
-        <section className="my-16">
-          <NewsLetter />
-        </section>
-
-        {/* Footer */}
-        <footer>
-          <Footer />
-        </footer>
-      </div>
+    <ForumDataProvider data={eventData}>
+      <Suspense fallback={<Loading />}>
+        <div className="min-h-screen w-full flex flex-col">
+          {/* Navbar */}
+          <header className="sticky top-0 z-50">
+            <Navbar />
+          </header>
+
+          {/* Banner Section */}
+          <BannerSection data={eventData} />
+
+          {/* Main Content */}
+          <main className="flex-1 pb-8">{children}</main>
+
+          {/* Newsletter Section */}
+          <section className="my-16">
+            <NewsLetter />
+          </section>
+
+          {/* Footer */}
+          <footer>
+            <Footer />
+          </footer>
+        </div>
+      </Suspense>
     </ForumDataProvider>
   );
 };

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

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import AboutPage from './AboutPage';
+import AboutPage from '@/views/Forum/AboutPage';
 
 const page = () => {
   return (

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

@@ -1,10 +1,10 @@
 'use client';
 import React from 'react';
 
-import PaginatedSection from '@/components/sections/CleanAir/PaginatedSection';
 import { Divider } from '@/components/ui';
 import { useForumData } from '@/context/ForumDataContext';
 import { renderContent } from '@/utils/quillUtils';
+import PaginatedSection from '@/views/cleanairforum/PaginatedSection';
 
 const Page = () => {
   const data = useForumData();

website2/src/app/clean-air-forum/program-committee/page.tsx

@@ -24,7 +24,7 @@ const Page: React.FC = () => {
 
   // Calculate the total number of pages
   const totalPages = useMemo(
-    () => Math.ceil(committeeMembers?.length / membersPerPage),
+    () => Math?.ceil(committeeMembers?.length / membersPerPage),
     [committeeMembers?.length],
   );
 
@@ -59,7 +59,7 @@ const Page: React.FC = () => {
 
       {/* Member Cards */}
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-5xl mx-auto px-4">
-        {displayedMembers.map((person: any) => (
+        {displayedMembers?.map((person: any) => (
           <MemberCard
             key={person.id}
             member={person}

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

@@ -35,7 +35,7 @@ const AccordionItem = ({ session, isOpen, toggleAccordion }: any) => {
       {/* Accordion Content Section */}
       {isOpen && (
         <div className="mt-4">
-          {session.resource_files.map((file: any) => (
+          {session?.resource_files?.map((file: any) => (
             <div key={file.id} className="mb-4">
               <div className="flex items-start space-x-2 pl-4">
                 {/* Add indentation */}
@@ -130,15 +130,15 @@ const Page = () => {
         </button>
       </div>
 
-      {data.forum_resources.map((resource: any, resourceIndex: number) => (
+      {data?.forum_resources?.map((resource: any, resourceIndex: number) => (
         <div key={resource.id} className="mb-8">
           {/* Section Title (Resource Title) */}
           <h2 className="text-2xl font-bold text-gray-900 mb-4">
             {resource.resource_title}
           </h2>
 
           {/* Accordion Items for Each Session */}
-          {resource.resource_sessions.map(
+          {resource?.resource_sessions?.map(
             (session: any, sessionIndex: number) => (
               <AccordionItem
                 key={session.id}

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

@@ -41,7 +41,7 @@ const AccordionItem: React.FC<any> = ({
 
       {isOpen && (
         <div className="mt-4 pt-4">
-          {sessions.map((item: any, index: any) => (
+          {sessions?.map((item: any, index: any) => (
             <div className="flex flex-col gap-4" key={index}>
               <Divider className="bg-black p-0 m-0 h-[1px] w-full max-w-5xl mx-auto" />
               <div className="grid grid-cols-12 gap-4 mb-4">
@@ -93,7 +93,7 @@ const Page = () => {
       </div>
 
       {/* Programs Accordion */}
-      {data?.programs.map((program: any) => (
+      {data?.programs?.map((program: any) => (
         <AccordionItem
           key={program.id}
           title={program.title}