Add dropdown menu in sidebar

[Palakkgoyal]

This PR closes #1017
I have added a dropdown list and also made it darkmode compatible. It works fine. I haven't dynamically added the name of user in the sidebar and replaced it with Me because whenever the page loads it take time to fetch user data. which result in delay in showing the name which doesn't look good.

[github-actions]

Thank you Palakkgoyal! for creating this pull request and contributing to Dummygram! 💗

The maintainers will review this Pull Request and provide feedback as soon as possible! 😇
We appreciate your patience and contribution, Keep up the great work! 😀

[narayan954]

This PR closes #1017 I have added a dropdown list and also made it darkmode compatible. It works fine. I haven't dynamically added the name of user in the sidebar and replaced it with Me because whenever the page loads it take time to fetch user data. which result in delay in showing the name which doesn't look good.

I think, as we are already querying the user's collection for user data and extracting username we can extract other details as well like name... Also, the auth object might've displayName already. We're not making any extra query.
Ps: Here comes another big suggestion, also, we don't even need to fetch username for every component, we're using getUsername method eveywhere. Instead we can create a context for the user right? The one provided by firebase aint enough

edit: as I am going though pr, it seems you've followed this only! thank you!
and also, if you're querying name from user's collection and updating it in profile, it might not get reflected without reloading. As a solution, we can use auth.currentUser.displayName which works right until we refresh the page and sidebar would crash as it can't get the displayName property... so I think I'll add condition to reflect both, but auth.currentUser.displayName first to make it fast and responsive.

[narayan954]

looks good to me!

[narayan954]

This PR closes #1017 I have added a dropdown list and also made it darkmode compatible. It works fine. I haven't dynamically added the name of user in the sidebar and replaced it with Me because whenever the page loads it take time to fetch user data. which result in delay in showing the name which doesn't look good.

I think, as we are already querying the user's collection for user data and extracting username we can extract other details as well like name... Also, the auth object might've displayName already. We're not making any extra query. Ps: Here comes another big suggestion, also, we don't even need to fetch username for every component, we're using getUsername method eveywhere. Instead we can create a context for the user right? The one provided by firebase aint enough

edit: as I am going though pr, it seems you've followed this only! thank you! and also, if you're querying name from user's collection and updating it in profile, it might not get reflected without reloading. As a solution, we can use auth.currentUser.displayName which works right until we refresh the page and sidebar would crash as it can't get the displayName property... so I think I'll add condition to reflect both, but auth.currentUser.displayName first to make it fast and responsive.

but wait, me was already better, why did I resolve ;-;

[Palakkgoyal]

This PR closes #1017 I have added a dropdown list and also made it darkmode compatible. It works fine. I haven't dynamically added the name of user in the sidebar and replaced it with Me because whenever the page loads it take time to fetch user data. which result in delay in showing the name which doesn't look good.

I think, as we are already querying the user's collection for user data and extracting username we can extract other details as well like name... Also, the auth object might've displayName already. We're not making any extra query. Ps: Here comes another big suggestion, also, we don't even need to fetch username for every component, we're using getUsername method eveywhere. Instead we can create a context for the user right? The one provided by firebase aint enough

edit: as I am going though pr, it seems you've followed this only! thank you! and also, if you're querying name from user's collection and updating it in profile, it might not get reflected without reloading. As a solution, we can use auth.currentUser.displayName which works right until we refresh the page and sidebar would crash as it can't get the displayName property... so I think I'll add condition to reflect both, but auth.currentUser.displayName first to make it fast and responsive.

Yes, its inefficient to query for userdata on every page. Instead we should get it only at one place then use caching or session storage or context to deliver it to other components and if the data updates then, we can also update it in the context or any other method.

[narayan954]

This PR closes #1017 I have added a dropdown list and also made it darkmode compatible. It works fine. I haven't dynamically added the name of user in the sidebar and replaced it with Me because whenever the page loads it take time to fetch user data. which result in delay in showing the name which doesn't look good.

I think, as we are already querying the user's collection for user data and extracting username we can extract other details as well like name... Also, the auth object might've displayName already. We're not making any extra query. Ps: Here comes another big suggestion, also, we don't even need to fetch username for every component, we're using getUsername method eveywhere. Instead we can create a context for the user right? The one provided by firebase aint enough
edit: as I am going though pr, it seems you've followed this only! thank you! and also, if you're querying name from user's collection and updating it in profile, it might not get reflected without reloading. As a solution, we can use auth.currentUser.displayName which works right until we refresh the page and sidebar would crash as it can't get the displayName property... so I think I'll add condition to reflect both, but auth.currentUser.displayName first to make it fast and responsive.

Yes, its inefficient to query for userdata on every page. Instead we should get it only at one place then use caching or session storage or context to deliver it to other components and if the data updates then, we can also update it in the context or any other method.

agreed, will create an issue