95 lines
2.0 KiB
JavaScript
95 lines
2.0 KiB
JavaScript
import React from 'react';
|
|
import emotion from 'preact-emotion';
|
|
import { graphql, compose } from 'react-apollo';
|
|
import gql from 'graphql-tag';
|
|
import chunk from 'lodash.chunk';
|
|
import remcalc from 'remcalc';
|
|
|
|
import { Grid, Row, Col } from 'preact-emotion-flexboxgrid';
|
|
|
|
import {
|
|
ServiceCategory,
|
|
ServiceName,
|
|
ServiceDescription,
|
|
Service,
|
|
Overlay
|
|
} from '../components';
|
|
|
|
const Container = emotion('div')`
|
|
padding-top: ${remcalc(30)};
|
|
background-color: #ffffff;
|
|
`;
|
|
|
|
const GetCategories = gql`
|
|
{
|
|
categories @client {
|
|
name
|
|
slug
|
|
}
|
|
}
|
|
`;
|
|
|
|
const GetProducts = gql`
|
|
{
|
|
products {
|
|
name
|
|
description
|
|
category
|
|
url
|
|
}
|
|
}
|
|
`;
|
|
|
|
const Services = ({ expanded = false, categories = [], products = [] }) =>
|
|
expanded ? (
|
|
<Overlay>
|
|
<Container>
|
|
<Grid>
|
|
{chunk(
|
|
categories.map(({ slug, ...category }) => ({
|
|
...category,
|
|
services: products.filter(({ category }) => category === slug),
|
|
slug
|
|
})),
|
|
4
|
|
).map(chunk => (
|
|
<Row>
|
|
{chunk.map(({ name, services }) => (
|
|
<Col xs={12} sm={6} md={4} lg={3}>
|
|
<ServiceCategory>{name}</ServiceCategory>
|
|
{services.map(({ name, description }) => (
|
|
<Service>
|
|
<ServiceName>{name}</ServiceName>
|
|
<ServiceDescription>{description}</ServiceDescription>
|
|
</Service>
|
|
))}
|
|
</Col>
|
|
))}
|
|
</Row>
|
|
))}
|
|
</Grid>
|
|
</Container>
|
|
</Overlay>
|
|
) : null;
|
|
|
|
export default compose(
|
|
graphql(GetCategories, {
|
|
options: () => ({
|
|
ssr: false
|
|
}),
|
|
props: ({ data }) => {
|
|
const { categories = [] } = data;
|
|
return { categories };
|
|
}
|
|
}),
|
|
graphql(GetProducts, {
|
|
options: () => ({
|
|
ssr: false
|
|
}),
|
|
props: ({ data }) => {
|
|
const { products = [] } = data;
|
|
return { products };
|
|
}
|
|
})
|
|
)(Services);
|