UNPKG

strapi-plugin-content-manager

Version:

A powerful UI to easily manage your data.

101 lines (87 loc) 2.97 kB
import React, { useEffect } from 'react'; import PropTypes from 'prop-types'; import { connect } from 'react-redux'; import { bindActionCreators, compose } from 'redux'; import { Switch, Route } from 'react-router-dom'; import { CheckPagePermissions, LoadingIndicatorPage, NotFound, request, } from 'strapi-helper-plugin'; import { DndProvider } from 'react-dnd'; import HTML5Backend from 'react-dnd-html5-backend'; import pluginId from '../../pluginId'; import pluginPermissions from '../../permissions'; import { getRequestUrl } from '../../utils'; import DragLayer from '../../components/DragLayer'; import CollectionTypeRecursivePath from '../CollectionTypeRecursivePath'; import ComponentSettingsView from '../ComponentSetttingsView'; import SingleTypeRecursivePath from '../SingleTypeRecursivePath'; import { getData, getDataSucceeded, resetProps } from './actions'; import makeSelectMain from './selectors'; function Main({ getData, getDataSucceeded, isLoading, resetProps }) { useEffect(() => { const abortController = new AbortController(); const { signal } = abortController; const fetchData = async signal => { getData(); try { const [{ data: components }, { data: models }] = await Promise.all( ['components', 'content-types'].map(endPoint => request(getRequestUrl(endPoint), { method: 'GET', signal }) ) ); getDataSucceeded(models, components); } catch (err) { console.error(err); strapi.notification.error('notification.error'); } }; fetchData(signal); return () => { abortController.abort(); resetProps(); }; }, [getData, getDataSucceeded, resetProps]); if (isLoading) { return <LoadingIndicatorPage />; } return ( <DndProvider backend={HTML5Backend}> <DragLayer /> <Switch> <Route path={`/plugins/${pluginId}/components/:uid/configurations/edit`}> <CheckPagePermissions permissions={pluginPermissions.componentsConfigurations}> <ComponentSettingsView /> </CheckPagePermissions> </Route> <Route path={`/plugins/${pluginId}/collectionType/:slug`} component={CollectionTypeRecursivePath} /> <Route path={`/plugins/${pluginId}/singleType/:slug`} component={SingleTypeRecursivePath} /> <Route path="" component={NotFound} /> </Switch> </DndProvider> ); } Main.propTypes = { getData: PropTypes.func.isRequired, getDataSucceeded: PropTypes.func.isRequired, isLoading: PropTypes.bool.isRequired, resetProps: PropTypes.func.isRequired, }; const mapStateToProps = makeSelectMain(); export function mapDispatchToProps(dispatch) { return bindActionCreators( { getData, getDataSucceeded, resetProps, }, dispatch ); } const withConnect = connect(mapStateToProps, mapDispatchToProps); export default compose(withConnect)(Main);