Created ann attendees dadatabase and created a function to get all at…

handlers/attendee.go

@@ -33,6 +33,20 @@ func CreateAttendee(c *gin.Context) {
     c.JSON(http.StatusCreated, newAttendee)
 }
 
+//GET All Attendees
+func GetAllAttendees(c *gin.Context) {
+	setCors(c)
+
+	// Fetch all attendees from the database
+	getAttendeesAll, err := eventsdb.GetAllAttendees()
+	if err != nil {
+		log.Printf("ERROR: %+v", err)
+		c.IndentedJSON(http.StatusInternalServerError, nil) //server error
+		return
+	}
+	c.JSON(200, getAttendeesAll) //success - return the list of public events
+}
+
 
 /*   test 
 curl -X POST http://localhost:3000/api/attendees \

internal/database/atendee_table.go

@@ -42,15 +42,14 @@ func CreateAttendee(attendee models.Attendee) (*models.Attendee, error) {
 func GetAllAttendees() ([]models.Attendee, error) {
 	var attendees []models.Attendee
 
-	// Query the database to fetch all attendees
-	rows, err := dbmap.Query(` // Query the database to fetch all attendees
-    SELECT attendee_id, first_name, last_name, email, phone_number, image_url
+    // Query the database to fetch all attendees
+    rows, err := dbmap.Query(`
+    SELECT id, first_name, last_name, email, phone_number, image_url
     FROM attendees`)
 	if err != nil { // Check for errors
 		return nil, err
 	}
 	defer rows.Close()
-
 	for rows.Next() {
 		var attendee models.Attendee // Create a new Attendee struct to hold the retrieved data
 		err := rows.Scan(&attendee.AttendeeID, &attendee.FirstName, &attendee.LastName, &attendee.Email, &attendee.PhoneNumber, &attendee.ImageURL)

main.go

@@ -69,6 +69,10 @@ func main() {
 	 api.POST("/attendees", handlers.CreateAttendee)
 	 api.OPTIONS("/attendees", handlers.HandleCors)
 
+	 //GET Attendee
+	api.GET("/attendees-all", handlers.GetAllAttendees)
+	api.OPTIONS("/attendees-all", handlers.HandleCors)
 	// Start and run the server
+
 	router.Run(":3000")
 }

views/js/evently/src/HostList.css

@@ -1,42 +1,137 @@
-.header{
+.event-nav-container {
+    overflow: hidden;
+    font-size: 1.8rem;
     text-align: center;
+    color: #ff6116;
+  }
+
+  .browse-title {
+    font-family: "Bree Serif";
+  }
+
+  .search-bar {
+    margin-left: 4rem;
+    text-align: center;
+    font-family: "Bree Serif";
+  }
+
+  .search-bar input[type="text"] {
+    font-size: 20px;
+    text-align: center;
+    border: 1px solid black;
+    border-radius: 5em;
+    width: 35%;
+    height: 50px;
     font-family: "Bree Serif";
-}
-
-.host-button{
-    background-color: #2A5DB7;
-    margin-bottom: 3rem;
+  }
+
+  .search-btn {
+    border-radius: 50px;
+    border: none;
+    padding: 1.2%;
+  }
+
+  .link-container {
+    padding-top: 1rem;
+    margin-left: 4rem;
+  }
+
+  .btn {
+    border: none;
+    border-radius: 5rem;
+    font-size: 1.2rem;
+    outline: none;
+    padding: 0.75rem 1rem;
+    background-color: #2a5db7;
     color: white;
-    font-size: 1.5rem;
-    text-decoration: none;
-    padding: 1.2rem 2rem;
-    border-radius: 0.8rem;
-}
-
-.column-names{
-    border: 1px solid #dddddd;
-    text-align: left;
-    padding: 8px;
-}
-table{
-    border-collapse: collapse;
-    width: 100%;
-    table-layout: fixed;
-}
-td, th {
-    border: 1px solid #dddddd;
+    cursor: pointer;
+    margin: 2rem;
+    justify-content: space-between;
+    font-family: "Bree Serif";
+  }
+
+  .btn:hover {
+    background-color: #9db8f8;
+    color: black;
+  }
+
+  .btn.active {
+    background-color: #9db8f8;
+    color: black;
+  }
+
+  /* refactoring starts here */
+
+  .public-events-container {
+    margin-left: 5%;
+    margin-right: 5%;
+    justify-content: space-between;
+  }
+
+  .event-card-title {
+    font-size: 2em;
     text-align: center;
-    padding: 15px;
     font-family: "Bree Serif";
   }
