chore: Making variables "snake_case" in drag and drop code

BUILDIT.md

@@ -3165,10 +3165,10 @@ everytime `Start/Resume` or `Stop` is called.
     person_id = get_person_id(socket.assigns)
     items = Item.items_with_timers(person_id)
 
-    isEditingItem = socket.assigns.editing
+    is_editing_item = socket.assigns.editing
 
     # If the item is being edited, we update the timer list of the item being edited.
-    if isEditingItem do
+    if is_editing_item do
       case payload do
         {:start, item_id} ->
           timers_list_changeset = Timer.list_timers_changesets(item_id)
@@ -5469,13 +5469,13 @@ to the `LiveView` server during the mounting phase.
 
 Open `assets/js/app.js`
 and locate the 
-`let liveSocket = new LiveSocket()` variable.
+`let live_socket = new LiveSocket()` variable.
 We are going to be changing the `params` attribute.
 Change it to the following:
 
 ```js
 params: {
-  _csrf_token: csrfToken,
+  _csrf_token: csrf_token,
   hours_offset_fromUTC: -new Date().getTimezoneOffset()/60
 }
 ```

assets/js/app.js

@@ -14,13 +14,13 @@ window.addEventListener("phx:page-loading-stop", info => topbar.hide())
 window.addEventListener("phx:highlight", (e) => {
   document.querySelectorAll("[data-highlight]").forEach(el => {
     if(el.id == e.detail.id) {
-        liveSocket.execJS(el, el.getAttribute("data-highlight"))
+        live_socket.execJS(el, el.getAttribute("data-highlight"))
     }
   })
 })
 
-// Item id of the destination in the DOM
-let itemId_to;
+// Item ID of the destination during drag over in the DOM
+let item_id_destination;
 
 let Hooks = {}
 Hooks.Items = {
@@ -33,31 +33,31 @@ Hooks.Items = {
     })
 
     this.el.addEventListener("remove-highlight", e => {
-      hook.pushEventTo("#items", "removeHighlight", {id: e.detail.id})
+      hook.pushEventTo("#items", "remove_highlight", {id: e.detail.id})
       // console.log('remove-highlight', e.detail.id)
     })
 
