Fetch запрос с методом Delete в консоли не может найти уже удаленный файл


async function getData() {
    let res = await fetch('http://localhost:3000/api/clients', {
        method: 'GET'
    })

    return await res.json()
}

async function addNewClient(clientName, clientSurname, clientLastName) {
    let res = await fetch('http://localhost:3000/api/clients', {
        method: 'POST',
        body: JSON.stringify({ name: clientName.value, surname: clientSurname.value, lastName: clientLastName.value }),
        headers: {
            'Content-Type': 'application/json'
        }
    })
    return await res.json()
}

async function changeClient(item, clientName, clientSurname, clientLastName) {
    let res = await fetch(`http://localhost:3000/api/clients/${item.id}`, {
        method: 'PATCH',
        body: JSON.stringify({ name: clientName.value, surname: clientSurname.value, lastName: clientLastName.value }),
        headers: {
            'Content-Type': 'application/json'
        }
    })
    return await res.json()
}

async function deleteClients(item) {
    let res = await fetch(`http://localhost:3000/api/clients/${item.id}`, {
        method: 'DELETE',
        headers: {
            'Content-Type': 'application/json'
        }
    });
    return await res.json()
}


let $tableBody = document.querySelector('.clients__table-body')

// Очистка таблицы значений
function clearTable() {
    $tableBody.innerHTML = ''
}

// Переменные формы нового клиента
function modalNewClient() {
    let $addClient = document.querySelector('.clients__add-client')
    let $clientAddForm = document.querySelector('.form__wrapper')
    let $clientAddFromClose = document.querySelector('.form__button-close')
    let $clientAddLastName = document.querySelector('.form-client__lastname')
    let $clientAddName = document.querySelector('.form-client__name')
    let $clientAddSecondName = document.querySelector('.form-client__secondname')
    let $saveClient = document.querySelector('.form__save')
    return {
        $addClient,
        $clientAddForm,
        $clientAddFromClose,
        $clientAddLastName,
        $clientAddName,
        $clientAddName,
        $clientAddSecondName,
        $saveClient,
    }
}

// СОЗДАНИЕ ДЕРЕВА ДЛЯ СТРОКИ КЛИЕНТА
function createClientDom(item) {
    let $tableBodyTr = document.createElement('tr')
    $tableBodyTr.classList.add('clients__table-body-tr')
    $tableBody.append($tableBodyTr)
    let $tableTdId = document.createElement('td')
    let $tableTdName = document.createElement('td')
    let $tableTdDate = document.createElement('td')
    let $tableTdDateChange = document.createElement('td')
    let $tableTdContacts = document.createElement('td')
    let $tableTdActions = document.createElement('td')
    let $clientsBtnChange = document.createElement('button')
    let $clientsBtnDelete = document.createElement('button')

    $clientsBtnChange.classList.add('clients__btn-change', 'btn-reset')
    $tableTdId.classList.add('clients__id')
    $tableTdName.classList.add('clients__name')
    $tableTdDate.classList.add('clients__date')
    $tableTdDateChange.classList.add('clients__change-date')
    $tableTdContacts.classList.add('clients__contacts')
    $clientsBtnDelete.classList.add('clients__btn-delete', 'btn-reset')

    $tableTdId.textContent = item.id
    $tableTdName.textContent = `${item.surname} ${item.name} ${item.lastName}`
    $tableTdDate.textContent = item.createdAt
    $tableTdDateChange.textContent = item.updatedAt
    $tableTdContacts.textContent = item.contacts
    $clientsBtnChange.textContent = 'Изменить'
    $clientsBtnDelete.textContent = 'Удалить'
    $clientsBtnDelete.dataset.id = `${item.id}`
    $tableTdId.dataset.id = `${item.id}`
    $tableBodyTr.append($tableTdId)
    $tableBodyTr.append($tableTdName)
    $tableBodyTr.append($tableTdDate)
    $tableBodyTr.append($tableTdDateChange)
    $tableBodyTr.append($tableTdContacts)
    $tableBodyTr.append($tableTdActions)
    $tableTdActions.append($clientsBtnChange)
    $tableTdActions.append($clientsBtnDelete)

    return {
        $tableBody,
        $tableBodyTr,
        $tableTdId,
        $tableTdName,
        $tableTdDate,
        $tableTdDateChange,
        $tableTdContacts,
        $tableTdActions,
        $clientsBtnChange,
        $clientsBtnDelete,
    }
}

