Linked Questions

Popular Questions

How to send HTTP Request DELETE from UI to Python API

Asked by At

My current application is a CRUD UI which is ran in conjunction with a Python API. This API stores , edit , reads and deletes data from the sqlite3 python database.

I have replicated my delete function to meet my edit function but as soon as i click the Delete button , it doesn't seem to do anything. It should delete the an issue title and description so that it cannot be viewed on the index page when refreshed. So far my front-end code is as follows :

index.js - This has the routes for each page :

require('babel-polyfill')
const m = require('mithril')
const {IssuesList, ViewIssue, CreateIssue, EditIssue,DeleteIssue, ToolbarContainer} = require('./views')
const {IssuesModel} = require('./viewmodels')

const issuesModel = new IssuesModel()

m.route(document.body, '/issues', {
  '/issues': {
    render(vnode) {
      return m(ToolbarContainer, m(IssuesList, {model: issuesModel}))
    }
  },
  '/issues/create': {
    render(vnode) {
      return m(ToolbarContainer, m(CreateIssue, {model: issuesModel}))
    }
  },

  '/issues/:issueId/edit': {
    render(vnode) {
      return m(ToolbarContainer, m(EditIssue, {model: issuesModel, issueId: vnode.attrs.issueId}))
    }
  },

    '/issues/:issueId/delete': {
        render(vnode) {
            return m(ToolbarContainer, m(DeleteIssue, {model: issuesModel, issueId: vnode.attrs.issueId}))
        }
    }
})

viewmodels.js - These are the functions carried out for each CRUD operation

const m = require('mithril')

class IssuesModel {
    constructor() {
        this.issues = {}
    }
    async loadIssues() {
        let response = await m.request('/issues')
        this.issues = {}
        for (let issue of response.issues) {
            this.issues[issue.id] = issue
        }
        return this.issues
    }
    get list() {
        return Object.keys(this.issues).map(i => this.issues[i])
    }
    async loadIssue(issueId) {
        let response = await m.request(`/issues/${issueId}`)
        this.issues[issueId] = response
        return response
    }
    async updateIssue(issueId, fields) {
        await m.request({
            method: "PUT",
            url: `/issues/${issueId}`,
            data: fields
        })
        return await this.loadIssue(issueId)
    }


    async deleteIssue(issueId, fields) {
        await m.request({
            method: "DELETE",
            url: `/issues/${issueId}`,
            data: fields
        })
        return await this.loadIssues()
    }


    async createIssue(fields) {
        await m.request({
            method: "POST",
            url: `/issues`,
            data: fields
        })
        return await this.loadIssues()
    }
}

module.exports = {IssuesModel}

views.js - The view for the edit and delete view only

class EditIssue {
    constructor(vnode) {
        this.model = vnode.attrs.model
        this.issueId = vnode.attrs.issueId
    }
    async oninit() {
        await this.model.loadIssue(this.issueId)
    }
    view() {
        let issue = this.model.issues[this.issueId]
        return issue
            ? m(IssueEditor, {
                title: issue.title,
                description: issue.description,

                onSubmit: async (fields) => {
                    await this.model.updateIssue(this.issueId, fields)
                    m.route.set(`/issues/${this.issueId}`)
                    m.redraw()
                }
            })
            :m('.alert.alert-info', 'Loading')

    }
}


class DeleteIssue {
    constructor(vnode) {
        this.model = vnode.attrs.model
        this.issueId = vnode.attrs.issueId
    }
    async oninit() {
        await this.model.loadIssue(this.issueId)
    }
    view() {
        let issue = this.model.issues[this.issueId]
        return issue
            ? m(DeleteIssueEditor, {
                title: issue.title,
                description: issue.description,

                onSubmit: async (fields) => {
                    await this.model.deleteIssue(this.issueId,fields)
                    m.route.set(`/issues/${this.issueId}`)
                    m.redraw()
                }
            })
            :m('.alert.alert-info', 'The ID you have requested to delete does not exist' , )

    }
}


class DeleteIssueEditor {
    constructor(vnode) {
        this.title = vnode.attrs.title
        this.description = vnode.attrs.description
        this.onSubmit = vnode.attrs.onSubmit
    }
    view() {
        return m('form', [
            m('.form-group', [
                m('label',  'The following will be deleted '),
                m('', ),
                m('label', {'for': 'title-input'}, 'Issue Title'),
                m('input.form-control#title-input', {value: this.title, oninput: (e) => {this.title = e.target.value}})
            ]),
            m('.form-group', [
                m('label', {'for': 'description-input'}, 'Description'),
                m('textarea.form-control#description-input', {oninput: (e) => {this.description = e.target.value}}, this.description)
            ]),
            m('button.btn.btn-primary#save-button', {type: 'submit'}, 'Delete')

        ])
    }
}

My Python Back-end is as follows :

class IssueResource(object):
    def __init__(self, repo):
        self._repo = repo

    def on_put(self, req, resp, issue_id):
        with self._repo.open() as repo:
            update = req.media
            repo.issues.update_issue(issue_id, **update)
            resp.status = falcon.HTTP_200

    def on_delete(self, req, resp, issue_id):
        with self._repo.open() as repo:
            issue = repo.issues.fetch_issue(int(issue_id))
            if issue:

                repo.issues.delete_issue(issue_id)
                resp.status = falcon.HTTP_200
            else:
                resp.status = falcon.HTTP_404


    def update_issue(self, issue_id, **kwargs):
        cursor = self._conn.cursor()
        try:
            if 'title' in kwargs:
                cmd = "UPDATE issues SET title=? WHERE id=?"
                cursor.execute(cmd, (kwargs['title'], issue_id))
                print ("Success - Title Updated")

            else:

                print ("Fail - Title not updated")
            if 'description' in kwargs:
                cmd = "UPDATE issues SET description=? WHERE id=?"
                cursor.execute(cmd, (kwargs['description'], issue_id))
                print ("Success - Description Updated")
            else:
                print("Fail - Description not updated")
        finally:
            cursor.close()

    def delete_issue(self, issue_id, **kwargs):
        cursor = self._conn.cursor()
        try:
                if issue_id :

                    cmd = "DELETE FROM issues WHERE id=? AND title=? AND description =?"
                    cursor.execute(cmd ,(kwargs['title'], kwargs['description'], issue_id))
                    print ("Delete is success")
                else:
                    print("Delete is not a success")
        finally:
            cursor.close()

Related Questions