Skip to content

Commit c9e9562

Browse files
JManion32JManion32
committed
Initial Commit
1 parent 421535e commit c9e9562

11 files changed

Lines changed: 227 additions & 46 deletions

File tree

‎src/components/Carousel.tsx‎

Lines changed: 36 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,57 +1,61 @@
11
import { useState } from 'react';
22
import '../css/carousel.css';
3-
import Organization from './Organization';
43

5-
type CarouselProps = {
6-
type: string;
7-
};
4+
import EventPanel from './EventCarouselPanel.tsx';
5+
import OrganizationPanel from './OrganizationCarouselPanel.tsx';
86

9-
export default function Carousel({ type }: CarouselProps) {
10-
const [active, setActive] = useState(0);
7+
import type { Event } from '../types/Event.ts';
8+
import type { Organization } from '../types/Organization.ts';
9+
10+
type CarouselProps =
11+
| { type: 'event'; title: string; data: Event[] }
12+
| { type: 'organization'; title: string; data: Organization[] };
1113

12-
const organizations = [
13-
{ title: 'Math Club', desc: 'The RPI Math Faculty approved and Union affiliated math club!' },
14-
{ title: 'Science Club', desc: 'The RPI Math Faculty approved and Union affiliated science club!' },
15-
{ title: 'Gym Club', desc: 'The RPI Math Faculty approved and Union affiliated gym club!' },
16-
{ title: 'Dance Club', desc: 'The RPI Math Faculty approved and Union affiliated dance club!' },
17-
{ title: 'English Club', desc: 'The RPI Math Faculty approved and Union affiliated english club!' },
18-
{ title: 'Coding Club', desc: 'The RPI Math Faculty approved and Union affiliated coding club!' },
19-
{ title: 'Archery Club', desc: 'The RPI Math Faculty approved and Union affiliated archery club!' },
20-
{ title: 'Golf Club', desc: 'The RPI Math Faculty approved and Union affiliated golf club!' },
21-
{ title: 'Running Club', desc: 'The RPI Math Faculty approved and Union affiliated running club!' },
22-
{ title: 'Study Club', desc: 'The RPI Math Faculty approved and Union affiliated study club!' },
23-
];
14+
export default function Carousel({ type, title, data }: CarouselProps) {
15+
console.log(data);
16+
const [active, setActive] = useState(0);
2417

2518
const moveLeft = () => {
2619
setActive((prev) => Math.max(prev - 1, 0));
2720
};
2821

2922
const moveRight = () => {
30-
setActive((prev) => Math.min(prev + 1, organizations.length - 1));
23+
setActive((prev) => Math.min(prev + 1, data.length - 1));
3124
};
3225

3326
return (
3427
<div className="carousel-container">
35-
<span className="carousel-title">{type}</span>
28+
<span className="carousel-title">{title}</span>
3629

3730
<div className="carousel-wrapper">
3831
<button className="carousel-arrow left" onClick={moveLeft}>
3932
‹
4033
</button>
4134

4235
<div className="carousel">
43-
{organizations.map((org, index) => {
44-
const offset = index - active;
45-
return (
46-
<Organization
47-
key={index}
48-
className={`carousel-item offset-${offset}`}
49-
title={org.title}
50-
desc={org.desc}
51-
onClick={() => setActive(index)}
52-
/>
53-
);
54-
})}
36+
{type === 'event'
37+
? data.map((event, index) => {
38+
const offset = index - active;
39+
40+
return (
41+
<EventPanel
42+
event={event}
43+
className={`carousel-item offset-${offset}`}
44+
onClick={() => setActive(index)}
45+
/>
46+
);
47+
})
48+
: data.map((org, index) => {
49+
const offset = index - active;
50+
51+
return (
52+
<OrganizationPanel
53+
organization={org}
54+
className={`carousel-item offset-${offset}`}
55+
onClick={() => setActive(index)}
56+
/>
57+
);
58+
})}
5559
</div>
5660

5761
<button className="carousel-arrow right" onClick={moveRight}>

‎src/components/Event.tsx‎

Lines changed: 0 additions & 3 deletions
This file was deleted.

src/components/Organization.tsx renamed to src/components/EventCarouselPanel.tsx

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,21 @@
11
import '../css/organizations.css';
22
import '../css/carousel.css';
33

4-
type OrganizationProps = {
5-
title: string;
6-
desc: string;
4+
import type { Event } from '../types/Event.ts';
5+
6+
type EventCarouselPanelProps = {
7+
event: Event;
78
className: string;
89
onClick?: () => void;
910
};
1011

11-
export default function Organization({ title, desc, className, onClick }: OrganizationProps) {
12+
export default function EventCarouselPanel({ event, className, onClick }: EventCarouselPanelProps) {
1213
return (
1314
<div className={`org ${className}`} onClick={onClick}>
1415
<div className="org-metadata">
1516
<div className="image-placeholder"></div>
16-
<span className="org-title">{title}</span>
17-
<span>{desc}</span>
17+
<span className="org-title">{event.title}</span>
18+
<span>{event.description}</span>
1819
</div>
1920
<div className="org-btns">
2021
<button className="events-btn">Events</button>

‎src/components/OrganizationCarouselPanel.tsx‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import '../css/organizations.css';
2+
import '../css/carousel.css';
3+
4+
import type { Organization } from '../types/Organization.ts';
5+
6+
type OrganizationCarouselPanelProps = {
7+
organization: Organization;
8+
className: string;
9+
onClick?: () => void;
10+
};
11+
12+
export default function Organization({ organization, className, onClick }: OrganizationCarouselPanelProps) {
13+
return (
14+
<div className={`org ${className}`} onClick={onClick}>
15+
<div className="org-metadata">
16+
<div className="image-placeholder"></div>
17+
<span className="org-title">{organization.name}</span>
18+
<span>{organization.description}</span>
19+
</div>
20+
<div className="org-btns">
21+
<button className="events-btn">Events</button>
22+
<button className="manage-btn">Manage</button>
23+
</div>
24+
</div>
25+
);
26+
}

‎src/css/carousel.css‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,7 @@
5858
.offset-2 {
5959
transform: translate(90%, -50%) scale(0.75);
6060
opacity: 0.8;
61+
z-index: 1;
6162
}
6263

6364
.offset-1 {
@@ -84,13 +85,15 @@
8485
.offset--2 {
8586
transform: translate(-190%, -50%) scale(0.75);
8687
opacity: 0.8;
88+
z-index: 1;
8789
}
8890

8991
/* hide far cards */
9092
[class*='offset-3'],
9193
[class*='offset--3'] {
9294
opacity: 0;
9395
pointer-events: none;
96+
z-index: 0;
9497
}
9598

9699
/* arrow buttons */

‎src/css/organizations.css‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@
66
padding: 1.25rem;
77
color: var(--standard-bw-text);
88
cursor: pointer;
9+
display: flex;
10+
flex-direction: column;
911
}
1012

1113
.org-metadata {
@@ -26,7 +28,7 @@
2628
}
2729

2830
.org-btns {
29-
margin-top: 2rem;
31+
margin: auto 0 0.5rem;
3032
display: flex;
3133
flex-direction: row;
3234
}

‎src/pages/Events.tsx‎

Lines changed: 78 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,87 @@
11
import Carousel from '../components/Carousel.tsx';
22

3+
import type { Event } from '../types/Event.ts';
4+
35
export default function Events() {
6+
// 1. Fetch my_events and rec_events
7+
// 2. Parse date/time types from string to date/time
8+
// 3. Make it into variables below:
9+
// 4. Propogate to carousel with type
10+
11+
/* Current API response:
12+
{
13+
"date_created": "string",
14+
"date_modified": "string",
15+
"description": "string",
16+
"eid": "string",
17+
"event_time": "string",
18+
"location": "string"
19+
}
20+
21+
Need:
22+
- description
23+
- organization
24+
*/
25+
26+
// SAMPLE DATA
27+
const myEvents: Event[] = [
28+
{
29+
date_created: new Date(),
30+
date_modified: new Date(),
31+
description: 'This is event 1 This is event 1 This is event 1 This is event 1',
32+
eid: '1',
33+
event_time: new Date(),
34+
location: 'Amos Eaton',
35+
organization: 'Chorus',
36+
title: 'Sing-along',
37+
},
38+
{
39+
date_created: new Date(),
40+
date_modified: new Date(),
41+
description: 'This is event 2 This is event 2 This is event 2 This is event 2',
42+
eid: '2',
43+
event_time: new Date(),
44+
location: 'VCC',
45+
organization: 'Coding',
46+
title: 'Hackathon',
47+
},
48+
{
49+
date_created: new Date(),
50+
date_modified: new Date(),
51+
description: 'This is event 3 This is event 3 This is event 3 This is event 3',
52+
eid: '3',
53+
event_time: new Date(),
54+
location: 'Sage',
55+
organization: 'Dance',
56+
title: 'Competition',
57+
},
58+
{
59+
date_created: new Date(),
60+
date_modified: new Date(),
61+
description: 'This is event 4 This is event 4 This is event 4 This is event 4',
62+
eid: '4',
63+
event_time: new Date(),
64+
location: 'Folsom',
65+
organization: 'Math',
66+
title: 'Review Session',
67+
},
68+
{
69+
date_created: new Date(),
70+
date_modified: new Date(),
71+
description: 'This is event 5 This is event 5 This is event 5 This is event 5',
72+
eid: '5',
73+
event_time: new Date(),
74+
location: 'EMPAC',
75+
organization: 'AGT',
76+
title: 'America Got Talent',
77+
},
78+
];
79+
480
return (
581
<>
682
<div className={`carousel-page-container`}>
7-
<Carousel type="my events" />
8-
<Carousel type="recommended" />
83+
<Carousel type="event" title="my events" data={myEvents} />
84+
<Carousel type="event" title="recommended" data={myEvents} />
985
</div>
1086
</>
1187
);

‎src/pages/Organizations.tsx‎

Lines changed: 57 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,66 @@
11
import Carousel from '../components/Carousel.tsx';
22

3+
import type { Organization } from '../types/Organization.ts';
4+
35
export default function Organizations() {
6+
/* Current API response:
7+
{
8+
"date_created": "string",
9+
"date_modified": "string",
10+
"description": "string",
11+
"eid": "string",
12+
"event_time": "string",
13+
"location": "string"
14+
}
15+
16+
Need:
17+
- description
18+
- organization
19+
*/
20+
21+
const myOrgs: Organization[] = [
22+
{
23+
date_created: new Date(),
24+
date_modified: new Date(),
25+
description: 'This is organization 1 This is organization 1 This is organization 1',
26+
name: 'CAPY',
27+
oid: '1',
28+
},
29+
{
30+
date_created: new Date(),
31+
date_modified: new Date(),
32+
description: 'This is organization 2 This is organization 2 This is organization 2',
33+
name: 'LXA',
34+
oid: '2',
35+
},
36+
{
37+
date_created: new Date(),
38+
date_modified: new Date(),
39+
description: 'This is organization 3 This is organization 3 This is organization 3',
40+
name: 'RPAI',
41+
oid: '3',
42+
},
43+
{
44+
date_created: new Date(),
45+
date_modified: new Date(),
46+
description: 'This is organization 4 This is organization 4 This is organization 4',
47+
name: 'Robotics',
48+
oid: '4',
49+
},
50+
{
51+
date_created: new Date(),
52+
date_modified: new Date(),
53+
description: 'This is organization 5 This is organization 5 This is organization 5',
54+
name: 'RPISEC',
55+
oid: '5',
56+
},
57+
];
58+
459
return (
560
<>
661
<div className={`carousel-page-container`}>
7-
<Carousel type="my orgs" />
8-
<Carousel type="recommended" />
62+
<Carousel type="organization" title="my orgs" data={myOrgs} />
63+
<Carousel type="organization" title="recommended" data={myOrgs} />
964
</div>
1065
</>
1166
);

‎src/types/.gitkeep‎

Whitespace-only changes.

‎src/types/Event.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
export type Event = {
2+
date_created: Date;
3+
date_modified: Date;
4+
description: string;
5+
eid: string;
6+
event_time: Date;
7+
location: string;
8+
organization: string;
9+
title: string;
10+
};

0 commit comments

Comments
 (0)