112 lines
2.5 KiB
JavaScript
112 lines
2.5 KiB
JavaScript
import React from 'react';
|
|
import emotion from 'preact-emotion';
|
|
import { graphql, compose } from 'react-apollo';
|
|
import gql from 'graphql-tag';
|
|
import remcalc from 'remcalc';
|
|
|
|
import { Grid, Row, Col } from 'preact-emotion-flexboxgrid';
|
|
import {
|
|
DatacenterPlace,
|
|
DatacenterRegion,
|
|
Datacenter,
|
|
Overlay
|
|
} from '../components';
|
|
|
|
const Container = emotion('div')`
|
|
background-color: #ffffff;
|
|
`;
|
|
|
|
const TitleContainer = emotion('div')`
|
|
background-color: ${props => props.theme.background};
|
|
`;
|
|
|
|
const RegionContainer = emotion('div')`
|
|
padding-top: ${remcalc(18)};
|
|
padding-bottom: ${remcalc(24)};
|
|
`;
|
|
|
|
const GetDatacenters = gql`
|
|
{
|
|
regions @client {
|
|
name
|
|
slug
|
|
}
|
|
places @client {
|
|
name
|
|
slug
|
|
region
|
|
}
|
|
datacenters @client {
|
|
name
|
|
slug
|
|
place
|
|
}
|
|
}
|
|
`;
|
|
|
|
const Datacenters = ({ expanded, regions = [] }) =>
|
|
expanded ? (
|
|
<Overlay>
|
|
{regions.map(({ name, slug, places }) => (
|
|
<div key={slug}>
|
|
<TitleContainer>
|
|
<Grid>
|
|
<Row>
|
|
<Col>
|
|
<DatacenterRegion>{name}</DatacenterRegion>
|
|
</Col>
|
|
</Row>
|
|
</Grid>
|
|
</TitleContainer>
|
|
<Container>
|
|
<Grid>
|
|
<RegionContainer>
|
|
<Row>
|
|
{places.map(({ name, slug, datacenters }) => (
|
|
<Col key={slug} xs={12} md={6} lg={3}>
|
|
<DatacenterPlace>{name}</DatacenterPlace>
|
|
{datacenters.map(({ name, slug }) => (
|
|
<Datacenter key={slug}>{name}</Datacenter>
|
|
))}
|
|
</Col>
|
|
))}
|
|
</Row>
|
|
</RegionContainer>
|
|
</Grid>
|
|
</Container>
|
|
</div>
|
|
))}
|
|
</Overlay>
|
|
) : null;
|
|
|
|
export default compose(
|
|
graphql(GetDatacenters, {
|
|
options: () => ({
|
|
ssr: false
|
|
}),
|
|
props: ({ data }) => {
|
|
const {
|
|
regions = [],
|
|
places = [],
|
|
datacenters = [],
|
|
loading = false,
|
|
error = null
|
|
} = data;
|
|
|
|
const _regions = regions.map(({ slug, ...region }) => ({
|
|
...region,
|
|
places: places
|
|
.filter(({ region }) => region === slug)
|
|
.map(({ slug, ...place }) => ({
|
|
...place,
|
|
datacenters: datacenters.filter(({ place }) => place === slug),
|
|
slug
|
|
})),
|
|
slug
|
|
}));
|
|
|
|
return { regions: _regions, loading, error };
|
|
}
|
|
})
|
|
)(Datacenters);
|