started styling show page, created explore component

src/components/Event.jsx

@@ -3,44 +3,56 @@ import React, { Component } from 'react'
 
 let baseURL = ''
 
-if (process.env.NODE_ENV === 'development') {
-  baseURL = 'http://localhost:3003'
+if(process.env.NODE_ENV === 'development') {
+	baseURL = 'http://localhost:3003'
 } else {
-  baseURL = 'heroku backend url here'
+	baseURL = 'heroku backend url here'
 }
 
 export default class Event extends Component {
-    constructor(props) {
-        super(props)
-        this.state = {
-            event: {
-                creator: '',
-                title: '',
-                date: '',
-                category: '',
-                description: ''
-            }
-        }
-
-    }
-
-    componentDidMount() {
-        console.log(this.props.match.params.id)
-        axios.get(`${baseURL}/events/${this.props.match.params.id}`)
-        .then(response => {
-            this.setState({ event: response.data })
-        })
-    }
-
-    render() {
-        return (
-            <div>
-                <h1>{ this.state.event.Title }</h1>
-                <h3>Creator: { this.state.event.Creator }</h3>
-                <p>Date: { this.state.event.Date }</p>
-                <p>Category: { this.state.event.Category }</p>
-                <p>Description: { this.state.event.Description }</p>
+	constructor(props) {
+		super(props)
+		this.state = {
+			event: {
+				creator: '',
+				title: '',
+				date: '',
+				category: '',
+				description: ''
+			}
+
+		}
+
+	}
+
+	componentDidMount() {
+		console.log(this.props.match.params.id)
+		axios.get(`${baseURL}/events/${this.props.match.params.id}`)
+			.then(response => {
+				this.setState({ event: response.data })
+			})
+	}
+
+	render() {
+		return (
+			<div>
+        <h1 className="text-center">Get the Deets</h1>
+        <hr className="my-5 large"></hr>
+        <div className="page-wrapper d-flex">
+          <section className="page-content d-flex flex-wrap justify-content-center">
+            <div className="each-item d-flex flex-column rounded position-relative">
+              <h5 className="each-title text-start">{ this.state.event.Title }</h5>
+              <p className="each-name text-start"><strong>Added By:</strong> { this.state.event.Creator }</p>
+              <p className="each-name text-start"><strong>Date(s):</strong> { this.state.event.Date }</p>
+              <p className="badge rounded-pill text-center position-absolute">{ this.state.event.Category }<i className="fas fa-glass-cheers ml-1"></i></p>
+              <p className="each-name text-start"><strong>Description:</strong> { this.state.event.Description }</p>
             </div>
-        )
-    }
-}
+
+          </section>
+
+        </div>
+
+      </div>
+		)
+	}
+}

src/components/EventCard.jsx

@@ -18,8 +18,11 @@ export default class EventCard extends Component {
 		this.state = {
 			events: []
 		}
+		// this.findCategory = this.findCategory.bind(this)
 	}
 
+
+
 	deleteEvent(id) {
 		console.log('deleting a bookmark')
 
@@ -33,6 +36,20 @@ export default class EventCard extends Component {
 		})
 	}
 
+	// findCategory() {
+	// 	const categoryType = this.state.event.Category
+	// 	let p;
+	//
+	// 	if(categoryType === 'Nature') {
+	// 		p = <p className="badge rounded-pill text-center position-absolute"></p>
+	// 	}
+	// 	if(categoryType === 'Night-out') {
+	// 		p = <p className="badge rounded-pill text-center position-absolute"></p>
+	// 	} else {
+	// 		p = <p className="badge text-center position-absolute"></p>
+	// 	}
+	// }
+
 	render() {
 		return (
 			<div>
@@ -48,6 +65,11 @@ export default class EventCard extends Component {
                   <p className="each-name text-start"><strong>Date(s):</strong> { event.Date }</p>
                   {/* <button onClick ={() => this.deleteEvent(event._id)}>Delete</button> */}
                   <i className="far fa-trash-alt position-absolute" onClick={() => this.deleteEvent(event._id)}></i>
+                  {/* { this.findCategory(event => {
+                    return (
+                      p +  { event.Category }
+                    )
+                  }) } */}
                   <p className="badge rounded-pill text-center position-absolute">{ event.Category }<i className="fas fa-glass-cheers ml-1"></i></p>
                 </div>
               )