React Blog Page Not Loading & Comments Section Not Working

I am working on a React blog page where users can view blog posts and leave comments (similar to YouTube's comment section). However, after clicking on the blog page and clicking on a blog I wish to view the content no longer loads properly and is just stuck saying loading so the contents are no longer visible on the specified page and the comment section isn't visible either.

What I Tried & Expected Outcome:

1. Fetching Blog Posts:

   • Used axios.get('http://127.0.0.1:8000/api/blogs/') inside useEffect().

   • I had Expected posts to load, but they do not appear.

2. Deleting Blog Posts:

   • Used axios.delete(\http://127.0.0.1:8000/api/blogs/delete/$%7BblogId%7D/%5C%5C%5C%60, { headers: { Authorization: `Token ${user.token}` } })`.

   • Expected blog deletion to work, but encountered errors.

3. Commenting System:

   • Implemented a comment section using axios.post() to submit new comments but nothing is being displayed at all its just stuck saying loading.

   • Expected comments to display but they do not appear.

Here's The backend snippet of the code im trying to run

@api_view(['GET', 'POST'])
@authentication_classes([TokenAuthentication])
@permission_classes([IsAuthenticated])
def blog_comments(request, blog_id):
    """
    GET /blogs/<blog_id>/comments/
    Returns: All comments for specified blog
    
    POST /blogs/<blog_id>/comments/
    Required data: content, parent (optional for replies)
    Returns: Created comment data
    Requires: Authentication Token
    """
    blog = get_object_or_404(Blog, id=blog_id)
    if request.method == 'GET':
        comments = Comment.objects.filter(blog=blog, parent=None)
        serializer = CommentSerializer(comments, many=True)
        return Response(serializer.data)
    elif request.method == 'POST':
        serializer = CommentSerializer(data=request.data)
        if serializer.is_valid():
            serializer.save(blog=blog, author=request.user)
            return Response(serializer.data, status=status.HTTP_201_CREATED)
        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)

@api_view(['DELETE'])
@authentication_classes([TokenAuthentication])
@permission_classes([IsAuthenticated])
def delete_comment(request, comment_id):
    """
    DELETE /blogs/<blog_id>/comments/<comment_id>/
    Deletes specified comment if user is author
    Requires: Authentication Token
    Returns: 204 No Content on success
    """
    comment = get_object_or_404(Comment, id=comment_id)
    if comment.author != request.user:
        return Response({'detail': 'Permission denied'}, status=status.HTTP_403_FORBIDDEN)
    comment.delete()
    return Response(status=status.HTTP_204_NO_CONTENT)

Frontend

api - urls.py

from django.urls import path
from .views import blog_comments, delete_comment

urlpatterns = [
    path('blogs/<int:blog_id>/comments/', blog_comments, name='blog_comments'),
    path('blogs/<int:blog_id>/comments/<int:comment_id>/', delete_comment, name='delete_comment'),
]

Вернуться на верх