Favorites won't show in our Frontend

[KenGibb]

Describe the bug A clear and concise description of what the bug is. Our favorite route isn't showing on our frontend

What is the problem you are trying to solve? We are trying to get favorites to show on the frontend.

Expected behavior A clear and concise description of what you expected to happen. We expected what game we favorited to render on our favorites page and it keeps giving us an error

What is the actual behavior? A clear and concise description of what actually happened. We keep getting an error in the browser saying ""

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

Frontend

import { useState, useEffect } from 'react'
import Card from 'react-bootstrap/Card'
import { Link } from 'react-router-dom'
import LoadingScreen from '../shared/LoadingScreen'

import { getAllFavorites } from '../../api/favorites'
// import messages from '../shared/AutoDismissAlert/messages'

const cardContainerStyle = {
    display: 'flex',
    flexFlow: 'row wrap',
    justifyContent: 'center'
}

const FavoriteIndex = (props) => {
    const [favorites, setFavorites] = useState([])
    const [error, setError] = useState(false)
    // console.log('these are the favorites', favorites)

    const { msgAlert } = props
    console.log()
    console.log(getAllFavorites())
    useEffect(() => {
        getAllFavorites()
            .then(res => setFavorites(res.data.favorites))
            // .then(res => console.log('this is the res', res.data))
            .catch(err => {
                console.log('This is the error', err)
                msgAlert({
                heading: 'Error geting favorites',
                message: 'failed to get your favorites',
                variant: 'danger'
            })
            setError(true)
         })
    }, [])

    if (error) {
        return <p>Error!</p>
    }

    if (!favorites) {
        return <LoadingScreen />
    } else if (favorites.length === 0) {
        return <p>No favorites yet, go add some!</p>
    }

    const favCards = favorites.map(fav => (
        <>
            <Card key={ fav.id } style={{ width: '30%', margin: 5 }}>
                <Card.Header>{ fav.title }</Card.Header>
                <Card.Body>
                    <Card.Text>
                        <Link to={/games/${fav._id}} className="btn btn-warning">View { fav.title }</Link>
                    </Card.Text>
                    {fav.owner ?
                    <Card.Footer>
                        owner { fav.owner.username }
                    </Card.Footer>
                    : null}
                </Card.Body>
            </Card>
        </>
    ))

    console.log('These are the cards', favCards)

    return (
        <div className="container-md" style={ cardContainerStyle }>
            {favCards}
        </div>
    )
}

export default FavoriteIndex

Backend

// GET
// show all the favorites for a user
router.get('/favorites', requireToken, (req, res, next) => {
    // console.log(req.user)
    const userId = req.user._id
    Favorite.find({ owner: userId})
        .populate('game')
        .populate('owner')
        .then((favorites) => {
            console.log(req)
            // requireOwnership(req, userId)
            return favorites.map((favorite) => favorite.toObject())
        })
        .then((favorites) => {
            // return favorites.map((favorite) => favorite.toObject())
            res.status(201).json({ favorites: favorites })
        })
        // .then(() => res.sendStatus(204))
        .catch(next)
  })

What is your best guess as to the source of the problem? We might be missing something

What things have you already tried to solve the problem? We console.logged all of the functions and everything and it still isn't working

Additional context Add any other context about the problem here.

Paste a link to your repository here https://github.com/ShadowXG/team-project-1-frontend https://github.com/ShadowXG/team-project-1-backend