How to get the object from API and update it in flutter - api

I am developing a registration screen in flutter when user signup with their detail the id will autogenerated from API i want to use the id for next page for updating the rest of user details,
I got the response from API in signup but I don't know how to take the specific object from response and used into another page then update the user details. please help me for this.

Well, if i got it right without an example, you can store that value that you retrieve from APi and store in a variable and after simply pass that variable to another page with Navigator.push method.
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => SecondScreen(text: 'Json API',),
),
);
},
A more complex way store that value in system Preference and simply get access to those value from all the app. You can use this package

Related

In Nuxt/VueJs, how can I get SendInBlue Chat Widget to see route changes?

I'm using SendInBlue chat widget on a Nuxt/VueJs website. Through the
SendInBlue Conversations UI,
the widget reports the visitor's page current location (url and title).
However, the location does not change when the internal route changes (no hard browser location change).
I want to see the location changes.
How can I notify the SendInBlue Chat Widget that the route is changing?
The
SendInBlue Chat Widget API
includes a pageView method that can be called to alert the widget to a route change.
SibConversations('pageView')
This Answer about watching a route
provides the basic framework. Note that in my case I added the code to the /layouts/default.vue since it renders most of my pages. (Add to all necessary layouts.)
<script>
export default {
watch: {
$route() {
// on route change, notify SendInBlue Chat Widget so it updates visitor location
if (process.client) {
// delay 0.5 seconds to be sure route has actually changed ($nexttick does show correct page title)
window.setTimeout(() => {
window.SibConversations('pageView')
}, 500)
}
},
},
// ... and data, methods, etc., as needed
}
</script>
So now when the route changes, we notify the widget.
Note: If we trigger window.SibConversations('pageView') without a delay, I found that the title is not correct. I'm assuming the page is not yet rendered. I tried using this.$nexttick, but the title is still not present. So, I use window.setTimeout() to provide a short delay. I found that 100ms works for me, but I used a longer time in case a slower computer took longer. (And we aren't worried about half-second accuracy.)
I also wrapped the call to ensure it's only called on client side. No nasty "windows undefined" errors.

vue3 update conditional provide

I have a vue3/firestore app. I am trying to make 1 call to firestore to get the users notifications, its conditional if there is a user signed in or not:
let { documents: notifications } = user.value && user.value.displayName ? getCollection('profiles', null, user.value.displayName, 'notifications') : ref([])
provide('notifications', notifications)
This works fine if the user is signed in. The problem is if there is no user and they sign in, the provider doesn't update, and you have to refresh the app to get it work.
Potential solutions would be to watch the user state change, and then update the provider:
if (!_user) return
notifications = getCollection('profiles', null, user.value.displayName, 'notifications').documents
})
But that doesn't work. The other solution would be to make the call/injection in another component that is only there if there is a user. The issue with this is all of these components are siblings and you can not provide to a sibling ?
Any data that you provide are not automatically converted to a reactive data - you need to do it yourself
provide a ref or reactive object that wraps the data retrieved from Firebase
Use authentication state observer to update provided data

With Vue and the Nuxt store, how do I fetch from API on build, but not ever by the client?

I'm using Vue and Nuxt and want to pull data into my build that is mostly static. Each time we build the site, we want to get the latest data and then never call the API again. The data does not need to be updated dynamically, it just needs to be available for the app and can be built in.
One of the problems is that the call to get the API data is long (>5 seconds) and we don't want the customer waiting.
Our thinking was to
Call an API at some point in the build process to collect the data
Save the data in the store so other components can access it.
Not call the API to get the data again.
How might I do this? I really appreciate any help, I'm pretty new to Vue and especially Nuxt, but really enjoy both.
What I've tried
My understanding is that using fetch() in a component will call both on the server before the initial page is rendered and on the client some time after the component is mounted.
From the documentation on Nuxt
fetch is a hook called during server-side rendering after the
component instance is created, and on the client when navigating. The
fetch hook should return a promise (whether explicitly, or implicitly
using async/await) that will be resolved:
On the server before the initial page is rendered On the client some
time after the component is mounted
I've also tried this approach (and am currently using it) from Stackoverflow
export const actions = {
async nuxtServerInit ({ state }, { req }) {
let response = await axios.get("some/path/...");
state.data = response.data;
}
}
But there is a caveat in the answer:
nuxtServerInit will fire always on first page load no matter on what page you are. So you should navigate first to store/index.js.
Anyway, I could use a hand figuring out how to do this.

Vue changing the component without URL changes

I'm in Registration.vue component. The component contains registration form with email, password, etc.. fields.
I would like to thanks user for successful registering (with instruction that he should go check email).
What is the best solution to do this?
I was thinking about:
redirecting to second component using this.$router.push or this.$router.replace but this will change URL and when somebody go this URL without registering he will see message that he should check email...
replacing current component with other when registering action successful but I dont know how to do this (without URL change, and with good code).
using <component v-bind:is="currentView"> but I am not sure if this is best solution. I need to make three files (for parent component with :is, for form and for thanks). Also i need to emit event from child that registration went well, but on the other hand i should fire vuex registration action and dont expect for response (see the next sequence)
The other thing is that we should not wait for the vuex action to be completed, but i need to know if registration went well - https://github.com/vuejs/vuex/issues/46#issuecomment-174539828
I am using vue.js 2, vue-router, vuex
Thanks
You could use something like Sweet Alert to display a success or error dialog. It supports Ajax requests so you can display a "your registration is processing, please check your email" message while it is being handled.
The first approach is suitable when user successfully registers and then redirected to login page.
Now issue how to check whether user has entered required field? So there comes form validations. You can use vee-validate plugin and it's perfect for all projects. I am using it and it has so many available validations.
With these UI validations, after they are passed successfully then only submit action will be fired or else user will be prompted for entering required field.
You can see basic example here - http://vee-validate.logaretm.com/index.html#basic-example
When action is performed,
///main.js
...
Vue.use(VeeValidate)
...
// register.vue
this.$validator.validateAll().then((result) => {
if (result) {
//done
this.$router.replace( '/login' );
}
else{
// throw error
}
Simple as that.
Try this approach if you want the UI validations on the form.

Can I "add friend" with Facebook's API?

Does their API allow my Facebook-connected user to add a friend?
No. Adding friends is not possible through the API.
However you can direct users to http://www.facebook.com/addfriend.php?id=[USER UID]
Where [USER UID] is a valid facebook user id.
Good luck!
I spent a great deal of time looking, and finally came accross a very simple solution.
Using the Facebook Javascript API you can do a friend request with:
<script>
FB.ui(
{
method: 'friends.add',
id: fbid // assuming you set this variable previously...
},
function(param){
console.log(param);
// If they cancel params will show:
// {action:false, ...}
// and if they send the friend request it'll have:
// {action:true, ...}
// and if they closed the pop-up window then:
// param is undefined
}
);
</script>
The callback script can then simply performs an ajax call to your server where
you save info about the action, if needed.
You can test this by using the javascript console app on Facebook:
http://developers.facebook.com/tools/console
Paste in the script above, including the tags, or click the "Examples"
button on the bottom of the text area and find the "fb.ui — friends.add" example.
https://developers.facebook.com/docs/reference/dialogs/friends/
Here is a Wiki list of the API methods available to you http://wiki.developers.facebook.com/index.php/API#Administrative_Methods
Doesn't look like you can add friends via the API. Note the iPhone facebook app also doesn't have an add friends function, it was written via the API, so that lends more weight to the idea that you can't