refactor play (not play) functionality using htmx

[bbelderbos]

Writing up how to go about this ...

Check out the cool stuff you can do: https://htmx.org/examples/

There are also some nice code clinics we did ...

[bbelderbos]

For starters: add the library in your base.html:

You learn best from the examples, e.g. https://htmx.org/examples/active-search/

<input class="form-control" type="search" 
       name="search" placeholder="Begin Typing To Search Users..." 
       hx-post="/search" 
       hx-trigger="input changed delay:500ms, search" 
       hx-target="#search-results" 
       hx-indicator=".htmx-indicator">

Then in your html add directives like:

hx-post="/search"

This makes a post request to the search endpoint (Django view)

There you use the ORM to retrieve tunes and return html (not json) e.g.

In the hx-target you specify the html element id where this resulting html gets inserted. Like JS this all happens on a loaded DOM, so no page reload is needed ("ajax")

[bbelderbos]

FYI @ryaustin reading the book on this actually: https://hypermedia.systems

[bbelderbos]

@jwjacobson so in your case I would envision something like:

1. add hx-post to your form field, actually you don't need a form anymore, just do an input field like above
2. have it point to a new search endpoint that returns the matching_tunes_queryset you have now in your tune_play view
3. hx-target specifies where you will put the returned html content from the new search endpoint / view, we need to either show one and hide the others, or have the endpoint only return one. The advantage of former is that you can keep working with the results, with the latter approach you need to store some sort of cache of tunes suggested vs discarded
4. add hx trigger: 1. play -> (hx-post) goes to new endpoint that updates the repertoire tune and returns a message, 2. (hx-get) "not play" -> shows another tune. I can take a stab at this if you get stuck here ...

[ryaustin]

FYI @ryaustin reading the book on this actually: https://hypermedia.systems

Thanks for this reminder actually. I like Carson's approach to web. Fits well into my less complex style and htmx is perfect for minimizing complexity.

[ryaustin]

Basically @jwjacobson it works great to start to think of your webapp as an internal api (because that's what it is anyway right). You will setup endpoints to return specific chunks of data (Preshaped as in a table or not, maybe just a queryset). With HTMX you can target these endpoints and load them wherever you want on your page.

[bbelderbos]

FYI @ryaustin reading the book on this actually: https://hypermedia.systems

Thanks for this reminder actually. I like Carson's approach to web. Fits well into my less complex style and htmx is perfect for minimizing complexity.

Yep we're finding this now with handling two forms in a view :)

[bbelderbos]

Related https://github.com/jwjacobson/jazz_repertoire/issues/117

[bbelderbos]

It's a bit hard to learn from docs alone though, no?

So maybe good to watch Ryan + my code clinic sessions: https://pybites.circle.so/c/pybites-coaching-calls/sections/117462/lessons/394775 https://pybites.circle.so/c/pybites-coaching-calls/sections/117462/lessons/394695

[bbelderbos]

pending work to be continued in https://github.com/jwjacobson/jazz_repertoire/issues/135