import React, { Fragment } from 'react';
import { If, Then, Else } from 'react-if';
import ReduxForm from 'declarative-redux-form';
import { SubmissionError, destroy } from 'redux-form';
import { Margin, Padding } from 'styled-components-spacing';
import { compose, graphql } from 'react-apollo';
import { connect } from 'react-redux';
import { set, destroyAll } from 'react-redux-values';
import intercept from 'apr-intercept';
import get from 'lodash.get';
import {
ViewContainer,
Message,
MessageTitle,
MessageDescription,
Button,
StatusLoader
} from 'joyent-ui-toolkit';
import {
PostCreation,
PostCreationContent,
PostCreationTitle
} from 'joyent-ui-resource-widgets';
import { Provider as ResourceSteps } from 'joyent-ui-resource-step';
import parseError from '@state/parse-error';
import { Forms, Values } from '@root/constants';
import ListServiceGroups from '@graphql/list-service-groups.gql';
import UpdateServiceGroup from '@graphql/update-service-group.gql';
import GetServiceGroup from '@graphql/get-service-group.gql';
import Template from './steps/template';
import Name from './steps/name';
const { SGE_F } = Forms;
const { SGE_N_V } = Values;
const EditTemplate = ({
match,
steps,
loading,
initialCapacity,
handleDefocus,
handleSubmit
}) => {
const { params } = match;
const { step, sg } = params;
const { template, name } = steps;
const disabled = name && name.capacity && initialCapacity === name.capacity;
return (
{({ handleSubmit, submitting, error }) => (
Ooops!
{error}
)}
);
};
export const Success = ({ match }) => {
const id = match.params.sg;
return (
You have successfully updated a service group
Your service group has been updated and is currently being
processed. It should only take a few minutes and the changes will
reflected in your console.
);
};
export default compose(
graphql(UpdateServiceGroup, { name: 'updateServiceGroup' }),
graphql(GetServiceGroup, {
options: ({ match }) => ({
ssr: true,
variables: {
id: get(match, 'params.sg')
}
}),
props: ({ data: { networkStatus, error, group } }) => ({
loading: networkStatus === 1,
error,
group
})
}),
connect(({ form, values = {} }, { group = {} }) => {
const { template, capacity, name } = group;
return {
forms: Object.keys(form),
initialCapacity: capacity,
steps: {
name: get(values, SGE_N_V) || { name, capacity },
template
}
};
}),
connect(
null,
(dispatch, { forms, group, steps, history, updateServiceGroup }) => ({
handleDefocus: name => value => {
return dispatch(set({ name, value }));
},
handleSubmit: async () => {
const [err, res] = await intercept(
updateServiceGroup({
variables: {
id: group.id,
name: group.name,
template: group.template.id,
capacity: steps.name.capacity
},
update: (proxy, { data: { createGroup: group } }) => {
try {
proxy.writeQuery({
query: ListServiceGroups,
data: {
groups: proxy
.readQuery({ query: ListServiceGroups })
.groups.map(g => (g.id === group.id ? group : g))
}
});
} catch (err) {
// eslint-disable-next-line no-console
console.error(err);
}
try {
proxy.writeQuery({
query: GetServiceGroup,
variables: { id: group.id },
data: { group }
});
} catch (err) {
// eslint-disable-next-line no-console
console.error(err);
}
}
})
);
if (err) {
throw new SubmissionError({
_error: parseError(err)
});
}
const { data } = res;
const { updateGroup: ug } = data;
const { id } = ug;
dispatch([destroyAll(), forms.map(name => destroy(name))]);
history.push(`/service-groups/~edit/${id}/success`);
}
})
)
)(EditTemplate);