Skip to content

Add snippet of events page to home page #76

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
areebakq wants to merge 4 commits into
base: master
Choose a base branch
from
Open

Add snippet of events page to home page #76

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
61dc692
created new component for events, added component to events and home …
areebakq Apr 17, 2021
cf41210
cleaned up files, made eventsList to store events array used by event…
areebakq Apr 17, 2021
eb52051
updated events
areebakq Apr 17, 2021
d1a41b5
Merge branch 'master' into event-component
areebakq Apr 17, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
97 changes: 97 additions & 0 deletions view/src/components/eventList.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,97 @@
// eventList.js

// event list to be updated with event descriptions and flyters

const upcomingEvents = [
{
name: "Seniors Panel - If I were a Freshman",
date: '4/13/2021 - 6:00 PM to 7:00 PM CT',
description: "Join us for an exciting panel with upcoming graduates to talk about their advice for collegiates and reflecting on what they would have done differently.",
link: 'https://nam02.safelinks.protection.outlook.com/?url=https%3A%2F%2Ffacebook.us19.list-manage.com%2Ftrack%2Fclick%3Fu%3Dada9150cb4cf2450b2870f9b7%26id%3D240f707f0b%26e%3D09a746bd56&data=04%7C01%7CAarushi.Pandey%40UTDallas.edu%7C2c4651082f0a457cc80208d8fdd956c1%7C8d281d1d9c4d4bf7b16e032d15de9f6c%7C0%7C0%7C637538457203400591%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=86fKMltlYMG9hB8AnVX60CKZmtkO%2Bi%2Fs%2B1lNz6QcCKs%3D&reserved=0'
},
{
name: "WWC X JP Morgan - Imposter Syndrome and Preparing for a Virtual Internship",
date: '4/15/2021 - 6:00 PM to 7:00 PM CT',
description: "Join us for an exciting panel in collaboration with WWC featuring JP Morgan Chase for a discussion on imposter syndrome and preparing for a virtual internship! **We're looking for volunteers to represent SWE at this event. Please let us know if you'd like to volunteer! You can reach us on our GroupMe chat or Discord.**",
link: 'https://nam02.safelinks.protection.outlook.com/?url=https%3A%2F%2Ffacebook.us19.list-manage.com%2Ftrack%2Fclick%3Fu%3Dada9150cb4cf2450b2870f9b7%26id%3D73286f2cc3%26e%3D09a746bd56&data=04%7C01%7CAarushi.Pandey%40UTDallas.edu%7C2c4651082f0a457cc80208d8fdd956c1%7C8d281d1d9c4d4bf7b16e032d15de9f6c%7C0%7C0%7C637538457203400591%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=psupXlCb94e5%2F0XDGUUHwAVLFFomt8%2FqMzqsZCg4QFI%3D&reserved=0'
},
{
name: "WEHack - Springboard",
date: '4/17/2021 - 4/18/2021',
description: "Springboard is a mini-hackathon designed to give new hackers the skills they need to be successful at future hackathons via workshops, panels, and lightning talks. Join us this weekend to prepare for WEHack 2021! Register today at https://forms.gle/b3SzrzZYz2WMYSsV7",
link: ''
},
{
name: "Bridgeland High School Panel",
date: '4/20/2021',
description: "High school panel where current SWE members talk about what it's like to be a member of SWE in college, several broad engineering fields/topics, and any personal experiences in these fields. Look out for announcements regarding future volunteering opportunities on our Discord!",
link: ''
},
{
name: "Optimize your Summer with Lennox",
date: '4/21/2021 - 7:00 PM to 8:00 PM CT',
description: "Join us for an exciting event with Lennox on goal planning and preparing for next recruiting season, standing out at your internship, and summer to do’s to grow your skills!",
link: 'https://nam02.safelinks.protection.outlook.com/?url=https%3A%2F%2Ffacebook.us19.list-manage.com%2Ftrack%2Fclick%3Fu%3Dada9150cb4cf2450b2870f9b7%26id%3D8238ad71a3%26e%3D09a746bd56&data=04%7C01%7CAarushi.Pandey%40UTDallas.edu%7C2c4651082f0a457cc80208d8fdd956c1%7C8d281d1d9c4d4bf7b16e032d15de9f6c%7C0%7C0%7C637538457203430575%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=mcwEJwsSXKI3piwVp4V08x8jTkfEM1x3maAc0f98Fy4%3D&reserved=0'
},
];

const flyers = [
{
image: '',
link: ''
},
{
image: '',
link: ''
},
{
image: '',
link: ''
},
{
image: '',
link: ''
},
{
image: '',
link: ''
},
];

const styles = (theme) => ({
gridItem: {
display: "flex",
},
card: {
display: "flex",
justifyContent: "space-between",
flexDirection: "column",
width: "100%",
},
table: {
minWidth: "50%",
maxWidth: "70%",
},
imgResponsive: {
width: "200 px",
},
appBar: {
zIndex: theme.zIndex.drawer + 1,
},
});

function createData(event, flyer) {
return { event, flyer };
}

