plone / plone-react / 766

pending completion

Build # 766

Build Type

push

travis-ci

Committed by

sneridagh

Commit Message

<a href="https://github.com/plone/plone-react/commit/<a class=hub.com/plone/plone-react/commit/<a class="double-link" href="https://git"><a class=hub.com/plone/plone-react/commit/<a class="double-link" href="https://git"><a class=hub.com/plone/plone-react/commit/<a class="double-link" href="https://git"><a class=hub.com/plone/plone-react/commit/b2683391ea885d41f2029d5e6154f32e86dfb68e">b2683391e">&lt;a href=&quot;https://github.com/plone/plone-react/commit/</a><a class="double-link" href="https://github.com/plone/plone-react/commit/&lt;a class=&quot;double-link&quot; href=&quot;https://git">&lt;a class=</a>hub.com/plone/plone-react/commit/&lt;a class=&quot;double-link&quot; href=&quot;https://git">&lt;a class=</a>hub.com/plone/plone-react/commit/&lt;a class=&quot;double-link&quot; href=&quot;https://git">&lt;a class=</a>hub.com/plone/plone-react/commit/&lt;a class=&quot;double-link&quot; href=&quot;https://git">&lt;a class=</a>hub.com/plone/plone-react/commit/b2683391ea885d41f2029d5e6154f32e86dfb68e">b2683391e</a><a href="https://github.com/plone/plone-react/commit/b2683391ea885d41f2029d5e6154f32e86dfb68e">&quot;&gt;&amp;lt;a href=&amp;quot;https://github.com/plone/plone-react/commit/&lt;/a&gt;&lt;a class=&quot;double-link&quot; href=&quot;https://github.com/plone/plone-react/commit/&amp;lt;a class=&amp;quot;double-link&amp;quot; href=&amp;quot;https://git&quot;&gt;&amp;lt;a class=&lt;/a&gt;hub.com/plone/plone-react/commit/&amp;lt;a class=&amp;quot;double-link&amp;quot; href=&amp;quot;https://git&quot;&gt;&amp;lt;a class=&lt;/a&gt;hub.com/plone/plone-react/commit/&amp;lt;a class=&amp;quot;double-link&amp;quot; href=&amp;quot;https://git&quot;&gt;&amp;lt;a class=&lt;/a&gt;hub.com/plone/plone-react/commit/&amp;lt;a class=&amp;quot;double-link&amp;quot; href=&amp;quot;https://git&quot;&gt;&amp;lt;a class=&lt;/a&gt;hub.com/plone/plone-react/commit/b2683391ea885d41f2029d5e6154f32e86dfb68e&quot;&gt;b2683391e&lt;/a&gt;&lt;a href=&quot;https://github.com/plone/plone-react/commit/b2683391ea885d41f2029d5e6154f32e86dfb68e&quot;&gt;&amp;quot;&amp;gt;&amp;amp;lt;a href=&amp;amp;quot;https://github.com/plone/plone-react/commit/&amp;lt;/a&amp;gt;&amp;lt;a class=&amp;quot;double-link&amp;quot; href=&amp;quot;https://github.com/plone/plone-react/commit/&amp;amp;lt;a ... (continued)

Run Details

700 of 1452 branches covered (48.21%)

Branch coverage included in aggregate %.

2 of 2 new or added lines in 1 file covered. (100.0%)

1125 of 1939 relevant lines covered (58.02%)

7.15 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

19.7

/src/components/manage/Edit/Edit.jsx

/**
 * Edit container.
 * @module components/manage/Edit/Edit
 */

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Helmet from 'react-helmet';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { browserHistory } from 'react-router';
import { asyncConnect } from 'redux-connect';
import { isEmpty, pick } from 'lodash';
import { defineMessages, injectIntl, intlShape } from 'react-intl';
import { Portal } from 'react-portal';
import { Icon } from 'semantic-ui-react';
import { DragDropContext } from 'react-dnd';
import HTML5Backend from 'react-dnd-html5-backend';

