Don't store search state in URL (918c3b74) · Commits · Jakob Moser / karaokatalog-ui

static/components/pieces/SearchBar.js

+4 −18

Original line number	Diff line number	Diff line
		import searchState from "../../model/searchState.js"

		export default {
		view: function () {
		// TODO The search bar behaves laggily with this, because every time an
		// input is made, the route is updated, updating the fields value again.
		// This is probably just a design flaw, and should be fixed
		const query = m.route.param("q") \|\| ""
		return m("search", [
		m("input[type=search]", {
		value: searchState.query,
		placeholder: "Songs oder Interpreten suchen...",
		value: query,
		oninput: e => {
		// Events always trigger a redraw. Changing a route (done at the bottom) triggers a redraw.
		// To at least only redraw once, we disable redraw for this event, i.e., only redraw for the route change.
		e.redraw = false

		const newQuery = e.target.value
		const params = Object.assign({}, m.route.param())
		if (newQuery) {
		params.q = newQuery
		} else {
		delete params.q
		}
		const path = m.route.get().split("?")[0]
		m.route.set(path, params, { replace: true })
		searchState.query = e.target.value
		},
		}),
		])

+3 −6

Original line number	Diff line number	Diff line
		@@ -3,6 +3,7 @@ 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"

		const SongList = {
		onbeforeupdate: function (vnode, old) {
		@@ -10,7 +11,6 @@ const SongList = {
		},
		view: function (vnode) {
		const { currentView } = vnode.attrs
		const query = m.route.param("q") \|\| ""
		const model = SongListModel

		if (
		@@ -27,7 +27,7 @@ const SongList = {
		currentPage,
		totalPages,
		totalFilteredItems,
		} = model.getProcessedSongsForView(currentView, query)
		} = model.getProcessedSongsForView(currentView, searchState.query)

		const artistsOnPage = Object.keys(groupedSongs)

		@@ -39,10 +39,7 @@ const SongList = {
		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 })
		searchState.query = null
		},
		totalFavs: message && message.total,
		},

+2 −5

Original line number	Diff line number	Diff line
		@@ -2,16 +2,13 @@ import { Tab } from "./Tab.js"

		export default {
		view() {
		const query = m.route.param("q") \|\| ""
		const urlParams = query && `?q=${query}`

		return m("nav", [
		m(Tab, {
		href: `/all${urlParams}`,
		href: "/all",
		label: "Alle",
		}),
		m(Tab, {
		href: `/favorites${urlParams}`,
		href: "/favorites",
		label: "Favoriten",
		}),
		])

0 → 100644

+3 −0