handle dynamic left menuplugin

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

@@ -41,7 +41,7 @@ class InputToggle extends React.Component { // eslint-disable-line react/prefer-
       value: isChecked,
     };
     this.setState({ isChecked });
-    this.props.handleChange({target});
+    this.props.handleChange({ target });
   }
 
   render() {

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

@@ -10,10 +10,6 @@ import PluginLeftMenuSection from 'components/PluginLeftMenuSection';
 import styles from './styles.scss';
 
 class PluginLeftMenu extends React.Component { // eslint-disable-line react/prefer-stateless-function
-  constructor(props) {
-    super(props);
-  }
-
   render() {
     return (
       <div className={`${styles.pluginLeftMenu} col-md-3`}>
@@ -25,4 +21,8 @@ class PluginLeftMenu extends React.Component { // eslint-disable-line react/pref
   }
 }
 
+PluginLeftMenu.propTypes = {
+  sections: React.PropTypes.array.isRequired,
+};
+
 export default PluginLeftMenu;

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

@@ -1,20 +0,0 @@
-/**
-*
-* PluginLeftMenuHeader
-*
-*/
-
-import React from 'react';
-
-
-import styles from './styles.scss';
-
-function PluginLeftMenuHeader() {
-  return (
-    <div className={styles.pluginLeftMenuHeader}>
-      General
-    </div>
-  );
-}
-
-export default PluginLeftMenuHeader;

packages/strapi-plugin-setings-manager/admin/src/components/PluginLeftMenuHeader/styles.scss

@@ -1,3 +0,0 @@
-.pluginLeftMenuHeader { /* stylelint-disable */
-  margin-top: 3rem;
-}

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

@@ -0,0 +1,28 @@
+/**
+*
+* PluginLeftMenuLink
+*
+*/
+
+import React from 'react';
+import { Link } from 'react-router';
+import styles from './styles.scss';
+
+class PluginLeftMenuLink extends React.Component { // eslint-disable-line react/prefer-stateless-function
+  render() {
+    return (
+      <li className={styles.pluginLeftMenuLink}>
+        <Link  className={styles.link} to={`/plugins/settings-manager/${this.props.link.slug}`} activeClassName={styles.linkActive}>
+          <i className={`fa fa-${this.props.link.icon}`} />
+          <span>{this.props.link.name}</span>
+        </Link>
+      </li>
+    );
+  }
+}
+
+PluginLeftMenuLink.propTypes = {
+  link: React.PropTypes.object.isRequired,
+};
+
+export default PluginLeftMenuLink;

packages/strapi-plugin-setings-manager/admin/src/components/PluginLeftMenuLink/styles.scss

@@ -0,0 +1,29 @@
+
+.pluginLeftMenuLink { /* stylelint-disable */
+
+}
+
+.link {
+  padding-top: 0.5rem;
+  padding-bottom: 0.2rem;
+  min-height: 4rem;
+  border-left: 0.4rem solid transparent;
+  cursor: pointer;
+  color: #7E8AAA;
+  padding-left: 2.4rem;
+  text-decoration: none;
+  display: block;
+
+  &:hover {
+    background: #151C2E;
+    border-left: 0.4rem solid #1C5DE7;
+  }
+
+  &:hover {
+    color: #7E8AAA;
+    text-decoration: none;
+  }
+}
+.linkActive {
+  border-left: 0.4rem solid #1C5DE7;
+}

packages/strapi-plugin-setings-manager/admin/src/components/PluginLeftMenuLink/tests/index.test.js

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

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

@@ -5,17 +5,33 @@
 */
 
 import React from 'react';
-
+import { map } from 'lodash';
+import PluginLeftMenuLink from 'components/PluginLeftMenuLink';
 import styles from './styles.scss';
 
 class PluginLeftMenuSection extends React.Component { // eslint-disable-line react/prefer-stateless-function
   render() {
+    const links = map(this.props.section.items, (item, index) => (
+      <PluginLeftMenuLink
+        key={index}
+        link={item}
+
+      />
+    ));
+
     return (
       <div className={styles.pluginLeftMenuSection}>
-        {this.props.section.name}
+        <p>{this.props.section.name}</p>
+        <ul>
+          {links}
+        </ul>
       </div>
     );
   }
 }
 
+PluginLeftMenuSection.propTypes = {
+  section: React.PropTypes.object.isRequired,
+};
+
 export default PluginLeftMenuSection;

packages/strapi-plugin-setings-manager/admin/src/components/PluginLeftMenuSection/styles.scss

@@ -1,3 +1,9 @@
 .pluginLeftMenuSection { /* stylelint-disable */
-
+  > p {
+    padding-left: 2.4rem;
+  }
+  > ul {
+    list-style: none;
+    padding: 0;
+  }
 }

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

@@ -9,6 +9,7 @@ import React from 'react';
 import { connect } from 'react-redux';
 import { createStructuredSelector } from 'reselect';
 import { bindActionCreators } from 'redux';
+import { isEmpty } from 'lodash';
 import { pluginId } from 'app';
 import PluginLeftMenu from 'components/PluginLeftMenu';
 
@@ -17,21 +18,15 @@ import { makeSelectSections } from './selectors';
 import styles from './styles.scss';
 
 class App extends React.Component {
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      value: false,
-      value1: null,
-    }
-  }
-
   componentDidMount() {
     this.props.menuFetch();
   }
 
-  handleChange = ({ target }) => {
+  componentWillReceiveProps(nextProps) {
-    this.setState({ value: target.value});
+    // redirect the user to the first general section
+    if (!this.props.params.slug && !isEmpty(nextProps.sections)) {
+      this.props.history.push(`${this.props.location.pathname}/${nextProps.sections[0].items[0].slug}`)
+    }
   }
 
   render() {
@@ -43,8 +38,11 @@ class App extends React.Component {
     );
     return (
       <div className={`${pluginId} ${styles.app}`}>
+        {/*
+
           <div className={styles.baseline}></div>
-        <div className="container-fluid">
+        */}
+        <div className={`container-fluid ${styles.noPadding}`}>
           <div className="row">
             <PluginLeftMenu sections={this.props.sections} />
             {React.Children.toArray(content)}
@@ -62,6 +60,11 @@ App.contextTypes = {
 App.propTypes = {
   children: React.PropTypes.node.isRequired,
   exposedComponents: React.PropTypes.object.isRequired,
+  history: React.PropTypes.object,
+  location: React.PropTypes.object,
+  menuFetch: React.PropTypes.func,
+  params: React.PropTypes.object,
+  sections: React.PropTypes.array.isRequired,
 };
 
 export function mapDispatchToProps(dispatch) {

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

@@ -10,13 +10,13 @@ import {
 } from './constants';
 
 const initialState = fromJS({
-  sections: List(),
+  sections: List(), // eslint-disable-line new-cap
 });
 
 function appReducer(state = initialState, action) {
   switch (action.type) {
     case MENU_FETCH_SUCCEEDED:
-      return state.set('sections', List(action.menu.sections));
+      return state.set('sections', List(action.menu.sections)); // eslint-disable-line new-cap
     default:
       return state;
   }

packages/strapi-plugin-setings-manager/admin/src/containers/App/styles.scss

@@ -15,3 +15,7 @@
   // background: url('../../assets/images/baseline-20.png');
   pointer-events: none;
 }
+
+.noPadding {
+  padding: 0!important;
+}

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

@@ -7,59 +7,20 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import Helmet from 'react-helmet';
-import PluginLeftMenu from 'components/PluginLeftMenu';
-import InputToggle from 'components/InputToggle';
 import selectHome from './selectors';
 import styles from './styles.scss';
 
 export class Home extends React.Component { // eslint-disable-line react/prefer-stateless-function
-  constructor(props) {
-    super(props);
-    this.state = {
-      value: false,
-      value1: null,
-    }
-  }
-
-  handleChange = ({ target }) => {
-    console.log('ok');
-    console.log(target);
-    this.setState({ value: !this.state.value});
-  }
-
   render() {
-
-    const test = {
-          "name": "bame",
-          "slug": "name",
-          "target": "general.name",
-          "type": "text",
-          "value": "ExperienceApp",
-          "validations" : {
-            "maxLength": 12,
-            "required": true,
-            "regex": /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
-          }
-    };
-
     return (
       <div className={styles.home}>
-        <div className={styles.baseline}></div>
+
         <Helmet
           title="Home"
           meta={[
             { name: 'description', content: 'Description of Home' },
           ]}
         />
-        <div className="container-fluid">
-          <div className="row">
-
-            <div className="col-md-9">
-              <div className="form-group">
-              </div>
-            </div>
-          </div>
-        </div>
       </div>
     );
   }

packages/strapi-plugin-setings-manager/admin/src/routes.json

@@ -1,5 +1,6 @@
 {
-  "/": {
+
+  "(/:slug)": {
     "name": "home",
     "container": "Home"
   }