From b3127239cba3cc2dcf36b1c8b995aa5fb2f9cb57 Mon Sep 17 00:00:00 2001
From: Kyle Angelo Galendez <chessurisme@gmail.com>
Date: Wed, 5 Jun 2024 18:25:36 +0800
Subject: [PATCH] fix: separate event setting from button creation

Fixes the bug of not setting events on a button because the button is
not yet created or appended to the DOM. Event setting relies on the
element's ID in the DOM. Separated event setting into another method to
address this issue. Additionally, return `this` in methods where
chaining is necessary.
---
 src/components/button/button-create.js     | 31 ++++------------------
 src/components/button/button-set-events.js | 12 +++++++++
 src/components/button/button.js            |  5 ++++
 3 files changed, 22 insertions(+), 26 deletions(-)
 create mode 100644 src/components/button/button-set-events.js

diff --git a/src/components/button/button-create.js b/src/components/button/button-create.js
index b3d06d2..17f7852 100644
--- a/src/components/button/button-create.js
+++ b/src/components/button/button-create.js
@@ -2,12 +2,11 @@
 
 import { isConfigVerified } from '@utilities/config/config-verifier'
 import { setAttributes } from '@utilities/components/set-attributes'
-import { setEvents } from '@utilities/components/set-events'
 
 function createButton(config) {
 	if (!isConfigVerified('button', config)) return
 
-	const { type, id, class_name, icon, events } = config
+	const { type, id, class_name, icon } = config
 	let { text } = config
 
 	let button
@@ -15,40 +14,21 @@ function createButton(config) {
 	switch (type) {
 		case 'rounded-square':
 			text = undefined
-			button = createContainer(
-				icon,
-				text,
-				id,
-				class_name,
-				events,
-				'rounded-square'
-			)
+			button = createContainer(icon, text, id, class_name, 'rounded-square')
 			break
 		case 'slab':
 			if (!text && !icon) return
-			button = createContainer(icon, text, id, class_name, events, 'slab')
+			button = createContainer(icon, text, id, class_name, 'slab')
 			break
 		default:
 			if (!text && !icon) return
-			button = createContainer(
-				icon,
-				text,
-				id,
-				class_name,
-				events,
-				'transparent'
-			)
+			button = createContainer(icon, text, id, class_name, 'transparent')
 	}
 
 	return button
 }
 
-function createContainer(icon, text, id, class_name, events, type) {
-	if (!events) {
-		console.error('Button is useless without events.')
-		return
-	}
-
+function createContainer(icon, text, id, class_name, type) {
 	const BUTTON = document.createElement('div')
 	setAttributes(BUTTON, {
 		id: `button-${id}`,
@@ -72,7 +52,6 @@ function createContainer(icon, text, id, class_name, events, type) {
 		BUTTON.appendChild(TEXT)
 	}
 
-	setEvents(events)
 	return BUTTON
 }
 
diff --git a/src/components/button/button-set-events.js b/src/components/button/button-set-events.js
new file mode 100644
index 0000000..b96ad0f
--- /dev/null
+++ b/src/components/button/button-set-events.js
@@ -0,0 +1,12 @@
+'use strict'
+
+import { isConfigVerified } from '@utilities/config/config-verifier'
+import { setEvents } from '@utilities/components/set-events'
+
+function setButtonEvents(config) {
+	if (!isConfigVerified('button', config)) return
+	const { id, events } = config
+	setEvents(id, events)
+}
+
+export { setButtonEvents }
diff --git a/src/components/button/button.js b/src/components/button/button.js
index e918b34..9ef0ee0 100644
--- a/src/components/button/button.js
+++ b/src/components/button/button.js
@@ -2,6 +2,7 @@
 
 import { isConfigVerified } from '@utilities/config/config-verifier'
 import { createButton } from './button-create'
+import { setEvents } from './button-set-events'
 import { removeButton } from './button-remove'
 
 class Button {
@@ -14,6 +15,10 @@ class Button {
 		createButton(this.config)
 	}
 
+	setEvents() {
+		setEvents(this.config)
+	}
+
 	remove() {
 		removeButton(this.config)
 	}