Issues

[irishjack490]

What's the problem you're trying to solve?

Trying to render events into a favorites.ejs page when user clicks on the heart icon, I tried to do this by grabbing the image from the API, just like in apple-pies-places app but I am not sure why this is not working. I'd like to know if I am using the right approach or if there are other alternatives I can implement. Thanks in advance, I need an experienced set of eyes to look into this

Post any code you think might be relevant (one fenced block per file)

Here is the API snippet where I wanted to gran the image from, I also included the code from favorites.ejs

{
"events": [
{
"type": "mls",
"id": 6077353,
"datetime_utc": "2023-12-31T09:30:00",
"venue": {},
"datetime_tbd": true,
"performers": [
{
"type": "mls",
"name": "St. Louis CITY SC",
"image": "https://seatgeek.com/images/performers-landscape/st-louis-city-sc-3-7d3951/793870/51611/huge.jpg",
"id": 793870,
"images": {
"huge": "https://seatgeek.com/images/performers-landscape/st-louis-city-sc-3-7d3951/793870/51611/huge.jpg"
},

Here is the favorites.ejs code

<%- include('../partials/header') %>

<div class="row row-cols-1 row-cols-md-2 g-4">
  <% likedEvents.forEach(function(e) { %>
    <div class="col">
      <div class="card custom-card">

        <% if (e.performers && e.performers.length > 0) { %>
            <!-- Attempting to pull image from API path events/performers[0].img -->
            <img src="<%= likedEvent.performers[0].images.huge %>" class="card-img-top" alt="Event Image">
          <% } else { %>
            <!-- Display a default image or handle the case where no image is available -->
            <img src="https://i.imgur.com/N4yxzZK.png" class="card-img-top1" alt="Default Image">
            
          <% } %>
          
          <div class="card-body">
            <h5 class="card-title"><%= e.type %></h5>
        
    
        </div>
      </div>
    </div>
  <% }) %>
</div>

<%- include('../partials/footer') %>

If you see an error message, post it here. If you don't, what unexpected behavior are you seeing?

I don't see an error, but the default picture shows up on favorites and not the picture form the API

What is your best guess as to the source of the problem?

I think my schema might be messed up but I don't think I am looking at this right

What things have you already tried to solve the problem?

I tried to use events.performers[0].image but that didn't work

Paste a link to your repository here

https://github.com/irishjack490/Project2-Social-Events-App

[timmshinbone]

Share the models and the controller that is supposed to add an event to a favorite

[irishjack490]

Here are the controllers for the heart

router.post('/like-event/:eventId', async (req, res) => {
    const eventId = req.params.eventId;
    const userId = req.session.userId; // Assuming user is already authenticated
  
    try {
      const user = await User.findById(userId);
  
      // Check if the event is not already liked to avoid duplicates
      if (!user.likedEvents.includes(eventId)) {
        user.likedEvents.push(eventId);
        await user.save();
        res.json({ success: true, message: 'Event liked successfully' });
      } else {
        res.json({ success: false, message: 'Event already liked' });
      }
    } catch (error) {
      console.error('Error liking event:', error);
      res.status(500).json({ success: false, message: 'Internal Server Error' });
    }
  });

  router.get('/favorites', async (req, res) => {
    const { username, loggedIn, userId } = req.session
    try {
      const userId = req.session.userId;
      const user = await User.findById(userId).populate('likedEvents'); // Populate the likedEvents array with actual event documents
      
      const likedEvents = user.likedEvents;
  
      res.render('events/favorites', { likedEvents, username, userId, loggedIn });
    } catch (error) {
      console.error('Error fetching liked events:', error);
      res.status(500).json({ success: false, message: 'Internal Server Error' });
    }
  });

  //Delete event from favorites when clicking on the button

  router.post('/toggle-like-event/:eventId', async (req, res) => {
    const { username, loggedIn, userId } = req.session
    const eventId = req.params.eventId;
    
  
    try {
      const user = await User.findById(userId);
  
      // Check if the event is liked
      const eventIndex = user.likedEvents.indexOf(eventId);
      if (eventIndex !== -1) {
        // If liked, remove it
        user.likedEvents.splice(eventIndex, 1);
        await user.save();
        res.json({ success: true, message: 'Event removed from favorites' });
      } else {
        // If not liked, add it
        user.likedEvents.push(eventId);
        await user.save();
        res.json({ success: true, message: 'Event added to favorites' });
      }
    } catch (error) {
      console.error('Error toggling event like:', error);
      res.status(500).json({ success: false, message: 'Internal Server Error' });
    }
  });
  module.exports = router;
 

I added the liked feature under user model

///Schema and dependencies////
const mongoose = require('../utils/connection');

///destructuring the Schema and model from mongoose
const {Schema, model} = mongoose;

///Schema definition 
const userSchema = new Schema ({
    username: {
        type: String,
        required: true,
        unique: true, 
    },
    password: {
        type: String,
        required: true, 
    },
    //heart feature 
    likedEvents: [{ type: Number, unique: true }],
})
///User Model////
const User = model('User', userSchema);


////Export user model/////
module.exports = User; 

Oh wait, I have this model but I don't think it is being used

const mongoose = require('mongoose');

const eventSchema = new mongoose.Schema({
  eventName: String,
  location: String,

});

module.exports = mongoose.model('event', eventSchema);

[timmshinbone]

so liked events looks like it's not set up exactly correctly. I think what you should do is grab some of the event data like we grabbed country data to make a new event in the database. JUST like the places app.
Do you have anything like that set up or started?

[irishjack490]

That is great idea, I'll do that.. I don't have that set up I don't think. Tks so much.. let me try that and will let you know how it went

[irishjack490]

Good morning, I am still working on this. Thanks so much for the help :)