me/offline-twitter
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Don't send empty search queries from search bar

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
internal/webserver/handler_search_test.go
View File

@ -34,7 +34,7 @@ func TestSearch(t *testing.T) {
require.NoError(err) require.NoError(err)
title_node := cascadia.Query(root, selector("title")) title_node := cascadia.Query(root, selector("title"))
assert.Equal(title_node.FirstChild.Data, "Search | Offline Twitter") 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")) tweet_nodes := cascadia.QueryAll(root, selector(".timeline > .tweet"))
assert.Len(tweet_nodes, 1) assert.Len(tweet_nodes, 1)
@ -101,7 +101,7 @@ func TestSearchUsers(t *testing.T) {
require.NoError(err) require.NoError(err)
user_elements := cascadia.QueryAll(root, selector(".users-list .user")) user_elements := cascadia.QueryAll(root, selector(".users-list .user"))
assert.Len(user_elements, 2) 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 // Search bar pasted link redirects

20
internal/webserver/tpl/includes/base.tpl
View File

@ -21,6 +21,23 @@
}); });
} }
</script> </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> </head>
<body> <body>
<header class="row search-bar"> <header class="row search-bar">
@ -28,10 +45,11 @@
<img class="svg-icon" src="/static/icons/back.svg" width="24" height="24"/> <img class="svg-icon" src="/static/icons/back.svg" width="24" height="24"/>
</a> </a>
<form class="search-bar__form" hx-get="/search" hx-push-url="true" hx-target="body" hx-swap="innerHTML show:window:top"> <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" name="q"
placeholder="Search" type="text" placeholder="Search" type="text"
{{with (search_text)}} value="{{.}}" {{end}} {{with (search_text)}} value="{{.}}" {{end}}
required
/> />
</form> </form>
</header> </header>

2
internal/webserver/tpl/includes/nav_sidebar.tpl
View File

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

2
internal/webserver/tpl/list_of_lists.tpl
View File

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