-    this.el.addEventListener("dragoverItem", e => {
-      // console.log("dragoverItem", e.detail)
-      const currentItemId = e.detail.currentItem.id
-      const selectedItemId = e.detail.selectedItemId
-      if( currentItemId != selectedItemId) {
-        hook.pushEventTo("#items", "dragoverItem", {currentItemId: currentItemId, selectedItemId: selectedItemId})
-        itemId_to = e.detail.currentItem.dataset.id
+    this.el.addEventListener("dragover_item", e => {
+      // console.log("dragover_item", e.detail)
+      const current_item_id = e.detail.current_item.id
+      const selected_item_id = e.detail.selected_item_id
+      if( current_item_id != selected_item_id) {
+        hook.pushEventTo("#items", "dragover_item", {current_item_id: current_item_id, selected_item_id: selected_item_id})
+        item_id_destination = e.detail.current_item.dataset.id
       }
     })
 
-    this.el.addEventListener("update-indexes", e => {
+    this.el.addEventListener("update_indexes", e => {
       const item_id = e.detail.fromItemId 
       const list_ids = get_list_item_cids()
-      console.log("update-indexes", e.detail, "list: ", list_ids)
+      console.log("update_indexes", e.detail, "list: ", list_ids)
       // Check if both "from" and "to" are defined
-      if(item_id && itemId_to && item_id != itemId_to) {
+      if(item_id && item_id_destination && item_id != item_id_destination) {
         hook.pushEventTo("#items", "update_list_seq", 
           {seq: list_ids})
       }
 
-      itemId_to = null;
+      item_id_destination = null;
     })
   }
 }
@@ -78,33 +78,33 @@ function get_list_item_cids() {
 window.addEventListener("phx:remove-highlight", (e) => {
   document.querySelectorAll("[data-highlight]").forEach(el => {
     if(el.id == e.detail.id) {
-        liveSocket.execJS(el, el.getAttribute("data-remove-highlight"))
+        live_socket.execJS(el, el.getAttribute("data-remove-highlight"))
     }
   })
 })
 
 window.addEventListener("phx:dragover-item", (e) => {
   console.log("phx:dragover-item", e.detail)
-  const selectedItem = document.querySelector(`#${e.detail.selected_item_id}`)
-  const currentItem = document.querySelector(`#${e.detail.current_item_id}`)
+  const selected_item = document.querySelector(`#${e.detail.selected_item_id}`)
+  const current_item = document.querySelector(`#${e.detail.current_item_id}`)
 
   const items = document.querySelector('#items')
-  const listItems = [...document.querySelectorAll('.item')]
+  const list_items = [...document.querySelectorAll('.item')]
 
-  if(listItems.indexOf(selectedItem) < listItems.indexOf(currentItem)){
-    items.insertBefore(selectedItem, currentItem.nextSibling)
+  if(list_items.indexOf(selected_item) < list_items.indexOf(current_item)){
+    items.insertBefore(selected_item, current_item.nextSibling)
   }
 
-  if(listItems.indexOf(selectedItem) > listItems.indexOf(currentItem)){
-    items.insertBefore(selectedItem, currentItem)
+  if(list_items.indexOf(selected_item) > list_items.indexOf(current_item)){
+    items.insertBefore(selected_item, current_item)
   }
 })
 
-// liveSocket related setup:
+// live_socket related setup:
 
-let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
+let csrf_token = document.querySelector("meta[name='csrf-token']").getAttribute("content")
 
-let liveSocket = new LiveSocket("/live", Socket, {
+let live_socket = new LiveSocket("/live", Socket, {
   hooks: Hooks,
   dom:{
         onBeforeElUpdated(from, to) {
@@ -114,17 +114,17 @@ let liveSocket = new LiveSocket("/live", Socket, {
         }
   },
   params: {
-    _csrf_token: csrfToken,
+    _csrf_token: csrf_token,
     hours_offset_fromUTC: -new Date().getTimezoneOffset()/60
   }
 })
 
 // connect if there are any LiveViews on the page
-liveSocket.connect()
+live_socket.connect()
 
-// expose liveSocket on window for web console debug logs and latency simulation:
-// >> liveSocket.enableDebug()
-// >> liveSocket.enableLatencySim(1000)  // enabled for duration of browser session
-// >> liveSocket.disableLatencySim()
-window.liveSocket = liveSocket
+// expose live_socket on window for web console debug logs and latency simulation:
+// >> live_socket.enableDebug()
+// >> live_socket.enableLatencySim(1000)  // enabled for duration of browser session
+// >> live_socket.disableLatencySim()
+window.live_socket = live_socket
 

lib/app_web/live/app_live.ex

@@ -21,10 +21,14 @@ defmodule AppWeb.AppLive do
     AppWeb.Endpoint.subscribe(@stats_topic)
 
     person_id = Person.get_person_id(socket.assigns)
+
     # Create or Get the "all" list for the person_id
     all_list = App.List.get_all_list_for_person(person_id)
+
     # Temporary function to add All *existing* items to the "All" list:
     App.List.add_all_items_to_all_list_for_person_id(person_id)
+
+    # Assigns
     items = Item.items_with_timers(person_id)
     tags = Tag.list_person_tags(person_id)
     selected_tags = []
@@ -273,17 +277,17 @@ defmodule AppWeb.AppLive do
   end
 
   @impl true
-  def handle_event("removeHighlight", %{"id" => id}, socket) do
+  def handle_event("remove_highlight", %{"id" => id}, socket) do
     AppWeb.Endpoint.broadcast(@topic, "move_items", {:drop_item, id})
     {:noreply, socket}
   end
 
   @impl true
   def handle_event(
-        "dragoverItem",
+        "dragover_item",
         %{
-          "currentItemId" => current_item_id,
-          "selectedItemId" => selected_item_id
+          "current_item_id" => current_item_id,
+          "selected_item_id" => selected_item_id
         },
         socket
       ) do
@@ -343,10 +347,10 @@ defmodule AppWeb.AppLive do
   def handle_info(%Broadcast{event: "update", payload: payload}, socket) do
     person_id = Person.get_person_id(socket.assigns)
     items = Item.items_with_timers(person_id)
-    isEditingItem = socket.assigns.editing
+    is_editing_item = socket.assigns.editing
 
     # If the item is being edited, we update the timer list of the item being edited.
-    if isEditingItem do
+    if is_editing_item do
       case payload do
         {:start, item_id} ->
           timers_list_changeset = Timer.list_timers_changesets(item_id)

lib/app_web/live/app_live.html.heex

@@ -142,18 +142,18 @@
     </div>
   </.form>
   <!-- List of items with inline buttons and controls -->
-  <ul id="items" phx-hook="Items" x-data="{selectedItem: null}" class="w-full">
+  <ul id="items" phx-hook="Items" x-data="{selected_item: null}" class="w-full">
     <%= for item <- filter_items(@items, @filter, @filter_tag) do %>
       <li
         id={"item-#{item.id}"}
         data-id={item.id}
         class={"mt-2 flex flex-col w-full border-t border-slate-200 py-2 item #{if item.id == @editing do 'cursor-default' else 'cursor-grab' end}"}
         draggable={"#{if item.id == @editing do 'false' else 'true' end}"}
         x-data="{selected: false}"
-        x-on:dragstart="selected = true; $dispatch('highlight', {id: $el.id}); selectedItem = $el"
-        x-on:dragend="selected = false; $dispatch('remove-highlight', {id: $el.id}); selectedItem = null; $dispatch('update-indexes', {fromItemId: $el.dataset.id})"
+        x-on:dragstart="selected = true; $dispatch('highlight', {id: $el.id}); selected_item = $el"
+        x-on:dragend="selected = false; $dispatch('remove-highlight', {id: $el.id}); selected_item = null; $dispatch('update_indexes', {fromItemId: $el.dataset.id})"
         x-bind:class="selected ?? 'cursor-grabbing'"
-        x-on:dragover.throttle="$dispatch('dragoverItem', {selectedItemId: selectedItem.id, currentItem: $el})"
+        x-on:dragover.throttle="$dispatch('dragover_item', {selected_item_id: selected_item.id, current_item: $el})"
         data-highlight={JS.add_class("bg-teal-300")}
         data-remove-highlight={JS.remove_class("bg-teal-300")}
       >

test/app_web/live/app_live_test.exs

@@ -848,12 +848,12 @@ defmodule AppWeb.AppLiveTest do
       |> length() > 0
 
     # Dragover and remove highlight
-    render_hook(view, "dragoverItem", %{
-      "currentItemId" => item2.id,
-      "selectedItemId" => item.id
+    render_hook(view, "dragover_item", %{
+      "current_item_id" => item2.id,
+      "selected_item_id" => item.id
     })
 
-    assert render_hook(view, "removeHighlight", %{"id" => item.id})
+    assert render_hook(view, "remove_highlight", %{"id" => item.id})
 
     # reorder items:
     render_hook(view, "update_list_seq", %{