import React, { Component } from 'react';
// Import PropTypes from 'prop-types';
import { compose, graphql } from 'react-apollo';
import InstancesQuery from '@graphql/Instances.gql';
import { LayoutContainer } from '@components/layout';
import { Loader, ErrorMessage } from '@components/messaging';
import { InstanceListItem, EmptyInstances } from '@components/instances';
class InstanceList extends Component {
render() {
const { instances, loading, error } = this.props;
console.log('instances = ', instances);
console.log('loading = ', loading);
console.log('error = ', error);
if (loading) {
return (
);
} else if (error) {
return (
);
}
const instanceList = instances
? instances.map((instance, index) =>
null}
/>
)
: ;
return (
Instance List
{instanceList}
);
}
}
const InstanceListGql = graphql(InstancesQuery, {
options(props) {
const params = props.match.params;
const deploymentGroupSlug = params.deploymentGroup;
const serviceSlug = params.service;
return {
variables: {
deploymentGroupSlug,
serviceSlug
}
};
},
props: ({ data: { deploymentGroup, loading, error } }) => ({
instances: deploymentGroup && deploymentGroup.services
? deploymentGroup.services.reduce(
(instances, service) => instances.concat(service.instances),
[]
)
: null,
loading,
error
})
});
const InstanceListWithData = compose(InstanceListGql)(InstanceList);
export default InstanceListWithData;