set container for each layout

src/client/js/components/Admin/Customize/layout/CustomizeCrowiLayout.jsx

@@ -2,14 +2,25 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
 
+import AppContainer from '../../../../services/AppContainer';
+import AdminCustomizeContainer from '../../../../services/AdminCustomizeContainer';
+import { createSubscribedElement } from '../../../UnstatedUtils';
+
 class CustomizeCrowiLayout extends React.Component {
 
   render() {
+    const { adminCustomizeContainer } = this.props;
+
     return (
       <div className="col-sm-4">
         <h4>
           <div className="radio radio-primary">
-            <input type="radio" id="radioLayoutCrowi" checked={this.props.currentLayout === 'crowi'} onChange={() => this.props.onChangeLayout('crowi')} />
+            <input
+              type="radio"
+              id="radioLayoutCrowi"
+              checked={adminCustomizeContainer.state.currentLayout === 'crowi'}
+              onChange={() => adminCustomizeContainer.switchLayoutType('crowi')}
+            />
             <label htmlFor="radioLayoutCrowi">
                 Crowi Classic Layout
             </label>
@@ -31,11 +42,14 @@ class CustomizeCrowiLayout extends React.Component {
 
 }
 
+const CustomizeCrowiLayoutWrapper = (props) => {
+  return createSubscribedElement(CustomizeCrowiLayout, props, [AppContainer, AdminCustomizeContainer]);
+};
+
 CustomizeCrowiLayout.propTypes = {
   t: PropTypes.func.isRequired, // i18next
-
-  currentLayout: PropTypes.string.isRequired,
-  onChangeLayout: PropTypes.func.isRequired,
+  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
+  adminCustomizeContainer: PropTypes.instanceOf(AdminCustomizeContainer).isRequired,
 };
 
-export default withTranslation()(CustomizeCrowiLayout);
+export default withTranslation()(CustomizeCrowiLayoutWrapper);

src/client/js/components/Admin/Customize/layout/CustomizeGrowiLayout.jsx

@@ -2,14 +2,25 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
 
+import AppContainer from '../../../../services/AppContainer';
+import AdminCustomizeContainer from '../../../../services/AdminCustomizeContainer';
+import { createSubscribedElement } from '../../../UnstatedUtils';
+
 class CustomizeGrowiLayout extends React.Component {
 
   render() {
+    const { adminCustomizeContainer } = this.props;
+
     return (
       <div className="col-sm-4">
         <h4>
           <div className="radio radio-primary">
-            <input type="radio" id="radioLayoutGrowi" checked={this.props.currentLayout === 'growi'} onChange={() => this.props.onChangeLayout('growi')} />
+            <input
+              type="radio"
+              id="radioLayoutGrowi"
+              checked={adminCustomizeContainer.state.currentLayout === 'growi'}
+              onChange={() => adminCustomizeContainer.switchLayoutType('growi')}
+            />
             <label htmlFor="radioLayoutGrowi">
               GROWI Enhanced Layout <small className="text-success">(Recommended)</small>
             </label>
@@ -31,11 +42,15 @@ class CustomizeGrowiLayout extends React.Component {
 
 }
 
+
+const CustomizeGrowiLayoutWrapper = (props) => {
+  return createSubscribedElement(CustomizeGrowiLayout, props, [AppContainer, AdminCustomizeContainer]);
+};
+
 CustomizeGrowiLayout.propTypes = {
   t: PropTypes.func.isRequired, // i18next
-
-  currentLayout: PropTypes.string.isRequired,
-  onChangeLayout: PropTypes.func.isRequired,
+  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
+  adminCustomizeContainer: PropTypes.instanceOf(AdminCustomizeContainer).isRequired,
 };
 
-export default withTranslation()(CustomizeGrowiLayout);
+export default withTranslation()(CustomizeGrowiLayoutWrapper);

src/client/js/components/Admin/Customize/layout/CustomizeKibelaLayout.jsx

@@ -2,14 +2,25 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
 
+import AppContainer from '../../../../services/AppContainer';
+import AdminCustomizeContainer from '../../../../services/AdminCustomizeContainer';
+import { createSubscribedElement } from '../../../UnstatedUtils';
+
 class CustomizeKibelaLayout extends React.Component {
 
   render() {
+    const { adminCustomizeContainer } = this.props;
+
     return (
       <div className="col-sm-4">
         <h4>
           <div className="radio radio-primary">
-            <input type="radio" id="radioLayoutKibela" checked={this.props.currentLayout === 'kibela'} onChange={() => this.props.onChangeLayout('kibela')} />
+            <input
+              type="radio"
+              id="radioLayoutKibela"
+              checked={adminCustomizeContainer.state.currentLayout === 'kibela'}
+              onChange={() => adminCustomizeContainer.switchLayoutType('kibela')}
+            />
             <label htmlFor="radioLayoutKibela">
               Kibela Like Layout
             </label>
@@ -31,11 +42,14 @@ class CustomizeKibelaLayout extends React.Component {
 
 }
 
+const CustomizeKibelaLayoutWrapper = (props) => {
+  return createSubscribedElement(CustomizeKibelaLayout, props, [AppContainer, AdminCustomizeContainer]);
+};
+
 CustomizeKibelaLayout.propTypes = {
   t: PropTypes.func.isRequired, // i18next
-
-  currentLayout: PropTypes.string.isRequired,
-  onChangeLayout: PropTypes.func.isRequired,
+  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
+  adminCustomizeContainer: PropTypes.instanceOf(AdminCustomizeContainer).isRequired,
 };
 
-export default withTranslation()(CustomizeKibelaLayout);
+export default withTranslation()(CustomizeKibelaLayoutWrapper);