I made a table using .map() returning users from an array that has only one admin user.
I know the user is admin because it renders name (ADM) as follows:
I'm fetching the user.email from the users array and comparing it with the user.email from the context (it takes the data that is coming from auth0). If this email has the admin permission (manage:accounts), then its name will be followed by (ADM). I think this code can help to make the .sort(), but I couldn't do it
Here is the array : The email michelle@gmail.com is the one with admin permission on auth0
const userList = [
{
name: 'Bob', email: 'bob@gmail.com', birth_date: '13/03/1954'
},
{
name: 'Susy', email: 'suzy@gmail.com', birth_date: '23/03/1987'
},
{
name: 'Michelle', email: 'michelle@gmail.com', birth_date: '31/10/1992'
}
];
Here is the code I just described:
{user.name} {user.email === context.user.email && context.user.permissions.includes('manage:accounts') && ('(ADM)')}
Here is the table I did:
<TableContainer component={Paper} elevation={0}>
<S.TableContent>
{userList?.length && userList.map((user, index) => (
<TableRow key={index}>
<S.TableCellIcon>
<S.UserIcon src={'/icon_profile.svg'} alt='Ícone do perfil' />
</S.TableCellIcon>
<S.TableCellUser>
<span>{user.name} {user.email === context.user.email && context.user.permissions.includes('manage:accounts') && ('(ADM)')}</span>
<p>{user.email}</p>
</S.TableCellUser>
<S.TableCellLastAcess>
Último acesso: <b>{user.birth_date}</b>
</S.TableCellLastAcess>
</TableRow>
))}
</S.TableContent>
</TableContainer>
Thank you for your help <3