From 0dbdaf59f7d7ffc596d07e09e8495aa18760c173 Mon Sep 17 00:00:00 2001
From: TheMaddax <chris@sigd.net>
Date: Sat, 19 Oct 2024 18:12:45 -0600
Subject: [PATCH] Update events, minutes viewing, and facebook logo

---
 client/src/components/Footer.tsx  |  4 +-
 client/src/components/Minutes.tsx | 81 +++++++++++++++++++++++++++----
 client/src/eventData.ts           | 50 -------------------
 3 files changed, 73 insertions(+), 62 deletions(-)

diff --git a/client/src/components/Footer.tsx b/client/src/components/Footer.tsx
index 4149318..48a9126 100644
--- a/client/src/components/Footer.tsx
+++ b/client/src/components/Footer.tsx
@@ -102,8 +102,8 @@ const Footer: React.FC = () => {
               className="inline-block mt-4 transition-transform duration-300 ease-in-out transform hover:scale-110"
             >
               <img 
-                src="logos/facebook-logo.png" 
-                alt="Facebook" 
+                src="/logos/facebook-logo.png" 
+                alt="Facebook Logo" 
                 className="w-10 h-10 rounded-full shadow-lg hover:shadow-xl"
                 style={{
                   filter: 'drop-shadow(0px 4px 6px rgba(0, 0, 0, 0.1))',
diff --git a/client/src/components/Minutes.tsx b/client/src/components/Minutes.tsx
index 18522a6..ee033c2 100644
--- a/client/src/components/Minutes.tsx
+++ b/client/src/components/Minutes.tsx
@@ -1,5 +1,5 @@
-import React, { useState } from 'react';
-import { motion } from 'framer-motion';
+import React, { useState, useEffect } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
 
 interface MinuteEntry {
   date: string;
@@ -21,6 +21,19 @@ const minutesData: MinuteEntry[] = [
 const Minutes: React.FC = () => {
   const [sortColumn, setSortColumn] = useState<keyof MinuteEntry>('date');
   const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('desc');
+  const [selectedMinutes, setSelectedMinutes] = useState<MinuteEntry | null>(null);
+  const [isMobile, setIsMobile] = useState(false);
+
+  useEffect(() => {
+    const checkMobile = () => {
+      setIsMobile(window.innerWidth < 768);
+    };
+
+    checkMobile();
+    window.addEventListener('resize', checkMobile);
+
+    return () => window.removeEventListener('resize', checkMobile);
+  }, []);
 
   const sortedMinutes = [...minutesData].sort((a, b) => {
     if (a[sortColumn] < b[sortColumn]) return sortDirection === 'asc' ? -1 : 1;
@@ -37,6 +50,18 @@ const Minutes: React.FC = () => {
     }
   };
 
+  const handleMinutesClick = (entry: MinuteEntry) => {
+    if (isMobile) {
+      window.open(entry.fileUrl, '_blank');
+    } else {
+      setSelectedMinutes(entry);
+    }
+  };
+
+  const closePopup = () => {
+    setSelectedMinutes(null);
+  };
+
   return (
     <div className="container mx-auto px-4 py-8">
       <motion.div
@@ -62,19 +87,18 @@ const Minutes: React.FC = () => {
               </tr>
             </thead>
             <tbody>
-              {sortedMinutes.map((entry, index) => (                <tr key={index} className="border-b border-gray-200 hover:bg-gray-100">
+              {sortedMinutes.map((entry, index) => (
+                <tr key={index} className="border-b border-gray-200 hover:bg-gray-100">
                   <td className="py-3 px-4">{entry.date}</td>
                   <td className="py-3 px-4">{entry.meetingType}</td>
                   <td className="py-3 px-4">{entry.location}</td>
                   <td className="py-3 px-4">
-                    <a 
-                      href={entry.fileUrl}
-                      target="_blank" 
-                      rel="noopener noreferrer"
-                      className="text-blue-600 hover:text-blue-800 underline"
+                    <button 
+                      onClick={() => handleMinutesClick(entry)}
+                      className="bg-[#8C1D40] text-white font-bold py-2 px-4 rounded hover:bg-[#6B1631] transition duration-300"
                     >
                       View Minutes
-                    </a>
+                    </button>
                   </td>
                 </tr>
               ))}
@@ -82,8 +106,45 @@ const Minutes: React.FC = () => {
           </table>
         </div>
       </motion.div>
+
+      <AnimatePresence>
+        {selectedMinutes && !isMobile && (
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"
+            onClick={closePopup}
+          >
+            <motion.div
+              initial={{ scale: 0.9, opacity: 0 }}
+              animate={{ scale: 1, opacity: 1 }}
+              exit={{ scale: 0.9, opacity: 0 }}
+              className="bg-white rounded-lg p-4 w-[90%] h-[90%] flex flex-col"
+              onClick={(e) => e.stopPropagation()}
+            >
+              <h2 className="text-2xl font-bold text-[#8C1D40] mb-4">
+                {selectedMinutes.meetingType} - {selectedMinutes.date}
+              </h2>
+              <div className="flex-grow">
+                <iframe
+                  src={`${selectedMinutes.fileUrl}#view=FitH`}
+                  className="w-full h-full rounded-md"
+                  title={`Minutes for ${selectedMinutes.meetingType} on ${selectedMinutes.date}`}
+                />
+              </div>
+              <button
+                onClick={closePopup}
+                className="mt-4 bg-[#8C1D40] text-white font-bold py-2 px-4 rounded hover:bg-[#6B1631] transition duration-300 self-end"
+              >
+                Close
+              </button>
+            </motion.div>
+          </motion.div>
+        )}
+      </AnimatePresence>
     </div>
   );
 };
 
-export default Minutes;
\ No newline at end of file
+export default Minutes;
diff --git a/client/src/eventData.ts b/client/src/eventData.ts
index 06ae3f0..c254631 100644
--- a/client/src/eventData.ts
+++ b/client/src/eventData.ts
@@ -10,56 +10,6 @@ export interface Event {
 }
 
 export const events: Event[] = [
-  {
-    date: '2024-11-01',
-    title: 'ASL Night Out!',
-    description: 'Cornhole Tournament - will have 3 rows of cornholes and will do elimination for winner',
-    startTime: '18:00',
-    endTime: '20:00',
-    pointOfContact: 'Tessa Williams',
-    email: 'tessa.williams@deafmissoula.org',
-    address: 'To be announced'
-  },
-  {
-    date: '2024-11-02',
-    title: 'Missoula Concealed Weapons Class',
-    description: 'Concealed weapons course at Cabela\'s',
-    startTime: '10:00',
-    endTime: '14:00',
-    pointOfContact: 'Kevin Cooley',
-    email: 'kevin.cooley@deafmissoula.org',
-    address: '3650 Brooks Street, Missoula, MT 59801'
-  },
-  {
-    date: '2024-11-28',
-    title: 'Thanksgiving Volunteer',
-    description: 'Volunteer at Missoula Food Bank and Community Center with us',
-    startTime: '10:00',
-    endTime: '13:00',
-    pointOfContact: 'Aubz M',
-    email: 'aubz.m@deafmissoula.org',
-    address: '1720 Wyoming St, Missoula, MT 59801'
-  },
-  {
-    date: '2024-12-06',
-    title: 'ASL Black Tie and Gown',
-    description: 'Time to dress up in your finest clothes for a night of dancing and rocking the fabulous looks',
-    startTime: '19:00',
-    endTime: '23:00',
-    pointOfContact: 'Rita Brandborg',
-    email: 'rita.brandborg@deafmissoula.org',
-    address: '101 Central Avenue, Whitefish, MT 59937'
-  },
-  {
-    date: '2024-12-24',
-    title: 'Christmas Cheer Volunteer',
-    description: 'Volunteer at Missoula Food Bank and Community Center',
-    startTime: '10:00',
-    endTime: '12:00',
-    pointOfContact: 'Tessa Williams',
-    email: 'tessa.williams@deafmissoula.org',
-    address: '1720 Wyoming St, Missoula, MT 59801'
-  },
   {
     date: '2025-01-11',
     title: 'MCDi Members Meeting',