Foursquare API - Not returning photos - reactjs

I have a basic Foursquare API account and I'm using venue search, to:
Search for a city location
And then return venue results.
Pretty simple.
I'm using this api, but no photos seem to be available in the API feed for photos.
https://api.foursquare.com/v2/venues/explore?near=london&&client_id={MY-API-KEY}&client_secret={MY-SECRET-KEY}&v=201806044
I'm using ReactJS and making a simple axios request for this api. Code further below...
What's the best way to get photos for a venue? I search and stackoverflow and tried adding &venuePhotos=1 as suggested previously be a user, but that didn't work...
componentDidMount() {
console.log('COMPONENT DID MOUNT');
axios.get('https://api.foursquare.com/v2/venues/explore?near=london&&client_id={MY-API-KEY}&client_secret={MY-SECRET-KEY}&v=201806044&venuePhotos=1')
.then(res => {
console.log('DATA', res.data.response.groups[0].items);
this.setState(
{ places: res.data.response.groups[0].items.slice(0,12)}
);
});
}

Beginning on May 31st, foursquare made five changes in order to simplify their API and maintain the quality of their service as their developer community grows.
https://developer.foursquare.com/docs/announcements#start-up-tier-launch
Venues search, explore, trending, similar, and next endpoints will return the following fields: venue name, venue ID, address, lat/long, and category. To access additional rich content for each venue, please call the details (venues/x) endpoint with venue ID as a parameter.
So, you should call the details (venues/x) endpoint.
https://developer.foursquare.com/docs/api/venues/details

Related

Save value to Firestore on Stripe successful payment status

I want to write the user free-input form data to Firestore based on them successfully completing the Stripe checkout through the PaymentElement. I was first trying to do so based on the stripe.confirmPayment method response, which did not work well. Any ideas or practical examples on how can this be implemented? I have also tried using Stripe Webhooks, but I am unsure how to pass the user free-input form data there. Can this generally be handled from the front end, or should I create Firebase function?
const { error } = await stripe.confirmPayment({
elements,
confirmParams: {
return_url: window.location.href
}
});

react-paypal-button-v2 returning the wrong order id

