diff --git a/docs/3.x.x/en/plugin-development/frontend-use-cases.md b/docs/3.x.x/en/plugin-development/frontend-use-cases.md index 3f6acf137c..72e1d0e942 100644 --- a/docs/3.x.x/en/plugin-development/frontend-use-cases.md +++ b/docs/3.x.x/en/plugin-development/frontend-use-cases.md @@ -6,131 +6,6 @@ This section gives use cases examples on front-end plugin development. This section contains advanced resources to develop plugins. -## Handle user navigation - -User navigation within your plugin can be managed by two different ways : - - Using the [React Router V4 API](https://reacttraining.com/react-router/web/guides/philosophy) - - Using the main router from the app - -### Using React Router - -[Link](https://reacttraining.com/react-router/web/api/Link) provides declarative, accessible navigation around your application : - -```js - - -// Same as - - -``` - -[NavLink](https://reacttraining.com/react-router/web/api/NavLink) will add styling attributes to the rendered element when it matches the current URL. - - -```js - - FAQs - -``` - -### Using the App Router - -We use the app router if we want to make a redirection after some user actions (ex: after submitting a form). - -**Path —** `./plugins/my-plugin/admin/src/containers/FooPage/index.js`. -```js -import React from 'react'; -import { bindActionCreators } from 'redux'; -import { connect, compose } from 'react-redux'; -import PropTypes from 'prop-types'; - -// App router -import { router } from 'app'; - -// Components -import Input from 'components/inputs'; -import Button from 'components/button'; - -// Utils -import injectSaga from 'utils/injectSaga'; -import injectReducer from 'utils/injectReducer'; - -// Actions -import { changeInput, submitForm } from './actions'; -// Sagas -import saga from './sagas'; -// Selectors -import selectFooPage from './selectors'; -// Reducer -import reducer from './reducer'; - -export class FooPage extends React.Component { - handleSubmit = () => { - this.props.handleSubmit(); - const hash = this.props.location.hash; - const pathname = this.props.match.pathname; - const search = '?foo=bar'; - router.push({ pathname, search, hash }); - } - - render() { - return ( -
-
- - -
-
- ) - } -} - -FooPage.propTypes = { - changeInput: PropTypes.func.isRequired, - location: PropTypes.object.isRequired, - match: PropTypes.object.isRequired, - submitForm: PropTypes.func.isRequired, -}; - -const mapStateToProps = selectFooPage(); - -function mapDispatchToProps(dispatch) { - return bindActionCreators( - { - changeInput, - submitForm, - }, - dispatch - ); -} - -const withConnect = connect(mapStateToProps, mapDispatchToProps); -const withReducer = injectReducer({ key: 'fooPage', reducer }); -const withSagas = injectSaga({ key: 'fooPage', saga }); - -export default compose( - withReducer, - withSagas, - withConnect, -)(FooPage); -``` - -*** - ## Inject design The `ExtendComponent` allows you to inject design from one plugin into another. @@ -264,7 +139,7 @@ export { makeSelectShowLorem }; That's all now your plugin's container is injectable! -Let's see how to inject some design from another plugin. +Let's see how to inject a React Component from a plugin into another. ### Create your injectedComponent @@ -301,7 +176,7 @@ BarContainer.defaultProps = { export default BarContainer; ``` -### Tell the admin that you want to inject some design into another plugin +### Tell the admin that you want to inject a React Component from a plugin into another You have to create a file called `injectedComponents.js` at the root of your `another-plugin` src folder.