I'm trying to create a webapp with multiple user types that is different depending on which user is currently logged in. An issue I've came across is the following:

When the user clicks a card, a dialog with more details of the card is rendered. Within this dialog I want to have a part which is only rendered to a certain user which in this situation is an admin. How would I go about doing this?

My current code contains the following:

    // Gets the item from the storage correctly
    if(localStorage.getItem("role") == "Administrator"){
        alert('This currenly works');
    //Show table that is not shown to other types of user, the getItem must result in Administrator in order to show the part of the component
    }
   //Shown to all users of the webapp
                    <div className="w-[70vw] max-w-[800px] relative">
                        <a
                            className="absolute -right-4 -top-4 rounded-full bg-white shadow-lg w-10 h-10 hover:bg-gray-200 hover:cursor-pointer transition flex justify-center items-center z-99"
                            onClick={resetDialog}
                        >
                            X
                        </a>
                        <h1 className="font-bold text-2xl border-b p-4">
                            {item_name}
                        </h1>
                        <div className="grid grid-cols-2 h-[240px] w-full relative">
                            <div className="h-[240px] p-4">
                                <div className="h-full w-full relative">
                                    <img
                                        src={image}
                                        className="rounded-lg max-w-full max-h-full m-auto absolute top-0 left-0 right-0 bottom-0 shadow-lg"
                                    />
                                </div>
                            </div>
                            <div className="h-[240px] flex flex-col relative">
                                <div className="max-h-full overflow-auto p-4">
                                    {item_description}
                                </div>
                            </div>
                            <div className="absolute bottom-[-16px] right-4 z-20">
                                <LoadingButton
                                    onClick={onAddToCart}
                                    isLoading={loadingAddToCart}
                                    text="Add to cart"
                                    className="w-48"
                                />
                            </div>
                        </div>
    //Should only be shown if the user is an Administrator
                        {/* <div>
                            <div
                                className={`${style.customTableRow} ${style.header} pr-4`}
                            >
                                <span>Name</span>
                                <span>Location</span>
                                <span>Availability</span>
                            </div>
                            <div className="max-h-[170px] overflow-auto">
                                {models.map((model) => (
                                    <div
                                        className={`${style.customTableRow} border-t`}
                                    >
                                        <span>{model.model}</span>
                                        <span>{model.location_name}</span>
                                        <span>
                                            {getAvailabilityPill(model.availability)}
                                        </span>
                                        <div className="flex justify-center">
                                            <button
                                                className="flex bg-green-500 rounded-full hover:bg-green-300 transition text-white p-1"
                                                onClick={() => addRequest(model.id)}
                                            >
                                                <i className="fa-solid fa-plus"></i>
                                            </button>
                                        </div>
                                    </div>
                                ))}
                            </div>
                        </div> */} //End of content for Administrator
                    </div>

Any suggestions are appreciated.

CodePudding user response：

you can do this by making a simple flag that represents whether the user is admin or not if the user will be an admin it will render admin-specific content else it will render normal content on the website. have a look at this code

const [ isAdmin , SetIsAdmin ] = useState(false)

useEffect ( ()=> { SetIsAdmin(localStorage.getItem("role") == "Administrator") } , [])

return (
   {isAdmin ? <> Admin </> : <> User </>}
)

// ! don't forget to import hooks

CodePudding user response：

you could render the content conditionally,

{isUserAdmin && <SpecialAdminContent />}

Would show the content only for admin users.