import { Form, Toolbar } from '../../../components';
import { updateContent, getContent, getSchema } from '../../../actions';
import { getBaseUrl } from '../../../helpers';

const messages = defineMessages({
  edit: {
    id: 'Edit {title}',
    defaultMessage: 'Edit {title}',
  },
  save: {
    id: 'Save',
    defaultMessage: 'Save',
  },
  cancel: {
    id: 'Cancel',
    defaultMessage: 'Cancel',
  },
  properties: {
    id: 'Properties',
    defaultMessage: 'Properties',
  },
  visual: {
    id: 'Visual',
    defaultMessage: 'Visual',
  },
});

@DragDropContext(HTML5Backend)
@injectIntl
@connect(
  (state, props) => ({
    content: state.content.data,
    schema: state.schema.schema,
    getRequest: state.content.get,
    schemaRequest: state.schema,
    updateRequest: state.content.update,
    pathname: props.location.pathname,
    returnUrl: props.location.query.return_url,
  }),
  dispatch =>
    bindActionCreators(
      {
        updateContent,
        getContent,
        getSchema,
      },
      dispatch,
    ),
)
/**
 * EditComponent class.
 * @class EditComponent
 * @extends Component
 */
export class EditComponent extends Component {
  /**
   * Property types.
   * @property {Object} propTypes Property types.
   * @static
   */
  static propTypes = {
    updateContent: PropTypes.func.isRequired,
    getContent: PropTypes.func.isRequired,
    getSchema: PropTypes.func.isRequired,
    updateRequest: PropTypes.shape({
      loading: PropTypes.bool,
      loaded: PropTypes.bool,
    }).isRequired,
    schemaRequest: PropTypes.shape({
      loading: PropTypes.bool,
      loaded: PropTypes.bool,
    }).isRequired,
    getRequest: PropTypes.shape({
      loading: PropTypes.bool,
      loaded: PropTypes.bool,
    }).isRequired,
    pathname: PropTypes.string.isRequired,
    returnUrl: PropTypes.string,
    content: PropTypes.shape({
      '@type': PropTypes.string,
    }),
    schema: PropTypes.objectOf(PropTypes.any),
    intl: intlShape.isRequired,
  };

  /**
   * Default properties
   * @property {Object} defaultProps Default properties.
   * @static
   */
  static defaultProps = {
    schema: null,
    content: null,
    returnUrl: null,
  };

  /**
   * Constructor
   * @method constructor
   * @param {Object} props Component properties
   * @constructs EditComponent
   */
  constructor(props) {
    super(props);
    this.state = {
      visual: false,
    };
    this.onCancel = this.onCancel.bind(this);
    this.onSubmit = this.onSubmit.bind(this);
    this.onToggleVisual = this.onToggleVisual.bind(this);
  }

  /**
   * Component did mount
   * @method componentDidMount
   * @returns {undefined}
   */
  componentDidMount() {
    this.props.getContent(getBaseUrl(this.props.pathname));
  }

  /**
   * Component will receive props
   * @method componentWillReceiveProps
   * @param {Object} nextProps Next properties
   * @returns {undefined}
   */
  componentWillReceiveProps(nextProps) {
    if (this.props.getRequest.loading && nextProps.getRequest.loaded) {
      this.props.getSchema(nextProps.content['@type']);
    }
    if (this.props.schemaRequest.loading && nextProps.schemaRequest.loaded) {
      if (nextProps.schema.properties.tiles) {
        this.setState({
          visual: true,
        });
      }
    }
    if (this.props.updateRequest.loading && nextProps.updateRequest.loaded) {
      browserHistory.push(
        this.props.returnUrl || getBaseUrl(this.props.pathname),
      );
    }
  }

