Merge pull request #36 from melinda-schmitz/ViewEventDetail

View event detail

client/src/App.js

@@ -18,6 +18,8 @@ import Landing from './containers/Landing';
 import Help from './containers/Help';
 // Import Foooter component
 import Footer from './components/Footer';
+// Import Event Details component
+import EventDetails from './containers/EventDetails/EventDetails';
 // import NavBar component
 import NavBar from './components/NavBar';
 // import card components
@@ -124,6 +126,7 @@ class App extends Component {
 										<Route exact path="/add" component={AddEvent} />
 										<Route exact path="/help" component={Help} />
 										<Route exact path="/login" component={Login} />
+										<Route exact path="/eventDetails" component={EventDetails} />
 									</Switch>
 								</div>
 							</div>

client/src/containers/EventDetails/EventDetails.css

@@ -0,0 +1,7 @@
+.section {
+    border: 1px solid black;
+    padding: 20px;
+}
+.padRight {
+    margin-right: 20px !important; 
+}

client/src/containers/EventDetails/EventDetails.js

@@ -0,0 +1,45 @@
+// import React
+import React, { Component } from 'react';
+import Button from '@material-ui/core/Button';
+import '../EventDetails/EventDetails.css';
+
+class EventDetails extends Component {
+  render() {
+    return (
+      <div>
+        <h1>Event Details</h1>
+        <div className="section">
+          <b>Event:</b> Charlotte's Web @ Stages Theatre (Pay What You Can performance)<br />
+          <b>Location:</b> 1111 Mainstreet, Hopkins, MN, 55343, United States<br />
+          <b>Date:</b> September 23rd, 2018<br />
+          <b>Time:</b> 1:00 PM<br />
+          <b>Ages:</b> All Ages<br />
+          <br />
+          <b>Description: </b>
+          Patrons can reserve up to SIX (6) tickets at no cost. Patron/Households can reserve tickets to a maximum of THREE (3) pay-what-you-can productions per season. The day of the performance you can “pay-what-you-can” by making a donation of any amount on your way into the theater.
+          <br />
+          <br />
+          <br />
+          <br />
+          <Button variant="contained" className="padRight">
+            Go Back
+          </Button>
+          <Button
+            variant="contained"
+            color="primary" className="padRight"
+          >
+           <i class="fa fa-map-o" aria-hidden="true"></i>  Directions
+          </Button>
+          <Button
+            variant="contained"
+            color="primary"  className="padRight"
+          >
+            Add Event
+          </Button>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default EventDetails;

client/src/containers/EventDetails/index.js

@@ -0,0 +1 @@
+export { default } from './EventDetails';

client/src/containers/Events/MyEventCard.js

@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+import { Link } from 'react-router-dom';
 import Card from '@material-ui/core/Card';
 import CardActions from '@material-ui/core/CardActions';
 import CardContent from '@material-ui/core/CardContent';
@@ -52,7 +53,7 @@ class MyEventCard extends Component {
 						</CardContent>
 						<CardActions>
 						<Grid container justify="flex-end">
-						<Button className="app-btn" variant="contained" color="primary" size="small"><span className={classes.btnText}>View Details</span><i className="far fa-arrow-alt-circle-right"></i></Button>
+						<Button className="app-btn" variant="contained" color="primary" size="small" component={Link} to="/eventDetails"><span className={classes.btnText}>View Details</span><i className="far fa-arrow-alt-circle-right"></i></Button>
 						<Button className="app-btn delete-event save-event-btn" variant="contained" color="primary" size="small"><span className={classes.btnText}>Delete Event</span><i className="fas fa-trash"></i></Button>
 						</Grid>
 						</CardActions>

client/src/containers/Landing/EventCard.js

@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+import { Link } from 'react-router-dom';
 import Card from '@material-ui/core/Card';
 import CardActions from '@material-ui/core/CardActions';
 import CardContent from '@material-ui/core/CardContent';
@@ -52,7 +53,7 @@ class EventCard extends Component {
 						</CardContent>
 						<CardActions>
 						<Grid container justify="flex-end">
-						<Button className="app-btn view-details-btn" variant="contained" color="primary" size="small"><span className={classes.btnText}>View Details</span><i className="far fa-arrow-alt-circle-right fa-2x"></i></Button>
+						<Button className="app-btn view-details-btn" variant="contained" color="primary" size="small" component={Link} to="/eventDetails"><span className={classes.btnText}>View Details</span><i className="far fa-arrow-alt-circle-right fa-2x"></i></Button>
 						<Button className="app-btn delete-event-btn" variant="contained" color="primary" size="small"><span className={classes.btnText}>Delete Event</span><i className="fas fa-trash"></i></Button>
 						</Grid>
 						</CardActions>

client/src/containers/Landing/UpcomingEventContent.js

@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+import { Link } from 'react-router-dom';
 import Typography from '@material-ui/core/Typography';
 import { withStyles } from '@material-ui/core/styles';
 import Button from '@material-ui/core/Button';
@@ -33,7 +34,7 @@ class UpcomingEventContent extends Component {
 							Time: {item.time}
 							</Typography>
 						<Typography component="p">
-							<Button variant="contained" className="view-details-btn" size="small">
+							<Button variant="contained" className="view-details-btn" size="small" component={Link} to="/eventDetails">
 								<i className="fas fa-info-circle"></i> <span className={classes.btnText}>View Details</span>
 							</Button>
 						</Typography>