2018-04-12 12:53:00 +03:00
|
|
|
import React from 'react';
|
2018-02-05 17:12:47 +02:00
|
|
|
import { compose, graphql } from 'react-apollo';
|
|
|
|
import { Margin } from 'styled-components-spacing';
|
2018-02-14 21:36:31 +02:00
|
|
|
import { connect } from 'react-redux';
|
|
|
|
import intercept from 'apr-intercept';
|
|
|
|
import { set } from 'react-redux-values';
|
2018-03-23 02:57:18 +02:00
|
|
|
import get from 'lodash.get';
|
2018-02-05 17:12:47 +02:00
|
|
|
|
|
|
|
import {
|
|
|
|
ViewContainer,
|
|
|
|
StatusLoader,
|
|
|
|
Message,
|
|
|
|
MessageTitle,
|
|
|
|
MessageDescription
|
|
|
|
} from 'joyent-ui-toolkit';
|
|
|
|
|
|
|
|
import ImageSummary from '@components/summary';
|
|
|
|
import GetImage from '@graphql/get-image.gql';
|
2018-02-14 21:36:31 +02:00
|
|
|
import RemoveImage from '@graphql/remove-image.gql';
|
|
|
|
import parseError from '@state/parse-error';
|
2018-02-05 17:12:47 +02:00
|
|
|
|
2018-02-14 21:36:31 +02:00
|
|
|
export const Summary = ({
|
|
|
|
image,
|
|
|
|
loading = false,
|
|
|
|
error = null,
|
|
|
|
removing,
|
|
|
|
mutationError,
|
|
|
|
handleRemove
|
|
|
|
}) => (
|
2018-02-05 17:12:47 +02:00
|
|
|
<ViewContainer main>
|
2018-04-12 12:53:00 +03:00
|
|
|
{loading && !image ? <StatusLoader /> : null}
|
2018-02-05 17:12:47 +02:00
|
|
|
{error && !loading && !image ? (
|
2018-04-06 17:53:44 +03:00
|
|
|
<Margin bottom="5">
|
2018-02-05 17:12:47 +02:00
|
|
|
<Message error>
|
|
|
|
<MessageTitle>Ooops!</MessageTitle>
|
|
|
|
<MessageDescription>
|
|
|
|
An error occurred while loading your instance summary
|
|
|
|
</MessageDescription>
|
|
|
|
</Message>
|
|
|
|
</Margin>
|
|
|
|
) : null}
|
2018-02-14 21:36:31 +02:00
|
|
|
{mutationError ? (
|
2018-04-06 17:53:44 +03:00
|
|
|
<Margin bottom="5">
|
2018-02-14 21:36:31 +02:00
|
|
|
<Message error>
|
|
|
|
<MessageTitle>Ooops!</MessageTitle>
|
|
|
|
<MessageDescription>
|
|
|
|
There was a problem deleting your image
|
|
|
|
</MessageDescription>
|
|
|
|
</Message>
|
|
|
|
</Margin>
|
|
|
|
) : null}
|
|
|
|
{image ? (
|
|
|
|
<ImageSummary removing={removing} onRemove={handleRemove} {...image} />
|
|
|
|
) : null}
|
2018-02-05 17:12:47 +02:00
|
|
|
</ViewContainer>
|
|
|
|
);
|
|
|
|
|
|
|
|
export default compose(
|
2018-02-14 21:36:31 +02:00
|
|
|
graphql(RemoveImage, { name: 'removeImage' }),
|
2018-02-05 17:12:47 +02:00
|
|
|
graphql(GetImage, {
|
|
|
|
options: ({ match }) => ({
|
2018-02-20 02:35:31 +02:00
|
|
|
ssr: false,
|
2018-02-05 17:12:47 +02:00
|
|
|
variables: {
|
2018-03-21 19:35:51 +02:00
|
|
|
id: get(match, 'params.image')
|
2018-02-05 17:12:47 +02:00
|
|
|
}
|
|
|
|
}),
|
2018-03-21 19:35:51 +02:00
|
|
|
props: ({ data }) => {
|
|
|
|
const { loading = false, error = null, image } = data;
|
|
|
|
return {
|
|
|
|
image,
|
|
|
|
loading,
|
|
|
|
error
|
|
|
|
};
|
|
|
|
}
|
2018-02-14 21:36:31 +02:00
|
|
|
}),
|
|
|
|
connect(
|
|
|
|
({ values }, ownProps) => {
|
|
|
|
const removing = get(values, 'remove-mutation-loading', false);
|
|
|
|
const mutationError = get(values, 'remove-mutation-error', null);
|
|
|
|
|
|
|
|
return {
|
|
|
|
...ownProps,
|
|
|
|
removing,
|
|
|
|
mutationError
|
|
|
|
};
|
|
|
|
},
|
|
|
|
(dispatch, { removeImage, image, history }) => ({
|
|
|
|
handleRemove: async () => {
|
2018-02-14 22:30:25 +02:00
|
|
|
dispatch(set({ name: 'remove-mutation-loading', value: true }));
|
2018-02-14 21:36:31 +02:00
|
|
|
|
|
|
|
const [err, res] = await intercept(
|
|
|
|
removeImage({
|
|
|
|
variables: {
|
|
|
|
id: image.id
|
|
|
|
}
|
|
|
|
})
|
|
|
|
);
|
|
|
|
|
|
|
|
if (err) {
|
|
|
|
dispatch([
|
|
|
|
set({ name: 'remove-mutation-error', value: parseError(err) }),
|
|
|
|
set({ name: 'remove-mutation-loading', value: false })
|
|
|
|
]);
|
|
|
|
}
|
|
|
|
|
|
|
|
if (res) {
|
2018-02-14 22:30:25 +02:00
|
|
|
dispatch(set({ name: 'remove-mutation-loading', value: false }));
|
2018-03-06 03:14:33 +02:00
|
|
|
history.push('/images');
|
2018-02-14 21:36:31 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
})
|
|
|
|
)
|
2018-02-05 17:12:47 +02:00
|
|
|
)(Summary);
|