From ee1a9228c7081f3615c22f1d2efd200dc6a08f48 Mon Sep 17 00:00:00 2001
From: Ochieng Paul <ochiengpaul442@gmail.com>
Date: Fri, 6 Dec 2024 23:08:07 +0300
Subject: [PATCH] ui updates in relation to backend changes

---
 .../app/(about)/events/[id]/SingleEvent.tsx   |  56 ++++----
 website2/src/app/clean-air-forum/layout.tsx   | 121 ++++++++++--------
 .../src/app/clean-air-forum/partners/page.tsx |   8 +-
 .../app/clean-air-forum/resources/page.tsx    |  10 +-
 .../events/[id]/SingleEvent.tsx               |  56 ++++----
 .../sections/Forum/BannerSection.tsx          |   2 +-
 website2/src/components/ui/MemberCard.tsx     |   2 +-
 7 files changed, 144 insertions(+), 111 deletions(-)

diff --git a/website2/src/app/(about)/events/[id]/SingleEvent.tsx b/website2/src/app/(about)/events/[id]/SingleEvent.tsx
index c6aef6a86b..90fddf1fdc 100644
--- a/website2/src/app/(about)/events/[id]/SingleEvent.tsx
+++ b/website2/src/app/(about)/events/[id]/SingleEvent.tsx
@@ -4,7 +4,12 @@ import { format, isSameMonth, parse } from 'date-fns';
 import Image from 'next/image';
 import { useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
-import { FiCalendar, FiClock } from 'react-icons/fi';
+import {
+  FiCalendar,
+  FiClock,
+  FiDownload,
+  FiExternalLink,
+} from 'react-icons/fi';
 
 import { Accordion, CustomButton, NoData } from '@/components/ui';
 import { getEventDetails } from '@/services/apiService';
@@ -342,33 +347,34 @@ const SingleEvent: React.FC<any> = ({ id }) => {
             {event.resources.map((resource: any) => (
               <div
                 key={resource.id}
-                className="p-4 bg-white rounded-lg shadow hover:shadow-md transition-shadow duration-300 flex justify-between items-center"
+                className="flex justify-between items-center p-4 bg-gray-50 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-200"
               >
                 <div>
-                  <h3 className="text-lg font-medium">{resource.title}</h3>
-                  {resource.link && (
-                    <a
-                      href={resource.link}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      className="text-blue-500 hover:underline"
-                    >
-                      View Link
-                    </a>
-                  )}
-                  {resource.resource && (
-                    <a
-                      href={resource.resource}
-                      download
-                      className="text-blue-500 hover:underline ml-4"
-                    >
-                      Download
-                    </a>
-                  )}
+                  <h3 className="text-xl font-semibold mb-2 text-gray-800">
+                    {resource.title}
+                  </h3>
+                  <div className="flex space-x-4">
+                    {resource.link && (
+                      <a
+                        href={resource.link}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="inline-flex items-center text-blue-600 hover:underline font-medium"
+                      >
+                        <FiExternalLink className="mr-2" /> View Link
+                      </a>
+                    )}
+                    {resource.resource_url && (
+                      <a
+                        href={resource.resource_url}
+                        download
+                        className="inline-flex items-center text-blue-600 hover:underline font-medium"
+                      >
+                        <FiDownload className="mr-2" /> Download
+                      </a>
+                    )}
+                  </div>
                 </div>
-                <span className="text-sm text-gray-500">
-                  Order: {resource.order}
-                </span>
               </div>
             ))}
           </div>
diff --git a/website2/src/app/clean-air-forum/layout.tsx b/website2/src/app/clean-air-forum/layout.tsx
index 6adf4e711d..978388abe4 100644
--- a/website2/src/app/clean-air-forum/layout.tsx
+++ b/website2/src/app/clean-air-forum/layout.tsx
@@ -1,5 +1,7 @@
-import { Metadata } from 'next';
-import React, { ReactNode } from 'react';
+'use client';
+
+// import { Metadata } from 'next';
+import React, { ReactNode, useEffect, useState } from 'react';
 
 import Footer from '@/components/layouts/Footer';
 import Navbar from '@/components/layouts/Navbar';
@@ -8,65 +10,76 @@ import BannerSection from '@/components/sections/Forum/BannerSection';
 import { ForumDataProvider } from '@/context/ForumDataContext';
 import { getForumEvents } from '@/services/apiService';
 
-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 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',
+//   },
+// };
 
 type CleanAirLayoutProps = {
   children: ReactNode;
 };
 
-// Fetch data server-side
-export default async function CleanAirLayout({
-  children,
-}: CleanAirLayoutProps) {
-  let data = null;
+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);
+      }
+    };
 
