Laravel like sistemi ajax ile post ettirmek ile ilgili

Merhabalar,

Sorum biraz uğraşlı olacak o yüzden şimdiden vaktinizi çaldığım için herkesten özür diliyorum. Ve teşekkür ediyorum.

Şuradaki like sistemi kullanıyorum;
https://dev.to/bdelespierre/how-to-implement-a-simple-like-system-with-laravel-lfe

Daha basit bir yapı da yapabilirdim bunu seçtim çünkü çok işlevsel duruyor. Her yere uygulanabiliyor rahatlıkla.

Ancak, yapan arkadaş post işlemini sayfa yenileme türünden yapmış. Ben bunu ajax ile post ettirmeye çalışıyorum ve kısmen de başarılı oldum.

Şöyle bir sorunum var ajax ile post ettirdikten sonra oradaki buton sayfa yenilenene kadar sabit kalıyor... Ben de onu ilkel bir yöntemle javascript yordamıyla aşağıdaki şekilde d-block d-none yaparak gizleyip diğerinin açılmasını sağlamaya çalışıyorum. Bu da gayet çalışıyor gibi görünüyordu taa ki delete methodunun iki kere post ettirilip birinin hata sonucu dönderdiğini görene kadar.

Şimdi biliyorum ki kodum çalışıyor yapması gerekeni yapıyor ama bir yerlerde bir hata yaptığımı ve uzun vadede bana sıkıntı yaratacağını gözlemleyebiliyorum.

    $(document).on('click', '.ajax-submit', function(e) {

        e.preventDefault();

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        destroy_id = $(this).attr('id');
        var _token = $('meta[name="csrf-token"]').attr('content');

        var id = $(this).parent().find('.id').val();
        var likeable_type = $(this).parent().find('.likeable_type').val();

        $.ajax({
            type: 'POST',
            url: '{{route('like')}}',
            data: {
                id: id,
                likeable_type: likeable_type,
                _token: _token,
            },
            dataType: 'json',
            success: function (result) {
                $(".upvote-" + destroy_id).addClass('voted');
                $(".u-" + destroy_id).addClass('d-none').removeClass('d-block');
                $(".d-" + destroy_id).addClass('d-block').removeClass('d-none');
                console.log(result);
            }
        }).done(function (response) {
            var likes = response.likes;
            $('#numberOfLikes-' + destroy_id).html(response.likes);

        });
    });

    $(document).on('click', '.ajax-delete', function(e) {

        e.preventDefault();

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        destroy_id = $(this).attr('id');
        var _tokena = $('meta[name="csrf-token"]').attr('content');

        var id = $(this).parent().find('.id').val();
        var likeable_type = $(this).parent().find('.likeable_type').val();

        $.ajax({
            type: 'DELETE',
            url: '{{route('unlike')}}',
            data: {
                id: id,
                likeable_type: likeable_type,
                _token: _tokena,
            },
            dataType: 'json',
            success: function (result) {
                $(".upvote-" + destroy_id).removeClass('voted');
                $(".d-" + destroy_id).addClass('d-none').removeClass('d-block');
                $(".u-" + destroy_id).addClass('d-block').removeClass('d-none');
                console.log(result);
            }
        }).done(function (response) {
            var likes = response.likes;
            $('#numberOfLikes-' + destroy_id).html(response.likes);

        });
    });

Buraya kadar okuyup, sorunumu irdeleyebilen tüm herkese sonsuz teşekkürler <3

Öncelikle tıklandıkça bir butonun gitmesi, diğer butonun gelmesi hatalı. Aynı buton aynı yere post atabilir. Post işlemi gelince veritabanından beğenmiş mi diye kontrol
edip öyle işlem yapmalısınız. Örnedğim;

$(document).on('click','a[data-action=like]',function(e){
    e.preventDefault()
    var this = $(this);
    var id = this.data('id');
    $.ajax({
        data : {id:id},
        url : '/api/like',
        method : 'POST',
        dataType : 'JSON',
        success : function(response){
            if(response.status == 1){
                this.html('Beğen')
            }else {
                this.html('Beğenme')
            }
        }
    })
})

...
public function like(Request $request){
    $data = likes::find($request->id);
    if($data){
        $data->delete()
        response()->json(['status'=>1])
    }else {
        likes::insert(['post_id' => $request->id,'user_id' => Auth::user()->id]);
        response()->json(['status'=>0])
    }
}

Umarım yardımcı olucaktır.

Edit: Veri tabanınızın like sistemi için bu yapıda olmasını tavsiye etmem json formatı daha avantajlı olacaktır.