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

[alikoza]

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.

reactjs

[kylekatarnls]

You import {utcDateCalendarTime} from "support/utils/common"; and we have absolutely no way to know what is this function, where it come from. The same goes for almost all the JS functions here.

Then it sounds you mix 2 different translation systems, you should either make your backend sending an ISO8601 string or a timestamp so you can work with it properly and translate from the front side, or you format back-end side (with Carbon) and so you should not add any translation layer for the dates in your front.

Anyway, this is unworkable from here. Please if you open an issue again here, follow strictly the issue template GitHub asked you kindly not to remove. And stick to the PHP part that concerns Carbon directly. No front-end stuff will be fixed there, here is the place to report bugs or submit feature in Carbon describing precisely actual and expected behaviors.

Thanks.