Reduce SongList implementation

import Artist from "./Artist.js"

import { renderMessage } from "./Message.js"

import ClearSearchLink from "./ClearSearchLink.js"

import PaginationControls from "./PaginationControls.js"

import SongListModel from "../../model/SongListModel.js"

import searchState from "../../model/searchState.js"

import Pagination from "./Pagination.js"

const SongList = {

    onbeforeupdate: function (vnode, old) {

        return SongListModel.onbeforeupdate(vnode, old)

    },

export default {

    view: function (vnode) {

        const { currentView } = vnode.attrs

        const model = SongListModel

        if (

            model.isLoading &&

            (!model.allSongs || model.allSongs.length === 0)

        ) {

            return [m("div.loading-placeholder", "Lade Songs vom Server...")]

        }

        const {

            groupedSongs,

            message,

            hasContentOnPage,

            currentPage,

            totalPages,

            totalFilteredItems,

        } = model.getProcessedSongsForView(currentView, searchState.query)

        const artistsOnPage = Object.keys(groupedSongs)

        const sortedSongs = vnode.attrs.songs.toSorted((a, b) => a.artist.localeCompare(b.artist) || a.title.localeCompare(b.title))

        const songsByArtist = Map.groupBy(sortedSongs, song => song.artist)

        // Message rendering

        const messageElement = renderMessage({

            message,

            totalFilteredItems,

            currentView,

            ClearSearchLink,

            clearSearchProps: {

                onClear: () => {

                    searchState.query = null

                },

                totalFavs: message && message.total,

            },

            isLoading: model.isLoading,

        })

        return [

            messageElement,

            hasContentOnPage

                ? artistsOnPage.map(artist =>

                      m(Artist, {

                          artist,

                          songs: groupedSongs[artist],

                      }),

                  )

                : null,

            totalPages > 1

                ? m(PaginationControls, {

                      currentPage: currentPage,

                      totalPages: totalPages,

                      onPageChange: model.onPageChange.bind(model),

                  })

                : null,

        ]

        return m(Pagination, { elements: songsByArtist.entries().map(([artist, songs]) => m(Artist, { artist, songs })) })

    },

}

export default SongList