Integrate ReactDOM.render

src/client/js/app.js

@@ -101,6 +101,9 @@ let componentMappings = {
   'user-created-list': <RecentCreated />,
   'user-draft-list': <MyDraftList />,
 
+  'admin-user-page': <UserPage />,
+  'admin-full-text-search-management': <FullTextSearchManagement />,
+
   'staff-credit': <StaffCredit />,
 };
 
@@ -177,19 +180,6 @@ if (customHeaderEditorElem != null) {
   );
 }
 
-const adminUserPageElem = document.getElementById('admin-user-page');
-if (adminUserPageElem != null) {
-
-  ReactDOM.render(
-    <Provider>
-      <I18nextProvider i18n={i18n}>
-        <UserPage />
-      </I18nextProvider>
-    </Provider>,
-    adminUserPageElem,
-  );
-}
-
 const adminUserGroupPageElem = document.getElementById('admin-user-group-page');
 if (adminUserGroupPageElem != null) {
   const isAclEnabled = adminUserGroupPageElem.getAttribute('data-isAclEnabled') === 'true';
@@ -215,18 +205,6 @@ if (adminImporterElem != null) {
   );
 }
 
-const adminFullTextSearchManagementElem = document.getElementById('admin-full-text-search-management');
-if (adminFullTextSearchManagementElem != null) {
-
-  ReactDOM.render(
-    <Provider inject={[websocketContainer]}>
-      <I18nextProvider i18n={i18n}>
-        <FullTextSearchManagement />
-      </I18nextProvider>
-    </Provider>,
-    adminFullTextSearchManagementElem,
-  );
-}
 
 // うわーもうー (commented by Crowi team -- 2018.03.23 Yuki Takei)
 $('a[data-toggle="tab"][href="#revision-history"]').on('show.bs.tab', () => {

src/client/js/components/Admin/Users/InviteUserControl.jsx

@@ -0,0 +1,33 @@
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import { withTranslation } from 'react-i18next';
+
+import { createSubscribedElement } from '../../UnstatedUtils';
+import AppContainer from '../../../services/AppContainer';
+
+class InviteUserControl extends React.Component {
+
+  render() {
+    const { t } = this.props;
+
+    return (
+      <Fragment>
+        <button type="button" data-toggle="collapse" className="btn btn-default">
+          { t('user_management.invite_users') }
+        </button>
+      </Fragment>
+    );
+  }
+
+}
+
+const InviteUserControlWrapper = (props) => {
+  return createSubscribedElement(InviteUserControl, props, [AppContainer]);
+};
+
+InviteUserControl.propTypes = {
+  t: PropTypes.func.isRequired, // i18next
+  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
+};
+
+export default withTranslation()(InviteUserControlWrapper);

src/client/js/components/Admin/Users/NewUsers.jsx

@@ -1,39 +0,0 @@
-import React, { Fragment } from 'react';
-import PropTypes from 'prop-types';
-import { withTranslation } from 'react-i18next';
-
-import { createSubscribedElement } from '../../UnstatedUtils';
-import AppContainer from '../../../services/AppContainer';
-
-class NewUsers extends React.Component {
-
-  render() {
-    const { t } = this.props;
-
-    return (
-      <Fragment>
-        <p>
-          <button type="button" data-toggle="collapse" className="btn btn-default">
-            { t('user_management.invite_users') }
-          </button>
-          <a className="btn btn-default btn-outline ml-2" href="/admin/users/external-accounts">
-            <i className="icon-user-follow" aria-hidden="true"></i>
-            { t('user_management.external_account') }
-          </a>
-        </p>
-      </Fragment>
-    );
-  }
-
-}
-
-const NewUsersWrapper = (props) => {
-  return createSubscribedElement(NewUsers, props, [AppContainer]);
-};
-
-NewUsers.propTypes = {
-  t: PropTypes.func.isRequired, // i18next
-  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
-};
-
-export default withTranslation()(NewUsersWrapper);

src/client/js/components/Admin/Users/TableUserList.jsx → src/client/js/components/Admin/Users/UserTable.jsx

@@ -5,7 +5,7 @@ import { withTranslation } from 'react-i18next';
 import { createSubscribedElement } from '../../UnstatedUtils';
 import AppContainer from '../../../services/AppContainer';
 
-class TableUserList extends React.Component {
+class UserTable extends React.Component {
 
 
   render() {
@@ -35,13 +35,13 @@ class TableUserList extends React.Component {
 
 }
 
-const TableUserListWrapper = (props) => {
-  return createSubscribedElement(TableUserList, props, [AppContainer]);
+const UserTableWrapper = (props) => {
+  return createSubscribedElement(UserTable, props, [AppContainer]);
 };
 
-TableUserList.propTypes = {
+UserTable.propTypes = {
   t: PropTypes.func.isRequired, // i18next
   appContainer: PropTypes.instanceOf(AppContainer).isRequired,
 };
 
-export default withTranslation()(TableUserListWrapper);
+export default withTranslation()(UserTableWrapper);

src/client/js/components/Admin/Users/Users.jsx

@@ -1,8 +1,9 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
+import { withTranslation } from 'react-i18next';
 
-import NewUsers from './NewUsers';
-import TableUserList from './TableUserList';
+import InviteUserControl from './InviteUserControl';
+import UserTable from './UserTable';
 
 import AppContainer from '../../../services/AppContainer';
 import { createSubscribedElement } from '../../UnstatedUtils';
@@ -15,11 +16,18 @@ class UserPage extends React.Component {
   }
 
   render() {
+    const { t } = this.props;
 
     return (
       <Fragment>
-        <NewUsers />
-        <TableUserList />
+        <p>
+          <InviteUserControl />
+          <a className="btn btn-default btn-outline ml-2" href="/admin/users/external-accounts">
+            <i className="icon-user-follow" aria-hidden="true"></i>
+            { t('user_management.external_account') }
+          </a>
+        </p>
+        <UserTable />
       </Fragment>
     );
   }
@@ -31,7 +39,8 @@ const UserPageWrapper = (props) => {
 };
 
 UserPage.propTypes = {
+  t: PropTypes.func.isRequired, // i18next
   appContainer: PropTypes.instanceOf(AppContainer).isRequired,
 };
 
-export default UserPageWrapper;
+export default withTranslation()(UserPageWrapper);