import React,{useState} from 'react'
import axios from 'axios';
import ReactDOM from "react-dom";

export default class Deneme extends React.Component {
    constructor(props) {
      super(props);

      this.state = {
        loading: true,
        data: []
      };
    }

    getData() {
        const PostsURL = "https://graph.instagram.com/me/media?fields=id,caption,media_url,permalink,username&access_token=IG....";
        axios.get(PostsURL).then((res) => {
          const data = res.data.data;
          console.log(data)

          this.setState({
            data: data.filter(data => ['yes'].includes(data.caption)),
            loading: false,
          });
        });
      }

    async componentDidMount() {
      this.getData();
    }

    render() {
        if (this.state.loading) {
          return <div className='loadingDiv'>Calling the API, one moment please!</div>;
        }
      
        const filterData = this.state.data.filter(d =>
          ['yes'].includes(d.caption)
        )
      
        return (
          <div className="container">
              {filterData.map((d) => (
                <div className="playerDiv" key={d.id}>
                  {d.username} -  {d.caption}
                </div>
              ))}
          </div>
        );
      }
  }