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
Related
I'm not sure how to use onAuthStateChange and Context
I am populating user in context and then I check for user with:
import {useAuth} from '../contexts/auth';
const { usuario } = useAuth();
if(!user)....
I don't really understand how and why I should use onAuthStateChange.
The onAuthStateChanged allows you receive an even when the authentication state changes, for example the user logs in or out. You can subscribe to the event and handle rendering based on the authentication state. Essentially you use it to populate or depopulate the user in your context.
For an example from the documentation see here.
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
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.
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.
I am using redux-persist in my React Native app.
What I am going to do is to clean redux store when logout from the app.
persistStore(
store,
{
whitelist: compact([
'appInfo'
]),
storage: AsyncStorage
},
);
I know redux persists only the states in whitelist.
Therefore, I want to call this function when I logout from the app to clean the previous users details from redux store.
Does anyone know how to do this?
Many thanks,
Can you add userDetails to whitelist key?
You don't need to call persistStore everytime you want to persist store locally. It is meant as one time setup call ideally right after you createStore using redux.
On logout you can trigger an action USER_LOGGED_OUT, handle that in your reducer to clear out userDetails key. It will automatically be persisted then.