Propogate Data to Carousel

src/components/Carousel.tsx

@@ -1,57 +1,61 @@
 import { useState } from 'react';
 import '../css/carousel.css';
-import Organization from './Organization';
 
-type CarouselProps = {
-    type: string;
-};
+import EventPanel from './EventCarouselPanel.tsx';
+import OrganizationPanel from './OrganizationCarouselPanel.tsx';
 
-export default function Carousel({ type }: CarouselProps) {
-    const [active, setActive] = useState(0);
+import type { Event } from '../types/Event.ts';
+import type { Organization } from '../types/Organization.ts';
+
+type CarouselProps =
+    | { type: 'event'; title: string; data: Event[] }
+    | { type: 'organization'; title: string; data: Organization[] };
 
-    const organizations = [
-        { title: 'Math Club', desc: 'The RPI Math Faculty approved and Union affiliated math club!' },
-        { title: 'Science Club', desc: 'The RPI Math Faculty approved and Union affiliated science club!' },
-        { title: 'Gym Club', desc: 'The RPI Math Faculty approved and Union affiliated gym club!' },
-        { title: 'Dance Club', desc: 'The RPI Math Faculty approved and Union affiliated dance club!' },
-        { title: 'English Club', desc: 'The RPI Math Faculty approved and Union affiliated english club!' },
-        { title: 'Coding Club', desc: 'The RPI Math Faculty approved and Union affiliated coding club!' },
-        { title: 'Archery Club', desc: 'The RPI Math Faculty approved and Union affiliated archery club!' },
-        { title: 'Golf Club', desc: 'The RPI Math Faculty approved and Union affiliated golf club!' },
-        { title: 'Running Club', desc: 'The RPI Math Faculty approved and Union affiliated running club!' },
-        { title: 'Study Club', desc: 'The RPI Math Faculty approved and Union affiliated study club!' },
-    ];
+export default function Carousel({ type, title, data }: CarouselProps) {
+    console.log(data);
+    const [active, setActive] = useState(0);
 
     const moveLeft = () => {
         setActive((prev) => Math.max(prev - 1, 0));
     };
 
     const moveRight = () => {
-        setActive((prev) => Math.min(prev + 1, organizations.length - 1));
+        setActive((prev) => Math.min(prev + 1, data.length - 1));
     };
 
     return (
         <div className="carousel-container">
-            <span className="carousel-title">{type}</span>
+            <span className="carousel-title">{title}</span>
 
             <div className="carousel-wrapper">
                 <button className="carousel-arrow left" onClick={moveLeft}>
                     ‹
                 </button>
 
                 <div className="carousel">
-                    {organizations.map((org, index) => {
-                        const offset = index - active;
-                        return (
-                            <Organization
-                                key={index}
-                                className={`carousel-item offset-${offset}`}
-                                title={org.title}
-                                desc={org.desc}
-                                onClick={() => setActive(index)}
-                            />
-                        );
-                    })}
+                    {type === 'event'
+                        ? data.map((event, index) => {
+                              const offset = index - active;
+
+                              return (
+                                  <EventPanel
+                                      event={event}
+                                      className={`carousel-item offset-${offset}`}
+                                      onClick={() => setActive(index)}
+                                  />
+                              );
+                          })
+                        : data.map((org, index) => {
+                              const offset = index - active;
+
+                              return (
+                                  <OrganizationPanel
+                                      organization={org}
+                                      className={`carousel-item offset-${offset}`}
+                                      onClick={() => setActive(index)}
+                                  />
+                              );
+                          })}
                 </div>
 
                 <button className="carousel-arrow right" onClick={moveRight}>

src/components/Organization.tsx → src/components/EventCarouselPanel.tsx

@@ -1,20 +1,21 @@
 import '../css/organizations.css';
 import '../css/carousel.css';
 
-type OrganizationProps = {
-    title: string;
-    desc: string;
+import type { Event } from '../types/Event.ts';
+
+type EventCarouselPanelProps = {
+    event: Event;
     className: string;
     onClick?: () => void;
 };
 
-export default function Organization({ title, desc, className, onClick }: OrganizationProps) {
+export default function EventCarouselPanel({ event, className, onClick }: EventCarouselPanelProps) {
     return (
         <div className={`org ${className}`} onClick={onClick}>
             <div className="org-metadata">
                 <div className="image-placeholder"></div>
-                <span className="org-title">{title}</span>
-                <span>{desc}</span>
+                <span className="org-title">{event.title}</span>
+                <span>{event.description}</span>
             </div>
             <div className="org-btns">
                 <button className="events-btn">Events</button>

src/components/OrganizationCarouselPanel.tsx

@@ -0,0 +1,26 @@
+import '../css/organizations.css';
+import '../css/carousel.css';
+
+import type { Organization } from '../types/Organization.ts';
+
+type OrganizationCarouselPanelProps = {
+    organization: Organization;
+    className: string;
+    onClick?: () => void;
+};
+
+export default function Organization({ organization, className, onClick }: OrganizationCarouselPanelProps) {
+    return (
+        <div className={`org ${className}`} onClick={onClick}>
+            <div className="org-metadata">
+                <div className="image-placeholder"></div>
+                <span className="org-title">{organization.name}</span>
+                <span>{organization.description}</span>
+            </div>
+            <div className="org-btns">
+                <button className="events-btn">Events</button>
+                <button className="manage-btn">Manage</button>
+            </div>
+        </div>
+    );
+}

src/css/carousel.css

@@ -58,6 +58,7 @@
 .offset-2 {
     transform: translate(90%, -50%) scale(0.75);
     opacity: 0.8;
+    z-index: 1;
 }
 
 .offset-1 {
@@ -84,13 +85,15 @@
 .offset--2 {
     transform: translate(-190%, -50%) scale(0.75);
     opacity: 0.8;
+    z-index: 1;
 }
 
 /* hide far cards */
 [class*='offset-3'],
 [class*='offset--3'] {
     opacity: 0;
     pointer-events: none;
+    z-index: 0;
 }
 
 /* arrow buttons */

src/css/organizations.css

@@ -6,6 +6,8 @@
     padding: 1.25rem;
     color: var(--standard-bw-text);
     cursor: pointer;
+    display: flex;
+    flex-direction: column;
 }
 
 .org-metadata {
@@ -26,7 +28,7 @@
 }
 
 .org-btns {
-    margin-top: 2rem;
+    margin: auto 0 0.5rem;
     display: flex;
     flex-direction: row;
 }

src/pages/Events.tsx

@@ -1,11 +1,87 @@
 import Carousel from '../components/Carousel.tsx';
 
+import type { Event } from '../types/Event.ts';
+
 export default function Events() {
+    // 1. Fetch my_events and rec_events
+    // 2. Parse date/time types from string to date/time
+    // 3. Make it into variables below:
+    // 4. Propogate to carousel with type
+
+    /* Current API response:
+        {
+            "date_created": "string",
+            "date_modified": "string",
+            "description": "string",
+            "eid": "string",
+            "event_time": "string",
+            "location": "string"
+        }
+
+    Need:
+        - description
+        - organization
+    */
+
+    // SAMPLE DATA
+    const myEvents: Event[] = [
+        {
+            date_created: new Date(),
+            date_modified: new Date(),
+            description: 'This is event 1 This is event 1 This is event 1 This is event 1',
+            eid: '1',
+            event_time: new Date(),
+            location: 'Amos Eaton',
+            organization: 'Chorus',
+            title: 'Sing-along',
+        },
+        {
+            date_created: new Date(),
+            date_modified: new Date(),
+            description: 'This is event 2 This is event 2 This is event 2 This is event 2',
+            eid: '2',
+            event_time: new Date(),
+            location: 'VCC',
+            organization: 'Coding',
+            title: 'Hackathon',
+        },
+        {
+            date_created: new Date(),
+            date_modified: new Date(),
+            description: 'This is event 3 This is event 3 This is event 3 This is event 3',
+            eid: '3',
+            event_time: new Date(),
+            location: 'Sage',
+            organization: 'Dance',
+            title: 'Competition',
+        },
+        {
+            date_created: new Date(),
+            date_modified: new Date(),
+            description: 'This is event 4 This is event 4 This is event 4 This is event 4',
+            eid: '4',
+            event_time: new Date(),
+            location: 'Folsom',
+            organization: 'Math',
+            title: 'Review Session',
+        },
+        {
+            date_created: new Date(),
+            date_modified: new Date(),
+            description: 'This is event 5 This is event 5 This is event 5 This is event 5',
+            eid: '5',
+            event_time: new Date(),
+            location: 'EMPAC',
+            organization: 'AGT',
+            title: 'America Got Talent',
+        },
+    ];
+
     return (
         <>
             <div className={`carousel-page-container`}>
-                <Carousel type="my events" />
-                <Carousel type="recommended" />
+                <Carousel type="event" title="my events" data={myEvents} />
+                <Carousel type="event" title="recommended" data={myEvents} />
             </div>
         </>
     );

src/pages/Organizations.tsx

@@ -1,11 +1,66 @@
 import Carousel from '../components/Carousel.tsx';
 
+import type { Organization } from '../types/Organization.ts';
+
 export default function Organizations() {
+    /* Current API response:
+        {
+            "date_created": "string",
+            "date_modified": "string",
+            "description": "string",
+            "eid": "string",
+            "event_time": "string",
+            "location": "string"
+        }
+
+    Need:
+        - description
+        - organization
+    */
+
+    const myOrgs: Organization[] = [
+        {
+            date_created: new Date(),
+            date_modified: new Date(),
+            description: 'This is organization 1 This is organization 1 This is organization 1',
+            name: 'CAPY',
+            oid: '1',
+        },
+        {
+            date_created: new Date(),
+            date_modified: new Date(),
+            description: 'This is organization 2 This is organization 2 This is organization 2',
+            name: 'LXA',
+            oid: '2',
+        },
+        {
+            date_created: new Date(),
+            date_modified: new Date(),
+            description: 'This is organization 3 This is organization 3 This is organization 3',
+            name: 'RPAI',
+            oid: '3',
+        },
+        {
+            date_created: new Date(),
+            date_modified: new Date(),
+            description: 'This is organization 4 This is organization 4 This is organization 4',
+            name: 'Robotics',
+            oid: '4',
+        },
+        {
+            date_created: new Date(),
+            date_modified: new Date(),
+            description: 'This is organization 5 This is organization 5 This is organization 5',
+            name: 'RPISEC',
+            oid: '5',
+        },
+    ];
+
     return (
         <>
             <div className={`carousel-page-container`}>
-                <Carousel type="my orgs" />
-                <Carousel type="recommended" />
+                <Carousel type="organization" title="my orgs" data={myOrgs} />
+                <Carousel type="organization" title="recommended" data={myOrgs} />
             </div>
         </>
     );

src/types/Event.ts

@@ -0,0 +1,10 @@
+export type Event = {
+    date_created: Date;
+    date_modified: Date;
+    description: string;
+    eid: string;
+    event_time: Date;
+    location: string;
+    organization: string;
+    title: string;
+};

src/types/Organization.ts

@@ -0,0 +1,7 @@
+export type Organization = {
+    date_created: Date;
+    date_modified: Date;
+    description: string;
+    name: string;
+    oid: string;
+};