favourite.js

import React from 'react';
import { Col, Row } from 'antd';
import DogCard from './dogcard';
import { status, json } from '../utilities/requestHandlers';
import UserContext from '../contexts/user';

class Favourite extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      posts: [],
      favourites:[]
    }
  }

  static contextType = UserContext;

  componentDidMount() {
    fetch('https://melody-annex-3000.codio-box.uk/api/v1/dogs')
    .then(status)
    .then(json)
    .then(data=>{
      console.log(data)
      this.setState({posts:data})        
    })
    .catch(err => console.log("Error fetching dogs", err))
    
    let headers = new Headers();
    headers.append('Authorization', this.context.user.Authorization);
    fetch(`https://melody-annex-3000.codio-box.uk/api/v1/dogs/favourite`, {
      headers:headers
  })
    .then(status)
    .then(json)
    .then(data=>{
      console.log(data)
      this.setState({favourites:data})        
    })
    .catch(err => console.log("Error fetching dogs", err))

  }

  render() {
    if (!this.state.posts.length||!this.state.favourites.length) {
      return <h3>Loading posts...</h3>
    }
    console.log(this.state.favourites)
    let favouriteIDS=this.state.favourites.map(favourite=>{
      return favourite.dogID
    })
    const cardList = this.state.posts.filter(dog=>favouriteIDS.includes(dog.ID)).map(post => {
      return (
        <div style={{padding:"10px"}} key={post.ID}>
          <Col span={6}>
            <DogCard {...post} />
          </Col>
        </div>
      )
    });
    return (
      <Row type="flex" justify="space-around">
        {cardList}
      </Row>
    );
  }
}

export default Favourite;