Merge pull request #1358 from weseek/refactor-inject

Refactor inject

src/client/js/app.jsx

@@ -155,45 +155,46 @@ Object.keys(componentMappings).forEach((key) => {
   }
 });
 
-const adminCustomizeElem = document.getElementById('admin-customize');
-if (adminCustomizeElem != null) {
-  const adminCustomizeContainer = new AdminCustomizeContainer(appContainer);
-  ReactDOM.render(
-    <Provider inject={[injectableContainers, adminCustomizeContainer]}>
-      <I18nextProvider i18n={i18n}>
-        <Customize />
-      </I18nextProvider>
-    </Provider>,
-    adminCustomizeElem,
-  );
-}
+// create unstated container instance for admin
+const adminCustomizeContainer = new AdminCustomizeContainer(appContainer);
+const adminUsersContainer = new AdminUsersContainer(appContainer);
+const adminExternalAccountsContainer = new AdminExternalAccountsContainer(appContainer);
+const adminMarkDownContainer = new MarkDownSettingContainer(appContainer);
+const adminContainers = {
+  'admin-customize': adminCustomizeContainer,
+  'admin-user-page': adminUsersContainer,
+  'admin-external-account-setting': adminExternalAccountsContainer,
+  'admin-markdown-setting': adminMarkDownContainer,
+  'admin-export-page': websocketContainer,
+};
 
-// render for admin
-const adminUsersElem = document.getElementById('admin-user-page');
-if (adminUsersElem != null) {
-  const adminUsersContainer = new AdminUsersContainer(appContainer);
-  ReactDOM.render(
-    <Provider inject={[injectableContainers, adminUsersContainer]}>
-      <I18nextProvider i18n={i18n}>
-        <UserManagement />
-      </I18nextProvider>
-    </Provider>,
-    adminUsersElem,
-  );
-}
+/**
+ * define components
+ *  key: id of element
+ *  value: React Element
+ */
+const adminComponentMappings = {
+  'admin-customize': <Customize />,
+  'admin-user-page': <UserManagement />,
+  'admin-external-account-setting': <ManageExternalAccount />,
+  'admin-markdown-setting': <MarkdownSetting />,
+  'admin-export-page': <ExportArchiveDataPage crowi={appContainer} />,
+};
 
-const adminExternalAccountsElem = document.getElementById('admin-external-account-setting');
-if (adminExternalAccountsElem != null) {
-  const adminExternalAccountsContainer = new AdminExternalAccountsContainer(appContainer);
-  ReactDOM.render(
-    <Provider inject={[injectableContainers, adminExternalAccountsContainer]}>
-      <I18nextProvider i18n={i18n}>
-        <ManageExternalAccount />
-      </I18nextProvider>
-    </Provider>,
-    adminExternalAccountsElem,
-  );
-}
+
+Object.keys(adminComponentMappings).forEach((key) => {
+  const adminElem = document.getElementById(key);
+  if (adminElem) {
+    ReactDOM.render(
+      <Provider inject={[injectableContainers, adminContainers[key]]}>
+        <I18nextProvider i18n={i18n}>
+          {adminComponentMappings[key]}
+        </I18nextProvider>
+      </Provider>,
+      adminElem,
+    );
+  }
+});
 
 const adminUserGroupDetailElem = document.getElementById('admin-user-group-detail');
 if (adminUserGroupDetailElem != null) {
@@ -208,19 +209,6 @@ if (adminUserGroupDetailElem != null) {
   );
 }
 
-const adminMarkDownSettingElem = document.getElementById('admin-markdown-setting');
-if (adminMarkDownSettingElem != null) {
-  const markDownSettingContainer = new MarkDownSettingContainer(appContainer);
-  ReactDOM.render(
-    <Provider inject={[injectableContainers, markDownSettingContainer]}>
-      <I18nextProvider i18n={i18n}>
-        <MarkdownSetting />
-      </I18nextProvider>
-    </Provider>,
-    adminMarkDownSettingElem,
-  );
-}
-
 const customHeaderEditorElem = document.getElementById('custom-header-editor');
 if (customHeaderEditorElem != null) {
   // get input[type=hidden] element
@@ -249,20 +237,6 @@ if (adminUserGroupPageElem != null) {
   );
 }
 
-const adminExportPageElem = document.getElementById('admin-export-page');
-if (adminExportPageElem != null) {
-  ReactDOM.render(
-    <Provider inject={[appContainer, websocketContainer]}>
-      <I18nextProvider i18n={i18n}>
-        <ExportArchiveDataPage
-          crowi={appContainer}
-        />
-      </I18nextProvider>
-    </Provider>,
-    adminExportPageElem,
-  );
-}
-
 // うわーもうー (commented by Crowi team -- 2018.03.23 Yuki Takei)
 $('a[data-toggle="tab"][href="#revision-history"]').on('show.bs.tab', () => {
   ReactDOM.render(