Back

Can't get around with hiding an element using labels.

  • 0
  • General
  • Self Hosted
Zip
30 Apr, 2024, 13:10

I am so new to this, I still haven't figured how to do this one. I have been trying to search for some tutorials since im new to this, I also tried following this: https://appwrite.io/docs/products/auth/labels, but i ended quite alot of errors. The picture here is my appwrite config right now. All the things made here are basically just me following tutorials but not actually quite understand them.

TL;DR
Developers are having trouble hiding an element in a sidebar using labels. A code snippet is provided as a starting point, but they are struggling to implement it correctly. Solution: The issue seems to be with implementing labels properly in the sidebar. Developers can continue exploring tutorials and resources, such as the Appwrite documentation on labels, and seek step-by-step guides to better understand and implement labels in their code.
Zip
30 Apr, 2024, 13:11

I asked this before on general, but I still can't figure it out. At this point, I may be asking for a code. But i just want someone to give me a step by step guide on how to actually implement labels on my sidebar

Kenny
30 Apr, 2024, 13:11

Where is the real issue happening?

Zip
30 Apr, 2024, 13:12

me not understanding how to make it work

Zip
30 Apr, 2024, 13:15

trying to hide 1 element

Zip
30 Apr, 2024, 13:16

https://www.youtube.com/watch?v=E7xjuKJl7Ac watching this as well, but his doing databases which I don't need for now

Kenny
30 Apr, 2024, 13:17

I won't give you exact code, but I'll get you something to go off of.

TypeScript
const NAV_ITEMS = [
  {
    title: "Something",
    label: "admin"
  }
]

async function Sidebar() {
    const user = await account.get();

    const visibleItems = useMemo(() => {
        return filterSidebarItems(NAV_ITEMS, user.labels);
    }, [user]);

    return (
        <div>
            {visibleItems.map(item => (
                <div key={item.id}>{item.name}</div>
            ))}
        </div>
    );
}

function filterSidebarItems(sidebarItems, userLabels) {
    return sidebarItems.filter(item => 
        item.labels.some(label => userLabels.includes(label))
    );
}
Kenny
30 Apr, 2024, 13:19

Really all you should have to do is get the current user, check their labels, and see if the label for the sidebar is contained in the labels the user has.

Reply

Reply to this thread by joining our Discord

Reply on Discord

Need support?

Join our Discord

Get community support by joining our Discord server.

Join Discord

Get premium support

Join Appwrite Pro and get email support from our team.

Learn more