Axios requests ignoring parameters - reactjs

I am sending requests to the the Firebase Realtime API. When I try to delete an from item within from a specific collection (e.g. journals) and specify which journal title using axios.delete("https://topxxx-xxx.firebaseio.com/journals.json", {title: "Nature"}}) all of the journals in the collection are deleted, not just "Nature". Similarly, if I do a get request and specify a title, all journals are returned.
I have also tried using "https://topxxx-xxx.firebaseio.com/journals.json", {params: {title: "Nature"}}. but that also returns all journals. Here are an example delete request:
axios.delete("https://topxxx-xxx.firebaseio.com/journals.json", {title: this.state.title})
.catch(error=> console.log("Error" + error))

The Firebase Realtime Database API doesn't support conditional deletes. To delete a node, you must specify the entire part to that node, and (in the REST API) either use the DELETE verb or use the X-HTTP-Method-Override: DELETE header.
So the two step process:
Perform a query to find the nodes with the title you're looking for:
https://topxxx-xxx.firebaseio.com/journals.json?orderBy="title"&equalTo="the title"
Delete the matching nodes by sending a DELETE to URLs like:
https://topxxx-xxx.firebaseio.com/journals/journalId1.json

You cannot delete a specify item from a json file like that in firebase, and also using GET will return the entire collection. It is working amazingly correct from firebase side. If you want something like how you are expecting, go for a small flask server or checkout cloud functions in firebase

You probably want to send that request to a back-end services that's connected to firebase (i'm assuming since you're using axios). Then call the remove method as demonstrated here

Related

Using ID's from previous request in new request

