Finished PastWorkshopsSection

src/components/WorkshopWindow.js

@@ -2,6 +2,9 @@ import Image from 'next/image';
 import ComputerWindow from './general/ComputerWindowComponent';
 import styles from '@/styles/components/WorkshopWindow.module.css';
 
+const isEmoji = (str) => str && /\p{Emoji}/u.test(str) && !/^[\w\s/.-]+$/.test(str);
+const isPath = (str) => str && (str.startsWith('/') || str.startsWith('http'));
+
 export default function WorkshopWindow({
   topbarColor = 'var(--wcs-blue)',
   buttonColor = 'var(--light-blue)',
@@ -17,7 +20,20 @@ export default function WorkshopWindow({
       <ComputerWindow topbarColor={topbarColor}>
         <div className={styles.container}>
           <div className={styles.header}>
-            {emoji && <Image src={emoji} alt="icon" width={50} height={50} />}
+            {
+              /* eslint-disable no-nested-ternary */
+              (emoji && isEmoji(emoji)) ? (
+                <span style={{ fontSize: '2rem' }}>{emoji}</span>
+              ) : (emoji && isPath(emoji)) ? (
+                <div>
+                  {emoji}
+                  <Image src={emoji} alt="icon" width={50} height={50} style={{ objectFit: 'contain', marginTop: '-0.6rem' }} />
+                </div>
+              ) : (
+                <Image src="/wcs-logo.png" alt="icon" width={50} height={50} style={{ objectFit: 'contain', marginTop: '-0.6rem' }} />
+              )
+              /* eslint-enable no-nested-ternary */
+            }
             <h4>{topic}</h4>
           </div>
           <div className={styles.links}>

src/pages/events.js

@@ -1,8 +1,8 @@
-export default function About() {
-  return (
-    <div>
-      <h1>About</h1>
-      <p>This is my new page.</p>
-    </div>
-  );
-}
+export default function About() {
+  return (
+    <div>
+      <h1>About</h1>
+      <p>This is my new page.</p>
+    </div>
+  );
+}

src/sections/PastWorkshopsSection.js

@@ -4,19 +4,66 @@ import styles from '@/styles/sections/PastWorkshopsSection.module.css';
 import WorkshopSeries from './WorkshopSeries';
 
 export default function PastWorkshops() {
-  const topics = [
-    'Hi',
-    "Git",
-    'Cloud Computing',
-    'Career Prep',
-    'Web Development',
-    'Data Science',
-    'Machine Learning',
-    'Cybersecurity',
-  ];
-
+  const [topics, setTopics] = useState([]);
+  const [workshopData, setWorkshopData] = useState({});
+  const [selectedTopic, setSelectedTopic] = useState(null);
   const [currentIndex, setCurrentIndex] = useState(0);
   const [topicsPerView, setTopicsPerView] = useState(4);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    const fetchWorkshops = async () => {
+      try {
+        setLoading(true);
+
+        const response = await fetch('http://localhost:4000/exploration-resources-api');
+
+        if (!response.ok) {
+          throw new Error(`HTTP error- status: ${response.status}`);
+        }
+
+        const data = await response.json();
+
+        if (Array.isArray(data)) {
+          const dataObject = {};
+          data.forEach((item) => {
+            const { workshop_series: topicName, workshops } = item;
+
+            if (topicName) {
+              dataObject[topicName] = workshops;
+            }
+          });
+
+          setWorkshopData(dataObject);
+
+          const topicNames = Object.keys(dataObject);
+          setTopics(topicNames);
+
+          if (topicNames.length > 0) {
+            setSelectedTopic(topicNames[0]);
+          }
+        } else {
+          setWorkshopData(data);
+
+          const topicNames = Object.keys(data);
+          setTopics(topicNames);
+
+          if (topicNames.length > 0) {
+            setSelectedTopic(topicNames[0]);
+          }
+        }
+
+        setError(null);
+      } catch (err) {
+        setError(err.message);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchWorkshops();
+  }, []);
 
   useEffect(() => {
     const handleResize = () => {
@@ -54,6 +101,23 @@ export default function PastWorkshops() {
     }
   };
 
+  const handleTopicClick = (topic) => {
+    setSelectedTopic(topic);
+  };
+
+  if (loading) {
+    return <div className={styles.container}><p>Loading workshops...</p></div>;
+  }
+
+  if (error) {
+    return (
+      <div className={styles.container}>
+        <p>error loading: {error}</p>
+        <p>check console</p>
+      </div>
+    );
+  }
+
   return (
     <div>
       <div className={styles.container}>
@@ -74,10 +138,16 @@ export default function PastWorkshops() {
               className={styles.topicsTrack}
               style={{
                 transform: `translateX(-${currentIndex * (222 + 24)}px)`,
+                justifyContent: !showArrows ? 'center' : 'flex-start',
               }}
             >
               {topics.map((topic, index) => (
-                <button type="button" className={styles.topic} key={index}>
+                <button
+                  type="button"
+                  className={`${styles.topic} ${selectedTopic === topic ? styles.selected : ''}`}
+                  key={index}
+                  onClick={() => handleTopicClick(topic)}
+                >
                   {topic}
                 </button>
               ))}
@@ -97,8 +167,10 @@ export default function PastWorkshops() {
         </div>
       </div>
       <div className={styles.seriesContainer}>
-        <WorkshopSeries />
+        {selectedTopic && workshopData[selectedTopic] && (
+          <WorkshopSeries workshops={workshopData[selectedTopic]} />
+        )}
       </div>
     </div>
   );
-}
+}

src/sections/UpcomingEventsSection.js

@@ -48,9 +48,9 @@ export default function UpcomingEventsSection() {
         rows.forEach(({ officers }) => {
           officers.forEach(
             (name) =>
-              // eslint-disable-next-line implicit-arrow-linebreak
+
               uniqueNames.add(`${shortenName(name)} (Officer)`),
-            // eslint-disable-next-line function-paren-newline
+
           );
         });
       } else {
@@ -63,7 +63,6 @@ export default function UpcomingEventsSection() {
     };
 
     if (weekNum !== null && week && day) {
-      // eslint-disable-next-line operator-linebreak
       const filteredData =
         data[weekNum]?.[week]?.filter(({ heading }) => heading === day) || [];
       if (filteredData.length === 0) {
@@ -73,15 +72,15 @@ export default function UpcomingEventsSection() {
       }
       const officers = filteredData.flatMap(
         ({ rows }) =>
-          // eslint-disable-next-line implicit-arrow-linebreak
+
           getUniqueNames(rows, true),
-        // eslint-disable-next-line function-paren-newline
+
       );
       const committees = filteredData.flatMap(
         ({ rows }) =>
-          // eslint-disable-next-line implicit-arrow-linebreak
+
           getUniqueNames(rows, false),
-        // eslint-disable-next-line function-paren-newline
+
       );
       setUniqueOfficers(officers);
       setUniqueCommittees(committees);
@@ -91,7 +90,6 @@ export default function UpcomingEventsSection() {
   useEffect(() => {
     const fetchEvents = async () => {
       try {
-        // eslint-disable-next-line operator-linebreak
         const eventsUrl =
           'https://script.google.com/macros/s/AKfycbzXcTVpPJoRs2nCW_i9NEzG_sd_qpBcPofW_-8FVUZzTUzz8HPH4ab-RmkNNxNVDZOk/exec';