From 61dc692a206af0b711ffd797273d6dc5b54cd7e5 Mon Sep 17 00:00:00 2001 From: areebakq Date: Fri, 16 Apr 2021 23:52:07 -0500 Subject: [PATCH 1/3] created new component for events, added component to events and home pages --- view/src/components/events.js | 203 ++++++++++++++++++++++++++++++++++ view/src/pages/events.js | 161 ++------------------------- view/src/pages/home.js | 2 + 3 files changed, 212 insertions(+), 154 deletions(-) create mode 100644 view/src/components/events.js diff --git a/view/src/components/events.js b/view/src/components/events.js new file mode 100644 index 0000000..bdbc10d --- /dev/null +++ b/view/src/components/events.js @@ -0,0 +1,203 @@ + +import React, { Component } from "react"; +import classNames from "classnames"; + +import withStyles from "@material-ui/core/styles/withStyles"; +import { Button, Divider, Grid, List, ListSubheader } from "@material-ui/core"; +import { + Table, + TableBody, + TableCell, + TableContainer, + TableHead, + TableRow, + Paper, +} from "@material-ui/core"; + +const upcomingEvents = [ + { + name: "Building Your Personal Brand with Capital One", + date: '4/6/2021 - 6:00 PM CST', + description: "Come learn about how you can create your own personal brand with Capital One! Get advice about discovering strengths and weaknesses, mastering LinkedIn, finding potential employers, networking, and more! There will also be a raffle for a chance to win a GrubHub gift card.", + link: 'https://nam02.safelinks.protection.outlook.com/?url=https%3A%2F%2Ffacebook.us19.list-manage.com%2Ftrack%2Fclick%3Fu%3Dada9150cb4cf2450b2870f9b7%26id%3D7d74d7c98c%26e%3D09a746bd56&data=04%7C01%7CAarushi.Pandey%40UTDallas.edu%7C8243a7b080f641eb39f208d8f2d841e2%7C8d281d1d9c4d4bf7b16e032d15de9f6c%7C0%7C0%7C637526357933158741%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=Uer6pWWHWS5cenmp4rBWn%2FGRYe0lky1rtM7cEX%2Fw84c%3D&reserved=0' + }, + { + name: "WITB x WWC Women's Day Panel", + date: 'TBD - 6:00 PM CST', + description: "Join us for an exciting panel with notable researchers, industry professionals, & businesswomen in STEM. More details coming soon!", + link: '' + }, + { + name: "Approaching LeetCode", + date: 'TBA', + description: "Join us for a technical workshop led by our VP of Internal Affairs, Cady Baltz, to learn about the steps on how to approach leetcode and making a plan to prep for technical interviews. We're very proud of her for landing two internship opportunities at Facebook and Apple. You definitely don't want to miss this!", + link: '' + }, + { + name: "Seniors Panel - If I were a Freshman", + date: 'TBA', + 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. More details coming soon!", + link: '' + }, + { + name: "Bridgeland High School Panel", + date: 'TBA', + 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. If you're interested in volunteering as a panelist for our high-school panel events, please watch for future announcements on our Discord!", + link: '' + }, +]; + +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 }; +} + +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); + this.state = { headerReady: false }; + } + componentDidMount() { + setTimeout(() => { + this.setState({ headerReady: true }); + }, 0); + } + + render() { + const { headerReady } = this.state; + const { classes } = this.props; + return ( +
+
+ + {/* + + {flyers.map((flyer) => ( + +
+
+ + + +
+ + ))} + + + */} +
+

Upcoming Events

+
+ + + + + +

+

+ + + + {rows.map((row) => ( + + +
+

{row.event.name}

+ {row.event.date} + {row.event.description != '' ? + (
{row.event.description}

) : null} + {row.event.link != '' && row.event.link != null + ? (
+ +
+
+
) + : null + } + + + {row.flyer != '' ? + () : null} + + + ))} + +
+ +
+
+ ); + } +} + +export default withStyles(styles)(events); diff --git a/view/src/pages/events.js b/view/src/pages/events.js index 734c822..82385b9 100644 --- a/view/src/pages/events.js +++ b/view/src/pages/events.js @@ -16,67 +16,9 @@ import { TableRow, Paper, } from "@material-ui/core"; +import Events from "../components/events" import NavBar from "../components/navbar"; - -import Frisco_HS_Panel from "../assets/EventFlyers/Frisco_HS_Panel.png" -import Tetrapak from "../assets/EventFlyers/Tetrapak.png" -import Intel_Coffee_Chat from "../assets/EventFlyers/Intel_Coffee_Chat.png" - -const upcomingEvents = [ - { - name: "Building Your Personal Brand with Capital One", - date: '4/6/2021 - 6:00 PM CST', - description: "Come learn about how you can create your own personal brand with Capital One! Get advice about discovering strengths and weaknesses, mastering LinkedIn, finding potential employers, networking, and more! There will also be a raffle for a chance to win a GrubHub gift card.", - link: 'https://nam02.safelinks.protection.outlook.com/?url=https%3A%2F%2Ffacebook.us19.list-manage.com%2Ftrack%2Fclick%3Fu%3Dada9150cb4cf2450b2870f9b7%26id%3D7d74d7c98c%26e%3D09a746bd56&data=04%7C01%7CAarushi.Pandey%40UTDallas.edu%7C8243a7b080f641eb39f208d8f2d841e2%7C8d281d1d9c4d4bf7b16e032d15de9f6c%7C0%7C0%7C637526357933158741%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=Uer6pWWHWS5cenmp4rBWn%2FGRYe0lky1rtM7cEX%2Fw84c%3D&reserved=0' - }, - { - name: "WITB x WWC Women's Day Panel", - date: 'TBD - 6:00 PM CST', - description: "Join us for an exciting panel with notable researchers, industry professionals, & businesswomen in STEM. More details coming soon!", - link: '' - }, - { - name: "Approaching LeetCode", - date: 'TBA', - description: "Join us for a technical workshop led by our VP of Internal Affairs, Cady Baltz, to learn about the steps on how to approach leetcode and making a plan to prep for technical interviews. We're very proud of her for landing two internship opportunities at Facebook and Apple. You definitely don't want to miss this!", - link: '' - }, - { - name: "Seniors Panel - If I were a Freshman", - date: 'TBA', - 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. More details coming soon!", - link: '' - }, - { - name: "Bridgeland High School Panel", - date: 'TBA', - 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. If you're interested in volunteering as a panelist for our high-school panel events, please watch for future announcements on our Discord!", - link: '' - }, -]; - -const flyers = [ - { - image: '', - link: '' - }, - { - image: '', - link: '' - }, - { - image: '', - link: '' - }, - { - image: '', - link: '' - }, - { - image: '', - link: '' - }, -]; +import Footer from "../components/footer"; const styles = (theme) => ({ @@ -101,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); @@ -134,87 +63,11 @@ class events extends Component {

Events

-
- - {/* - - {flyers.map((flyer) => ( - -
-
- - - -
- - ))} - - - */} -
-

Upcoming Events

-
- - - - - - - -

-

- - - - {rows.map((row) => ( - - -
-

{row.event.name}

- {row.event.date} - {row.event.description != '' ? - (
{row.event.description}

) : null } - {row.event.link != '' && row.event.link != null - ? (
- -
-
-
) - : null - } - - - {row.flyer != '' ? - () : null } - - - ))} - -
- - -
- - ); - } + +