chore(router): use htmx's router instead of the hacky ass router

mbaraa · May 26, 2024 · 6a56fed · 6a56fed
1 parent c75250f
commit 6a56fed
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 18 deletions.
diff --git a/handlers/pages/pages.go b/handlers/pages/pages.go
@@ -64,6 +64,8 @@ func (p *pagesHandler) HandleHomePage(w http.ResponseWriter, r *http.Request) {
 	}
 
 	if handlers.IsNoLayoutPage(r) {
+		w.Header().Set("HX-Title", "Home")
+		w.Header().Set("HX-Push-Url", "/")
 		pages.Index(recentPlays).Render(r.Context(), w)
 		return
 	}
@@ -72,6 +74,8 @@ func (p *pagesHandler) HandleHomePage(w http.ResponseWriter, r *http.Request) {
 
 func (p *pagesHandler) HandleAboutPage(w http.ResponseWriter, r *http.Request) {
 	if handlers.IsNoLayoutPage(r) {
+		w.Header().Set("HX-Title", "About")
+		w.Header().Set("HX-Push-Url", "/about")
 		pages.About().Render(r.Context(), w)
 		return
 	}
@@ -95,6 +99,8 @@ func (p *pagesHandler) HandlePlaylistsPage(w http.ResponseWriter, r *http.Reques
 	}
 
 	if handlers.IsNoLayoutPage(r) {
+		w.Header().Set("HX-Title", "Playlists")
+		w.Header().Set("HX-Push-Url", "/playlists")
 		pages.Playlists(playlists).Render(r.Context(), w)
 		return
 	}
@@ -130,6 +136,8 @@ func (p *pagesHandler) HandleSinglePlaylistPage(w http.ResponseWriter, r *http.R
 	ctx := context.WithValue(r.Context(), handlers.PlaylistPermission, permission)
 
 	if handlers.IsNoLayoutPage(r) {
+		w.Header().Set("HX-Title", playlist.Title)
+		w.Header().Set("HX-Push-Url", "/playlist/"+playlist.PublicId)
 		pages.Playlist(playlist).Render(ctx, w)
 		return
 	}
@@ -158,6 +166,8 @@ func (p *pagesHandler) HandleProfilePage(w http.ResponseWriter, r *http.Request)
 		Username: dbProfile.Username,
 	}
 	if handlers.IsNoLayoutPage(r) {
+		w.Header().Set("HX-Title", "Profile")
+		w.Header().Set("HX-Push-Url", "/profile")
 		pages.Profile(profile).Render(r.Context(), w)
 		return
 	}
@@ -187,6 +197,8 @@ func (p *pagesHandler) HandleSearchResultsPage(w http.ResponseWriter, r *http.Re
 	}
 
 	if handlers.IsNoLayoutPage(r) {
+		w.Header().Set("HX-Title", "Results for "+query)
+		w.Header().Set("HX-Push-Url", "/search?query="+query)
 		pages.SearchResults(results, playlists, songsInPlaylists).Render(r.Context(), w)
 		return
 	}

diff --git a/static/js/router.js b/static/js/router.js
@@ -27,10 +27,8 @@ window.addEventListener("load", () => {
   updateActiveNavLink();
 });
 
-window.addEventListener("popstate", (e) => {
-  e.stopImmediatePropagation();
-  e.preventDefault();
-  window.open(window.location.prevPath, "_self");
+document.addEventListener("htmx:afterRequest", function (e) {
+  console.log("lol", e);
 });
 
 window.Router = { updateActiveNavLink };
diff --git a/static/js/search.js b/static/js/search.js
@@ -11,12 +11,6 @@ function searchNoReload(searchQuery) {
   searchFormEl.blur();
   searchInputEl.blur();
   searchInputEl.value = searchQuery;
-  const query = encodeURIComponent(searchQuery);
-  const prevPath = window.location.href.substring(
-    (window.location.protocol + "//" + window.location.host).length,
-  );
-  window.location.prevPath = prevPath;
-  window.history.pushState({}, "", `/search?query=${query}`);
 }
 
 searchFormEl.addEventListener("submit", (e) => {
@@ -72,8 +66,6 @@ function moveToSuggestions() {
   searchSuggestionsEl.addEventListener("keydown", moveToNextSuggestion);
 }
 
-document.addEventListener("htmx:afterRequest", function (e) {});
-
 window.Search = {
   searchNoReload,
 };
diff --git a/views/components/navlink/navlink.templ b/views/components/navlink/navlink.templ
@@ -10,7 +10,7 @@ templ NavLink(title, imageUrl, path string, showTilte ...bool) {
 		hx-target="#main-contents"
 		hx-swap="innerHTML"
 		hx-trigger="click,submit"
-		hx-on::before-request={ updateHref(path) }
+		hx-on::after-request={ updateStyle() }
 	>
 		if imageUrl != "" {
 			<div class={ "flex", "gap-x-3", "items-center" }>
@@ -44,7 +44,7 @@ templ JustLink(path, title string, child templ.Component) {
 		hx-target="#main-contents"
 		hx-swap="innerHTML"
 		hx-trigger="click,submit"
-		hx-on::before-request={ updateHref(path) }
+		hx-on::after-request={ updateStyle() }
 	>
 		<div
 			id={ path }
@@ -55,9 +55,6 @@ templ JustLink(path, title string, child templ.Component) {
 	</a>
 }
 
-script updateHref(path string) {
-    const prevPath = window.location.href.substring((window.location.protocol+"//"+window.location.host).length);
-    window.location.prevPath = prevPath;
-    window.history.pushState({}, "", path)
+script updateStyle() {
     Router.updateActiveNavLink();
 }