Add Events Section (cont'd)

Gum-Joe · Dec 29, 2020 · 097213b · 097213b
1 parent ad30c60
commit 097213b
Show file tree

Hide file tree

Showing 4 changed files with 105 additions and 25 deletions.
diff --git a/frontend/src/App.css b/frontend/src/App.css
@@ -86,8 +86,14 @@ body {
   display: inline-flex;
 }
 
+.isitweeka h5 {
+  font-size: 1em;
+  display: inline-flex;
+}
+
 .isitweeka a {
   color: #00B0FF;
+  display: inline-flex;
 }
 
 .events * {
@@ -120,7 +126,8 @@ button {
 }
 
 button.forward {
-  margin: 0 auto;
+  /*margin-right: auto;*/
+  /*margin-left: -8px;*/
   width: auto;
 }
 
@@ -215,6 +222,12 @@ button.back::after {
   padding: 0 5vw;
 }
 
+.events-row:first-child {
+  border-top-style: solid;
+  border-top-width: 1px;
+  border-top-color: var(--link-active);
+}
+
 
 
 :root {

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -3,6 +3,8 @@ import gaSetState, { GA_DISABLE_COOKIE_STR, GA_PROPERTY } from "./gAnalytics";
 import './App.css';
 import CookieConsent from 'react-cookie-consent';
 import { Navbar } from "react-bootstrap";
+import EventRow from "./components/EventRow";
+import { dummyResponse, EventData } from "./components/EventsList";
 
 /*function App() {
   return (
@@ -46,6 +48,7 @@ interface TheState {
   /** Tells page when API has ran  (i.e. page loaded) */
   apiHasRan: boolean;
   isWeekend: boolean;
+  eventData: EventData;
 }
 
 class App extends Component<{}, TheState> {
@@ -58,13 +61,24 @@ class App extends Component<{}, TheState> {
       week: "unknown",
       apiHasRan : false,
       isWeekend: false,
+      eventData: {
+        events: [],
+        generatedAt: 0,
+      }
     }
   }
 
   componentDidMount() {
     this.loadGoogleAPI();
+    this.fetchEvents();
   }
 
+  async fetchEvents() {
+    this.setState({
+      eventData: dummyResponse,
+    });
+  };
+
   /**
    * Loads the Google API, then runs {@link getCalendar}
    */
@@ -213,9 +227,9 @@ class App extends Component<{}, TheState> {
     if (this.state.isNotWeekAB || this.state.week === "unknown") {
       return (
         <>
-          <h2>It is neither Week A or B.</h2>
+          <h2>It is neither Week A nor B.</h2>
           <h3>This means it's probably a holiday.</h3>
-          <button className="forward" onClick={this.scrollDown}><div>events</div></button>
+          <button style={{ marginRight: "auto", marginLeft: -8 }} className="forward" onClick={this.scrollDown}><div>events</div></button>
           <h5>If you believe this is in error, please email <a href="mailto:info@isitweeka.com">info@isitweeka.com</a></h5>
         </>
       )
@@ -225,7 +239,7 @@ class App extends Component<{}, TheState> {
           <h2>{this.state.isWeekend ? "Next week will be" : "It is"}</h2> {/* Special case for weekend, where we show next week*/}
           <h1>Week {this.state.week}</h1>
           <h4>More coming soon...</h4>
-          <button className="forward" onClick={this.scrollDown}><div>events</div></button>
+          <button style={{ marginRight: "auto", marginLeft: -8 }} className="forward" onClick={this.scrollDown}><div>events</div></button>
         </>
       )
     }
@@ -262,27 +276,18 @@ class App extends Component<{}, TheState> {
         <div className="isitweeka events">
           <h2><button onClick={this.scrollUp} className="back" /> Upcoming Events</h2>
           <div className="events-list">
-            <div className="events-row" style={{ backgroundColor: "#2C1F39" }}>
-              <div>
-				<div style={{ backgroundImage: `url("/Logo_Export_Trans_but_not_on_HRT.png")`, ...baseEventImageStyle }}>
-				  {/*<h4>[IMAGE SET AS BACKGROUND OF THIS DIV]</h4>*/}
-				</div>
-              </div>
-              <div>
-                <h3>Would I Lie To You?</h3>
-                <button className="forward">Buy Tickets</button>
-                <h4>On sale now!</h4>
-              </div>
-            </div>
-            <div className="events-row">
-				<div style={{ ...baseEventImageStyle }}>
-				  <h4>[IMAGE SET AS BACKGROUND OF THIS DIV]</h4>
-				</div>
-				<div>
-				  <h3>Event Number Two?</h3>
-				  <h4>Tickets on sale 03/02/21</h4>
-				</div>
-            </div>
+            {this.state.eventData.events.map(({ title, headerURL, backgroundColor }) => (
+                <EventRow ticketsOnSale imageURL={headerURL} title={title} saleDate={"01/01/2021"} background={backgroundColor} />
+            ))}
+            {/*<div className="events-row">*/}
+			{/*	<div style={{ ...baseEventImageStyle }}>*/}
+			{/*	  <h4>[IMAGE SET AS BACKGROUND OF THIS DIV]</h4>*/}
+			{/*	</div>*/}
+			{/*	<div>*/}
+			{/*	  <h3>Event Number Two?</h3>*/}
+			{/*	  <h4>Tickets on sale 03/02/21</h4>*/}
+			{/*	</div>*/}
+            {/*</div>*/}
           </div>
         </div>
 

diff --git a/frontend/src/components/EventRow.tsx b/frontend/src/components/EventRow.tsx
@@ -0,0 +1,39 @@
+import React from "react";
+
+const baseEventImageStyle = {
+	backgroundSize: "contain",
+	backgroundRepeat: "no-repeat",
+	backgroundPosition: "center",
+	display: "flex",
+	flex: 1,
+	margin: "auto",
+	width: "90%",
+	maxHeight: "80%",
+};
+
+interface RowProps {
+	imageURL: string;
+	title: string;
+	saleDate: string;
+	background: string;
+	ticketsOnSale?: boolean;
+}
+
+export default class EventRow extends React.PureComponent<RowProps, never> {
+	render() {
+		return (
+			<div className="events-row" style={{ backgroundColor: this.props.background }}>
+              <div>
+				<div style={{ backgroundImage: `url(${this.props.imageURL})`, ...baseEventImageStyle }}>
+				  {/*<h4>[IMAGE SET AS BACKGROUND OF THIS DIV]</h4>*/}
+				</div>
+              </div>
+				<div>
+				  <h3>{this.props.title}</h3>
+					{this.props.ticketsOnSale ? <button className="forward">Buy Tickets</button> : null}
+					<h4>Tickets on sale {this.props.saleDate}</h4>
+				</div>
+            </div>
+		);
+	}
+}
diff --git a/frontend/src/components/EventsList.tsx b/frontend/src/components/EventsList.tsx
@@ -0,0 +1,23 @@
+export interface EventItem {
+	title: string;
+	ticketsURL: string;
+	headerURL: string;
+	backgroundColor: string;
+}
+
+export interface EventData {
+	events: Array<EventItem>;
+	generatedAt: number; // Timestamp
+}
+
+export const dummyResponse: EventData = {
+	events: [
+		{
+			title: "Would I Lie To You?",
+			ticketsURL: "#",
+			headerURL: "/Logo_Export_Trans_but_not_on_HRT.png",
+			backgroundColor: "#2C1F39",
+		}
+	],
+	generatedAt: 986712435,
+}