Don't send empty search queries from search bar

This commit is contained in:
Alessio 2024-12-02 20:31:41 -08:00
parent 6e271bccc0
commit 2a05512a9c
4 changed files with 23 additions and 5 deletions

View File

@ -34,7 +34,7 @@ func TestSearch(t *testing.T) {
require.NoError(err)
title_node := cascadia.Query(root, selector("title"))
assert.Equal(title_node.FirstChild.Data, "Search | Offline Twitter")
assert.Contains(cascadia.Query(root, selector("#search-bar")).Attr, html.Attribute{Key: "value", Val: search_txt})
assert.Contains(cascadia.Query(root, selector("#searchBar")).Attr, html.Attribute{Key: "value", Val: search_txt})
tweet_nodes := cascadia.QueryAll(root, selector(".timeline > .tweet"))
assert.Len(tweet_nodes, 1)
@ -101,7 +101,7 @@ func TestSearchUsers(t *testing.T) {
require.NoError(err)
user_elements := cascadia.QueryAll(root, selector(".users-list .user"))
assert.Len(user_elements, 2)
assert.Contains(cascadia.Query(root, selector("#search-bar")).Attr, html.Attribute{Key: "value", Val: "no"})
assert.Contains(cascadia.Query(root, selector("#searchBar")).Attr, html.Attribute{Key: "value", Val: "no"})
}
// Search bar pasted link redirects

View File

@ -21,6 +21,23 @@
});
}
</script>
<script>
document.addEventListener('DOMContentLoaded', function() {
/**
* Consider HTTP 4xx and 500 errors to contain valid HTMX, and swap them as usual
*/
document.body.addEventListener('htmx:beforeSwap', function(e) {
if (e.detail.xhr.status === 500) {
e.detail.shouldSwap = true;
e.detail.isError = true;
} else if (e.detail.xhr.status >= 400 && e.detail.xhr.status < 500) {
e.detail.shouldSwap = true;
e.detail.isError = false;
}
});
});
</script>
</head>
<body>
<header class="row search-bar">
@ -28,10 +45,11 @@
<img class="svg-icon" src="/static/icons/back.svg" width="24" height="24"/>
</a>
<form class="search-bar__form" hx-get="/search" hx-push-url="true" hx-target="body" hx-swap="innerHTML show:window:top">
<input id="search-bar" class="search-bar__input"
<input id="searchBar" class="search-bar__input"
name="q"
placeholder="Search" type="text"
{{with (search_text)}} value="{{.}}" {{end}}
required
/>
</form>
</header>

View File

@ -13,7 +13,7 @@
<label class="nav-sidebar__button-label">Home</label>
</li>
</a>
<a onclick="document.querySelector('#search-bar').focus()">
<a onclick="document.querySelector('#searchBar').focus()">
<li class="button labelled-icon">
<img class="svg-icon" src="/static/icons/explore.svg" width="24" height="24" />
<label class="nav-sidebar__button-label">Explore</label>

View File

@ -11,7 +11,7 @@
<input name="name" />
<input type="submit" value="Create" />
</form>
<button onclick="document.querySelector('#newListDialog').close()">Cancel</button>
<button onclick="newListDialog.close()">Cancel</button>
</dialog>
<div class="list-of-lists">