I have used Postman to extract a number of ID's from a request. Now I would like to use those ID's in a new series of requests using Postman. I can't figure out how to do this, does anyone know?
There are several hundreds of ID's and below are some examples that I can see in the console (but they do not appear in the request Body)
(100) [373894, 373893, 373467, 373459, 372712, …]
0: 373894
1: 373893
2: 373467
3: 373459
I would like to use postman to send new requests for all these ID's where I would like to fill the brackets with the ID's in the request URL that now looks like this:
https://app.rule.io/api/v2/campaigns/{{}}/statistics
I've tested the ID's one at a time and they work fine but I would like to run them all to then collect the data and send it to Google Data Studio. (background is that I'm trying to send campaign data from an e-mail marketing tool into Google Data Studio and combine it with website data)
Postman is able to run user-defined test scripts after the call performed. So you could define an array variable, add an ID each time you obtain it. And then, use that array variable to make a call with the whole bunch of IDs you have.
Take a look this blog: https://blog.postman.com/extracting-data-from-responses-and-chaining-requests/

Twitter API: when and how long is media_id safe to use after media upload?

In order to save bandwidth, I try to reuse the media_id that the twitter API returns for multiple tweets, preferably indefinitely. This works, after an upload I can use the same id multiple times, but as soon as when I for example delete a tweet that uses that specific media_id, the id seems to be invalidated and the API returns a
[324] Invalid media status
This made me go on a search for how long and when these media ids are actually usable. I found nothing. Is there anyone with some experience in this field?

Use query string in URL or use multiple URL?

If I want to display many posts in my web application but every post have its own type and I want to display each type in single page so, What's the best method to do that? Is put all all posts in one url and use query string to filter the posts upon the type and display it in the page?
For example : axios.get('/posts?type =sport')
Or I have to put every single type in separate Url
For example: axios.get('/posts/sport')
Also one more question please?
use one reducer to manage every posts or create one reducer for each post type?
you can add a dynamic route to every new type.
Ex:
'/transaction' -> component-1
'/transaction/:type' -> component-any (multiple)
welcome to Stackoverflow!
I can imagine you have a web API of some sort serving a URL /posts. You want to consume that endpoint from your web application, and you are using axios to do that. I can assume you are using JSON to return that data. Correct me if I'm wrong.
Now that the basic information is "clear", what data you serve from the endpoint, and how it is requested from the client is up to you. Do you want to ask the server what types are there first, and then do one AJAX request per type? Ok. Do you want to serve all posts independent of their type? Ok. Do you want to accept POST data in your controller so you can filter the results before returning a response? Ok.
If you are looking for a more specific answer, you must give more details, or specify more. But I hope I could be of help.
Edit: complete answer.
If you want to filter the results, you have to send some additional data in your POST request, in this case, your post type. In axios, this could be done like this:
axios.post('https://example.com/posts', {
type: 'sports'
}).then((data) => {
console.log(data);
});
You can obviously get the "type" value from a select input, other variable, even the current router page. I don't know your exact setup, but you can always come back and ask ;)
THEN, in your API controller you have to get that POST parameter type, and use it to filter the results. Again, I don't know your exact setup, but for MySQL if would be a WHERE statement in your query, or similar.

Redrawing endpoints using jsPlumb

I have been stuck with this a few days and want your help to know how to tackle this problem.
I created this application something like a flowchart to draw different types of plumb items with different endpoints attached to them. After it is being created as an element the endpoints are added dynamically according to the type of plumb item. is it like the following.
This is how I create the plumb items.
var element = document.createElement("div");
element.setAttribute("id",schema_id);
element.setAttribute("class","item " +control.Type);
element.setAttribute("style","left:" +posX + "px ; top: "+posY+"px");
var output = document.getElementById('container');
output.appendChild(element);
And then I add the endpoints according to its type.
jsPlumb.addEndpoint(element,<the style goes here>,{ anchor:<the location of the endpoint goes here>, uuid: <a new ID is created for this>});
And this is what it looks like
Screen One
I managed to grabbed the data from the method "GetConnections" and get it saved in the DB as a JSON. This JSON includes all the IDs which are for plumb items and all the endpoints.
But when I try to retrieve it back again to the UI, it appears like this. Everything appears great except the endpoints.
Screen Two
On redraw, the endpoints are created in the same way mentioned above. To reconnect the endpoints I am using this code.
jsPlumb.connect({ source:<source id>, target:<target id>,anchors:<location of the endpoint>,<style>);
The problem :
For the above code, Although I give the UUID of the endpoint to the source and target, it doesn't identify it as endpoints to connect from and to.
Is there a way to find the ID and get them connected? What I found out was that only the plumb items could be searched with "getElementById" with the UUID but not the endpoints.
The problem is how to make these endpoints get connected as originally drawn. How can connect each endpoint back again? I have all the IDs and when they are redrawn they are having the same IDs as it had when it was saved. But I couldn't find a way to connect the endpoints back again separately since this has different types of endpoints specific to each plumb item.
Any suggestions?
Sorry for the long post
Thank you in advance!!
Please see the connect method
If you connect ids, or elements, or Endpoints use
jsPlumb.connect({source:<source id>, target:<target id>});
but if you connect array of UUIDs of the two Endpoints use
jsPlumb.connect({uuids:<array of uuids>});

ExtJS CRUD operations on Grid Panel and Grails backend

I am an absolute novice and have been working and struggling with ExtJS ! I am supposed to get a list of user records and dipslay them on Ext grid Panel. I have an ExtJS frontend and Grails ( Groovy Controllers ) backend. I have referred to a few links like:
http://docs.sencha.com/extjs/4.0.7/#!/example/grid/row-editing.html
http://docs.sencha.com/extjs/4.0.7/#!/example/restful/restful.html
http://docs.sencha.com/extjs/4.0.7/#!/example/writer/writer.html
The api property ( or ) tag ( or )attribute ( I don't know what it is called ) helps me in getting the list of JSON objects to be displayed in the Grid. Also, when I select a row and click on Delete, the request is reaching the delete action in my controller. But my problems begins here: how do I make sure that:
1) the selected row is deleted from Database? How do I pass the identifier or something to controller so that it will delete the record?
2) When I add a row, how do I pass the field values to backend Controller?
Most of the code is same as given in the restful link above. For reference, this is my Datastore:
https://docs.google.com/document/d/1gQyLCt6xWXTm-OUgYu7hku47r5WcS0my5yPBSKj2B7I/edit?usp=sharing
If you use a Rest proxy, ExtJS will auto generate the urls for you, based on the url stub that you specify. So if your proxy is configured to point to something like: /api/users, the following urls would be generated for each of the 4 actions:
read: /api/users (GET)
create: /api/users (POST)
update: /api/users/SomeIDFromTheUpdatedRecord (PUT)
delete: /api/users/SomeIDFromTheDeletedRecord (DELETE)
As you can see, the end point for each request is precisely the same (api/users), but for PUT and DELETEs, the id of the affected record is included in the URL automatically.
And of course, with POST and PUT requests, you can add any additional params that you'd like to send through to the server, although this will be done automatically when you persist the model instance via the store's configured proxy.

Resources