Refactor: Move message rendering logic from SongList to Message component with renderMessage helper (27b4d25b) · Commits · Jakob Moser / karaokatalog-ui

frontend/components/pieces/Message.mjs

+37 −1

Original line number	Diff line number	Diff line
		const Message = {
		view: function (vnode) {
		return m("p.view-message", vnode.children)
		// Accepts: message, messageType, totalFilteredItems, currentView, ClearSearchLink, and clearSearchProps
		const { message, messageType, totalFilteredItems, currentView, ClearSearchLink, clearSearchProps } = vnode.attrs
		if (messageType === "filtered_favorites_some_hidden") {
		return m("p.view-message", [
		`Deine Suche zeigt ${message.showing} von deinen insgesamt ${message.total} Favoriten. `,
		`Möchtest du `,
		m(ClearSearchLink, clearSearchProps),
		`?`,
		])
		} else if (messageType === "filtered_favorites_none_found_by_search") {
		return m("p.view-message", [
		`Deine Suche ergab keine Treffer unter deinen ${message.total} Favoriten. `,
		`Möchtest du `,
		m(ClearSearchLink, clearSearchProps),
		`?`,
		])
		} else if (typeof message === "string") {
		if (totalFilteredItems === 0 \|\| currentView === "popular") {
		return m("p.view-message", message)
		}
		}
		return null
		},
		}

		// Helper for SongList
		export function renderMessage({ message, totalFilteredItems, currentView, ClearSearchLink, clearSearchProps, isLoading }) {
		let messageType = null
		if (message && typeof message === "object") {
		messageType = message.type
		}
		if (messageType \|\| (typeof message === "string" && (totalFilteredItems === 0 \|\| currentView === "popular"))) {
		return m(Message, { message, messageType, totalFilteredItems, currentView, ClearSearchLink, clearSearchProps })
		}
		if (!messageType && totalFilteredItems === 0 && !isLoading) {
		return m(Message, { message: "Keine Songs entsprechen den aktuellen Kriterien." })
		}
		return null
		}

		export default Message

frontend/components/pieces/SongList.mjs

+17 −47

Original line number	Diff line number	Diff line
		// frontend/SongList.mjs
		import Artist from "./Artist.mjs"
		import Message from "./Message.mjs"
		import { renderMessage } from "./Message.mjs"
		import ClearSearchLink from "./ClearSearchLink.mjs"
		import PaginationControls from "./PaginationControls.mjs"
		import SongListModel from "../../model/SongListModel.js"
		@@ -36,52 +36,22 @@ const SongList = {
		const artistsOnPage = Object.keys(groupedSongs)

		// Message rendering
		let messageElement = null
		if (message && typeof message === "object") {
		if (message.type === "filtered_favorites_some_hidden") {
		messageElement = m(Message, [
		`Deine Suche zeigt ${message.showing} von deinen insgesamt ${message.total} Favoriten. `,
		`Möchtest du `,
		m(ClearSearchLink, {
		totalFavs: message.total,
		const messageElement = renderMessage({
		message,
		totalFilteredItems,
		currentView,
		ClearSearchLink,
		clearSearchProps: {
		onClear: () => {
		const params = Object.assign({}, m.route.param())
		delete params.q
		const path = m.route.get().split("?")[0]
		m.route.set(path, params, { replace: true })
		},
		}),
		`?`,
		])
		} else if (
		message.type === "filtered_favorites_none_found_by_search"
		) {
		messageElement = m(Message, [
		`Deine Suche ergab keine Treffer unter deinen ${message.total} Favoriten. `,
		`Möchtest du `,
		m(ClearSearchLink, {
		totalFavs: message.total,
		onClear: () => {
		const params = Object.assign({}, m.route.param())
		delete params.q
		const path = m.route.get().split("?")[0]
		m.route.set(path, params, { replace: true })
		totalFavs: message && message.total,
		},
		}),
		`?`,
		])
		}
		} else if (message && typeof message === "string") {
		if (totalFilteredItems === 0 \|\| currentView === "popular") {
		messageElement = m(Message, message)
		}
		}
		if (!messageElement && totalFilteredItems === 0 && !model.isLoading) {
		messageElement = m(
		Message,
		"Keine Songs entsprechen den aktuellen Kriterien.",
		)
		}
		isLoading: model.isLoading,
		})

		return [
		messageElement,