Реагировать на сортировку массива по дате

Question

Это мои данные из API

{
    id: '1',
    developer: {
        name: 'Michelle Stewart',
        proff: 'Account',
        shortInfo: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,',
        mail: '[e-mail]',
        phone: '[phone]',
        adress: '65 Lorem St, Warsaw, PL',
        company: 'Symu.co',
        isOnline: false
    },
    time: 'Today, 5:32 PM',
    devmessages: [
        {
            time: '10 April 2018',
            message: 'Lorem ipsum dolor sit amet, consectetur'
        },
        {
            time: '10 April 2018',
            message: 'Lorem ipsum dolor sit amet, consectetur'
        },
        {
            time: '10 April 2018',
            message: 'quis nostrud exercitation ullamco laboris'
        }
    ],
    usermessages: [
        {
            time: '10 April 2018',
            message: 'Oops ops)',
            user: true

        },
        {
            time: '10 April 2018',
            message: 'Hi how do you do?',
            user: true
        },
        {
            time: '10 April 2018',
            message: 'Can u test my code',
            user: true
        }
    ],
    isUnread: true
},

и у меня есть компонент React

<ul className="MessagesField">
                    {
                        this.props.data !== '' && this.props.data[0].devmessages.concat(this.props.data[0].usermessages).map((item, index) => {
                            return <li key={index} className={ item.user ? 'MessageFiled UserMessage' : 'MessageFiled ConversationMessage'}>
                                <div className="UserAvatar">
                                    <img src={ item.user === true ? this.setUserImg(this.state.userId) : this.setConversationsImg(this.props.data[0].id)}/>
                                </div>
                                <div className="MessageBody">
                                    <p>{item.message}</p>
                                    <span>{item.time}</span>
                                </div>
                            </li>
                        })
                    }
                </ul>

теперь у меня есть этот результат http://i.prntscr.com/Mk3CwGzhQL2nGRW8_nZ-Cg.png

но мне нужно отсортировать сообщения по дате, так как я понимаю, что мне нужно проанализировать мои данные по дате с помощью moment.js и затем отсортировать по этой дате. Я не знаю, как это сделать. Can someone help me please) In result i need get http://i.prntscr.com/neLdi4r3RgS9OEfjtUJOzQ.png sort messages by date of massages

Answer 1

Я бы изменил способ объединения массивов и использовал array.sort для сортировки сообщений:

[ ...this.props.data[0].devmessages, ...this.props.data[0].usermessages]
.sort( (a, b) => new Date(b.time) - new Date(a.time) )
.map( item => (
  <li key=...................... /li>
)

Обратите внимание, что ваш API возвращает только день, а не время дня, поэтому сообщения не будут отсортированы, если вы не измените API. Также я бы порекомендовал, чтобы API объединял массивы сообщений и сортировал их. Для записи времени на json я рекомендую использовать формат даты и времени ISO8601 для передачи даты и времени из API в ваше приложение

Answer 2

Вы можете сортировать даже без моментов. Momentjs используется для анализа и форматирования метки времени, которую вы даете. Вы можете преобразовать время в целое число, используя new Date(your_time_object).getTime();

Есть много способов реализовать это. Вы можете использовать следующий код, например:

const getAllMessages = () => {
   let all_messages = [...this.props.data[0].devmessages, ...this.props.data[0].usermessages];
   all_messages = all_messages.map(messages => {
       message.new_time = new Date(message.time).getTime();
   }).sort((first_value, second_value) => {
       return first_value.new_time - second_value.new_time;
   });

   this.setState({ 
       all_messages
   });
}

Теперь внутри метода рендера

<ul className="MessagesField">
    {this.state.all_message.length && this.state.all_message.map((item, index) => {
       return ( 
           <li key={index} className={ item.user ? 'MessageFiled UserMessage' : 'MessageFiled ConversationMessage'}>
             <div className="UserAvatar">
                 <img src={ item.user === true ? this.setUserImg(this.state.userId) : this.setConversationsImg(this.props.data[0].id)}/>
             </div>
             <div className="MessageBody">
                 <p>{item.message}</p>
                 <span>{item.time}</span>
              </div>
          </li>
       );
    })}
 </ul>

Я не проверял этот код сам, но это должно работать. И, конечно же, все твои временные метки - сма. оно должно быть более точным, со временем, если возможно, чтобы получить лучшие результаты