Merge pull request #8 from syarul/rc

visibility fix

README.md

@@ -16,13 +16,11 @@
 https://github.com/syarul/todomvc-go-templ-htmx-_hyperscript/assets/2774594/fdcba602-73f2-499b-a106-152569d37e80
 
 
-As evidence of HTMX's capabilities in emulating the functionalities of modern frameworks, I have incorporated [cypress test](https://github.com/syarul/todomvc-go-templ-htmx-_hyperscript/actions/runs/7412273948/job/20168687544) from https://github.com/cypress-io/cypress-example-todomvc. This demonstration serves to showcase that HTMX, when paired with _hyperscript, can replicate if not all the behaviors typically associated with most modern client framework with minimum needs to write javascript.
+Emulating the functionalities of modern frameworks which is base on React TodoMVC, [cypress test](https://github.com/syarul/todomvc-go-templ-htmx-_hyperscript/actions/runs/7412273948/job/20168687544) from https://github.com/cypress-io/cypress-example-todomvc. This demonstration serves to showcase that HTMX, when paired with _hyperscript, can replicate if not all the behaviors typically associated with most modern client framework with minimum needs to write javascript.
 
 ### Security
 Check on [this link](https://templ.guide/security/) when using `templ` as HTML template engine.
 
-> `Do not blame the farmer if you cook the rice til it burns.`
-
 ### Usage
 - install go if you don't have
 - run `go mod tidy` to fetch all needed modules

hs/behaviors/footer._hs

@@ -4,8 +4,8 @@ behavior Footer
     if $clearCompleted === undefined
       htmx.ajax("GET", "/completed", {target:".filters", swap: "afterend"})
     else
-      -- need to first set to undefined in case the fetch may return empty which
-      -- will indiscriminately leave it in incorrect state
+      -- need 1st set to undefined in case the fetch may return empty which
+      -- will may leave it in incorrect state
       set $clearCompleted to undefined
       htmx.ajax("GET", "/completed", {target:".clear-completed", swap: "outerHTML"})
     send toggleFooter to <section.todoapp/>

hs/behaviors/todo-count._hs

@@ -1,4 +1,4 @@
 behavior TodoCount
   on load send todoCount to me
   on todoCount debounced at 100ms
-    fetch /update-counts then put the result into me
+    fetch /update-count then put the result into me

hs/behaviors/toggle-all._hs

@@ -10,5 +10,7 @@ behavior ToggleAll
   end
   on click
     fetch `/swap-json?all=${my.checked}` then
+      send toggleFooter to <section.todoapp/>
       send show to <section.todoapp/>
+      send toggleClearCompleted to <footer.footer/>
     send toggle to <input.toggle/>

hs/behaviors/toggle-footer._hs

@@ -15,10 +15,12 @@ behavior ToggleFooter
             add .selected to filter.firstChild
           else if filter.textContent !== `${$initial}${$after}`
             remove .selected from filter.firstChild
+          else
+            add .selected to filter.firstChild
           end
         end
-        -- update counts
-        fetch /update-counts then put the result into <span.todo-count/>
+        -- update count
+        fetch /update-count then put the result into <span.todo-count/>
     else
       htmx.ajax('GET', '/footer', {target:'.header', swap:'beforeend'})
     end

hs/main._hs

@@ -1,13 +1,13 @@
 def hashCache()
-  -- this is done to get current location hash then update todo-list and footer
+  -- get current location hash then update todo-list and footer
   set $initial to window.location.hash.slice(2).charAt(0).toUpperCase()
   set $after to window.location.hash.slice(3)
   fetch `/set-hash?name=${$initial}${$after}` then
     send show to <section.todoapp/>
     send toggleFooter to <section.todoapp/>
   end
-  -- this to handle popstate event such as back/forward button
-  -- where it will automatically calling hashCache _hyperscript function
+  -- handle popstate event such as back/forward button
+  -- automatically call hashCache _hyperscript function
   js
     window.addEventListener('popstate', function(){
       hashCache();

main.go

@@ -95,7 +95,7 @@ func main() {
 	http.Handle("/set-hash", http.HandlerFunc(setHash))
 	http.Handle("/learn.json", http.HandlerFunc(learnHandler))
 
-	http.Handle("/update-counts", http.HandlerFunc(t.updateCounts))
+	http.Handle("/update-count", http.HandlerFunc(t.updateCount))
 	http.Handle("/toggle-all", http.HandlerFunc(t.toggleAllHandler))
 	http.Handle("/completed", http.HandlerFunc(t.clearCompleted))
 	http.Handle("/footer", http.HandlerFunc(t.footerHandler))
@@ -346,7 +346,7 @@ func (t *todos) clearCompleted(w http.ResponseWriter, r *http.Request) {
 	}
 }
 
-func (t *todos) updateCounts(w http.ResponseWriter, r *http.Request) {
+func (t *todos) updateCount(w http.ResponseWriter, r *http.Request) {
 	uncompletedCount := countNotDone(*t)
 	plural := ""
 	if uncompletedCount != 1 {

todomvc.templ

@@ -89,7 +89,7 @@ templ toggleMain(todos []Todo, checked bool) {
     </section>
   }
 }
-// indescriminatelyx 
+
 templ footer(todos []Todo, filters []Filter, hasCompleted bool) {
   if len(todos) != 0 {
     <footer class="footer"