Sort persistent notifications ascending

[Misiu]

Breaking change

Proposed change

sort persistent notifications, to show the most recent on top.

The sort is done in code, the other option is to use https://polymer-library.polymer-project.org/3.0/api/elements/dom-repeat#DomRepeat-property-sort, but notification-drawer will be rewritten someday to Lit, so the first option was easier.

Type of change

• Dependency upgrade
• Bugfix (non-breaking change which fixes an issue)
• New feature (thank you!)
• Breaking change (fix/feature causing existing functionality to break)
• Code quality improvements to existing code or addition of tests

Example configuration

Additional information

• This PR fixes or closes issue: fixes Change sort order of Persistent Notifications (show most recent notifications at top) #6565
• This PR is related to issue:
• Link to documentation pull request:

Checklist

• The code change is tested and works locally.
• There is no commented out code in this PR.
• Tests have been added to verify that the new code works.

If user exposed functionality or configuration variables are added/changed:

• Documentation added/updated for www.home-assistant.io

[Misiu]

@bramkragten should I add undefined check as you suggested here: #7199 (comment)

[bramkragten]

Should I add undefined check as you suggested here: #7199 (comment)

Depends on the type, can it be undefined?

[ludeeus]

Instead of the logic added here, and more or less the same logic in #7199, shouldn't we rather make a new helper for compareDatetime?

[Misiu]

Depends on the type, can it be undefined?

According to the interface, it can't be undefined.
Ref:

export interface PersistentNotification {
  created_at: string;
  message: string;
  notification_id: string;
  title: string;
  status: "read" | "unread";
}

[Misiu]

@bramkragten should I do something else in this PR?
My compare logic and the one mentioned by @ludeeus are a bit different:
https://github.com/home-assistant/frontend/pull/7199/files#diff-17f747d00c7a961b75947a7ba8215710837fa3a9ea39a1e5886e16ab5363866bR27
https://github.com/home-assistant/frontend/pull/7195/files#diff-c2a273c22fe408b3d6d49a7ab8befabf96f7e1c74988567902ca79336d179471R144

so really no ideas on how to make this a generic function.

[Misiu]

Something like this?

function SortByDateAscending<T>(
  values: T[],
  getDate: (val: T) => string | number | Date
) {
  const compare = (first: T, second: T) => {
    const d1 = getDate(first) ?? 0;
    const d2 = getDate(second) ?? 0;
    const timeA = d1 ? new Date(d1) : 0;
    const timeB = d2 ? new Date(d2) : 0;
    if (timeA < timeB) {
      return 1;
    }
    if (timeA > timeB) {
      return -1;
    }
    return 0;
  };
  return values.sort(compare);
}

And usage looks like this:
tokens = SortByDateAscending(tokens, token => token.last_used_at);

[bramkragten]

The helper function can be done in a new PR.