text: import React, {Component} from 'react'
  import API from '../../utils/API'
  
  class Like extends Component {
      componentDidMount(){
          API.check_liked_video(this.props.video.id).then(data=>{
              this.setState({...this.state, liked_video:data})
              console.log(data);
          })
      }
  
      state = {
          liked_video: {}
      }
  
      handleLike = (e) =>{
          if(e.target.getAttribute('name') == "like"){
              API.updatelikeVideo(this.props.video.id, this.state.liked_video.id, {dislike:false, like: !this.state.liked_video.like}).then(data=>{
                  console.log("like",data)
                  this.setState({...this.state, liked_video: data})
              })
          }else if(e.target.getAttribute('name') == "dislike"){
              API.updatelikeVideo(this.props.video.id, this.state.liked_video.id,{dislike:!this.state.liked_video.dislike, like:false}).then(data=>{
                  console.log("dislike",data)
                  this.setState({...this.state, liked_video:data})
              })
          }
      }
      
      render(){
          return(
              <div>
                  <span onClick={(e)=>{this.handleLike(e)}} name="like">
                      <span style={{margin:"1%"}} style={this.state.liked_video.like ? {color:"blue"} : {color:"black"}} name="like">
                          <svg name="like" value="test" width="24" height="24" viewBox="0 0 24 24" fill="none"xmlns="http://www.w3.org/2000/svg">
                              <path d="M16 13H14C14 14.1046 13.1046 15 12 15C10.8954 15 10 14.1046 10 13H8C8 15.2091 9.79086 17 12 17C14.2091 17 16 15.2091 16 13Z" fill="currentColor" />
                              <path d="M10 10C10 10.5523 9.55228 11 9 11C8.44772 11 8 10.5523 8 10C8 9.44771 8.44772 9 9 9C9.55228 9 10 9.44771 10 10Z" fill="currentColor" />
                              <path d="M15 11C15.5523 11 16 10.5523 16 10C16 9.44771 15.5523 9 15 9C14.4477 9 14 9.44771 14 10C14 10.5523 14.4477 11 15 11Z" fill="currentColor" />
                              <path fillRule="evenodd" clipRule="evenodd" d="M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12ZM20 12C20 16.4183 16.4183 20 12 20C7.58172 20 4 16.4183 4 12C4 7.58172 7.58172 4 12 4C16.4183 4 20 7.58172 20 12Z" fill="currentColor" />
                          </svg>
                      </span>
                  {/* <span style={{margin:"1%"}}>{this.props.likes} likes</span> */}
                  </span>
                  <span style={{margin:"1%"}} style={this.state.liked_video.dislike ? {color:"red"} : {color:"black"}} onClick={(e)=>{this.handleLike(e)}} name="dislike"  >
                      <svg name="dislike" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <path d="M9 11C9.55228 11 10 10.5523 10 10C10 9.44772 9.55228 9 9 9C8.44772 9 8 9.44772 8 10C8 10.5523 8.44772 11 9 11Z" fill="currentColor" />
                          <path d="M14 17C14 15.8954 13.1046 15 12 15C10.8954 15 10 15.8954 10 17H8C8 14.7909 9.79086 13 12 13C14.2091 13 16 14.7909 16 17H14Z" fill="currentColor" />
                          <path d="M16 10C16 10.5523 15.5523 11 15 11C14.4477 11 14 10.5523 14 10C14 9.44772 14.4477 9 15 9C15.5523 9 16 9.44772 16 10Z" fill="currentColor" />
                          <path fillRule="evenodd" clipRule="evenodd" d="M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12ZM20 12C20 16.4183 16.4183 20 12 20C7.58172 20 4 16.4183 4 12C4 7.58172 7.58172 4 12 4C16.4183 4 20 7.58172 20 12Z" fill="currentColor" />
                      </svg>
                      {/* <span style={{margin:"1%"}}>{this.props.video.dislikes} dislikes</span> */}
                  </span>
              </div>
          )
      }
  }
  
  export default Like;