Improve plugin routing logic

public/app/app.js

@@ -12,17 +12,17 @@ import '!file?name=[name].[ext]!./manifest.json';
 import 'file?name=[name].[ext]!./.htaccess';
 /* eslint-enable import/no-unresolved */
 // Import all the third party stuff
-import React from 'react';
+// import React from 'react';
 // import ReactDOM from 'react-dom';
-import { Provider } from 'react-redux';
-import { applyRouterMiddleware, Router, browserHistory } from 'react-router';
-import { syncHistoryWithStore } from 'react-router-redux';
-import useScroll from 'react-router-scroll';
+// import { Provider } from 'react-redux';
+import { browserHistory } from 'react-router';
+// import { syncHistoryWithStore } from 'react-router-redux';
+// import useScroll from 'react-router-scroll';
 // import LanguageProvider from 'containers/LanguageProvider';
 import configureStore from './store';
 
 // Import i18n messages
-import { translationMessages } from './i18n';
+// import { translationMessages } from './i18n';
 
 // Import the CSS reset, which HtmlWebpackPlugin transfers to the build folder
 import 'sanitize.css/sanitize.css';
@@ -37,10 +37,10 @@ const store = configureStore(initialState, browserHistory);
 // Sync history and store, as the react-router-redux reducer
 // is under the non-default key ("routing"), selectLocationState
 // must be provided for resolving how to retrieve the "route" in the state
-import { selectLocationState } from 'containers/App/selectors';
-const history = syncHistoryWithStore(browserHistory, store, {
-  selectLocationState: selectLocationState(),
-});
+// import { selectLocationState } from 'containers/App/selectors';
+// const history = syncHistoryWithStore(browserHistory, store, {
+//   selectLocationState: selectLocationState(),
+// });
 
 // Set up the router, wrapping all Routes in the App component
 import App from 'containers/App';
@@ -50,29 +50,31 @@ const rootRoute = {
   childRoutes: createRoutes(store),
 };
 
+// import SettingsManagerApp from 'containers/App/index';
 
-const render = () => (
-  <Provider store={store}>
-    <Router
-      history={history}
-      routes={rootRoute}
-      render={
-        // Scroll to top when going to a new page, imitating default browser
-        // behaviour
-        applyRouterMiddleware(useScroll())
-      }
-    />
-  </Provider>
-);
+// const render = () => (
+//   {/*<Provider store={store}>*/}
+//     {/*<SettingsManagerApp></SettingsManagerApp>*/}
+//     {/*<Router*/}
+//       {/*history={history}*/}
+//       {/*routes={rootRoute}*/}
+//       {/*render={*/}
+//         {/*// Scroll to top when going to a new page, imitating default browser*/}
+//         {/*// behaviour*/}
+//         {/*applyRouterMiddleware(useScroll())*/}
+//       {/*}*/}
+//     {/*/>*/}
+  // </Provider>
+// );
 
 //  Hot reloadable translation json files
-if (module.hot) {
+// if (module.hot) {
   // modules.hot.accept does not accept dynamic dependencies,
   // have to be constants at compile-time
-  module.hot.accept('./i18n', () => {
-    render(translationMessages);
-  });
-}
+  // module.hot.accept('./i18n', () => {
+  //   render(translationMessages);
+  // });
+// }
 
 // Chunked polyfill for browsers without Intl support
 // if (!window.Intl) {
@@ -90,7 +92,7 @@ if (module.hot) {
 // import { install } from 'offline-plugin/runtime';
 // install();
 
-// import SettingsManagerHomePage from 'containers/HomePage/index';
+import SettingsManagerHomePage from 'containers/HomePage/index';
 
 // Register the plugin
 window.Strapi.registerPlugin({
@@ -100,5 +102,7 @@ window.Strapi.registerPlugin({
     label: 'Settings Manager',
     to: '/settings-manager',
   },
-  mainComponent: () => (render()),
+  routes: rootRoute,
+  mainComponent: App,
+  homePage: SettingsManagerHomePage,
 });

public/app/containers/App/index.js

@@ -12,7 +12,6 @@
  */
 
 import React from 'react';
-// import { hashHistory } from 'react-router';
 
 import styles from './styles.css';
 
@@ -23,7 +22,6 @@ export default class App extends React.Component { // eslint-disable-line react/
   };
 
   render() {
-    // hashHistory.push('/');
     return (
       <div className={styles.container}>
         {React.Children.toArray(this.props.children)}

public/app/containers/DatabasesPage/index.js

@@ -1,38 +1,27 @@
 /*
- *
  * DatabasesPage
  *
+ * This is the first thing users see of our App, at the '/' route
+ *
+ * NOTE: while this component should technically be a stateless functional
+ * component (SFC), hot reloading does not currently support SFCs. If hot
+ * reloading is not a neccessity for you then you can refactor it and remove
+ * the linting exception.
  */
 
 import React from 'react';
-import { connect } from 'react-redux';
-import Helmet from 'react-helmet';
 import { FormattedMessage } from 'react-intl';
 import messages from './messages';
-import styles from './styles.css';
 
-export class DatabasesPage extends React.Component { // eslint-disable-line react/prefer-stateless-function
+export default class DatabasesPage extends React.Component { // eslint-disable-line react/prefer-stateless-function
+
   render() {
     return (
-      <div className={styles.databasesPage}>
-        <Helmet
-          title="DatabasesPage"
-          meta={[
-            { name: 'description', content: 'Description of DatabasesPage' },
-          ]}
-        />
-        <FormattedMessage {...messages.header} />
-        <h3>Databases</h3>
+      <div>
+        <h1>
+          <FormattedMessage {...messages.header} />
+        </h1>
       </div>
     );
   }
 }
-
-
-function mapDispatchToProps(dispatch) {
-  return {
-    dispatch,
-  };
-}
-
-export default connect(mapDispatchToProps)(DatabasesPage);

public/app/containers/DatabasesPage/messages.js

@@ -7,7 +7,7 @@ import { defineMessages } from 'react-intl';
 
 export default defineMessages({
   header: {
-    id: 'app.containers.DatabasesPage.header',
-    defaultMessage: 'This is DatabasesPage container !',
+    id: 'app.components.DatabasesPage.header',
+    defaultMessage: 'This is the Databases page of the Settings Manager plugin!',
   },
 });

public/app/containers/DatabasesPage/styles.css

@@ -1,3 +0,0 @@
-.databasesPage { /* stylelint-disable */
-
-}

public/app/containers/DatabasesPage/tests/index.test.js

@@ -1,11 +0,0 @@
-// import DatabasesPage from '../index';
-
-import expect from 'expect';
-// import { shallow } from 'enzyme';
-// import React from 'react';
-
-describe('<DatabasesPage />', () => {
-  it('Expect to have unit tests specified', () => {
-    expect(true).toEqual(true);
-  });
-});

public/app/routes.js

@@ -18,7 +18,7 @@ export default function createRoutes(store) {
 
   return [
     {
-      path: '/plugins/settings-manager',
+      path: '',
       name: 'home',
       getComponent(nextState, cb) {
         const importModules = Promise.all([
@@ -34,8 +34,8 @@ export default function createRoutes(store) {
         importModules.catch(errorLoading);
       },
     }, {
-      path: '/plugins/settings-manager/databases',
-      name: 'home',
+      path: '/databases',
+      name: 'databases',
       getComponent(nextState, cb) {
         const importModules = Promise.all([
           System.import('containers/DatabasesPage'),