Carbon Localisation not works inside of function [Laravel-reactjs]

Viewed 32

I have a model which looks like below :

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Model;
use Illuminate\Support\Facades\Lang;
use DateTimeInterface;

class ChatMessageActivity extends Model
{
    
    /**
     * @return array|mixed
     */
    protected function getReplacements()
    {
        return is_array($this->parameters) ? $this->parameters : [];
    }

    public function message()
    {
        return $this->belongsTo(ChatMessage::class, 'message_id', 'id');
    }
    public function serializeDate(DateTimeInterface $date)
    {
    return $date->translatedFormat('d F Y');
    }
}

And what I have in my view file is :

import React, {Component} from 'react';
import {Divider, List} from "antd";
import {utcDateCalendarTime} from "support/utils/common";
import {FormattedMessage} from "react-intl";
import {isEmpty} from "lodash";

class ActivityCell extends Component {
    getTimestamp() {
        const {message} = this.props;
        return (
            <span className="font-weight-semi-bold">
                {utcDateCalendarTime(message.created_at)}
            </span>
        );
    }
    render() {
        const {message} = this.props;
        const activity = message.activity;

        if (isEmpty(activity) || !activity.body) {
            return <List.Item/>;
        }

        return (
            <Divider className="font-weight-normal"
                     dashed={true}>
                <small>
                    <FormattedMessage
                        id="chat.activity_body"
                        defaultMessage="{user} {body} {time}"
                        values={{
                            time : this.getTimestamp(),
                            body : activity.body,
                            user : this.getUserName(),
                        }}/>
                </small>
            </Divider>
        );
    }
}

export default ActivityCell;

Not changes the language of date in this case. But what is quite interesting is when I use utcDateCalendarTime() like below translation is sucesfull without any problem :

import React, {Component} from 'react';
import {Tag} from "antd";
import Widget from "components/Widget";
import {FormattedMessage, injectIntl} from "react-intl";
import AsyncTable from "components/AsyncTable";
import {route} from "support/Services/Api";
import Auth from "support/Auth";
import {formatUTCDate, pipe, sortDate,utcDateCalendarTime} from "support/utils/common";
import {connect} from "react-redux";
import {mapValues, values} from "lodash";

class RecordsTable extends Component {
    columns = () => {
        const {accounts} = this.props;

        return [
            {
                title     : (
                    <FormattedMessage
                        defaultMessage="Amount"
                        id="common.amount"/>
                ),
                dataIndex : 'formatted_value_price',
                render    : (text, record) => (
                    <span>
                        {record.type === 'receive' ?
                            <span className="cp-text-success">
                                {text}
                            </span> :
                            <span className="cp-text-danger">
                                {text}
                            </span>
                        }
                    </span>
                )
            },
            {
                title     : (
                    <FormattedMessage
                        defaultMessage="Date"
                        id="widget.marketplace_earnings_chart.date"/>
                ),
                dataIndex : 'created_at',
                sorter    : (a, b) => sortDate(a.created_at, b.created_at),
                render    : text => (
                    <div style={{whiteSpace : 'nowrap'}}>
                        {utcDateCalendarTime(text)}
                    </div>
                ),
            };
export default pipe(
    injectIntl,
    connect(
        mapStateToProps
    )
)(RecordsTable);

Can Anyone please explain me why I am getting the date in translated form when I use render(), however when I use any function of getTime() or getTimeStamp() it doesn't work. What happens when we use the utcDateCalendarTime() inside of the function? Something happens and localisation(translation) not occurs. i really dig deep and still did not find any information related to this issue. Date format from datebase is exactly the same.

0 Answers
Related