/
PropertyForm.tsx
89 lines (81 loc) · 2.12 KB
/
PropertyForm.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
import gql from 'graphql-tag';
import { ButtonMutate } from 'modules/common/components';
import { IButtonMutateProps } from 'modules/common/types';
import { __, withProps } from 'modules/common/utils';
import * as React from 'react';
import { compose, graphql } from 'react-apollo';
import { PropertyForm } from '../components';
import { mutations, queries } from '../graphql';
import {
FieldsAddMutationResponse,
FieldsEditMutationResponse,
FieldsGroupsQueryResponse
} from '../types';
type Props = {
queryParams: any;
closeModal: () => void;
};
type FinalProps = {
fieldsGroupsQuery: FieldsGroupsQueryResponse;
} & Props &
FieldsAddMutationResponse &
FieldsEditMutationResponse;
const PropertyFormContainer = (props: FinalProps) => {
const { fieldsGroupsQuery, queryParams } = props;
const { type } = queryParams;
const renderButton = ({
name,
values,
isSubmitted,
callback,
object
}: IButtonMutateProps) => {
return (
<ButtonMutate
mutation={object ? mutations.fieldsEdit : mutations.fieldsAdd}
variables={values}
callback={callback}
refetchQueries={getRefetchQueries(queryParams)}
isSubmitted={isSubmitted}
type="submit"
icon="send"
successMessage={`You successfully ${
object ? 'updated' : 'added'
} a ${name}`}
>
{__('Save')}
</ButtonMutate>
);
};
const updatedProps = {
...props,
type,
renderButton,
groups: fieldsGroupsQuery.fieldsGroups,
refetchQueries: getRefetchQueries(queryParams)
};
return <PropertyForm {...updatedProps} />;
};
const getRefetchQueries = queryParams => {
return [
{
query: gql(queries.fieldsGroups),
variables: { contentType: queryParams.type }
}
];
};
export default withProps<Props>(
compose(
graphql<Props, FieldsGroupsQueryResponse, { contentType: string }>(
gql(queries.fieldsGroups),
{
name: 'fieldsGroupsQuery',
options: ({ queryParams }) => ({
variables: {
contentType: queryParams.type
}
})
}
)
)(PropertyFormContainer)
);