-.profile-img{
-    width: auto;
-    height: auto;
-    border: 1px solid #dddddd;
-    padding: 15px;
-}
-.profile-img img{
-    max-width: 100%;
-    max-height: 100%;
-    object-fit: cover;
-}
+
+  .event-card:hover {
+    background-color: #9db8f8;
+  }
+
+  .event-img img {
+    width: 95%;
+    height: 50vh;
+    margin-left: 2.5%;
+  }
+
+  .events-row {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+  }
+
+  .event-card {
+    width: calc(33.33% - 10px);
+    margin-top: 5%;
+    margin-bottom: 3%;
+    margin: 5;
+    cursor: pointer;
+    background: #f8f8f8;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    box-shadow: 2px 8px 4px #d8d8d8;
+    font-family: "Bree Serif";
+  }
+
+  .event-card:hover {
+    background-color: #9db8f8;
+    cursor: pointer;
+  }
+
+  .date-and-time-container {
+    display: flex;
+    justify-content: space-between;
+    padding-left: 2%;
+    padding-right: 2%;
+    font-size: 1.5em;
+  }
+
+  .error-display {
+    text-align: center;
+    font-size: 1.5em;
+    margin: 10%;
+  }
+
+
+  @media screen and (max-width: 1200px) {
+    .event-card {
+      width: calc(50% - 10px);
+    }
+
+    .date-time-container {
+      font-size: 1.5rem;
+      padding: 0.75rem;
+    }
+  }
+

views/js/evently/src/HostList.jsx

@@ -1,68 +1,94 @@
-import React, { useEffect, useState } from 'react';
+import React, { useState, useEffect } from "react";
 import "./HostList.css";
-import axios from 'axios';
+import axios from "axios";
 import { useNavigate, Link } from "react-router-dom";
 
 function HostList() {
-  const [hosts, setHosts] = useState([]);
-  const [isLoading, setIsLoading] = useState(false);
+  const [attendeeData, setAttendeeData] = useState([]);
   const [error, setError] = useState("");
+  // const [selectEvent, setSelectEvent] = useState(null);
+  const navigateTo = useNavigate();
+
   useEffect(() => {
-    setIsLoading(true);
     axios
-    // Fetch hosts when the component mounts
-      .get(`http://localhost:3000/api/get-all-hosts`)
+      .get(`http://localhost:3000/api/attendees-all`)
       .then((response) => {
-        setHosts(response.data);
-        setIsLoading(false);
+        setAttendeeData(response.data);
       })
       .catch((error) => {
         setError(
-          "The server ran into an error getting the events, please try again!"
+          "The server ran into an error getting the attendees, please try again!"
         );
         setError(error);
-        setIsLoading(false);
       });
   }, []);
-
+
+  // const handleEventClick = (attendee) => {
+  //   try {
+  //     setSelectEvent(attendee);
+  //     navigateTo(`/RSVP/${attendees.attendees_id}`);
+  //   } catch {
+  //     setError("Something went wrong connecting");
+  //   }
+  // };
 
   return (
-    <div>
-    <div className= "header">
-        <h1>All Hosts</h1>
-        <Link to="/create-host" className="host-button"> Create Host</Link>
-    </div>  
-      <table>
-        <thead className= "column-names">
-          <tr>
-            <th>Profile</th>
-            <th>First Name</th>
-            <th>Last Name</th>
-            <th>Email</th> 
-          </tr>
-        </thead>
-        <tbody>
-          {hosts.map(host => (
-            <tr key={host.host_id}>
-              <div className="profile-img">
-              <td>
-                <img
+    <>
+      {/* <div className="attendees-nav-container">
+        <h2 className="browse-title"> Browse Events</h2>
+        <div className="search-bar">
+          <input type="text" placeholder="Start Your Search Here!" />
+          <button className="search-btn"> 🔍 </button>
+        </div>
+
+        <div className="link-container">
+          <button className="btn"> All Events </button>
+          <button className="btn"> Social </button>
+          <button className="btn"> Business </button>
+          <button className="btn"> Education </button>
+          <button className="btn"> Arts & Recreation </button>
+        </div>
+      </div> */}
+
+      {error ? (
+        <div className="error-display">
+          <p> Error! Something went wrong loading attendeess. </p>
+          <p>Please try again!</p>
+          <Link to="/">
+            <p>Home</p>
+          </Link>
+        </div>
+      ) : (
+        <div className="public-attendees-container">
+          <div className="attendees-row">
+            {attendeeData.map((attendees) => (
+              <div
+                key={attendees.attendees_id} //Either attendees.attendees_id or attendee.id.
+                className="attendees-card"
+                // onClick={() => handleEventClick(attendees)}
+              >
+                <p className="attendees-card-name"> {attendees.first_name} {attendees.last_name}</p>
+                <div className="attendees-img">
+                  <img
                     src={
-                        host.image_url !== "" ? host.image_url : "default.png"
+                      attendees.image_url !== "" ? attendees.image_url : "default.png"
                     }
-                    alt={`Image for ${host.first_name} ${host.last_name}`}
-                />
-              </td>
-              </div>  
-              <td>{host.first_name}</td>
-              <td>{host.last_name}</td>
-              <td>{host.email}</td>    
-            </tr>
-          ))}
-        </tbody>
-      </table>  
-    </div>
+                    alt="User inputed description."
+                  />
+                </div>
+                <div className="email-and-phone-number-container">
+                  <h4> Phone Number: {attendees.phone_number}</h4>
+                  <h4> Email: {attendees.email}</h4>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* {selectEvent && <RSVPButton attendees={selectEvent} />} */}
+    </>
   );
 }
 
-export default HostList;
+export default HostList;