Изменение содержания текста (нравится, не нравится) Django Like Button

Меня попросили поработать над сетевым сайтом, который похож на Twitter. Я работаю с HTML, CSS, Javascript на стороне клиента и Django на стороне сервера. Я создал модель, которая сохраняет лайки, сохраняя понравившееся сообщение и пользователя, которому оно понравилось. Я хочу сделать кнопку like на HTML странице, которая имеет внутренний текст (like), если пользователю не понравился пост и unlike, если пользователю понравилась кнопка, используя массивы

в models.py:

class likes(models.Model):
    liked_post = models.ForeignKey("posts", on_delete=models.CASCADE)
    like_user = models.ForeignKey("User", on_delete=models.CASCADE)

в файле views.py:

def index(request):
    allposts = posts.objects.all()
    m = ['empty']
    aa = [0]
    for post in allposts:
        postid = post.id
        print(postid)
        aa.append(int(postid))
        liked__post = posts.objects.get(id = postid).id

        if likes.objects.filter(like_user = request.user, liked_post = liked__post).exists():
            f = 'unlike'
            m.append(f)
            c = 'liked__btn'
            

        else:
            t = 'like'
            m.append(t)
            c = 'like__btn'
            print('like')
            
    print(m[0])
    print(aa)
    return render(request, "network/index.html",{"allposts": allposts, 'm':m, 'c':c, 'aa':aa})

@csrf_exempt
def like(request, post_id):
    liked__post = posts.objects.get(id = post_id)
    if request.method == 'PUT':
        print('we\'ve hit put')

        data = json.loads(request.body)

        if data.get('like') is not None:
            print('in like')

            # Note: [User Obj Itself]
            #   follower = request.user  (is: <User Obj>)
            #   following = x            (is: <User Obj>)

            likes.objects.create(liked_post=liked__post, like_user=request.user)
 

        elif data.get('unlike') is not None:
            likes.objects.filter(liked_post=liked__post, like_user=request.user).delete()
        
    print('about to render')

в urls.py:

urlpatterns = [
    path("", views.index, name="index"),
    path("follow/<str:name>", views.Users, name="follow"),
    path('like/<int:post_id>',views.like, name='like')
]

в файле index.html (содержащем скрипт):

{% extends "network/layout.html" %}


{% block body %}



    {% for post in allposts %}
    <div>

    {% for object in aa %}
    {% if object == post.id %}
    <button class="like__btn" id={{post.id}}>
        <span id="icon"><i class="fa-regular fa-thumbs-up"></i></span>{{m.object}}
            <span id="count">0</span> 
    </button>
    {% endif %}
    {% endfor %}

   
    </div>
    {%endfor %}


{% endblock %}
{% block script %}
<script>
    document.addEventListener('DOMContentLoaded', function(){
        document.querySelectorAll('.like__btn').forEach(button =>{
            button.addEventListener('click', function(){
                console.log('clicked');
                console.log(button.id);
                fetch('/like/' + button.id , {
                method:'PUT',
                body: JSON.stringify({
                    like: true
                })})
                button.innerHTML = ' <span id="icon"><i class="fa-regular fa-thumbs-up"></i></span>unlike'
                button.classList.remove('like__btn') 
                button.classList.add('liked__btn')
            })
        })
        })

        document.addEventListener('DOMContentLoaded', function(){
        document.querySelectorAll('.liked__btn').forEach(button =>{
            button.addEventListener('click', function(){
                console.log('clicked');
                console.log(button.id);
                fetch('/like/' + button.id , {
                method:'PUT',
                body: JSON.stringify({
                    unlike: true
                })})
                button.innerHTML = ' <span id="icon"><i class="fa-regular fa-thumbs-up"></i></span>like'
                button.classList.remove('liked__btn') 
                button.classList.add('like__btn')
            })
        })
        })

    
    
</script>
{% endblock %}

Не работает, так в чем же проблема?

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