some js refactors

src/registrar/assets/src/js/getgov/form-nameservers.js

@@ -1,20 +1,55 @@
 import { showElement, hideElement } from './helpers';
 
-function handleAddFormClick(e) {
+export class NameserverForm {
-    let nameserversForm = document.querySelector('.nameservers-form');
+    constructor() {
-    if (!nameserversForm) {
+        this.addNameserverButton = document.getElementById('nameserver-add-form');
-        console.warn('Expected DOM element but did not find it');
+        this.nameserversForm = document.querySelector('.nameservers-form');
-        return; 
+
+        // Bind event handlers to maintain 'this' context
+        this.handleAddFormClick = this.handleAddFormClick.bind(this);
+        this.handleEditClick = this.handleEditClick.bind(this);
+        this.handleCancelClick = this.handleCancelClick.bind(this);
     }
 
-    showElement(nameserversForm);
+    init() {
-    
+        this.initializeNameserverFormDisplay();
-    if (e?.target) {
+        this.initializeEventListeners();
-        hideElement(e.target);
     }
-}
 
-function handleEditClick(e) {
+    initializeNameserverFormDisplay() {
+        // Check if exactly two nameserver forms exist: id_form-1-server is present but id_form-2-server is not
+        const secondNameserver = document.getElementById('id_form-1-server');
+        const thirdNameserver = document.getElementById('id_form-2-server'); // This should not exist
+
+        // Check if there are error messages in the form (indicated by elements with class 'usa-alert--error')
+        const errorMessages = document.querySelectorAll('.usa-alert--error');
+
+        if (secondNameserver && !thirdNameserver && errorMessages.length > 0) {
+            showElement(this.nameserversForm);
+            hideElement(this.addNameserverButton);
+        }
+    }
+
+    initializeEventListeners() {
+        this.addNameserverButton.addEventListener('click', this.handleAddFormClick);
+    
+        const editButtons = document.querySelectorAll('.nameserver-edit');
+        editButtons.forEach(editButton => {
+            editButton.addEventListener('click', this.handleEditClick);
+        });
+    
+        const cancelButtons = document.querySelectorAll('.nameserver-cancel');
+        cancelButtons.forEach(cancelButton => {
+            cancelButton.addEventListener('click', this.handleCancelClick);
+        });
+    }
+
+    handleAddFormClick(event) {
+        showElement(this.nameserversForm);
+        hideElement(this.addNameserverButton);
+    }
+
+    handleEditClick(e) {
         let editButton = e.target;
         let readOnlyRow = editButton.closest('tr'); // Find the closest row
         let editRow = readOnlyRow.nextElementSibling; // Get the next row
@@ -33,9 +68,9 @@ function handleEditClick(e) {
 
         hideElement(readOnlyRow);
         showElement(editRow);
-}
+    }
 
-function handleCancelClick(e) {
+    handleCancelClick(e) {
         let cancelButton = e.target;
         let editRow = cancelButton.closest('tr'); // Find the closest row
         let readOnlyRow = editRow.previousElementSibling; // Get the next row
@@ -47,21 +82,17 @@ function handleCancelClick(e) {
 
         hideElement(editRow);
         showElement(readOnlyRow);
+    }
+
 }
 
 export function initFormNameservers() {
-    const addButton = document.getElementById('nameserver-add-form');
+    document.addEventListener('DOMContentLoaded', () => {
-    if (!addButton) return;
 
-    addButton.addEventListener('click', handleAddFormClick);
+        // Initialize NameserverForm if nameserver-add-form button is present in DOM
-
+        if (document.getElementById('nameserver-add-form')) {
-    const editButtons = document.querySelectorAll('.nameserver-edit');
+            const nameserverForm = new NameserverForm();
-    editButtons.forEach(editButton => {
+            nameserverForm.init();
-        editButton.addEventListener('click', handleEditClick);
+        }
     });
-
-    const cancelButtons = document.querySelectorAll('.nameserver-cancel');
-    cancelButtons.forEach(cancelButton => {
-        cancelButton.addEventListener('click', handleCancelClick);
-    })
 }