CODEWITHSUNDEEP
reactjsreact-native
Markus Hayner
Markus Hayner

Reputation: 2959

How to split array to order by date?

Hello guys this might be a silly request but I would like to have some nice order of channels in my app.

Here I am rendering my chat channels but I am wondering how can I split this objects by date using the updatedAt variable, before rendering them. Having like a sticky header showing today, yesterday or 21 feb 2019 if are older.

Any idea how can I do this by updating my code?

if (getUserChannels.length > 0) {
    return getUserChannels.map(channel => (
      <Channels
        key={channel._id}
        id={channel._id}
        name={channel.jobApplication.job.name}
        fullName={channel.jobApplication.job.business.name}
        lastName={channel.jobApplication.user.lastName}
        avatar={channel.jobApplication.job.business.logo}
        lastMessage={channel.lastMessage}
        updatedAt={channel.updatedAt}
        onPress={() => this.onChat(channel)}
      />
    ));
  }

Upvotes: 1

Views: 844

Answers (2)

Jolly
Jolly

Reputation: 1768

I could suggest you to split getUsersChannels before the return statment into three different arrays, and then returns all of them with a proper header. Something like this:

class App extends React.Component {
    constructor(props) {
        super(props);
        
        this.state = {data: [
           {
               name: "Channel_1",
                date: new Date("Fri Mar 01 2019 16:20:24")
           },
           {
               name: "Channel_2",
                date: new Date("Mon Feb 25 2019 13:20:24")
           },
           {
               name: "Channel_3",
                date: new Date("Thu Feb 28 2019 17:20:24")
           },
        ]};
    }
    
    render() {
        const today = new Date();
        today.setHours(0,0,0,0);
        const yesterday = new Date(today -1);
        yesterday.setHours(0,0,0,0);
        
        const todayChannel = this.state.data.filter(channel => channel.date >= today);        
        const yesterdayChannel = this.state.data.filter(channel => channel.date >= yesterday && channel.date < today);
        const olderChannel = this.state.data.filter(channel => channel.date < yesterday);

        return (
            <React.Fragment>
            <h1>Today</h1>
            {todayChannel.map(el => <p key={el.name}>{el.name}</p>)}
            <h1>Yesterday</h1>
            {yesterdayChannel.map(el => <p key={el.name}>{el.name}</p>)}
            <h1>Older</h1>
            {olderChannel.map(el => <p key={el.name}>{el.name}</p>)}
            </React.Fragment>
        );
    }
}

ReactDOM.render(<App />, document.getElementById('root'));
@import url(https://fonts.googleapis.com/css?family=Montserrat);

body {
    font-family: 'Montserrat', sans-serif;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.2.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.2.0/umd/react-dom.development.js"></script>

<div id='root'></div>

You could improve this by creating a function and running through getUsersChannels just one time instead of using filter three times.

Upvotes: 1

Bojan Ivanac
Bojan Ivanac

Reputation: 1180

You need to sort your array before mapping over it. You can use moment to help out.

getUserChannels.sort((left, right) => {
    return moment.utc(left.updatedAt).diff(moment.utc(right.updatedAt))
});

Upvotes: 0

Related Questions