I was trying to debug a problem related to refunding Paypal orders (in a sandbox environment) using order IDs (which were stored previously). Every time I tried to perform a refund, the Paypal API would return an INVALID_RESOURCE_ID error, meaning that no such order existed. After much debugging, I have made a revelation with the initial process when I stored said order ID. The following method is how I am retrieving and storing said order id:
const onApprove = (data, actions) => {
// Redux method of saving checkout in backend with order ID via using data.orderID
dispatch(saveCheckout(data.orderID);
return actions.order.capture();
}
<PayPalButton
amount={totalPrice}
currency= "AUD"
createOrder={(data, actions) => createOrder(data, actions)}
onApprove={(data, actions) => onApprove(data, actions)}
options={{
clientId: "<placeholder>",
currency: "AUD"
}}
/>
I am using the recommended data.orderID from the docs and yet, upon inspecting the network tab, the following is shown:
{"id":"5RJ421191B663801G","intent":"CAPTURE","status":"COMPLETED","purchase_units":[{"reference_id":"default","amount":{"currency_code":"AUD","value":"24.00"},"payee":{"email_address":"sb-sg4zd7438633#business.example.com","merchant_id":"EJ7NSJGC6SRXQ"},"shipping":{"name":{"full_name":"John Doe"},"address":{"address_line_1":"1 Cheeseman Ave Brighton East","admin_area_2":"Melbourne","admin_area_1":"Victoria","postal_code":"3001","country_code":"AU"}},"payments":{"captures":[{"id":"7A2856455D561633D","status":"COMPLETED","amount":{"currency_code":"AUD","value":"24.00"},"final_capture":true,"seller_protection":{"status":"ELIGIBLE","dispute_categories":["ITEM_NOT_RECEIVED","UNAUTHORIZED_TRANSACTION"]},"create_time":"2021-10-11T00:40:58Z","update_time":"2021-10-11T00:40:58Z"}]}}],"payer":{"name":{"given_name":"John","surname":"Doe"},"email_address":"sb-432azn7439880#personal.example.com","payer_id":"KMEQSKCLCLUZ4","address":{"country_code":"AU"}},"create_time":"2021-10-11T00:40:48Z","update_time":"2021-10-11T00:40:58Z","links":[{"href":"https://api.sandbox.paypal.com/v2/checkout/orders/5RJ421191B663801G","rel":"self","method":"GET"}]}
The id saved by onApprove is 5RJ421191B663801G but there is another ID under captures and id which is 7A2856455D561633D. This is the actual order id I need to save in order to make the refund later on. However, I am struggling as to how I can retrieve this value as that id value seems to be only visible via the network. The objects returned via the onApprove and action.order.get() methods only return the first "false" id. Any advice would be greatly appreciated.
These are two separate types of IDs, the order ID (used only during buyer checkout approval), and the payment/transaction ID (which only exists after an order is captured, and is the one needed for any later refund or accounting purposes)
Since you are capturing on the client side with actions.order.capture(), this is where you would need to add a .then(function(data){ ... }) to do something with the capture data (particularly data.purchase_units[0].payments.captures[0].id). That is the id you would use for a refund.
In actual best practice, if anything important needs to be done with the capture id -- such as storing it in a database for reference -- you should not be creating and capturing orders on the client side, and instead calling a server-side integration where that database write will be performed.
Follow the Set up standard payments guide and make 2 routes on your server, one for 'Create Order' and one for 'Capture Order', documented here. Both routes should return only JSON data (no HTML or text). Inside the 2nd route, when the capture API is successful you should store its resulting payment details in your database (particularly the aforementioned purchase_units[0].payments.captures[0].id, which is the PayPal transaction ID) and perform any necessary business logic (such as sending confirmation emails or reserving product) immediately before forwarding your return JSON to the frontend caller.
Pair those 2 routes with the frontend approval flow: https://developer.paypal.com/demo/checkout/#/pattern/server
Or for react, use the official react-paypal-js

How to Update this mobile no field to firestore database when all the data have route to this screen

How do i update this mobile no field to firestore database i am unable to find the doc id. i tried many times but it showing me error that doc id is missing which doc id should i have to put please make a help for me in this case. Thankyou.
const ItemDetails = ({ route }) => {
const[values, setValue] = useState('')
let data = route.params
console.log(data)
const updateValue = () => {
db.collection("FinalData")
.doc()
.update({
mobile_no: values
})
.then(function () {
alert("Mobile Number Updated Successfully")
})
}
Okay, you do not know which doc id to put.
In Firestore, you can only update an existing document.
Right now, what you want to do with this line db.collection("FinalData").doc().update(...) is to update a document, but you have not told firestore which document to remove the old mobile no from and put the new mobile no in.
Another way to understand this is we can assume that your firestore database is a book. What you want to do with this line db.collection("FinalData").doc().update(...) is to tell firestore to please change mobile no to 'bla bla bla' on page (you didn't give any page number). So you see, firestore can not change anything because it does not which page to change.
So the doc id being referred to is the id of the document you want to correct.
This mobile no, is probably one of your users mobile number, so get the document (which could be something like user-settings, user-details or so) id.
Then you put that document id as shown below:
db.collection("FinalData").doc('PUT-DOC-ID-HERE').update(...)

Firestore function to listen for updates

I am a beginner in React native and firestore, and using these to build a kind of social media app, and I have a weird problem(I think I structured the db the wrong way). I want to have a feed, with all posts, no following-based, no nothing. The first time I structured my posts in db like this: users(collection)->user(doc)->thisUserPosts(collection inside doc) - but I couldn't find a way to fetch through all the thisUserPosts from all user(doc) and display them properly.
So I re-structured the db like this:
2 main collection, posts and users. Completely different. In users collection, only docs of users and their data(name, age, etc). In the other, their posts(name, media, desc, AND userId - where userId == the person who created it. userId field from posts collection docs should exist in users collection).
This second approach works just fine. In feed, I only fetch posts. But the problem arrises when I try to open the post(need to have this feature). I need to be able to display on react-navigation header the name of the user, yet I only have details of the post and only userId, which is to no good use.
So I came up with a solution : add a userName field in the posts collection doc, next to userId and simply display that. Now here's the catch: I need to figure a way(in firestore I think) to listen to updates from users collection docs, in case a user updates his name/username(I don't want to showcase the old name). And I don't know if that's possible inside firestore or how. Or is it better to find a different db structure?
TLDR: Need a function in firestore to listen to updates from other collection OR restructuring the db.
If you are fetching posts of a single user then you can just set a listener for his document.
Make sure that document has no sensitive information that must not be shared with others and is limited to the owner only.
If you are fetching posts from multiple users then you can use in operator:
db.collection("users").where("userID", "in", ["user_id1", "user_id2"])
.onSnapshot((snapshot) => {
console.log(snapshot.docs.map(user => user.data()))
});
If I assume you will be updating the new name in all the user's posts then you can set the listener on the posts document itself but that won't be nice in case all 30 posts fetched are from same user. That'll end up costing 30 reads just to update the same name.
Edit:
A simple example of reading a user's posts and listening updates on the user name:
const userID = "my_user_id"
// fetching user's 30 posts
const postsRef = firebase.firebase().collection("posts").where("userID", "==", userID).limit(30)
const postsSnapshot = await postsRef.get()
const postsData = postsSnapshot.docs.map(post => post.data())
// Array of posts data objects
// listening to change in user's name
firebase.firestore().collection("users").doc("user_id")
.onSnapshot((doc) => {
console.log("data: ", doc.data());
const newUsername = doc.data().username
const updatedPostsData = postsData.map(post => {
return ({...post, username: newUsername})
})
});

Let users create elements that only they can see in Firebase (in React)

I recently started learning firebase and i find it great. I was able to let users register/login with email and password and once they are on the app they can create "Cards" with some data. However any user that creates an account on my app can then view and delete, edit, etc. any Card created by any user.
My question is simply how can i only display Cards strictly to the users who created them only?
Here is my code up to now:
useEffect(() => {
const cardRef = firebase.database().ref('Cards')
cardRef.on('value', (snapshot) => {
const cards = snapshot.val()
const cardslist = []
for (let id in cards) {
cardslist.push({id, ...cards[id] })
}
setCardslist(cardslist)
})
},[])
//in my jsx i then have cardslist which displays the cards
<div>{cardslist}</div>
Here is what you need to do:
1 - Make sure every "card" document has a "creator" field, so you can filter the query with something like...
your_query().where("creator", "==", current_viewer_id)
2 - Make sure you use Firestore Rules, to limit read/write operations on a card to only the creator of the card. Your use case is one of the first examples you'll see in Firestore Rules documentation and explainer videos.
Good luck! You're almost there.

Resources