Commit decfb718 authored by Cursor AI's avatar Cursor AI Committed by Jakob Moser
Browse files

Refactor: Use Header component in AppLayout and pass searchTerm/onSearchTermChange props

parent 9a1449d1

frontend/app.mjs

+2 −4
Changes for frontend/app.mjs: 2 added lines, 4 removed lines.
Original line number Diff line number Diff line 
// frontend/app.mjs

import SearchBar from "./components/pieces/SearchBar.mjs"

import TabBar from "./components/pieces/TabBar.mjs"

import { Header } from "./components/pieces/Header.mjs"

import SongList from "./SongList.mjs"



// Die Haupt-Layout-Komponente der Anwendung.
@@ -17,11 +16,10 @@ export const AppLayout = { 
        const currentView = m.route.get().replace(/^\//, "")



        return [

            m(SearchBar, {

            m(Header, {

                searchTerm: this.searchTerm,

                onSearchTermChange: this.onSearchTermChange.bind(this),

            }),

            m(TabBar),

            // Rendere die Song-Liste-Komponente.

            // Übergib den aktuellen Tab, den Suchbegriff UND den Callback zum Ändern des Suchbegriffs.

            m(SongList, {

frontend/components/pieces/Header.mjs

+3 −2
Changes for frontend/components/pieces/Header.mjs: 3 added lines, 2 removed lines.
Original line number Diff line number Diff line
@@ -2,9 +2,10 @@ import SearchBar from "./SearchBar.mjs" 
import TabBar from "./TabBar.mjs"



export const Header = {

    view() {

    view(vnode) {

        const { searchTerm, onSearchTermChange } = vnode.attrs || {}

        return m("header", [

            m(SearchBar),

            m(SearchBar, { searchTerm, onSearchTermChange }),

            m(TabBar),

        ])

    },