// Функция удаления и открытия модального окна
function confirmDelete(clientCreate, item) {
    clientCreate.$clientsBtnDelete.addEventListener('click', function () {
        let deleteFormConfirm = document.querySelector('.form-delete__wrapper')
        deleteFormConfirm.classList.toggle('form-delete__wrapper--active')
        let deleteClient = document.querySelector('.form-delete__delete-btn')
        let deleteCancel = document.querySelector('.form-delete__delete-cancel')
        let deleteClose = document.querySelector('.form-delete__button-close')
        deleteClient.addEventListener('click', async function () {
          await deleteClients(item)  // функция удаления из БД
            deleteFormConfirm.classList.remove('form-delete__wrapper--active')
            clientCreate.$tableBodyTr.remove()
        })
        deleteCancel.addEventListener('click', function () {
            deleteFormConfirm.classList.remove('form-delete__wrapper--active')
        })
        deleteClose.addEventListener('click', function () {
            deleteFormConfirm.classList.remove('form-delete__wrapper--active')
        })
    })
}

// Функция изменения клиента и открытия модального окна
 function confirmChange(clientCreate, item) {
    clientCreate.$clientsBtnChange.addEventListener('click', function () {
        let changeFromConfirm = document.querySelector('.form-change__wrapper')
        changeFromConfirm.classList.toggle('form-change__wrapper--active')
        let changeDeleteClient = document.querySelector('.form-change__delete')
        let changeFormClose = document.querySelector('.form-change__button-close')
        let changeFormSave = document.querySelector('.form-change__save')
        changeDeleteClient.addEventListener('click', async function () {
          await deleteClients(item)
            changeFromConfirm.classList.remove('form-change__wrapper--active')
            clientCreate.$tableBodyTr.remove()
        })
        changeFormClose.addEventListener('click', function () {
            changeFromConfirm.classList.remove('form-change__wrapper--active')
        })
        let changeLastname = document.querySelector('.form-change__client-lastname')
        let changeName = document.querySelector('.form-change__client-name')
        let changeSecondname = document.querySelector('.form-change__client-secondname')
        changeLastname.value = item.surname
        changeName.value = item.name
        changeSecondname.value = item.lastName
        changeFormSave.addEventListener('click', async function () {
          await changeClient(item, changeName, changeLastname, changeSecondname)
            changeFromConfirm.classList.remove('form-change__wrapper--active')
            // нужно сделать отрисовку по id 
            clearTable()
            let secondList = await getData()
            createList(secondList)
        })

    })
 }

// Добавление значений в дерево и удаление через функцию confirmDelete + изменение
let list = await getData()
function createList(data) {
    for (let item of data) {
        let clientCreate = createClientDom(item)
        // Удаление клиента
        confirmDelete(clientCreate, item)
        confirmChange(clientCreate, item)
        // Нужно сделать отрисовку
    }
    //ругается на прошлый id
}
createList(list)

//Добавление Клиента в базу из формы создания клиента
async function putData() {
    let modalDom = modalNewClient()

    //Открытие формы добавления нового клиента
    modalDom.$addClient.addEventListener('click', function () {
        modalDom.$clientAddForm.classList.toggle('form__wrapper--active');
        modalDom.$clientAddName.value = ''
        modalDom.$clientAddLastName.value = ''
        modalDom.$clientAddSecondName.value = ''
    })
    //Закрытие формы нового клиента
    modalDom.$clientAddFromClose.addEventListener('click', function () {
        modalDom.$clientAddForm.classList.remove('form__wrapper--active')
    })

    modalDom.$saveClient.addEventListener('click', async function (e) {
        e.preventDefault()
        await addNewClient(modalDom.$clientAddName, modalDom.$clientAddLastName, modalDom.$clientAddSecondName)
        clearTable()
        let secondList = await getData()
        createList(secondList)
        modalDom.$clientAddForm.classList.remove('form__wrapper--active')
    })

}

putData()


Ответы (0 шт):