@tomino/dynamic-form-semantic-ui/dist/cjs/apollo/apollo_mutation_view.js

Semantic UI form renderer based on dynamic form generation

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const react_apollo_1 = require("react-apollo");
const graphql_tag_1 = tslib_1.__importDefault(require("graphql-tag"));
const common_1 = require("../common");
const mobx_react_1 = require("mobx-react");
const context_1 = require("../context");
const apollo_query_view_1 = require("./apollo_query_view");
const helpers_1 = require("../helpers");
const semantic_ui_react_1 = require("semantic-ui-react");
exports.ApolloMutation = mobx_react_1.observer((props) => {
    const [error, setError] = React.useState(null);
    const { owner, formElement: { props: { mutation, target, onError, onResult, clickHandler, variables, boundVariables, onSubmit, successAlert, errorAlert } } } = props;
    const context = React.useContext(context_1.Context);
    if (!mutation) {
        return React.createElement("div", null, "Please specify the mutation");
    }
    let parsedMutation;
    try {
        parsedMutation = React.useMemo(() => graphql_tag_1.default([mutation]), [mutation]);
    }
    catch (ex) {
        return React.createElement("pre", null,
            "Mutation Error: ",
            ex.message);
    }
    return (React.createElement(react_apollo_1.Mutation, { mutation: parsedMutation, onCompleted: (data) => {
            if (target) {
                owner.setValue(target, data[Object.getOwnPropertyNames(data)[0]]);
            }
            if (onResult) {
                helpers_1.simpleHandle(props, onResult, context, data);
            }
            if (successAlert) {
                if (!context.alert) {
                    throw new Error('You need to add AlertProvider');
                }
                context.alert.success(successAlert);
            }
            if (error) {
                setError(null);
            }
        }, onError: (data) => {
            try {
                if (onError) {
                    helpers_1.simpleHandle(props, onError, context, data);
                }
                if (errorAlert) {
                    if (!context.alert) {
                        throw new Error('You need to add AlertProvider');
                    }
                    context.alert.error(errorAlert);
                }
                setError(data.message);
            }
            catch (ex) {
                setError(ex);
            }
        } }, (mutate, { loading, error, data }) => {
        let handlers = props.handlers;
        if (clickHandler) {
            const newClickHandler = () => {
                let currentVariables = onSubmit
                    ? helpers_1.simpleHandle(props, onSubmit, context, data)
                    : {};
                if (currentVariables == null) {
                    return;
                }
                if (variables) {
                    for (let v of variables) {
                        currentVariables[v.name] = apollo_query_view_1.parseParameter(v.value, v.type);
                    }
                }
                if (boundVariables) {
                    for (let v of boundVariables) {
                        currentVariables[v.name] = owner.getValue(v.source);
                    }
                }
                mutate({
                    variables: currentVariables
                });
            };
            handlers = { ...handlers, [clickHandler]: newClickHandler };
        }
        const components = common_1.createComponents({
            ...props,
            handlers,
            extra: { loading, error, data }
        });
        if (error) {
            return (React.createElement(React.Fragment, null,
                React.createElement(semantic_ui_react_1.Message, { color: "red", header: "Query Error", icon: "ban", content: error.message
                        ? error.message.split(':')[error.message.split(':').length - 1]
                        : JSON.stringify(error, null, 2) }),
                React.createElement("br", null),
                components));
        }
        return React.createElement(React.Fragment, null, components);
    }));
});
exports.ApolloMutationView = {
    Component: exports.ApolloMutation,
    toString: () => {
        throw new Error('Not Implemented');
    }
};
//# sourceMappingURL=apollo_mutation_view.js.map