fix Event.jsx merge conflict

mollycarroll · Mar 17, 2021 · b30b735 · b30b735
2 parents 9d23287 + 30fb4a2
commit b30b735
Show file tree

Hide file tree

Showing 8 changed files with 160 additions and 89 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/assets/hero.jpeg b/src/assets/hero.jpeg
diff --git a/src/components/Event.jsx b/src/components/Event.jsx
@@ -4,46 +4,56 @@ import EditForm from './EditForm.jsx'
 
 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>
-
-                <EditForm event={ this.state.event }/>
+	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>
+		)
+	}
+}
diff --git a/src/components/EventCard.jsx b/src/components/EventCard.jsx
@@ -6,32 +6,49 @@ import { Link } from 'react-router-dom'
 
 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 EventCard extends Component {
-  constructor(props) {
-    super(props)
-    this.state = {
+	constructor(props) {
+		super(props)
+		this.state = {
 			events: []
 		}
-  }
+		// this.findCategory = this.findCategory.bind(this)
+	}
+
+
 
-  deleteEvent(id) {
-    console.log('deleting a bookmark')
+	deleteEvent(id) {
+		console.log('deleting a bookmark')
+
+		axios.delete(baseURL + '/events/' + id, {
+			method: 'DELETE'
+		}).then(res => {
+			const findIndex = this.state.events.findIndex(event => event._id === id)
+			const copyEvents = [...this.state.events]
+			copyEvents.splice(findIndex, 1)
+			this.setState({ events: copyEvents })
+		})
+	}
 
-    axios.delete(baseURL + '/events/' + id, {
-      method: 'DELETE'
-    }).then(res => {
-      const findIndex = this.state.events.findIndex(event => event._id === id)
-      const copyEvents = [...this.state.events]
-      copyEvents.splice(findIndex, 1)
-      this.setState({events: copyEvents})
-    })
-  }
+	// 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 (
@@ -43,10 +60,16 @@ export default class EventCard extends Component {
             { this.props.events.map(event => {
               return (
                 <div className="each-item d-flex flex-column rounded position-relative" key={ event._id } >
-                  <Link to={ event._id }><h5 className="each-title text-start">{ event.Title }</h5></Link>
+                  <Link to={ event._id } className="router-link"><h5 className="each-title text-start">{ event.Title }</h5></Link>
                   <p className="each-name text-start"><strong>Added By:</strong> { event.Creator }</p>
                   <p className="each-name text-start"><strong>Date(s):</strong> { event.Date }</p>
-                  <button onClick ={() => this.deleteEvent(event._id)}>Delete</button>
+                  {/* <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>
               )

diff --git a/src/components/Explore.jsx b/src/components/Explore.jsx
diff --git a/src/components/Home.jsx b/src/components/Home.jsx
@@ -2,11 +2,20 @@ import React, { Component } from 'react'
 import EventCard from './EventCard'
 
 export default class Home extends Component {
-    render() {
-        return (
-            <div>
-                <EventCard events={ this.props.events }/>
+	render() {
+		return (
+
+			<div>
+        <div className="container-fluid px-0 mb-5">
+          <div className="hero">
+            <p className="text-center hero-text mb-0 d-flex justify-content-center real">Gather</p>
+            <p className="text-center hero-text reflection d-flex justify-content-center">Gather</p>
+          </div>
+        </div>
+
+        <EventCard events={ this.props.events }/>
+
             </div>
-        )
-    }
-}
+		)
+	}
+}
diff --git a/src/components/header.jsx b/src/components/header.jsx
@@ -5,7 +5,7 @@ class Header extends Component {
 	render() {
 		return (
 			<div>
-        <nav className="navbar navbar-expand-lg mb-5">
+        <nav className="navbar navbar-expand-lg">
           <div className="container-fluid">
             <a className="navbar-brand" href="#"><i className="fab fa-cotton-bureau"></i><span className="navbar-text ml-2">
               Gather

diff --git a/src/index.css b/src/index.css
@@ -1,6 +1,3 @@
-/* colors: https://www.palettelist.com/ */
-/* fonts: google fonts */
-/* gradients: https://webgradients.com/ */
 @import url('https://fonts.googleapis.com/css2?family=Raleway&display=swap');
 
 :root {
@@ -103,17 +100,65 @@ nav {
   font-weight: 700;
 }
 
+.router-link:hover {
+  background-image: linear-gradient(to right, var(--mint), var(--turquoise), var(--red-ish), var(--turquoise), var(--mint));
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
 .each-name {
   color: var(--not-black);
   font-size: 1em;
 }
 
 .rounded-pill {
   background: var(--turquoise);
+  bottom: 0;
   color: white;
   font-weight: 700;
-  bottom: 0;
-  width: 40%
+  width: 40%;
+}
+
+/* refer to line 9 in RESOURCES.md for citation */
+.hero {
+  background: url(./assets/hero.jpeg) no-repeat center;
+  background-size: cover;
+  box-shadow: 0 0.6px 2.2px rgba(0, 0, 0, 0.02),
+    0 1.5px 5.3px rgba(0, 0, 0, 0.028),
+    0 2.9px 10px rgba(0, 0, 0, 0.035),
+    0 5.1px 17.9px rgba(0, 0, 0, 0.042),
+    0 9.6px 33.4px rgba(0, 0, 0, 0.05),
+    0 23px 80px rgba(0, 0, 0, 0.07);
+  height: 400px;
+}
+
+.hero-text {
+  color: white;
+  font-size: 5em;
+  font-weight: 700;
+}
+
+.real {
+  padding-top: 3em;
+}
+
+.reflection {
+  margin-top: -.8em;
+  -moz-transform: scaleY(-1);
+  -o-transform: scaleY(-1);
+  -webkit-transform: scaleY(-1);
+  transform: scaleY(-1);
+  -webkit-mask-image: -webkit-gradient(linear, right top, right bottom, from(transparent), color-stop(1%, transparent), to(rgba(0, 0, 0, 0.4)));
+}
+
+.fa-trash-alt {
+  bottom: 2em;
+  cursor: pointer;
+  font-size: 1.5em;
+}
+
+.fa-trash-alt:hover {
+  color: white;
 }
 
 @keyframes fade-in {