Как отсортировать пользователей от большего числа к меньшему, из полученного API?

Question

[chulacyber]

Доброго времени хабровцы!
Прошу помочь в решении задачи, у меня есть полученные данные из API сохраненные в Redux State, которые отображены на клиент, и нужно сделать сортировку по дате регистрации ! С чем у меня проблема, я далеко не эксперт в JS и даже не junior, сидел тупил некоторое время, как осознал что на решении пазла у меня уйдет не мало часов, алгоритм по идее простой но много тонкостей которых я не понимаю - можно ли вызывать метод в теле другого метода? Или нужно пользоваться уже имеющимся методом, дополняя его функционалом?
Спасибо всем кто откликнется! Всех благ и развития в начинаниях и достижении цели в моменты трудностей :)
Вот данные которые я получаю, и код компонента для рендеринга...

Это тот самый компонент

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { personsFetchData } from '../Actions/persons';

class PersonsData extends Component {
  componentDidMount() {
    this.props.fetchData('Some api');
  }
  render() {
    const { users } = this.props.persons;
    console.log(users)
    return(
      <ul style={{display: 'flex'}}>
        { users ? users.map(user => {
          const userDataRegTime = user.registration_timestamp;
          console.log(userDataRegTime);
            <li style={{margin: '20px'}} key={ user.id }>
              <div><img src={ user.photo } style={{width: '30px'}}></img></div>
              <div><h2> { user.name } </h2></div>
              <div><p> { user.position } </p></div>
              <div><p> { user.phone } </p></div>
            </li>
        }) : null }
      </ul>
    );
  }
}
const mapStateToProps = state => ({
  persons: state.persons
});
const mapDispatchToProps = dispatch => ({
  fetchData: url => dispatch(personsFetchData(url)),
});
export default connect(mapStateToProps, mapDispatchToProps)(PersonsData);

А это репозиторий с рабочими компонентами - https://github.com/chulavege1/HelpMe

Answer 1

[hzzzzl]

вот так где-нибудь отсортировать перед добавлением в стейт редусера
(может можно сразу с АПИ получить отсортированные?)

users.sort((a, b) => a.registration_timestamp - b.registration_timestamp)

Comments

[chulacyber]

Дело в том, что я получаю массив c параметрами вот такого вида

То есть полученный обьект я должен привести в Json, затем взять из полученного обьекта массив Users, и только тогда уже делать сорт по нужному числу
А вот как использовать sort в нутри метода map я не понимаю...
Ругается что sort это не функция, и как написать правильно чето не могу пока что вьехать :)

[hzzzzl]

должен привести в Json

так он уже json, то есть JavaScript Object

взять из полученного обьекта массив Users, и только тогда уже делать сорт

так точно

как использовать sort в нутри метода map

мммм лучше не надо, лучше отдельно сортировать массив перед сохранением в стор redux, его ведь надо отсортировать 1 раз при получении, а не каждый раз сортировать массив заново при каждом рендере, правда?

в общем так должно сработать, но лучше бы сорт перенести в другое место

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { personsFetchData } from '../Actions/persons';

class PersonsData extends Component {
  componentDidMount() {
    this.props.fetchData('Some api');
  }
  render() {
    const { users } = this.props.persons;
    // сортируем
    users.sort((a, b) => a.registration_timestamp - b.registration_timestamp)
    // готово
    console.log(users)
    return(
      <ul style={{display: 'flex'}}>
        { users ? users.map(user => {
          const userDataRegTime = user.registration_timestamp;
          console.log(userDataRegTime);
            <li style={{margin: '20px'}} key={ user.id }>
              <div><img src={ user.photo } style={{width: '30px'}}></img></div>
              <div><h2> { user.name } </h2></div>
              <div><p> { user.position } </p></div>
              <div><p> { user.phone } </p></div>
            </li>
        }) : null }
      </ul>
    );
  }
}
const mapStateToProps = state => ({
  persons: state.persons
});
const mapDispatchToProps = dispatch => ({
  fetchData: url => dispatch(personsFetchData(url)),
});
export default connect(mapStateToProps, mapDispatchToProps)(PersonsData);

UPD
добавлю, что местами поменять здесь, чтобы отсортировалось в обратном порядке :)

users.sort((a, b) => b.registration_timestamp - a.registration_timestamp)

[chulacyber]

hzzzzl, Идею понял, полезно и правда спасибо
Я на работе, много что отвлекает, но как получится я напишу :)

[chulacyber]

hzzzzl, Есть одна проблемка, нужно каждый раз собирать данные и делать сортировку данных, т.к при рабочей форме регистрации, пользователь будет добавлен в API и автоматически будет выведен в список первых юзеров

Answer 2

[historydev]

Во первых это - не реакт, во вторых - click

Comments

[chulacyber]

Это не реакт?
Вы имеете ввиду метод map? Или компонент все цело?
За подсказку метода filter спасибо, буду гуглить его интенсивно :)

[historydev]

chulacyber, про задачу которая касается вопроса.

[chulacyber]

Владимир, В вопросе используется React тег для ясности, чтоб у людей который не сталкивались с ним, не появились лишние-вопросы | непонятки и т.д :)