added sorting function when buttons are clicked

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

@@ -88,9 +88,25 @@ class UserTable extends React.Component {
                   {t('status')}
                   <div className="d-flex flex-column text-center">
                     <Fragment>
-                      <a className="fa fa-angle-up" aria-hidden="true" onClick={() => adminUsersContainer.onClickSortAsc('status')}></a>
-                      <a className="fa fa-angle-down" aria-hidden="true" onClick={() => adminUsersContainer.onClickSortDesc('status')}></a>
+                      <a
+                        className={`fa ${(
+                          adminUsersContainer.state.sort === 'status')
+                          && (adminUsersContainer.state.sortOrder === 'asc') ? 'fa-chevron-up' : 'fa-angle-up'}`}
+                        aria-hidden="true"
+                        onClick={() => adminUsersContainer.onClickSortAsc('status')}
+                      >
+                      </a>
+                      <a
+                        className={`fa ${(
+                          adminUsersContainer.state.sort === 'status')
+                          && (adminUsersContainer.state.sortOrder === 'desc') ? 'fa-chevron-down' : 'fa-angle-down'}`}
+                        aria-hidden="true"
+                        onClick={() => adminUsersContainer.onClickSortDesc('status')}
+                      >
+                      </a>
                     </Fragment>
+                    {/* <a className={`fa ${this.sortByAscend('status') ? 'fa-chevron-down' : 'fa-angle-down' }`}></a> */}
+                    {/* <a className={`fa ${true ? 'fa-chevron-down' : 'fa-angle-down' }`} onClick={function()}></a> */}
                   </div>
                 </div>
               </th>
@@ -99,8 +115,24 @@ class UserTable extends React.Component {
                   <code>username</code>
                   <div className="d-flex flex-column text-center">
                     <Fragment>
-                      <a className="fa fa-angle-up" aria-hidden="true" onClick={() => adminUsersContainer.onClickSortAsc('username')}></a>
-                      <a className="fa fa-angle-down" aria-hidden="true" onClick={() => adminUsersContainer.onClickSortDesc('username')}></a>
+                      <a
+                        className={`fa ${(
+                          adminUsersContainer.state.sort === 'username')
+                          && (adminUsersContainer.state.sortOrder === 'asc') ? 'fa-chevron-up' : 'fa-angle-up'}`}
+                        aria-hidden="true"
+                        onClick={() => adminUsersContainer.onClickSortAsc('username')}
+                      >
+                      </a>
+                      <a
+                        className={`fa ${(
+                          adminUsersContainer.state.sort === 'username')
+                          && (adminUsersContainer.state.sortOrder === 'desc') ? 'fa-chevron-down' : 'fa-angle-down'}`}
+                        aria-hidden="true"
+                        onClick={() => adminUsersContainer.onClickSortDesc('username')}
+                      >
+                      </a>
+                      {/* <a className="fa fa-angle-up" aria-hidden="true" onClick={() => adminUsersContainer.onClickSortAsc('username')}></a>
+                      <a className="fa fa-angle-down" aria-hidden="true" onClick={() => adminUsersContainer.onClickSortDesc('username')}></a> */}
                     </Fragment>
                   </div>
                 </div>
@@ -110,8 +142,24 @@ class UserTable extends React.Component {
                   {t('Name')}
                   <div className="d-flex flex-column text-center">
                     <Fragment>
-                      <a className="fa fa-angle-up" aria-hidden="true" onClick={() => adminUsersContainer.onClickSortAsc('name')}></a>
-                      <a className="fa fa-angle-down" aria-hidden="true" onClick={() => adminUsersContainer.onClickSortDesc('name')}></a>
+                      <a
+                        className={`fa ${(
+                          adminUsersContainer.state.sort === 'name')
+                          && (adminUsersContainer.state.sortOrder === 'asc') ? 'fa-chevron-up' : 'fa-angle-up'}`}
+                        aria-hidden="true"
+                        onClick={() => adminUsersContainer.onClickSortAsc('name')}
+                      >
+                      </a>
+                      <a
+                        className={`fa ${(
+                          adminUsersContainer.state.sort === 'name')
+                          && (adminUsersContainer.state.sortOrder === 'desc') ? 'fa-chevron-down' : 'fa-angle-down'}`}
+                        aria-hidden="true"
+                        onClick={() => adminUsersContainer.onClickSortDesc('name')}
+                      >
+                      </a>
+                      {/* <a className="fa fa-angle-up" aria-hidden="true" onClick={() => adminUsersContainer.onClickSortAsc('name')}></a>
+                      <a className="fa fa-angle-down" aria-hidden="true" onClick={() => adminUsersContainer.onClickSortDesc('name')}></a> */}
                     </Fragment>
                   </div>
                 </div>
@@ -121,8 +169,24 @@ class UserTable extends React.Component {
                   {t('Email')}
                   <div className="d-flex flex-column text-center">
                     <Fragment>
-                      <a className="fa fa-angle-up" aria-hidden="true" onClick={() => adminUsersContainer.onClickSortAsc('email')}></a>
-                      <a className="fa fa-angle-down" aria-hidden="true" onClick={() => adminUsersContainer.onClickSortDesc('email')}></a>
+                      <a
+                        className={`fa ${(
+                          adminUsersContainer.state.sort === 'email')
+                          && (adminUsersContainer.state.sortOrder === 'asc') ? 'fa-chevron-up' : 'fa-angle-up'}`}
+                        aria-hidden="true"
+                        onClick={() => adminUsersContainer.onClickSortAsc('email')}
+                      >
+                      </a>
+                      <a
+                        className={`fa ${(
+                          adminUsersContainer.state.sort === 'email')
+                          && (adminUsersContainer.state.sortOrder === 'desc') ? 'fa-chevron-down' : 'fa-angle-down'}`}
+                        aria-hidden="true"
+                        onClick={() => adminUsersContainer.onClickSortDesc('email')}
+                      >
+                      </a>
+                      {/* <a className="fa fa-angle-up" aria-hidden="true" onClick={() => adminUsersContainer.onClickSortAsc('email')}></a>
+                      <a className="fa fa-angle-down" aria-hidden="true" onClick={() => adminUsersContainer.onClickSortDesc('email')}></a> */}
                     </Fragment>
                   </div>
                 </div>
@@ -132,8 +196,24 @@ class UserTable extends React.Component {
                   {t('Created')}
                   <div className="d-flex flex-column text-center">
                     <Fragment>
-                      <a className="fa fa-angle-up" aria-hidden="true" onClick={() => adminUsersContainer.onClickSortAsc('createdAt')}></a>
-                      <a className="fa fa-angle-down" aria-hidden="true" onClick={() => adminUsersContainer.onClickSortDesc('createdAt')}></a>
+                      <a
+                        className={`fa ${(
+                          adminUsersContainer.state.sort === 'createdAt')
+                          && (adminUsersContainer.state.sortOrder === 'asc') ? 'fa-chevron-up' : 'fa-angle-up'}`}
+                        aria-hidden="true"
+                        onClick={() => adminUsersContainer.onClickSortAsc('createdAt')}
+                      >
+                      </a>
+                      <a
+                        className={`fa ${(
+                          adminUsersContainer.state.sort === 'createdAt')
+                          && (adminUsersContainer.state.sortOrder === 'desc') ? 'fa-chevron-down' : 'fa-angle-down'}`}
+                        aria-hidden="true"
+                        onClick={() => adminUsersContainer.onClickSortDesc('createdAt')}
+                      >
+                      </a>
+                      {/* <a className="fa fa-angle-up" aria-hidden="true" onClick={() => adminUsersContainer.onClickSortAsc('createdAt')}></a>
+                      <a className="fa fa-angle-down" aria-hidden="true" onClick={() => adminUsersContainer.onClickSortDesc('createdAt')}></a> */}
                     </Fragment>
                   </div>
                 </div>
@@ -143,8 +223,24 @@ class UserTable extends React.Component {
                   {t('Last_Login')}
                   <div className="d-flex flex-column text-center">
                     <Fragment>
-                      <a className="fa fa-angle-up" aria-hidden="true" onClick={() => adminUsersContainer.onClickSortAsc('lastLoginAt')}></a>
-                      <a className="fa fa-angle-down" aria-hidden="true" onClick={() => adminUsersContainer.onClickSortDesc('lastLoginAt')}></a>
+                      <a
+                        className={`fa ${(
+                          adminUsersContainer.state.sort === 'lastLoginAt')
+                          && (adminUsersContainer.state.sortOrder === 'asc') ? 'fa-chevron-up' : 'fa-angle-up'}`}
+                        aria-hidden="true"
+                        onClick={() => adminUsersContainer.onClickSortAsc('lastLoginAt')}
+                      >
+                      </a>
+                      <a
+                        className={`fa ${(
+                          adminUsersContainer.state.sort === 'lastLoginAt')
+                          && (adminUsersContainer.state.sortOrder === 'desc') ? 'fa-chevron-down' : 'fa-angle-down'}`}
+                        aria-hidden="true"
+                        onClick={() => adminUsersContainer.onClickSortDesc('lastLoginAt')}
+                      >
+                      </a>
+                      {/* <a className="fa fa-angle-up" aria-hidden="true" onClick={() => adminUsersContainer.onClickSortAsc('lastLoginAt')}></a>
+                      <a className="fa fa-angle-down" aria-hidden="true" onClick={() => adminUsersContainer.onClickSortDesc('lastLoginAt')}></a> */}
                     </Fragment>
                   </div>
                 </div>

src/client/js/services/AdminUsersContainer.js

@@ -17,7 +17,7 @@ export default class AdminUsersContainer extends Container {
 
     this.state = {
       users: [],
-      sort: 'status', // 何をソートするか
+      sort: 'id', // 何をソートするか
       sortOrder: 'asc', // 昇順か降順か
       isPasswordResetModalShown: false,
       isUserInviteModalShown: false,
@@ -67,46 +67,46 @@ export default class AdminUsersContainer extends Container {
     }
   }
 
-  clearStatusList() {
+  async clearStatusList() {
     const { selectedStatusList } = this.state;
     selectedStatusList.clear();
-    this.setState({ selectedStatusList });
+    await this.setState({ selectedStatusList });
   }
 
-  addStatusToList(statusType) {
+  async addStatusToList(statusType) {
     const { selectedStatusList } = this.state;
     selectedStatusList.add(statusType);
-    this.setState({ selectedStatusList });
+    await this.setState({ selectedStatusList });
     this.retrieveUsersByPagingNum(1);
   }
 
-  deleteStatusFromList(statusType) {
+  async deleteStatusFromList(statusType) {
     const { selectedStatusList } = this.state;
     selectedStatusList.delete(statusType);
-    this.setState({ selectedStatusList });
+    await this.setState({ selectedStatusList });
     this.retrieveUsersByPagingNum(1);
   }
 
   // Input Serch Text
-  handleChangeSearchText(searchText) {
-    this.setState({ searchText });
+  async handleChangeSearchText(searchText) {
+    await this.setState({ searchText });
     this.retrieveUsersByPagingNum(1);
   }
 
-  clearSearchText() {
-    this.setState({ searchText: '' });
+  async clearSearchText() {
+    await this.setState({ searchText: '' });
   }
 
   // sorting
-  onClickSortAsc(sort) {
-    this.setState({ sort });
-    this.setState({ sortOrder: 'asc' });
+  async onClickSortAsc(sort) {
+    await this.setState({ sort });
+    await this.setState({ sortOrder: 'asc' });
     this.retrieveUsersByPagingNum(1);
   }
 
-  onClickSortDesc(sort) {
-    this.setState({ sort });
-    this.setState({ sortOrder: 'desc' });
+  async onClickSortDesc(sort) {
+    await this.setState({ sort });
+    await this.setState({ sortOrder: 'desc' });
     this.retrieveUsersByPagingNum(1);
   }