How to Filter Links in MUI Drawer within layout.tsx by User roles
Answered
Dwarf Crocodile posted this in #help-forum
Dwarf CrocodileOP
I have a MUI AppBar and a Drawer in my layout.tsx. There are various Links within the Drawer. Each link should be shown, or not, based on the user roles.
The user roles are stored within my Firestore DB. I have access to the Firebase User, but the roles are not on that entity, they are stored by ID within my Firestore.
So, I need to be able to take my Firebase user, look up my Firestore user roles, and then filter the Links in the Drawer based on those roles.
This would all be really easy if I could use useEffect hook within the layout.tsx file, but that is not allowed. Interestingly useState hook seems to work just fine within the layout.tsx (I've set 'use client' on it).
How are others making state information available, and async updated states bound to items within layout.tsx?
The user roles are stored within my Firestore DB. I have access to the Firebase User, but the roles are not on that entity, they are stored by ID within my Firestore.
So, I need to be able to take my Firebase user, look up my Firestore user roles, and then filter the Links in the Drawer based on those roles.
This would all be really easy if I could use useEffect hook within the layout.tsx file, but that is not allowed. Interestingly useState hook seems to work just fine within the layout.tsx (I've set 'use client' on it).
How are others making state information available, and async updated states bound to items within layout.tsx?
Answered by Dwarf Crocodile
Alright, I think I figured out what my real issue was. I was calling a firestore hook (useCollectionOnce) from within a useEffect. That's a no-no.
If fixed this by waiting for the rerender by protecting the useCollectionOnce with the loading from the useAuthState.
Anyhow, solved.
If fixed this by waiting for the rerender by protecting the useCollectionOnce with the loading from the useAuthState.
Anyhow, solved.
2 Replies
Dwarf CrocodileOP
I tried creating a "ProtectedLink" component that made the call to Firestore for the roles, but the useEffect in there was still within the context of the layout.tsx and through the runtime error.
Dwarf CrocodileOP
Alright, I think I figured out what my real issue was. I was calling a firestore hook (useCollectionOnce) from within a useEffect. That's a no-no.
If fixed this by waiting for the rerender by protecting the useCollectionOnce with the loading from the useAuthState.
Anyhow, solved.
If fixed this by waiting for the rerender by protecting the useCollectionOnce with the loading from the useAuthState.
Anyhow, solved.
Answer