axios stop posting the request in react js - reactjs

I want to make a website that interact with mysql server. Here is my server code
1
Here is my client code
2
and my problem is that after I have some error about mysql query like I insert a duplicate entry, I change the data of the form and submit again, the website remain no response. Can anyone have the same question and know what is the problem in my code.
I check the status of the network and i find that i cannot update the list after the insert is pending. How can I deal with the problem. Should i cancel the request?3

Related

React error: request failed with status code 400

I am following Bezkoder tutorial in the link to create a simple CRUD database using React, NodeJS, Express and MySQL: [https://www.bezkoder.com/react-node-express-mysql/#React_Nodejs_Express_MySQL_Architecture
I've successfully created the backend and tested read, write and delete of records using POSTMAN. I've then created the React frontend, which uses Axios - it compiles OK, and displays a web page in my browser. This page will read records from the database OK, but when I try to add new or amend existing records, it doesn't work, and in console it displays "Request Failed with status code 400" error. The full error message in console is as follows:
Console error
I'm not sure what the error means or how I might go about troubleshooting further. Could anyone point out to me how I can troubleshoot this further or what other info you'd need to help me?
I was expecting the React frontend to be able to add new records and amend existing records.

Display realtime data in reactjs

I'm sending data from my backend every 10 seconds and I wanted to display that data in reactjs. I've searched on the net to use socket.io to display real-time data. Is there a better way to use it?
If you're dead set on updating your data every 10 seconds, it would make more sense to make a request from the client to the server, as HTTP requests can only be opened from client to server. By using HTTP requests, you won't need to use socket.io, but socket.io is an easy alternative if you need much faster requests.
Depending on how you are generating the data being sent from your backend, specifically if you are using a database, there is most likely a way to subscribe to changes in the database. This would actually update the data in realtime, without a 10 second delay.
If you want a more detailed answer, you'll have to provide more detail regarding your question: what data are you sending? where is it coming from or how are you generating it?
I'm working on an autodialer feature, in which an agent will get a call when I trigger the button from the frontend (using react js language), and then automatically all the leads in the agent assigned portal will get back-to-back calls from agent number. However, because this process is automatic, the agent won't know who the agent has called, so I want to establish a real-time connection so that I can show a popup on the frontend that contains information about the lead who was called.

Is it possible to update an AngularJS expression via an API call through a Service?

I'm looking for a way (and not even sure if this is possible) to update an Angular expression on my HTML page when data is sent to an API.
For example, say I have $scope.message on my .html page. Is there a way I can send a message to an API (e.g. http://...?message=foo) and have my page update with the message sent?
Also, I need the $scope.message to be updated in an Angular Service so it is available to multiple pages within my website.
I am wanting this to be a live update, but if not, I am happy with some code executing on a timer or something similar.
Any suggestions appreciated.
UPDATE
I'm guessing it may not be possible, but just in case I haven't explained it correctly, I'll try and simplify it.
I can only find information about using AngularJS to send GET commands OUT to a URL and receive data back. I need to send a JSON string TO my Angular site to update a variable. So basically as a field updates in my database, I want another server application to send an alert to my Angular site to update the status of this value live. I don't really want to run a constant check of the database if I don't have to.
I am open to any other suggestions on how to achieve this.
if you don't care about old school browsers, you can try using WebSocket, it is similar to a TCP socket, which allows you to push from server to client. I would create a service that manages the websocket connection, and update scope when receiving message. Hope this help. More info here: https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API

Multiple post requests on an event triggered AngularJS app

I am doing a real time app, and in one part of the application, some data is posted to the server when an event is triggered, this is then updated to the db. The problem is each browser connection instance is posting the same data, resulting in multiple db updates from the instances. I can't seem to see a way of figuring this out. Kindly assist.
I fixed it by sending post results from a single client who matched some criteria, and now it works fine.

Mobile to Web Service Communication

I created a web service and a mobile application that communicate between each other. When everything is working, it works great. When the server doesn't respond, it starts to break down.
The mobile device sends a message to the server with a bunch of records. Getting the records on the server never seems to be a problem. It gets the records and then sends a response back to the mobile device that the update was received. The PROBLEM is that the mobile device doesn't always get the response, so it doesn't know it shouldn't send those records again for updating.
Next time it sends the records again and now I have duplicate records. How can I solve this?
Idea 1) Create a transaction number unique on the mobile device that I can compare against the server to see if the record was already uploaded. Then just don't write that record and attempt to send back the response that it was written.
Idea 2) Send the records to the server, but before writing them respond to the mobile device that they were received. This way the mobile device can tag them and then send another response to the server telling it to write them. At the point the mobile device almost doesn't care if it gets a response. Only thing, you don't know if the server ever got the message.
Looking for ideas on how to handle this that either confirm one of these ideas or has a completely different one.
I ended up creating logs that the device attempts to resolve when it gets back successful responses from the server.
I tag items as a batch of lines and send them up to the server. Once they are up there, I create a log about the success or failure of each line item in a batch of items and then save the log to the file system.
When the mobile device is unsuccessful in hearing back a response from the server, in rare cases, it asks the server about a batch number. If the server doesn't respond with a status of that batch, it assumes the server never received it and remarks those items for another upload attempt. If it hears back, it processes the success and failure line by line and then marks the items on the mobile device accordingly. If the mobile device doesn't ask about the log in the next upload, the server assumes the batch's lifecycle is complete and it no longer needs to maintain that log. It is then deleted.
The server doesn't delete a log until it has a successful request from the specific device no longer asking to hear about the log. So if I have log 1 on the server and the device doesn't ask in the next upload to hear back about that log, the server then removes that log assuming the device got the response it wanted or doesn't care about it anymore.

Resources