routing and data fetch according to url

packages/strapi-plugin-setings-manager/admin/src/components/InputNumber/index.js

@@ -52,7 +52,7 @@ class InputNumber extends React.Component { // eslint-disable-line react/prefer-
 
   handleBlur = ({ target }) => {
     // prevent error display if input is initially empty
-    if (!isempty(target.value) || this.state.hasInitialValue) {
+    if (!isEmpty(target.value) || this.state.hasInitialValue) {
       // validates basic string validations
       // add custom logic here such as alerts...
       const errors = this.validate(target.value);

packages/strapi-plugin-setings-manager/admin/src/containers/App/index.js

@@ -9,19 +9,19 @@ import React from 'react';
 import { connect } from 'react-redux';
 import { createStructuredSelector } from 'reselect';
 import { bindActionCreators } from 'redux';
-import { isEmpty } from 'lodash';
+import { isEmpty, map } from 'lodash';
 import { pluginId } from 'app';
 import PluginLeftMenu from 'components/PluginLeftMenu';
+import { define } from 'i18n';
+import messages from '../../translations/en.json';
 
 import { menuFetch } from './actions';
 import { makeSelectSections } from './selectors';
 import styles from './styles.scss';
-import messages from '../../translations/en.json';
-import { define } from 'i18n';
-define(_.map(messages, (message, id) => ({
-    id,
-    defaultMessage: message,
-  }
+define(map(messages, (message, id) => ({
+  id,
+  defaultMessage: message,
+}
 )));
 
 class App extends React.Component {
@@ -43,7 +43,6 @@ class App extends React.Component {
         exposedComponents: this.props.exposedComponents,
       })
     );
-    console.log(this.props.sections)
     return (
       <div className={`${pluginId} ${styles.app}`}>
         {/*

packages/strapi-plugin-setings-manager/admin/src/containers/Home/actions.js

@@ -3,12 +3,12 @@
  * Home actions
  *
  */
-
 import {
   CONFIG_FETCH,
   ENVIRONMENTS_FETCH,
   CONFIG_FETCH_SUCCEEDED,
   ENVIRONMENTS_FETCH_SUCCEEDED,
+  DEFAULT_ACTION,
 } from './constants';
 
 export function defaultAction() {
@@ -31,16 +31,15 @@ export function environmentsFetch() {
 }
 
 export function environmentsFetchSucceeded(environments) {
-  console.log(environments);
   return {
     type: ENVIRONMENTS_FETCH_SUCCEEDED,
     environments,
   };
 }
 
-export function configFetchSucceded(config) {
+export function configFetchSucceded(configs) {
   return {
     type: CONFIG_FETCH_SUCCEEDED,
-    config,
+    configs,
   };
 }

packages/strapi-plugin-setings-manager/admin/src/containers/Home/index.js

@@ -15,37 +15,47 @@ import styles from './styles.scss';
 import config from './config.json';
 
 export class Home extends React.Component { // eslint-disable-line react/prefer-stateless-function
+
   componentDidMount() {
+    // always fetch environments
+    this.props.environmentsFetch();
+
     if (this.props.params.slug) {
-      const isEnvironemntsRequired = includes(config.environmentsRequired, this.props.params.slug);
-      // TODO handle specific url for environments
-      if (!isEnvironemntsRequired) {
+      const isEnvironmentsRequired = includes(config.environmentsRequired, this.props.params.slug);
+
+      if (!isEnvironmentsRequired) {
         this.props.configFetch(this.props.params.slug);
-      } else {
-        this.props.environmentsFetch();
+      } else if (this.props.params.env){
+        this.props.configFetch(`${this.props.params.slug}/${this.props.params.env}`);
       }
     }
   }
 
+
   componentWillReceiveProps(nextProps) {
+
+    const isEnvironmentsRequired = nextProps.params.slug ?  includes(config.environmentsRequired, nextProps.params.slug) : false;
+
+    // check if params slug updated
     if (this.props.params.slug !== nextProps.params.slug && nextProps.params.slug) {
-      // TODO add condition to check if environments has already been fetched
-      const isEnvironemntsRequired = includes(config.environmentsRequired, nextProps.params.slug);
 
-      if (!isEnvironemntsRequired) {
-        this.props.configFetch(nextProps.params.slug);
-      } else { // TODO change to else if (isEmpty(this.props.environments))
-        this.props.environmentsFetch();
-      } // else { ... }
+      // redirect user if environnemnt is required and params environment not provided
+      if (isEnvironmentsRequired && !nextProps.params.env) {
+        this.props.history.push(`${nextProps.location.pathname}/${nextProps.environments[0].name}`)
+      }
 
+      // get data from api if params slug updated
+      const apiUrl = isEnvironmentsRequired ? `${nextProps.params.slug}/${nextProps.environments[0].name}` : nextProps.params.slug;
+
+      this.props.configFetch(apiUrl);
     } else if (this.props.params.env !== nextProps.params.env) {
-      // TODO handle environments
-      this.props.configFetch(`${nextProps.params.slug}/${nextProps.params.env}`);
+
+      // get data if params env updated
+      this.props.configFetch(`${this.props.params.slug}/${nextProps.params.env}`);
     }
   }
 
   render() {
-    console.log(config);
     return (
       <div className={styles.home}>
         <Helmet
@@ -71,4 +81,11 @@ function mapDispatchToProps(dispatch) {
   )
 }
 
+Home.propTypes = {
+  configFetch: React.PropTypes.func.isRequired,
+  environmentsFetch: React.PropTypes.func.isRequired,
+  history: React.PropTypes.object.isRequired,
+  params: React.PropTypes.object.isRequired,
+};
+
 export default connect(mapStateToProps, mapDispatchToProps)(Home);

packages/strapi-plugin-setings-manager/admin/src/containers/Home/reducer.js

@@ -4,17 +4,36 @@
  *
  */
 
-import { fromJS } from 'immutable';
+import { fromJS, List, Map, OrderedMap } from 'immutable';
 import {
-  DEFAULT_ACTION,
+  CONFIG_FETCH,
+  ENVIRONMENTS_FETCH,
+  CONFIG_FETCH_SUCCEEDED,
+  ENVIRONMENTS_FETCH_SUCCEEDED,
 } from './constants';
 
-const initialState = fromJS({});
+/* eslint-disable new-cap */
+const initialState = fromJS({
+  loading: false,
+  configsDisplay: OrderedMap(),
+  modifiedData: Map(),
+  environments: List(),
+});
 
 function homeReducer(state = initialState, action) {
   switch (action.type) {
-    case DEFAULT_ACTION:
-      return state;
+    case CONFIG_FETCH:
+      return state.set('loading', true);
+    case CONFIG_FETCH_SUCCEEDED:
+      return state
+        .set('loading', false)
+        .set('configsDisplay', OrderedMap(action.configs));
+    case ENVIRONMENTS_FETCH:
+      return state.set('loading', true);
+    case ENVIRONMENTS_FETCH_SUCCEEDED:
+      return state
+        .set('loading', false)
+        .set('environments', List(action.environments.environments));
     default:
       return state;
   }

packages/strapi-plugin-setings-manager/admin/src/containers/Home/sagas.js

@@ -1,8 +1,7 @@
-import { take, call, put, fork, select, cancel } from 'redux-saga/effects';
 import { takeLatest } from 'redux-saga';
-import { LOCATION_CHANGE } from 'react-router-redux';
-import { FormattedMessage } from 'react-intl';
-import { CONFIG_FETCH, ENVIRONMENTS_FETCH } from './constants';
+import { take, put, fork, cancel } from 'redux-saga/effects';
+// import { FormattedMessage } from 'react-intl';
+import { CONFIG_FETCH, ENVIRONMENTS_FETCH, CONFIG_FETCH_SUCCEEDED, ENVIRONMENTS_FETCH_SUCCEEDED } from './constants';
 import { configFetchSucceded, environmentsFetchSucceeded } from './actions';
 
 export function* fetchConfig(action) {
@@ -29,7 +28,7 @@ export function* fetchEnvironments() {
       method: 'GET',
     };
 
-    const response = yield fetch('/settings-manager/environments');
+    const response = yield fetch('/settings-manager/environments', opts);
     const data = yield response.json();
 
     yield put(environmentsFetchSucceeded(data));
@@ -44,8 +43,9 @@ export function* fetchEnvironments() {
 export function* defaultSaga() {
   const loadConfig = yield fork(takeLatest, CONFIG_FETCH, fetchConfig);
   const loadEnvironments = yield fork(takeLatest, ENVIRONMENTS_FETCH, fetchEnvironments);
-  yield take(LOCATION_CHANGE);
+  yield take(CONFIG_FETCH_SUCCEEDED);
   yield cancel(loadConfig);
+  yield take(ENVIRONMENTS_FETCH_SUCCEEDED);
   yield cancel(loadEnvironments);
 }