export const rows = [
createData(upcomingEvents[0], flyers[0].image),
Copy link
Member

@ReshmiCode ReshmiCode Apr 18, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

it would prob be easier to just have one array of objects rather than making sure the indexes of each match

createData(upcomingEvents[1], flyers[1].image),
createData(upcomingEvents[2], flyers[2].image),
createData(upcomingEvents[3], flyers[3].image),
createData(upcomingEvents[4], flyers[4].image),
];

export default {
rows,
}
163 changes: 46 additions & 117 deletions view/src/pages/events.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
// events.js

// page displaying event flyers
// page displaying event list component

import React, { Component } from "react";
import classNames from "classnames";
Expand All @@ -16,66 +16,10 @@ import {
TableRow,
Paper,
} from "@material-ui/core";
import Events from "../components/eventList"
import NavBar from "../components/navbar";

import Cady_Leetcode from "../assets/EventFlyers/Cady_Leetcode.PNG"

const upcomingEvents = [
{
name: "Seniors Panel - If I were a Freshman",
date: '4/13/2021 - 6:00 PM to 7:00 PM CT',
description: "Join us for an exciting panel with upcoming graduates to talk about their advice for collegiates and reflecting on what they would have done differently.",
link: 'https://nam02.safelinks.protection.outlook.com/?url=https%3A%2F%2Ffacebook.us19.list-manage.com%2Ftrack%2Fclick%3Fu%3Dada9150cb4cf2450b2870f9b7%26id%3D240f707f0b%26e%3D09a746bd56&data=04%7C01%7CAarushi.Pandey%40UTDallas.edu%7C2c4651082f0a457cc80208d8fdd956c1%7C8d281d1d9c4d4bf7b16e032d15de9f6c%7C0%7C0%7C637538457203400591%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=86fKMltlYMG9hB8AnVX60CKZmtkO%2Bi%2Fs%2B1lNz6QcCKs%3D&reserved=0'
},
{
name: "WWC X JP Morgan - Imposter Syndrome and Preparing for a Virtual Internship",
date: '4/15/2021 - 6:00 PM to 7:00 PM CT',
description: "Join us for an exciting panel in collaboration with WWC featuring JP Morgan Chase for a discussion on imposter syndrome and preparing for a virtual internship! **We're looking for volunteers to represent SWE at this event. Please let us know if you'd like to volunteer! You can reach us on our GroupMe chat or Discord.**",
link: 'https://nam02.safelinks.protection.outlook.com/?url=https%3A%2F%2Ffacebook.us19.list-manage.com%2Ftrack%2Fclick%3Fu%3Dada9150cb4cf2450b2870f9b7%26id%3D73286f2cc3%26e%3D09a746bd56&data=04%7C01%7CAarushi.Pandey%40UTDallas.edu%7C2c4651082f0a457cc80208d8fdd956c1%7C8d281d1d9c4d4bf7b16e032d15de9f6c%7C0%7C0%7C637538457203400591%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=psupXlCb94e5%2F0XDGUUHwAVLFFomt8%2FqMzqsZCg4QFI%3D&reserved=0'
},
{
name: "WEHack - Springboard",
date: '4/17/2021 - 4/18/2021',
description: "Springboard is a mini-hackathon designed to give new hackers the skills they need to be successful at future hackathons via workshops, panels, and lightning talks. Join us this weekend to prepare for WEHack 2021! Register today at https://forms.gle/b3SzrzZYz2WMYSsV7",
link: ''
},
{
name: "Bridgeland High School Panel",
date: '4/20/2021',
description: "High school panel where current SWE members talk about what it's like to be a member of SWE in college, several broad engineering fields/topics, and any personal experiences in these fields. Look out for announcements regarding future volunteering opportunities on our Discord!",
link: ''
},
{
name: "Optimize your Summer with Lennox",
date: '4/21/2021 - 7:00 PM to 8:00 PM CT',
description: "Join us for an exciting event with Lennox on goal planning and preparing for next recruiting season, standing out at your internship, and summer to do’s to grow your skills!",
link: 'https://nam02.safelinks.protection.outlook.com/?url=https%3A%2F%2Ffacebook.us19.list-manage.com%2Ftrack%2Fclick%3Fu%3Dada9150cb4cf2450b2870f9b7%26id%3D8238ad71a3%26e%3D09a746bd56&data=04%7C01%7CAarushi.Pandey%40UTDallas.edu%7C2c4651082f0a457cc80208d8fdd956c1%7C8d281d1d9c4d4bf7b16e032d15de9f6c%7C0%7C0%7C637538457203430575%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=mcwEJwsSXKI3piwVp4V08x8jTkfEM1x3maAc0f98Fy4%3D&reserved=0'
},
];

const flyers = [
{
image: '',
link: ''
},
{
image: '',
link: ''
},
{
image: '',
link: ''
},
{
image: '',
link: ''
},
{
image: '',
link: ''
},
];

import Footer from "../components/footer";
import {rows} from "../components/eventList"

