50 lines
901 B
JavaScript
50 lines
901 B
JavaScript
import React from 'react';
|
|
import get from 'lodash.get';
|
|
import emotion from 'preact-emotion';
|
|
import { graphql, compose } from 'react-apollo';
|
|
import gql from 'graphql-tag';
|
|
|
|
import { Anchor, Popover } from '../components';
|
|
|
|
const Ul = emotion('ul')`
|
|
list-style-type: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
`;
|
|
|
|
const GetAccountServices = gql`
|
|
{
|
|
account {
|
|
services {
|
|
name
|
|
url
|
|
}
|
|
}
|
|
}
|
|
`;
|
|
|
|
const Account = ({ expanded, services = [] }) => {
|
|
return expanded ? (
|
|
<Popover>
|
|
<Ul>
|
|
{services.map(({ name, url }) => (
|
|
<li>
|
|
<Anchor href={url}>{name}</Anchor>
|
|
</li>
|
|
))}
|
|
</Ul>
|
|
</Popover>
|
|
) : null;
|
|
};
|
|
|
|
export default compose(
|
|
graphql(GetAccountServices, {
|
|
options: () => ({
|
|
ssr: false
|
|
}),
|
|
props: ({ data }) => ({
|
|
services: get(data, 'account.services', [])
|
|
})
|
|
})
|
|
)(Account);
|