  /**
   * Submit handler
   * @method onSubmit
   * @param {object} data Form data.
   * @returns {undefined}
   */
  onSubmit(data) {
    this.props.updateContent(getBaseUrl(this.props.pathname), data);
  }

  /**
   * Cancel handler
   * @method onCancel
   * @returns {undefined}
   */
  onCancel() {
    browserHistory.push(
      this.props.returnUrl || getBaseUrl(this.props.pathname),
    );
  }

  /**
   * Toggle visual
   * @method onToggleVisual
   * @returns {undefined}
   */
  onToggleVisual() {
    this.setState({
      visual: !this.state.visual,
    });
  }

  /**
   * Render method.
   * @method render
   * @returns {string} Markup for the component.
   */
  render() {
    if (this.props.schemaRequest.loaded && this.props.content) {
      return (
        <div id="page-edit">
          <Helmet
            title={this.props.intl.formatMessage(messages.edit, {
              title: this.props.schema.title,
            })}
          />
          <Form
            ref={instance => {
              if (instance) {
                this.form = instance.refs.wrappedInstance;
              }
            }}
            schema={this.props.schema}
            formData={this.props.content}
            onSubmit={this.onSubmit}
            hideActions
            pathname={this.props.pathname}
            visual={this.state.visual}
            title={this.props.intl.formatMessage(messages.edit, {
              title: this.props.schema.title,
            })}
            loading={this.props.updateRequest.loading}
          />
          <Portal node={__CLIENT__ && document.getElementById('toolbar')}>
            <Toolbar
              pathname={this.props.pathname}
              inner={
                <div>
                  <a className="item" onClick={() => this.form.onSubmit()}>
                    <Icon
                      name="save"
                      size="big"
                      color="blue"
                      title={this.props.intl.formatMessage(messages.save)}
                    />
                  </a>
                  {this.props.schema.properties.tiles && (
                    <a className="item" onClick={() => this.onToggleVisual()}>
                      <Icon
                        name={this.state.visual ? 'tasks' : 'block layout'}
                        size="big"
                        title={this.props.intl.formatMessage(
                          this.state.visual
                            ? messages.properties
                            : messages.visual,
                        )}
                      />
                    </a>
                  )}
                  <a className="item" onClick={() => this.onCancel()}>
                    <Icon
                      name="close"
                      size="big"
                      color="red"
                      title={this.props.intl.formatMessage(messages.cancel)}
                    />
                  </a>
                </div>
              }
            />
          </Portal>
        </div>
      );
    }
    return <div />;
  }
}

export default asyncConnect([
  {
    key: 'schema',
    promise: ({ store: { dispatch, getState } }) =>
      dispatch(getSchema(getState().content.data['@type'])),
  },
  {
    key: 'content',
    promise: ({ location, store: { dispatch, getState } }) => {
      const { form } = getState();
      if (!isEmpty(form)) {
        return dispatch(
          updateContent(
            getBaseUrl(location.pathname),
            pick(form, ['title', 'description', 'text']),
          ),
        );
      }
      return Promise.resolve(getState().content);
    },
  },
])(EditComponent);

1	/**
2	* Edit container.
3	* @module components/manage/Edit/Edit
4	*/
5
6	import React, { Component } from 'react';
7	import PropTypes from 'prop-types';
8	import Helmet from 'react-helmet';
9	import { connect } from 'react-redux';
10	import { bindActionCreators } from 'redux';
11	import { browserHistory } from 'react-router';
12	import { asyncConnect } from 'redux-connect';
13	import { isEmpty, pick } from 'lodash';
14	import { defineMessages, injectIntl, intlShape } from 'react-intl';
15	import { Portal } from 'react-portal';
16	import { Icon } from 'semantic-ui-react';
17	import { DragDropContext } from 'react-dnd';
18	import HTML5Backend from 'react-dnd-html5-backend';
19
20	import { Form, Toolbar } from '../../../components';
21	import { updateContent, getContent, getSchema } from '../../../actions';
22	import { getBaseUrl } from '../../../helpers';
23
24	const messages = defineMessages({	37✔
25	edit: {
26	id: 'Edit {title}',
27	defaultMessage: 'Edit {title}',
28	},
29	save: {
30	id: 'Save',
31	defaultMessage: 'Save',
32	},
33	cancel: {
34	id: 'Cancel',
35	defaultMessage: 'Cancel',
36	},
37	properties: {
38	id: 'Properties',
39	defaultMessage: 'Properties',
40	},
41	visual: {
42	id: 'Visual',
43	defaultMessage: 'Visual',
44	},
45	});
46
47	@DragDropContext(HTML5Backend)
48	@injectIntl
49	@connect(
50	(state, props) => ({	2✔
51	content: state.content.data,
52	schema: state.schema.schema,
53	getRequest: state.content.get,
54	schemaRequest: state.schema,
55	updateRequest: state.content.update,
56	pathname: props.location.pathname,
57	returnUrl: props.location.query.return_url,
58	}),
59	dispatch =>
60	bindActionCreators(	2✔
61	{
62	updateContent,
63	getContent,
64	getSchema,
65	},
66	dispatch,
67	),
68	)
69	/**
70	* EditComponent class.
71	* @class EditComponent
72	* @extends Component
73	*/
74	export class EditComponent extends Component {
75	/**
76	* Property types.
77	* @property {Object} propTypes Property types.
78	* @static
79	*/
80	static propTypes = {
81	updateContent: PropTypes.func.isRequired,
82	getContent: PropTypes.func.isRequired,
83	getSchema: PropTypes.func.isRequired,
84	updateRequest: PropTypes.shape({
85	loading: PropTypes.bool,
86	loaded: PropTypes.bool,
87	}).isRequired,
88	schemaRequest: PropTypes.shape({
89	loading: PropTypes.bool,
90	loaded: PropTypes.bool,
91	}).isRequired,
92	getRequest: PropTypes.shape({
93	loading: PropTypes.bool,
94	loaded: PropTypes.bool,
95	}).isRequired,
96	pathname: PropTypes.string.isRequired,
97	returnUrl: PropTypes.string,
98	content: PropTypes.shape({
99	'@type': PropTypes.string,
100	}),
101	schema: PropTypes.objectOf(PropTypes.any),
102	intl: intlShape.isRequired,
103	};
104
105	/**
106	* Default properties
107	* @property {Object} defaultProps Default properties.
108	* @static
109	*/
110	static defaultProps = {
111	schema: null,
112	content: null,
113	returnUrl: null,
114	};
115
116	/**
117	* Constructor
118	* @method constructor
119	* @param {Object} props Component properties
120	* @constructs EditComponent
121	*/
122	constructor(props) {
123	super(props);	2✔
124	this.state = {	2✔
125	visual: false,
126	};
127	this.onCancel = this.onCancel.bind(this);	2✔
128	this.onSubmit = this.onSubmit.bind(this);	2✔
129	this.onToggleVisual = this.onToggleVisual.bind(this);	2✔
130	}
131
132	/**
133	* Component did mount
134	* @method componentDidMount
135	* @returns {undefined}
136	*/
137	componentDidMount() {
138	this.props.getContent(getBaseUrl(this.props.pathname));	2✔
139	}
140
141	/**
142	* Component will receive props
143	* @method componentWillReceiveProps
144	* @param {Object} nextProps Next properties
145	* @returns {undefined}
146	*/
147	componentWillReceiveProps(nextProps) {
148	if (this.props.getRequest.loading && nextProps.getRequest.loaded) {	×
149	this.props.getSchema(nextProps.content['@type']);	×
150	}
151	if (this.props.schemaRequest.loading && nextProps.schemaRequest.loaded) {	×
152	if (nextProps.schema.properties.tiles) {	×
153	this.setState({	×
154	visual: true,
155	});
156	}
157	}
158	if (this.props.updateRequest.loading && nextProps.updateRequest.loaded) {	×
159	browserHistory.push(	×
160	this.props.returnUrl \|\| getBaseUrl(this.props.pathname),	×
161	);
162	}
163	}
164
165	/**
166	* Submit handler
167	* @method onSubmit
168	* @param {object} data Form data.
169	* @returns {undefined}
170	*/
171	onSubmit(data) {
172	this.props.updateContent(getBaseUrl(this.props.pathname), data);	×
173	}
174
175	/**
176	* Cancel handler
177	* @method onCancel
178	* @returns {undefined}
179	*/
180	onCancel() {
181	browserHistory.push(	×
182	this.props.returnUrl \|\| getBaseUrl(this.props.pathname),	×
183	);
184	}
185
186	/**
187	* Toggle visual
188	* @method onToggleVisual
189	* @returns {undefined}
190	*/
191	onToggleVisual() {
192	this.setState({	×
193	visual: !this.state.visual,
194	});
195	}
196
197	/**
198	* Render method.
199	* @method render
200	* @returns {string} Markup for the component.
201	*/
202	render() {
203	if (this.props.schemaRequest.loaded && this.props.content) {	2!
204	return (	×
205	<div id="page-edit">
206	<Helmet
207	title={this.props.intl.formatMessage(messages.edit, {
208	title: this.props.schema.title,
209	})}
210	/>
211	<Form
212	ref={instance => {
213	if (instance) {	×
214	this.form = instance.refs.wrappedInstance;	×
215	}
216	}}
217	schema={this.props.schema}
218	formData={this.props.content}
219	onSubmit={this.onSubmit}
220	hideActions
221	pathname={this.props.pathname}
222	visual={this.state.visual}
223	title={this.props.intl.formatMessage(messages.edit, {
224	title: this.props.schema.title,
225	})}
226	loading={this.props.updateRequest.loading}
227	/>
228	<Portal node={__CLIENT__ && document.getElementById('toolbar')}>	×
229	<Toolbar
230	pathname={this.props.pathname}
231	inner={
232	<div>
233	<a className="item" onClick={() => this.form.onSubmit()}>	×
234	<Icon
235	name="save"
236	size="big"
237	color="blue"
238	title={this.props.intl.formatMessage(messages.save)}
239	/>
240	</a>
241	{this.props.schema.properties.tiles && (	×
242	<a className="item" onClick={() => this.onToggleVisual()}>	×
243	<Icon
244	name={this.state.visual ? 'tasks' : 'block layout'}	×
245	size="big"
246	title={this.props.intl.formatMessage(
247	this.state.visual	×
248	? messages.properties
249	: messages.visual,
250	)}
251	/>
252	</a>
253	)}
254	<a className="item" onClick={() => this.onCancel()}>	×
255	<Icon
256	name="close"
257	size="big"
258	color="red"
259	title={this.props.intl.formatMessage(messages.cancel)}
260	/>
261	</a>
262	</div>
263	}
264	/>
265	</Portal>
266	</div>
267	);
268	}
269	return <div />;	2✔
270	}
271	}
272
273	export default asyncConnect([
274	{
275	key: 'schema',
276	promise: ({ store: { dispatch, getState } }) =>
277	dispatch(getSchema(getState().content.data['@type'])),	×
278	},
279	{
280	key: 'content',
281	promise: ({ location, store: { dispatch, getState } }) => {
282	const { form } = getState();	×
283	if (!isEmpty(form)) {	×
284	return dispatch(	×
285	updateContent(
286	getBaseUrl(location.pathname),
287	pick(form, ['title', 'description', 'text']),
288	),
289	);
290	}
291	return Promise.resolve(getState().content);	×
292	},
293	},
294	])(EditComponent);

plone / plone-react / 766

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous