Unable to get database notifications created_at field converted to Carbon diffForHumans

[acgtwentyone]

Hi,

We have an application running in production and displaying notifications as well. We have implemented this functionality using Laravel Notifications. As part of this implementation we are storing the notifications registry in database table named notifications, and it's working.

Currently we are unable to display the notifications sent date using some Carbon feature such as $notf->created_at->diffForHumans().

Note that we created a vuejs component that is responsible for showing the unreaded notifications. But we are stuck in this part as we can't format the created_at field to something like:
'4 days ago' instead of 2022-07-15 11:39:23.

Show notifications list

Notification class

<?php

namespace App\Notifications\Factura;

use Illuminate\Bus\Queueable;
use Illuminate\Contracts\Queue\ShouldQueue;
use Illuminate\Notifications\Messages\MailMessage;
use Illuminate\Notifications\Notification;
use Auth;

class FacturaCertificated extends Notification implements ShouldQueue
{
    use Queueable;
    private $factura;

    /**
     * Create a new notification instance.
     *
     * @return void
     */
    public function __construct($factura)
    {
        $this->factura = $factura;
    }

    /**
     * Get the notification's delivery channels.
     *
     * @param  mixed  $notifiable
     * @return array
     */
    public function via($notifiable)
    {
        return $notifiable->perfers_email('NVE_A1EJS5HGV9') ? ['database','mail'] : ['database'];
    }

    /**
     * Get the mail representation of the notification.
     *
     * @param  mixed  $notifiable
     * @return \Illuminate\Notifications\Messages\MailMessage
     */
    public function toMail($notifiable)
    {
        return (new MailMessage)
                    ->line('Notificação')
                    ->action('Ver',route("pagamento.show",$this->factura->id))
                    ->line("Factura ".$this->factura->cod_ref." certificado no contrato ".$this->factura->contratos->cod_ref."");
    }

    /**
     * Get the array representation of the notification.
     *
     * @param  mixed  $notifiable
     * @return array
     */
    public function toDatabase($notifiable)
    {
        return [
            "icon"=> "attach_money",
            "bg"  => "bg-success",
            "link" => route("pagamento.show",$this->factura->id),
            "text" => "Factura <b>".$this->factura->cod_ref."</b> certificado no contrato <b>".$this->factura->contratos->cod_ref."</b>"
        ];
    }
}

Database registry

Current implementation

function getUnreadNotifications(){
    try{
        return json_encode(auth->user()->unreadNotifications()->paginate(8));
    }catch (\Throwable $th){
       Helpers::throw($th, 'ApiNotifications');
    }
}

Also tried this way but the notifications does not appear

 try{
    return json_encode(auth->user()->unreadNotifications()->paginate(8)->map(function($n){
        $n->sent_date = $n->created_at->diffForHumans;
        return $n;
    }));
}catch (\Throwable $th){
   Helpers::throw($th, 'ApiNotifications');
}

Any help is welcome.

[aneesdev]

Answered in #43315

[acgtwentyone]

Actually, even if i use $n->created_at->diffForHumans(); it does not work. In fact the () was not copied while posting this issue.

[acgtwentyone]

Any help on this issue ?

[acgtwentyone]

Answered in #43315

Thank you @aneesdev, but even if i do this:

try{
    return json_encode(Helpersapi::getUnreadNotifications()->paginate(8)->map(function($n){
        $n->sent_date = $n->created_at->diffForHumans();
        return $n;
    }));
}catch (\Throwable $th){
   Helpers::throw($th, 'ApiNotifications');
}

Then the notification list is not displayed on the view. I dont't know why. It's strange.

But in the inspector, there is all data:

[acgtwentyone]

Same issue if i use this

Carbon::parse($n->created_at)->diffForHumans();

[BrekiTomasson]

>>> User::inRandomOrder()->first()->created_at->diffForHumans()
=> "3 years ago"

Looks like something is wrong on your end, because created_at definitely accepts ->diffForHumans() on my end. I also tried your method of mapping the value inside of a ->paginate(8), since I wasn't sure if paginating would somehow affect it, but no:

>>> Role::paginate(8)->map(function ($role) { $role->creation = $role->created_at->diffForHumans(); return $role; } );
=> Illuminate\Database\Eloquent\Collection {#5416
     all: [
       App\Models\Auth\Role {#5374
         id: 1,
         name: "public",
         guard_name: "web",
         created_at: "2020-03-09 21:24:43",
         updated_at: "2020-03-09 21:24:43",
         creation: "2 years ago",
       },
       App\Models\Auth\Role {#5403
         id: 2,
         name: "standard",
         guard_name: "web",
         created_at: "2020-03-09 21:24:43",
         updated_at: "2020-03-09 21:24:43",
         creation: "2 years ago",
       },
 // [...]

The only thing I can imagine is that, for some reason, the created_at attribute isn't correctly returning a CarbonInterface object. Could you try something simple like:

>>> $n = Notification::inRandomOrder()->first()
>>> $n->created_at

Just to see what it gives you? If you don't have access to Tinker, just put this in a blade.php file:

{{ get_class(\App\Models\Notification::inRandomOrder()->first()->created_at) }}

Does that return "Illuminate\Support\Carbon" or does it fail and say TypeError: get_class(): Argument #1 ($object) must be of type object, string given ?

[acgtwentyone]

Thank you @BrekiTomasson in fact the carbon is working properly, but as i'm using vuejs to display the notifications, if i map it, then it does not list. But as you can see in the debug attached above, it returns all the notifications, but not display any of them.

[BrekiTomasson]

In that case, Laravel seems to be doing everything correctly and the problem is on the Vue end... While it's a little out of scope for this discussion (as it's no longer about Laravel), let me see if I can help you anyway. What's the HTML/JS/Vue code you're using to show the data inside of the notification on the website?

[acgtwentyone]

The code is a little more complex

<template>
   <li :id="`${id}`" class="dropdown notification-menu">
        <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown">
            <i :class="`${icone}`"></i>
            <span v-if="total_notfs > 0" class="label-count">{{total_notfs}}</span>
        </a>
        <ul class="dropdown-menu">
            <li class="header">{{title}}</li>
            <li class="body">
                <ul :id="`drop-${id}`" class="menu">

                    <notification
                        :code="`${code}`"
                        v-for="notification in notifications"
                        :key="notification.id"
                        :notf="notification">
                    </notification>

                </ul>
            </li>


            <li class="footer">
                <div>
                    <clip-loader style="margin-top:10px" :loading="loading" :color="color" :size="size"></clip-loader>
                </div>
                <a @click.prevent=markAllAsReaded v-if="markasread != undefined && !loading" :href="`${markasread}`">Mark all as read</a>
                <!-- <a v-if="!loading && allNotfsURL" :href="`${allNotfsURL}`">View All {{title}}</a> -->

            </li>

            <li class="body">

            </li>

        </ul>



    </li>
</template>

<script>
    Vue.component('notification', require('./parts/notification').default)
    import ClipLoader from 'vue-spinner/src/ClipLoader.vue'


export default {
    components: {
        ClipLoader,
    },

    props:['total','user','allnotfs','markallread','code','icon','title','id','url','total_url'],

    data(){
        return {
            notifications:[],
            total_notfs: this.$props.total,
            allNotfsURL: this.$props.allnotfs,
            markasread: this.$props.markallread,
            loading: true,
            color: '#428bca',
            size: '50px',
            userIn: this.$props.user,
            pagination:{
                first_page_url:'',
                last_page_url: '',
                next_page_url: ''
            },
            once: true,
            code_: this.$props.code,
            block: false,
            afterRending: false,
            icone:this.$props.icon,
            element: ''
        }
    },

    mounted(){

        this.element =  $('#drop-'+this.$props.id);

        setTimeout(() => {
            this.getUnreadNotifications(this.$props.user);
        }, 1000);

        setInterval(() => {
            if(this.$props.total_url)
                this.getTotalNotifications(this.userIn);
        }, 1800000);

        // 1800000

        $('#'+this.$props.id).on('shown.bs.dropdown',() => {
            if(this.once && this.notifications.length == 0 || !this.block){
                this.getUnreadNotifications(this.userIn);
                this.once = !this.once;
                this.block = true;
                this.afterRending = true;
            }
        })

        $('#drop-'+this.$props.id).on('scroll', async()=>{

            if($('#drop-'+this.$props.id).height() + $('#drop-'+this.$props.id).scrollTop() >= document.getElementById("drop-"+this.$props.id).scrollHeight - 1) {

                if(this.pagination.next_page_url != '' && this.pagination.next_page_url != null && !this.pagination.next_page_url.match('/null/')){
                    this.loading = true;
                    this.getUnreadNotifications(null,this.pagination.next_page_url,true,false).then(()=>{
                        console.log(this.loading);
                        this.loading = false;
                    });

                }

            }

            if($('#drop-'+this.$props.id).scrollTop() == 0){
                this.loading = false;
            }

        });
    },



    methods:{
        getUnreadNotifications(id=null,url=this.$props.url, scroll=false, total=false){
            let urls;

            if(id != null)
                urls = `${this.url}`;
            else urls = url;

            let that = this;

            return fetch(urls)
            .then(res => res.json())
            .then(res => {
                if(scroll == true)
                    that.notifications = that.notifications.concat(res.data);
                else
                    that.notifications = res.data;

                if(total)
                    that.total_notfs = res.data.length;

                that.loading = false;
                that.pagination = res;

                if(res.total != this.total_notfs){
                    this.total_notfs = res.total;
                    this.once = false;
                    this.block = false;
                }
            })
        },

        getTotalNotifications(){

            fetch(`${this.total_url}`)
            .then(res => res.json())
            .then(res => {
                let total = res.total;

                    if(total != this.total_notfs){
                        this.total_notfs = total;
                        this.once = false;
                        this.block = false;
                    }
                })
            .catch(err => console.log(err))


        },

        markAllAsReaded(){
            let that = this;
            fetch(`${this.markasread}`)
            .then(res => res.json())
            .then(res => {
                if(res.status == 200){
                    this.getTotalNotifications();
                    $('#notifications').dropdown('toggle');
                }
            })
        }
    }

}
</script>

<style>

    .slimScrollBar{
        width: 10px!important;
    }

</style>

But this is where i'm iterating through notifications:

 <notification
    :code="`${code}`"
    v-for="notification in notifications"
    :key="notification.id"
    :notf="notification">
</notification>

Note that it does not work even if i change it to something like this:

<span v-for="notification in notifications" :key="notification.id">TEST</span>

But it does work if i do something like it:

try{
    return json_encode(auth()->user()->unreadNotifications()->paginate(8);
}catch (\Throwable $th){
   Helpers::throw($th, 'ApiNotifications');
}

Wich makes me think that the issue is related to the map method.

[BrekiTomasson]

I need to see the Vue component called notification, since it is the one showing the timestamp.

[acgtwentyone]

notification vue component:

<template>
  <li>
    <a :href="`${url}`">
        <div class="icon-circle" :class="`${bg}`">
            <i class="material-icons">{{icon}}</i>
        </div>
        <div class="menu-info">
            <h4 v-html="notf.data.text"></h4>
            <p>
                <i class="material-icons">access_time</i> {{data}}
            </p>
        </div>
    </a>
    <a v-if="code == 'NTS'" :href="'/admin/shownotf/'+ notification.id+'/NTS'">
            <img :src="notification.icon != '' ? '/files/users/'+notification.icon : 'images/avatars/face4.jpg'">
            <div class="info">
                <h4>
                    {{notification.userName}}
                </h4>
                <span class="time">
                    <i class="material-icons">access_time</i> {{notification.data}}
                </span>
            </div>
        </a>
</li>
</template>

<script>
export default {
    props:['notf','code'],

    computed: {
        bg() {
            return this.notf.data.icon  && this.notf.data.bg != '' ? this.notf.data.bg : 'bg-warning';
        },

        icon() {
            return this.notf.data.icon  && this.notf.data.icon != '' ? this.notf.data.icon : 'notifications'
        },
        url() {
            console.log();
            return !this.notf.data.link.match('/undefined/') ? this.notf.data.link+"/"+this.notf.id : `javascript:void(0)`;
        },

        data(){
            return "4 min ago"
        }
    },

    data() {
        return {
            notification: '',
            link: '',
            options: '',
            userIn: '',
            basicURL: document.location.host,
        }
    },

    mounted() {
        
    }
}
</script>

<style>
    .new{
        background:rgb(223, 223, 223);
    }
</style>

But as i told you, even if i do:

<span v-for="notification in notifications" :key="notification.id">TEST</span>

It does not work either

[BrekiTomasson]

The way it looks to me is that you don't have a list called notifications, but rather an object called notifications that contains an array called pagination, so when you're trying to iterate over notifications, you have nothing to show. I can't see anywhere in your Vue code that you're looking inside the 'pagination' array for your data, so that might be it?

What happens if you v-for="notification in notifications.pagination" instead, or something like that?

If that still doesn't work, edit your notification Vue component to console.log(notification) so you see what data is actually being passed into it.