Added user info to firebase database

[Rorins]

My first issue with the selection page

Initially I set my code as above, I had a currentImg variable with a default value from the storyblok cms(the fox image url), when the user clicks on the avatar he wants it triggers the function setAvatar() and it sets that variable to the avatarUrl.

the array of images(that I uploaded to the cms) would be singularly passed to the function(with a v-for that cycles them) and then displayed to the selected-avatar at the top of the selection box:

So the src of the image would become the url that the user chose.

This all worked as I wanted, the problem I had was when after clicking submit the user had to send both the nickname and the img url to the firebase database, the nickname would be sent without a problem, but when I added the currentImg variable to the object I had to send, I had this problem:

In the returned data I would get the right nickname but I wouldn't get the right url (it gave me the default fox one I set initially but not the one the user chose), when I removed the default value I gave to the currentImg it was even worse, I had this error:

Seemed like the currentImg value I assigned inside the userData object I had to send to the database was undefined, this was how my object was structured:

I then changed the code and added a default value of null to the currentImgUrl property inside the userData object I had to send to the database and I would have used that property to help me both display the image to the user and updating it with the url the user selected, but this didn't work aswell. Now the problem was that the image wouldn't be reactive and it would stay the same even if the user clicked different images, this was the code:

So in the end I worked around it by using both the methods, I left one variable to update the current avatar and managed the userData property for the selected image url without using that variable(the currentImg one) :

And everything gets sent down here:

I didn't get why I couldn't really use the same variable or the property in userData to manage both of the things I was trying to achieve.

My second issue with the dashboard

The dashboard is still in progress but right now it seems like the data takes some time to retrive the userData (both the userData.nickName and userData.currentImgUrl), so right now I have a loading text to not make it look to odd, but I was asking myself if it was a problem with my code or if it's normal. I have this lifecycle hook: onMounted where I have my async function

the data returns correcly but it seems that initially the data value is initially empty so if I don't put the loading text it throws an error:

as the data is null initially and only gets filled after awhile, so in the meantime a default (fox image) appears and the loading text appears till the nickName gets returned, my code now:

It still works and it doesn't take that long to load but I was asking myself if there was a better way to do this.

This is the onMounted hook in vue link to the documentation if it helps in any way: https://vuejs.org/api/composition-api-lifecycle.html#onmounted This is the ref() in vue link to the documentation: https://vuejs.org/api/reactivity-core.html#ref

Thank you for your help in advance!

[joeypedicini92]

For your first problem this appears to be what was causing the issue when you were referencing the userData object in the template

This is why using a direct variable for currentImg is probably the better way to do it. And then when you're ready to submit the data you can build the userData object from the currentImg value

[joeypedicini92]

I can't seem to test the slow loading error because anytime I try to update the nickname and avatar I get this error:

And so the data doesn't get saved. And then when I go to the dashboard, userData is always null so it always shows "Loading..."

[Rorins]

I can't seem to test the slow loading error because anytime I try to update the nickname and avatar I get this error:

And so the data doesn't get saved. And then when I go to the dashboard, userData is always null so it always shows "Loading..."

I was testing it out and for some reason I don't have this error. Do you know when it happens exactly so I can try fixing it? Did you sign up as a new user?

[Rorins]

For your first problem this appears to be what was causing the issue when you were referencing the userData object in the template

This is why using a direct variable for currentImg is probably the better way to do it. And then when you're ready to submit the data you can build the userData object from the currentImg value

I tried implementing it, and the template does update but for some reason now when I pass the new userData object to the handleSubmit function, it passes the currentImgUrl inside of it as the whole object ref, and not just the value inside of it, am not sure how to fix this.

[joeypedicini92]

For your first problem this appears to be what was causing the issue when you were referencing the userData object in the template

This is why using a direct variable for currentImg is probably the better way to do it. And then when you're ready to submit the data you can build the userData object from the currentImg value

I tried implementing it, and the template does update but for some reason now when I pass the new userData object to the handleSubmit function, it passes the currentImgUrl inside of it as the whole object ref, and not just the value inside of it, am not sure how to fix this.

sorry probably poorly worded on my part. I was saying to not implement the way I did in the screenshot, I was just demonstrating why you weren't getting the template to update when you tried using the userData object.

[joeypedicini92]

I can't seem to test the slow loading error because anytime I try to update the nickname and avatar I get this error:

And so the data doesn't get saved. And then when I go to the dashboard, userData is always null so it always shows "Loading..."

I was testing it out and for some reason I don't have this error. Do you know when it happens exactly so I can try fixing it? Did you sign up as a new user?

Yeah the only way I can even get to the selection page is directly after sign up, but I was using the sign up flow with my already existing account. If I just login, then there doesn't seem to be any way to get to the selection page.

That error happens when I click the submit button on the selection page.

So to recreate it the flow is:

1. sign up with Google using existing account
2. make selections and submit

[Rorins]

I can't seem to test the slow loading error because anytime I try to update the nickname and avatar I get this error:

And so the data doesn't get saved. And then when I go to the dashboard, userData is always null so it always shows "Loading..."

I was testing it out and for some reason I don't have this error. Do you know when it happens exactly so I can try fixing it? Did you sign up as a new user?

Yeah the only way I can even get to the selection page is directly after sign up, but I was using the sign up flow with my already existing account. If I just login, then there doesn't seem to be any way to get to the selection page.

That error happens when I click the submit button on the selection page.

So to recreate it the flow is:

1. sign up with Google using existing account

2. make selections and submit

If you you signed in using an account you already registered before, it could be because I did delete some of the previous accounts in the database, to test some things out.

But I will try making some tests by creating new accounts and see how it goes, as the selection should appear when the user registers to the site for the first time. I will add a possibility of customazing the avatar and the nickname in the dashboard if the user already signed in but wants to change some things!