Can't send POST request from react method

Question

I am creating a FB like app with Django and react. In the main page there's a feed where users can create posts and post them to the feed.

I am trying to implement the delete post functionality but I am running into some difficulties.

The logic is: The user clicks on the delete button on a post and the Browser sends and XMLHttpeRequest to the server to delete that post.

Here's the react component:

class Feed extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      profile_pic: profile_pic_url,
      user: username,
      posts: posts_from_server,
    }
  }

  handleClick() {
    const text = document.querySelector('#new_post_text').value;
    if (text.length > 1) {
      const data = {author: username, text: text}
      // send that post to the server to save it
      const csrftoken = Cookies.get('csrftoken');
      const request = new XMLHttpRequest();
      request.open('POST', '/create_new_post', true);
      request.setRequestHeader('X-CSRFToken', csrftoken);
      request.setRequestHeader("Content-Type", "text/plain;charset=UTF-8");
      request.onload = () => {
        const response = JSON.parse(request.responseText)
        this.setState({
          posts : [{author: response.author, author_picture: profile_pic_url, text: response.text, date: response.date}, ...this.state.posts]
        })
        document.querySelector("#new_post_text").value = '';
        console.log(response)
      }
      request.send(JSON.stringify(data))
    }
  }

  deletePost(post_id, author) {
    const post = document.getElementById(post_id)
    post.style.animationPlayState = 'running';
    setTimeout(() =>{
      this.setState({
        posts: this.state.posts.filter(post => post.id != post_id)
      })
    }, 1000)

    // delete the post from the server
    const data = {'post_author': author, 'id': post_id}
    const csrftoken = Cookies.get('csrftoken');
    const request = new XMLHttpRequest();
    request.open('POST', '/delete_post', true);
    request.setRequestHeader('X-CSRFToken', csrftoken);
    request.setRequestHeader("Content-Type", "text/plain;charset=UTF-8");
    request.onload = () => {
      response = JSON.parse(request.responseText);
      console.log(response)
    }
    request.send(JSON.stringify(data))
    }

  
  render() {
    return (
      <div>
        <Post_generator 
          current_user={this.state.user}
          picture={this.state.profile_pic}
          onClick={() => this.handleClick()} />

        {this.state.posts.map(post => <Post
          onClick={() => this.deletePost(post.id, post.author)} 
          key={post.id}
          post_id={post.id}
          current_user={this.state.user}
          user={post.author}
          profile_pic={post.author_picture}
          text={post.text}
          date={post.date}  
        />)}
      </div>
    )
  }
}

this is urls.py:

from django.urls import path
from . import views


urlpatterns = [
    path('', views.index, name='login'),
    path('login', views.login_view, name='login'),
    path('index', views.index, name='index'),
    path('register', views.register_view, name='register'),
    path('logout', views.logout_view, name='logout'),
    path('profile', views.profile, name='profile'),
    path('change_profile_pic', views.change_profile_pic, name='upload_profile_pic'),
    path('create_new_post', views.create_new_post, name='create_new_post'),
    path('<str:friend>', views.friends_profile, name='friends_profile'),
    path('delete_post', views.delete_post_function, name='delete_post'),
]

and these are the views in views.py handling the two requests:

@login_required
@require_http_methods(['POST'])
def create_new_post(request):
    data = json.loads(request.body.decode("utf-8"))
    print(data)
    new_post = Post(author=request.user, text=data['text'])
    new_post.save()
    data['date']= new_post.date
    return JsonResponse(data)


# delete post 
@login_required
@require_http_methods(['POST'])
def delete_post_function(request):
    print('sdfgdfsghdsfkgjsdklfg')
    response = {"response": "data arrived to server"}
    return JsonResponse(response)

The thing that is giving me trouble is the deletePost() method... When it is executed I get a 405 error in the console.

The funny thing is that the XMLHTTPRequest in the handleClick method works just fine

Answer 1

Ok I figured it out...if the delete_post path in urls.py is not at the end of the urlspatterns list the code works...