const styles = (theme) => ({
gridItem: {
Expand All @@ -99,19 +43,6 @@ const styles = (theme) => ({
},
});

function createData(event, flyer) {
return { event, flyer };
}


const rows = [
createData(upcomingEvents[0], flyers[0].image),
createData(upcomingEvents[1], flyers[1].image),
createData(upcomingEvents[2], flyers[2].image),
createData(upcomingEvents[3], flyers[3].image),
createData(upcomingEvents[4], flyers[4].image),
];

class events extends Component {
constructor(props) {
super(props);
Expand All @@ -132,7 +63,7 @@ class events extends Component {
<div className={classNames("header", { ready: headerReady })}>
<p className="heading">Events</p>
</div>
<div className="fullscreen">
<div>
<Grid
container
spacing={2}
Expand Down Expand Up @@ -167,52 +98,50 @@ class events extends Component {
</Grid>

*/}
<div align="center">
<div align="center">
<h1>Upcoming Events</h1>
</div>
</Grid>


<TableContainer component={Paper} align="center">
<Table className={classes.table} aria-label="simple table">
<TableHead>
<TableRow>
<TableCell align="center" width="45%"><h2></h2></TableCell>
<TableCell align="center" width="55%"><h2></h2></TableCell>
</TableRow>
</TableHead>
<TableBody>
{rows.map((row) => (
<TableRow key={row.event.name}>
<TableCell component="th" scope="row" align="center">
<br/>
<h4>{row.event.name}</h4>
<ListSubheader>{row.event.date}</ListSubheader>
{row.event.description != '' ?
(<div><h5 align="left">{row.event.description}</h5><br /> </div>) : null }
{row.event.link != '' && row.event.link != null
? (<div>
<Button href={row.event.link} align="center" variant="contained" color="primary" position="relative" zIndex="-3000">Join Meeting</Button>
<br/>
<br/>
</div>)
: null
}
</TableCell>
<TableCell component="th" scope="row" align="center">
{row.flyer != '' ?
(<img src={row.flyer} width="60%" />) : null }
</TableCell>
</TableRow>
))}
</TableBody>
</Table>

</TableContainer>
</div>
</div>
);
}
<TableContainer component={Paper} align="center">
<Table className={classes.table} aria-label="simple table">
<TableHead>
<TableRow>
<TableCell align="center" width="45%"><h2></h2></TableCell>
<TableCell align="center" width="55%"><h2></h2></TableCell>
</TableRow>
</TableHead>
<TableBody>
{rows.map((row) => (
<TableRow key={row.event.name}>
<TableCell component="th" scope="row" align="center">
<br />
<h4>{row.event.name}</h4>
<ListSubheader>{row.event.date}</ListSubheader>
{row.event.description != '' ?
(<div><h5 align="left">{row.event.description}</h5><br /> </div>) : null}
{row.event.link != '' && row.event.link != null
? (<div>
<Button href={row.event.link} align="center" variant="contained" color="primary" position="relative" zIndex="-3000">Join Meeting</Button>
<br />
<br />
</div>)
: null
}
</TableCell>
<TableCell component="th" scope="row" align="center">
{row.flyer != '' ?
(<img src={row.flyer} width="60%" />) : null}
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
</div>
<Footer />
</div>
);
}
}

export default withStyles(styles)(events);
50 changes: 49 additions & 1 deletion view/src/pages/home.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,28 @@ import Slideshow from "../components/slideshow.js";
import NavBar from "../components/navbar";
import Footer from "../components/footer";
import Slider from "../components/slider";
import Events from "../components/eventList";
import {
Table,
TableBody,
TableCell,
TableContainer,
TableHead,
TableRow,
Paper,
Button,
ListSubheader,
} from "@material-ui/core";
import { rows } from "../components/eventList"

const styles = (theme) => ({});
const styles = (theme) => ({
table: {
width: "60%",
padding: "3%",
align: "center",
margin: "auto"
},
});

class home extends Component {
render() {
Expand All @@ -18,6 +38,34 @@ class home extends Component {
<div className={classes.root}>
<NavBar />
<Slideshow />
<TableContainer className={classes.table} align="center">
<h1><a href="/events">Upcoming Events</a></h1>
<TableBody>
{rows.slice(0, 3).map((row) => (
<TableRow key={row.event.name}>
<TableCell component="th" scope="row" align="center">
<br />
<h4>{row.event.name}</h4>
<ListSubheader>{row.event.date}</ListSubheader>
{row.event.description != '' ?
(<div><h5 align="left">{row.event.description}</h5><br /> </div>) : null}
{row.event.link != '' && row.event.link != null
? (<div>
<Button href={row.event.link} align="center" variant="contained" color="primary" position="relative" zIndex="-3000">Join Meeting</Button>
<br />
<br />
</div>)
: null
}
</TableCell>
<TableCell component="th" scope="row" align="center">
{row.flyer != '' ?
(<img src={row.flyer} width="60%" />) : null}
</TableCell>
</TableRow>
))}
</TableBody>
</TableContainer>
<Slider />
<Footer />
</div>
Expand Down