Refactor javascript following Locality of Behaviour (LoB) principle

Author: eduardolat

internal/view/static/js/alpine-components/github-repo-info.js

@@ -2,14 +2,10 @@ import { initThemeHelper } from './init-theme-helper.js'
 import { initSweetAlert2 } from './init-sweetalert2.js'
 import { initNotyf } from './init-notyf.js'
 import { initHTMX } from './init-htmx.js'
-import { initAlpineComponents } from './init-alpine-components.js'
 import { initHelpers } from './init-helpers.js'
-import { initDashboardAsideScroll } from './dashboard-aside-scroll.js'
 
 initThemeHelper()
 initSweetAlert2()
 initNotyf()
 initHTMX()
-initAlpineComponents()
 initHelpers()
-initDashboardAsideScroll()

internal/view/static/js/app.js

@@ -16,7 +16,7 @@ type ChangeThemeButtonParams struct {
 
 func ChangeThemeButton(params ChangeThemeButtonParams) gomponents.Node {
 	return html.Div(
-		alpine.XData("changeThemeButton"),
+		alpine.XData("alpineChangeThemeButton()"),
 		alpine.XCloak(),
 
 		components.Classes{

internal/view/static/js/dashboard-aside-scroll.js

@@ -1,6 +1,5 @@
-export const changeThemeButton = {
-  name: 'changeThemeButton',
-  fn: () => ({
+window.alpineChangeThemeButton = function () {
+  return {
     theme: '',
 
     loadTheme () {
@@ -16,5 +15,5 @@ export const changeThemeButton = {
     init () {
       this.loadTheme()
     }
-  })
+  }
 }

internal/view/static/js/init-alpine-components.js

@@ -11,7 +11,7 @@ import (
 func OptionsDropdown(children ...gomponents.Node) gomponents.Node {
 	return html.Div(
 		html.Class("inline-block"),
-		alpine.XData("options_dropdown"),
+		alpine.XData("alpineOptionsDropdown()"),
 		alpine.XOn("mouseenter", "open()"),
 		alpine.XOn("mouseleave", "close()"),
 		html.Button(

internal/view/web/component/change_theme_button.go

@@ -1,6 +1,5 @@
-export const optionsDropdown = {
-  name: 'options_dropdown',
-  fn: () => ({
+window.alpineOptionsDropdown = function () {
+  return {
     isOpen: false,
     buttonEl: null,
     contentEl: null,
@@ -43,5 +42,5 @@ export const optionsDropdown = {
         this.contentEl.style.top = `${buttonRect.top - contentHeight}px`
       }
     }
-  })
+  }
 }

internal/view/static/js/alpine-components/change-theme-button.js internal/view/web/component/change_theme_button.inc.js

@@ -10,7 +10,7 @@ import (
 
 func StarOnGithub(size size) gomponents.Node {
 	return html.A(
-		alpine.XData("githubRepoInfo"),
+		alpine.XData("alpineStarOnGithub()"),
 		alpine.XCloak(),
 		components.Classes{
 			"btn btn-neutral": true,

internal/view/web/component/options_dropdown.go

@@ -0,0 +1,42 @@
+window.alpineStarOnGithub = function () {
+  return {
+    stars: null,
+
+    async init () {
+      const stars = await this.getStars()
+      if (stars !== null) {
+        this.stars = stars
+      }
+    },
+
+    async getStars () {
+      const cacheKey = 'pbw-gh-stars'
+
+      const cachedJSON = localStorage.getItem(cacheKey)
+      if (cachedJSON) {
+        const cached = JSON.parse(cachedJSON)
+        if (Date.now() - cached.timestamp < 2 * 60 * 1000) {
+          return cached.value
+        }
+      }
+
+      const url = 'https://api.github.com/repos/eduardolat/pgbackweb'
+      try {
+        const response = await fetch(url)
+        if (!response.ok) {
+          return null
+        }
+        const data = await response.json()
+        const value = data.stargazers_count
+        const dataToCache = JSON.stringify({
+          value,
+          timestamp: Date.now()
+        })
+        localStorage.setItem(cacheKey, dataToCache)
+        return value
+      } catch {
+        return null
+      }
+    }
+  }
+}

internal/view/static/js/alpine-components/options-dropdown.js internal/view/web/component/options_dropdown.inc.js

@@ -4,11 +4,9 @@ import (
 	"fmt"
 	"net/http"
 
-	lucide "github.com/eduardolat/gomponents-lucide"
 	"github.com/eduardolat/pgbackweb/internal/database/dbgen"
 	"github.com/eduardolat/pgbackweb/internal/util/echoutil"
 	"github.com/eduardolat/pgbackweb/internal/view/reqctx"
-	"github.com/eduardolat/pgbackweb/internal/view/web/alpine"
 	"github.com/eduardolat/pgbackweb/internal/view/web/component"
 	"github.com/eduardolat/pgbackweb/internal/view/web/layout"
 	"github.com/google/uuid"
@@ -201,111 +199,8 @@ func indexPage(
 				BgColors: []string{blueColor, greenColor, redColor},
 			}),
 		),
-		html.Div(
-			alpine.XData("genericSlider(4)"),
-			alpine.XCloak(),
-			html.Class("mt-6 flex flex-col justify-center items-center mx-auto"),
-			component.H2Text("How to use PG Back Web"),
-			component.CardBox(component.CardBoxParams{
-				Class: "mt-4 space-y-4 max-w-[600px]",
-				Children: []gomponents.Node{
-					html.Div(
-						html.Class("flex justify-center"),
-						html.Ul(
-							html.Class("steps"),
-							html.Li(
-								html.Class("step"),
-								alpine.XBind("class", "currentSlide >= 1 ? 'step-primary' : ''"),
-								gomponents.Text("Create database"),
-							),
-							html.Li(
-								html.Class("step"),
-								alpine.XBind("class", "currentSlide >= 2 ? 'step-primary' : ''"),
-								gomponents.Text("Create destination"),
-							),
-							html.Li(
-								html.Class("step"),
-								alpine.XBind("class", "currentSlide >= 3 ? 'step-primary' : ''"),
-								gomponents.Text("Create backup"),
-							),
-							html.Li(
-								html.Class("step"),
-								alpine.XBind("class", "currentSlide >= 4 ? 'step-primary' : ''"),
-								gomponents.Text("Wait for executions"),
-							),
-						),
-					),
-
-					html.Div(
-						alpine.XShow("currentSlide === 1"),
-						component.H3Text("Create database"),
-						component.PText(`
-							To create a database, click on the "Databases" menu item on the
-							left sidebar. Then click on the "Create database" button. Fill
-							in the form and click on the "Save" button. You can create as
-							many databases as you want to backup.
-						`),
-					),
-
-					html.Div(
-						alpine.XShow("currentSlide === 2"),
-						component.H3Text("Create S3 destination (optional)"),
-						component.PText(`
-							To create a destination, click on the "Destinations" menu item on
-							the left sidebar. Then click on the "Create destination" button.
-							Fill in the form and click on the "Save" button. You can create
-							as many destinations as you want to store the backups. If you
-							don't want to use S3 destinations and store the backups locally,
-							you can skip this step.
-						`),
-					),
-
-					html.Div(
-						alpine.XShow("currentSlide === 3"),
-						component.H3Text("Create backup"),
-						component.PText(`
-							To create a backup you need to have at least one database and one
-							destination. Click on the "Backups" menu item on the left sidebar.
-							Then click on the "Create backup" button. Fill in the form and
-							click on the "Save" button. You can create as many backups as you
-							want including any combination of databases and destinations.
-						`),
-					),
 
-					html.Div(
-						alpine.XShow("currentSlide === 4"),
-						component.H3Text("Wait for executions"),
-						component.PText(`
-							When your backup is created and active, the system will start
-							creating executions based on the schedule you defined. You can
-							also create executions manually by clicking the "Run backup now"
-							button on the backups list. You can see the executions on the
-							"Executions" menu item on the left sidebar and then click on the
-							"Show details" button to see the details, logs, and download or
-							delete the backup file.
-						`),
-					),
-
-					html.Div(
-						html.Class("mt-4 flex justify-between"),
-						html.Button(
-							alpine.XBind("disabled", "!hasPrevSlide"),
-							alpine.XOn("click", "prevSlide"),
-							html.Class("btn btn-neutral btn-ghost"),
-							lucide.ChevronLeft(),
-							component.SpanText("Previous"),
-						),
-						html.Button(
-							alpine.XBind("disabled", "!hasNextSlide"),
-							alpine.XOn("click", "nextSlide"),
-							html.Class("btn btn-neutral btn-ghost"),
-							component.SpanText("Next"),
-							lucide.ChevronRight(),
-						),
-					),
-				},
-			}),
-		),
+		indexHowTo(),
 	}
 
 	return layout.Dashboard(reqCtx, layout.DashboardParams{