Eventonica

README.md

@@ -1,42 +1,62 @@
-# Quick-setup 
+# About the Project
+---
+This application is an event page that allows users to add, remove, or favorite event cards. The event data from the application is fetched from a PostGreSQL database.
 
-#### Once you have successfully setup this template and initial database, the view will look like this:
 
-![Initial View of the project](https://raw.githubusercontent.com/Yosolita1978/screenshoots/50a5573f21c1265d20d838a36b98588f9b4eefce/2023/H1/Screen%20Shot%202023-03-09%20at%208.03.32%20PM.png)
-### Your First Express and React App with a DB connection
+## Built With
 
-1. Go to your source directory in your terminal and run the command `git clone https://github.com/Yosolita1978/2023EventonicaTemplate.git <NAMENEWDIRECTORY>`
-![You will see something like this in your terminal.]
+* React
+* Bootstrap
 
-> <img width="768" alt="Screen Shot 2023-03-10 at 11 10 34 AM" src="https://user-images.githubusercontent.com/102179075/224608432-5e3d18bd-7cf5-4576-8b3f-2e903106abe1.png">
+## Getting Started
+---
 
-2. To clean your folder from the owner's git, run the command `rm -rf .git` inside the folder <NAMENEWDIRECTORY>. Then re-initialize as the owner with `git init`.
 
-3. Go to the server folder in the project (`cd server`) and run the command `npm install`
+### Prerequisites
+* npm
 
-4. Go to the client folder (`cd .. and cd client`) and run the command `npm install`
+### Installation
+This project does not rely on any external dependencies or services.
+1. Clone the repo ```git clone https://github.com/ggar46/Eventonica/tree/eventonicabranch <NAMENEWDIRECTORY>```
+2. Install NPM packages ```npm install```
+3. Add the database using PostGreSQL.
+    1. Inside your server directory create a `.env` file and copy there the values that are in `.envexample`
+    2. Open a terminal window, and go to the psql terminal with the comand `psql`
+    3. Inside the psql prompt create your database eventonica with the command `create database eventonica;` (don't forget the semicolon!
+    4. Go inside the server directory of your project, and run the command `psql -d eventonica -f db.sql` that will create a table `events` with 5 rows inside your db eventonica. 
 
-5. This template has two servers already working. Both servers should start simultaneously, or "concurrently", by running `npm run dev` from within the server directory in your terminal. Please note that your backend server will run from port 8080, and your frontend React server will run from port 3000 .
 
-6. To add a Postgres DB - you will need another terminal window for this part
+## Usage
 
-6.1 Inside your server directory create a `.env` file and copy there the values that are in `.envexample`
+Features
+* Delete events by pressing the labelled delete buttons.
+* Add events by filling out the event title and location, and select the date.
+* Toggle favorited and unfavorited events by clicking the favorite button. The black heart will turn red when the event has been favorited.
 
-* In a different terminal window go to the psql terminal with the comand `psql`
-* Inside the psql prompt create your database eventonica with the command `create database eventonica;` (don't forget the semicolon!)
 
-![You will see something like this](https://raw.githubusercontent.com/Yosolita1978/screenshoots/b6b7e47b8ccda4b9f709d20e94cacb6506d4dc13/2023/H1/Screen%20Shot%202023-03-13%20at%2011.13.13%20AM.png)
+## Contributing
 
-Back in the terminal window with the project go inside the server directory and run the command `psql -d eventonica -f db.sql` that will create a table `events` with 5 rows inside your db eventonica. 
-![This will be the result of that command](https://raw.githubusercontent.com/Yosolita1978/screenshoots/b6b7e47b8ccda4b9f709d20e94cacb6506d4dc13/2023/H1/Screen%20Shot%202023-03-13%20at%2011.12.29%20AM.png)
+If you have a suggestion that would make this better, please fork the repo and create a pull request:
+1. Fork the Project
+2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
+3. Commit your Changes (git commit -m 'Add some AmazingFeature')
+4. Push to the Branch (git push origin feature/AmazingFeature)
+5. Open a Pull Request
 
-Your DB should look like this inside the psql terminal
-![Your DB should look like this](https://raw.githubusercontent.com/Yosolita1978/screenshoots/696689a627eb5ca206b5a2eaebec7cc1efa15ffc/2023/H1/Screen%20Shot%202023-03-09%20at%208.25.54%20PM.png)
 
-# Links that you will need
+## License
 
-* The instructions for [pg](https://node-postgres.com/apis/pool)  
-* Setup [postgres correctly](https://github.com/Techtonica/curriculum/blob/main/databases/installing-postgresql.md).
+Licensed by blank
 
 
+## Contact
+
+Gisselle Garcia - email@example.com
+Project Link - https://github.com/ggar46/Eventonica
+
+
+## Acknowledgments
+---
+* Icons library [fontAwesomeLibrary](https://fontawesomeicons.com/heart)
+* Base template by Yosolita1978 [Link to Github](https://github.com/Yosolita1978/2023EventonicaTemplate)
 

client/public/index.html

@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
+    <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
@@ -14,7 +15,7 @@
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!-- <link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> -->
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.

client/src/App.css

@@ -1,15 +1,59 @@
+@import url('https://fonts.googleapis.com/css2?family=Satisfy&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Handlee&display=swap');
+
 .App {
-  display: grid;
-  align-items: center;
-  justify-content: center;
-  margin-top: 50px;
+  display: flex;
+  flex-direction: column;
+  background-color: #232946;
+  min-height:100vh;
+  padding: 60px;
+  font-family: Georgia, 'Times New Roman', Times, serif;
 }
 
-.Events {
-  box-shadow: 1px, gray;
+/* .Events {
+  box-shadow: 25px, rgb(189, 233, 119);
+} */
+
+#h1 {
+  color: #fffffe;
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 20px;
+  margin-bottom: 30px;
+  font-weight: bolder;
+  text-shadow: 1px 1px #eebbc3;
+  font-family:'Satisfy', cursive;
+  font-weight:bold;
+  font-size: xx-large;
 }
 
-h1 {
-  color: #00556e;
-  margin-bottom: 50px !important;
+.red-color {
+  color: red;
+}
+
+
+#heartbutton{
+  background-color:#eebbc3;
+  color: #232946;
+  border-radius: 8px;
+}
+
+#deletebutton{
+  background-color: #232946;
+  color: #fffffe;
+  border-radius: 8px;
+}
+
+moment {
+  color:#b84c2e;
+}
+
+.card-title {
+  font-size: 18px;
+  color:#232946;
+  padding: 1px;
+  background-color: #eebbc3;
+  border-radius: 12px;
+  display: flex;
+  justify-content: center;
 }

client/src/App.js

@@ -3,9 +3,14 @@ import Events from './components/events';
 
 function App() {
   return (
+
     <div className="App">
-      <h1>Techtonica 2023 events</h1>
-    <Events />
+      <div id="h1" >
+      <h1>Techtonica Events 2023</h1>
+      </div>
+      <br></br>
+      <Events />
+      <br></br>
     </div>
   );
 }

client/src/App.test.js

@@ -1,8 +1,22 @@
 import { render, screen } from '@testing-library/react';
 import App from './App';
+import AddEventForm from './components/addeventform';
+import Events from './components/events';
 
-test('renders learn react link', () => {
-  render(<App />);
-  const linkElement = screen.getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
+
+describe("Add Event Form", () => {
+  test("renders event form component", () => {
+    render(<AddEventForm />);
+  });
+});
+
+describe("Add Event Cards", () => {
+  test("renders events.js component", () => {
+    render(<Events />);
+  });
 });
+
+test("renders Techtonica Events 2023 title", () => {
+  render(<App />);
+  expect(screen.getByText(/Techtonica Events 2023/));
+});

client/src/components/addeventform.js

@@ -0,0 +1,73 @@
+import { useState } from "react";
+import './eventForm.css';
+
+
+const AddEventForm = (props) => {
+
+    //This is my state with the initial values empty
+    const [event, setEvent] = useState({ title: "", location: "", eventtime: "" })
+    //This is my data
+    //{title: 'Women', location: 'Overland'. eventtime: "2023-03-29T07:00:00.000Z"}
+
+    const handleTitleChange = (e) => {
+        e.preventDefault();
+        let newTitle = e.target.value;
+        setEvent((event) => ({ ...event, title: newTitle }));
+        //console.log(event.title);
+
+    }
+    const handleLocationChange = (e) => {
+        e.preventDefault();
+        let newLocation = e.target.value;
+        setEvent((event) => ({ ...event, location: newLocation }));
+        //console.log(event.location);
+    }
+    const handleDateChange = (e) => {
+        e.preventDefault();
+        let newDate = e.target.value;
+        setEvent((event) => ({ ...event, eventtime: newDate }));
+        //console.log(event.eventtime);
+    }
+
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        setEvent(event);
+        props.postRequest(event);
+    }
+
+    return (
+        <form id="form" onSubmit={handleSubmit}>
+            <span id="formspan">
+            <label>&nbsp;&nbsp;Title:&nbsp;&nbsp;</label>
+            <input
+                type="text"
+                id="add-event-title"
+                placeholder="Event Title"
+                required
+                value={event.title} //state
+                onChange={handleTitleChange}
+            />&nbsp;
+            <label>&nbsp;&nbsp;Place:&nbsp;&nbsp;</label>
+            <input
+                type="text"
+                id="add-event-location"
+                placeholder="Event Location"
+                required
+                value={event.location} //state
+                onChange={handleLocationChange}
+            />
+            <label>&nbsp;&nbsp;Date:&nbsp;&nbsp;</label>
+            <input
+                type="date"
+                id="add-event-date"
+                value={event.eventtime} //state
+                onChange={handleDateChange}
+            />
+            <button id="eventbutton" type="submit" >Add Event</button>
+            </span>
+        </form>
+    )
+
+}
+
+export default AddEventForm;

client/src/components/event.js

@@ -1,18 +1,44 @@
 import Card from 'react-bootstrap/Card';
 import Moment from "react-moment";
+import { useEffect, useState } from 'react';
+
+
 
 const EventCard = (props) =>{
+  const [isFavorited, setIsFavorited] = useState(props.isFavorite); 
+
+//need to useEffect
+useEffect(() => {props.onFaveId(props.id, isFavorited)}, [isFavorited])
+
+    //Was checking to see the difference between the two variables
+    console.log("favoritesId is", props.favoritesId);
 
     return(
-    <Card style={{ width: '18rem' }}>
+    <Card id="eachCard" style={{width:'18rem' }}>
     <Card.Body>
-      <Card.Title>{props.title}</Card.Title>
-      <Card.Subtitle className="mb-2 text-muted">Date: {!props.time ? "TBD" : <Moment format={"DD/MM/YYYY"}>{props.time}</Moment>}</Card.Subtitle>
+      <Card.Title class="card-title">{props.title}</Card.Title><br></br>
+      <Card.Subtitle className="mb-2 .text-white">Date: {!props.time ? "TBD" : <Moment format={"DD/MM/YYYY"}>{props.time}</Moment>}</Card.Subtitle>
       <Card.Text>
         {props.location}
       </Card.Text>
+
+      {/* <span>{isFavorited? <p>HEART</p> : <p>No heart</p>}</span> */}
+      {/* <span>{isFavorited? <i class='fa fa-heart red-color'></i> : <i class='fa fa-heart'></i>}</span> */}
+      <br></br>
+      <button id="deletebutton" onClick={() => props.deleteRequest(props.id)}>Delete</button> 
+      <span>&nbsp;&nbsp;<button  id="heartbutton" onClick={() => setIsFavorited(!isFavorited)}>{isFavorited? <i class='fa fa-heart red-color'></i> : <i class='fa fa-heart'></i>}</button></span>
+
+
+
     </Card.Body>
   </Card>
   )}
 
-export default EventCard;
+export default EventCard;
+
+
+/*
+-we need an icon that can change color when it is clicked
+-if boolean is true for each event (shown by state in event.js), 
+then we will use the ternary operator on a 
+*/

client/src/components/eventForm.css

@@ -0,0 +1,33 @@
+.card {
+    background-color: #b8c1ec !important;
+    color: #232946;
+    margin-left: auto;
+    margin-right: auto;
+    display: block;
+}
+
+#formspan{
+    display:flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 70px;
+  }
+
+  ::placeholder { 
+    color: #eea9b3;
+    opacity: 1; 
+    font-family:Georgia, 'Times New Roman', Times, serif;
+    font-size: medium;
+  }
+
+  #eventbutton{
+    margin-left: 20px;
+    border-radius: 8px;
+    background-color: #eebbc3;
+    color:#232946;
+
+  }
+
+label{
+    color:white;
+}