-  try {
-    const res = await getForumEvents();
-    data = res ? res[0] : null;
-  } catch (error) {
-    console.error('Failed to fetch forum events:', error);
-    data = null;
+    fetchForumEvents();
+  }, []);
+
+  if (loading) {
+    return <Loading />;
   }
 
   return (
-    // Wrap the entire layout with ForumDataProvider
     <ForumDataProvider data={data}>
       <div className="min-h-screen w-full flex flex-col">
         {/* Navbar */}
@@ -92,4 +105,6 @@ export default async function CleanAirLayout({
       </div>
     </ForumDataProvider>
   );
-}
+};
+
+export default CleanAirLayout;
diff --git a/website2/src/app/clean-air-forum/partners/page.tsx b/website2/src/app/clean-air-forum/partners/page.tsx
index 1f80369cbe..11393f750f 100644
--- a/website2/src/app/clean-air-forum/partners/page.tsx
+++ b/website2/src/app/clean-air-forum/partners/page.tsx
@@ -18,7 +18,7 @@ const Page = () => {
     ?.filter((partner: any) => partner.category === 'Co-Convening Partner')
     .map((partner: any) => ({
       id: partner.id,
-      logoUrl: partner.partner_logo,
+      logoUrl: partner.partner_logo_url,
     }));
 
   // Filter Host Partners
@@ -26,14 +26,14 @@ const Page = () => {
     ?.filter((partner: any) => partner.category === 'Host Partner')
     .map((partner: any) => ({
       id: partner.id,
-      logoUrl: partner.partner_logo,
+      logoUrl: partner.partner_logo_url,
     }));
 
   const sponsorPartner = data.partners
     ?.filter((partner: any) => partner.category === 'Sponsor Partner')
     .map((partner: any) => ({
       id: partner.id,
-      logoUrl: partner.partner_logo,
+      logoUrl: partner.partner_logo_url,
     }));
 
   // Filter Funding Partners (if available)
@@ -41,7 +41,7 @@ const Page = () => {
     ?.filter((partner: any) => partner.category === 'Funding Partner')
     .map((partner: any) => ({
       id: partner.id,
-      logoUrl: partner.partner_logo,
+      logoUrl: partner.partner_logo_url,
     }));
 
   return (
diff --git a/website2/src/app/clean-air-forum/resources/page.tsx b/website2/src/app/clean-air-forum/resources/page.tsx
index 4cc6af91ef..e886b0cfd4 100644
--- a/website2/src/app/clean-air-forum/resources/page.tsx
+++ b/website2/src/app/clean-air-forum/resources/page.tsx
@@ -6,8 +6,14 @@ import { Divider } from '@/components/ui';
 import { useForumData } from '@/context/ForumDataContext';
 
 // Helper function to extract the file name from the URL
-const getFileNameFromUrl = (url: string) => {
-  return url.split('/').pop();
+const getFileNameFromUrl = (url: string | null | undefined): string | null => {
+  if (!url || typeof url !== 'string') {
+    console.error('Invalid URL:', url);
+    return null;
+  }
+
+  const segments = url.split('/');
+  return segments.pop() || null;
 };
 
 // Accordion Item Component (for each session inside a resource)
diff --git a/website2/src/app/clean-air-network/events/[id]/SingleEvent.tsx b/website2/src/app/clean-air-network/events/[id]/SingleEvent.tsx
index 9181865381..100382e867 100644
--- a/website2/src/app/clean-air-network/events/[id]/SingleEvent.tsx
+++ b/website2/src/app/clean-air-network/events/[id]/SingleEvent.tsx
@@ -4,7 +4,12 @@ import { format, isSameMonth, parse } from 'date-fns';
 import Image from 'next/image';
 import { useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
-import { FiCalendar, FiClock } from 'react-icons/fi';
+import {
+  FiCalendar,
+  FiClock,
+  FiDownload,
+  FiExternalLink,
+} from 'react-icons/fi';
 
 import { Accordion, CustomButton } from '@/components/ui';
 import { getEventDetails } from '@/services/apiService';
@@ -338,33 +343,34 @@ const SingleEvent: React.FC<any> = ({ id }) => {
             {event.resources.map((resource: any) => (
               <div
                 key={resource.id}
-                className="p-4 bg-white rounded-lg shadow hover:shadow-md transition-shadow duration-300 flex justify-between items-center"
+                className="flex justify-between items-center p-4 bg-gray-50 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-200"
               >
                 <div>
-                  <h3 className="text-lg font-medium">{resource.title}</h3>
-                  {resource.link && (
-                    <a
-                      href={resource.link}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      className="text-blue-500 hover:underline"
-                    >
-                      View Link
-                    </a>
-                  )}
-                  {resource.resource && (
-                    <a
-                      href={resource.resource}
-                      download
-                      className="text-blue-500 hover:underline ml-4"
-                    >
-                      Download
-                    </a>
-                  )}
+                  <h3 className="text-xl font-semibold mb-2 text-gray-800">
+                    {resource.title}
+                  </h3>
+                  <div className="flex space-x-4">
+                    {resource.link && (
+                      <a
+                        href={resource.link}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="inline-flex items-center text-blue-600 hover:underline font-medium"
+                      >
+                        <FiExternalLink className="mr-2" /> View Link
+                      </a>
+                    )}
+                    {resource.resource_url && (
+                      <a
+                        href={resource.resource_url}
+                        download
+                        className="inline-flex items-center text-blue-600 hover:underline font-medium"
+                      >
+                        <FiDownload className="mr-2" /> Download
+                      </a>
+                    )}
+                  </div>
                 </div>
-                <span className="text-sm text-gray-500">
-                  Order: {resource.order}
-                </span>
               </div>
             ))}
           </div>
diff --git a/website2/src/components/sections/Forum/BannerSection.tsx b/website2/src/components/sections/Forum/BannerSection.tsx
index 8b3b32a101..b67e522bac 100644
--- a/website2/src/components/sections/Forum/BannerSection.tsx
+++ b/website2/src/components/sections/Forum/BannerSection.tsx
@@ -40,7 +40,7 @@ const BannerSection: React.FC<BannerSectionProps> = ({ data }) => {
         {/* Image Section */}
         <div className="flex justify-center items-center md:w-1/2 h-[350px] w-full">
           <Image
-            src={data.background_image}
+            src={data.background_image_url}
             alt="Forum Image"
             width={600}
             height={350}
diff --git a/website2/src/components/ui/MemberCard.tsx b/website2/src/components/ui/MemberCard.tsx
index 6f8aaa0564..13e162272e 100644
--- a/website2/src/components/ui/MemberCard.tsx
+++ b/website2/src/components/ui/MemberCard.tsx
@@ -56,7 +56,7 @@ const MemberCard: React.FC<MemberCardProps> = ({
           {/* Image and hover effect with default placeholder */}
           <div className="w-auto h-[390px] overflow-hidden rounded-lg">
             <Image
-              src={member.picture_url || member.picture || PlaceholderImage}
+              src={member.picture_url || PlaceholderImage}
               alt={member.name}
               width={295}
               height={390}