Stack Overflow Asked by shineonbro on November 17, 2021
What I find most interesting is that {users.username}
works, same with {users.profile.avatar}
and even {users.profile.bio}
but not what I need most of all: {users.emails.verified}
and {users.emails.address}
I’m guessing that it has to do with the mapping of the data? Perhaps it’s how I’m trying to call it? I tried {users['emails']['address']}
as well.. but it doesn’t work either. yet it works for {users['profile']['bio']}
which makes it a bit bigger of a headache for me. Any help would be awesome, I’m all ears as to learning how to go about this!
import React from 'react';
import { Redirect } from 'react-router-dom';
import Avatar from '@atlaskit/avatar';
import DropdownMenu, {
DropdownItemGroup,
DropdownItem,
} from '@atlaskit/dropdown-menu';
import Tag, { TagColor } from '@atlaskit/tag';
import DynamicTable from '@atlaskit/dynamic-table'
import PageHeader from '@atlaskit/page-header';
import gql from 'graphql-tag';
import { useQuery } from '@apollo/react-hooks';
import Button, { ButtonGroup } from '@atlaskit/button';
const GET_USERS = gql`
query getUsers {
getUsers {
id
username
isAdmin
emails {
address
verified
}
profile {
bio
avatar
}
}
getUser {
id
}
}
`;
const Users = () => {
const actionsContent = (
<ButtonGroup>
<Button appearance="primary">Search Box Here Here</Button>
</ButtonGroup>
);
const { loading, error, data } = useQuery(GET_USERS);
if (loading) return <p>Loading...</p>;
if (error) return <p>Error: {error.message}</p>;
if (!data.getUser) {
return <Redirect to="/login" />;
}
const createHead = (withWidth: boolean) => {
return {
cells: [
{
key: 'avatar',
content: 'Avatar',
isSortable: false,
width: withWidth ? 2 : undefined,
},
{
key: 'username',
content: 'Username',
isSortable: true,
width: withWidth ? 18 : undefined,
},
{
key: 'email',
content: 'Email',
shouldTruncate: true,
isSortable: true,
},
{
key: 'tags',
content: 'Tags',
},
{
key: 'action',
content: 'Action',
shouldTruncate: true,
width: withWidth ? 2 : undefined,
},
],
};
};
const head = createHead(true);
var users = data.getUsers;
console.log(users)
for(let i = 0, l = users.length; i < l; i++) {
var rows = users.map((user: any) => ({
cells: [
{
key: 'avatar',
content: (
<span style={{ display: 'flex', alignItems: 'center' }}>
<div style={{ marginRight: 8 }}>
<Avatar
name={user.username}
size="small"
src={user.profile.avatar}
/>
</div>
</span>
),
},
{
key: 'user',
content: (
<span style={{ display: 'flex', alignItems: 'center' }}>
{user.emails.address}
{user.emails.verified}
</span>
),
},
{
key: 'email',
content: (
<span style={{ display: 'flex', alignItems: 'center' }}>
{user.isAdmin}
<Tag text="Verified" color="greyLight" />
</span>
),
},
{
key: 'tags',
content: (
<span style={{ display: 'flex', alignItems: 'center' }}>
{user.isAdmin}
<Tag text="Admin" color="grey" />
</span>
),
},
{
key: 'lols',
content: (
<Button>More</Button>
),
},
],
}))
}
return (
<div>
<PageHeader
actions={actionsContent}
>
Users
</PageHeader>
<DynamicTable
head={head}
rows={rows}
isLoading={false}
defaultSortOrder="ASC"
loadingSpinnerSize="large"
/>
</div>
);
}
export default Users;
Well, I guess I could mark this question answered!
Another reason to define my types properly:
Ah! Just noticed the console log in the image. emails seems to be an array of email objects and not an object, so instead of {user.emails.verified} you should have {user.emails[0].verified}, same goes for address. Also, you may want to check if emails actually contains something and/or if it contains more than one email object – ibrahim mahrir
So for my specific use case: {user.emails[0].address}
was what I was looking for as well as {String(user.emails[0].verified)}
for returning boolean values!
Answered by shineonbro on November 17, 2021
Get help from others!
Recent Answers
Recent Questions
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP