How to add React form data to queue and process it later?

Question

I am writing a ticketing system in react using Node.js as backend and Python for email server.

What I am trying to do is when somebody submits a form, code access all the form data and send it to plain old JavaScript class with constructor only and append this class object to queue class.

However, there are multiple problems:

1. When I add this form to queue class it adds but when I click submit button again it does not add. Array size remains 1

2. When I try to access queue class in home page it gives me blank array

My main logic is when someone submits form it should not submit immediately rather it should get added to the queue and processed (submitting form to server) in the background independent of main thread.

How can I achieve this logic?

This is my queue class:

class EmailQueue{

    constructor(){
        this.items = []
    }
    
    enqueu(element){
        this.items.push(element)
    }
    
    dequeue(){
        if(this.isEmpty()){

            return "No Email Present"
        }
        
        return this.items[0]
    }
    // isEmpty function
    isEmpty()
        {
            // return true if the queue is empty.
            return this.items.length == 0;
        }
        // front function
    front()
        {
            // returns the Front element of
            // the queue without removing it.
            if(this.isEmpty())
                return "No Email in Queue";
            return this.items[0];
        }
        // printQueue function
    printQueue(){
            console.log("in print")
            console.log(this.items)
            var str = "";
            for(var i = 0; i < this.items.length; i++)
                str += this.items[i] +" ";
            return str;
        }
}

export default EmailQueue

This is my email message class:

class emailMessageclass{

    constructor(emailid,from,subject,message,messageID){
        this.emailid = emailid
        this.from = from
        this.subject = subject
        this.message = message
        this.messageID = messageID
    }

}

export default emailMessageclass

This is my formdata class:

const getformData = (e)=>{
    e.preventDefault()
    const Formdata = new FormData(e.currentTarget)

    let formObeject= Object.fromEntries(Formdata.entries())

    const getclass = new emailMessageclass()
    getclass.emailid = formObeject["toEmail"]
    getclass.from = formObeject['FromEmail']
    getclass.subject = formObeject["subject"]
    getclass.message = formObeject["toEmail"]
    getclass.messageID = formObeject["messageid"]
    
    const emailQueue = new EmailQueue()
    emailQueue.enqueu(getclass)
    // console.log(emailQueue.printQueue())
    console.log(emailQueue)

This is how I am trying to access it in home page route:

  setTimeout(()=>{
    const x = new EmailQueue();
    console.log(x.printQueue())

  },2000) 

How can I improve this?

Answer 1

You can do one thing, you should create a queue using Linked List.

1. Have two pointers to it, head and tail.

2. Whenever the user submits the form read the tail and pass it to the server.

3. Once you receive success, remove the tail and point to a new tail.

4. If the server didn't respond or fails to submit the data, you can retry with the same tail and follow step 3.

5. In this way you can keep the data intact in the Linklist and you can submit the data even if it fails to succeed.

6. Now, there could be a case when users keep adding the forms, it will overwhelm your server with the request. So, I don't have that information so can't comment on it, but you should consider it.

7. You should limit the user to add forms, so that you won't have high number of forms pending because many user might use the website at the same time.

8. When you validate the form data, you add it to the List and move the user to next ticket or form and process this in the background as specified above.

You need to make the LL read squential.