Best Way To Reorder A List Realtime In React-redux?

I'm currently build an app that have a realtime list. the view of list as bellow picture: This list will be updated realtime, when one of these actions is trigger: A message is u

Solution 1:

You can sort on multiple values in the following way:

const data = [
  { seen: true, updated_time: 'A' },
  { seen: true, updated_time: 'A' },
  { seen: false, updated_time: 'A' },
  { seen: false, updated_time: 'A' },
  { seen: false, updated_time: 'B' },
];
//compare booleans, returns -1,0 or 1constcompareSeen = (direction) => (a, b) =>
  a.seen === b.seen
    ? 0
    : a.seen
      ? -1 * direction
      : 1 * direction;
//compare strings, returns -1, 0 or 1constcompareDate = (direction) => (a, b) =>
  a.updated_time.localeCompare(b);

//pass array of compare functions and return a function that takes//  a and b and keeps using compare functions until one of them returns non zeroconstcreateSort = (comparers = []) => (a, b) =>
  comparers.reduce(
    (result, compareFn) =>
      result === 0 ? compareFn(a, b) : result,
    0,
  );
console.log(
  data
    .slice() //sort will mutate, we don't want that so we make a copy first
    .sort(createSort([compareSeen(-1), compareDate(1)])),
);

If you have ISO times from different timeZones you can not use string compare but have to map the date strings to numbers first and then map it back:

const data = [
  { seen: true, updated_time: '2018-12-07T12:00:21+0000' },
  { seen: true, updated_time: '2018-12-07T12:00:21+0000' },
  { seen: false, updated_time: '2018-12-07T12:00:21+0000' },
  { seen: false, updated_time: '2018-12-07T12:00:21+0000' },
  { seen: false, updated_time: '2018-12-07T12:00:21+0100' },
];
//compare booleans, returns -1,0 or 1constcompareSeen = (direction) => (a, b) =>
  a.seen === b.seen
    ? 0
    : a.seen
      ? -1 * direction
      : 1 * direction;
//compare numbers, returns negative number, 0 or positive numberconstcompareDate = (direction) => (a, b) =>
  (a.updated_time - b.updated_time) * direction;

//pass array of compare functions and return a function that takes//  a and b and keeps using compare functions until one of them returns non zeroconstcreateSort = (comparers = []) => (a, b) =>
  comparers.reduce(
    (result, compareFn) =>
      result === 0 ? compareFn(a, b) : result,
    0,
  );
console.log(
  data
    .map((item) => ({
      ...item,
      updated_time: newDate(item.updated_time).getTime(),
    })) //map already copied data so sort will not mutate it
    .sort(createSort([compareSeen(-1), compareDate(-1)]))
    .map((item) => ({
      ...item,
      updated_time: newDate(
        item.updated_time,
      ).toISOString(),//note: now you have strings in UTC/Zulu time
    })),
);

Solution 2:

I didn't read clearly all you code, but you can reorder your list only with javascript functions, you will use the sort() method to sort all your list by updated_time and seen or not_seen, you have to put a function to sort methode, but the only problem is that , the function passed to do the comparison need an int value as result, see their this link. so to do the trick, when doing the comparison, if his message is not seaan add to UPDATED_TIME +1000000000 for exemple.And like that all the unseen msg will be first, and all your message sort in with one function