WIP: impl 2 buttons to SortIcons

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

@@ -1,29 +1,31 @@
 import React from 'react';
-// import PropTypes from 'prop-types';
+import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
+
 // import AdminUsersContainer from '../../../services/AdminUsersContainer';
 // import UserTable from './UserTable';
 
 const SortIcons = (props) => {
-  const { isSelected } = props;
 
   return (
-    <a
-      className={`fa ${props.isSelected ? 'fa-chevron-down' : 'fa-chevron-up'}`}
-      aria-hidden="true"
-      // onClick={props.onClick}
-    />
-
+    <div className="d-flex flex-column text-center">
+      <a
+        className={`fa ${props.isSelected ? 'fa-chevron-up' : 'fa-angle-up'}`}
+        aria-hidden="true"
+        onClick={() => props.onClick('asc')}
+      />
+      <a
+        className={`fa ${props.isSelected ? 'fa-chevron-down' : 'fa-angle-down'}`}
+        aria-hidden="true"
+        onClick={() => props.onClick('desc')}
+      />
+    </div>
   );
 };
 
 SortIcons.propTypes = {
-  // t: PropTypes.func.isRequired, // i18next
-
-  // checked: PropTypes.bool.isRequired,
-  // onChange: PropTypes.func.isRequired,
-  // event: PropTypes.string.isRequired,
-  // children: PropTypes.object.isRequired,
+  onClick: PropTypes.func.isRequired,
+  isSelected: PropTypes.bool.isRequired,
 };
 
 

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

@@ -9,6 +9,7 @@ import UserMenu from './UserMenu';
 import { createSubscribedElement } from '../../UnstatedUtils';
 import AppContainer from '../../../services/AppContainer';
 import AdminUsersContainer from '../../../services/AdminUsersContainer';
+import SortIcons from './SortIcons';
 
 class UserTable extends React.Component {
 
@@ -102,6 +103,10 @@ class UserTable extends React.Component {
     }
   }
 
+  onSortIconsClicked(order) {
+    console.log(order);
+  }
+
   render() {
     const { t, adminUsersContainer } = this.props;
 
@@ -116,7 +121,12 @@ class UserTable extends React.Component {
                   <div className="mr-3">
                     {t('status')}
                   </div>
-                  { this.renderSortIcon('status') }
+                  <SortIcons
+                    sortColumns="status"
+                    isSelected={adminUsersContainer.state.sort === 'status'}
+                    // eslint-disable-next-line react/jsx-no-bind
+                    onClick={this.onSortIconsClicked}
+                  />
                 </div>
               </th>
               <th>
@@ -124,7 +134,10 @@ class UserTable extends React.Component {
                   <div className="mr-3">
                     <code>username</code>
                   </div>
-                  { this.renderSortIcon('username') }
+                  {/* <SortIcons
+                    isSelected={adminUsersContainer.state.sort === 'username'}
+                  /> */}
+                  {/* { this.renderSortIcon('username') } */}
                 </div>
               </th>
               <th>
@@ -132,7 +145,10 @@ class UserTable extends React.Component {
                   <div className="mr-3">
                     {t('Name')}
                   </div>
-                  { this.renderSortIcon('name')}
+                  {/* <SortIcons
+                    isSelected={adminUsersContainer.state.sort === 'name'}
+                  /> */}
+                  {/* { this.renderSortIcon('name')} */}
                 </div>
               </th>
               <th>
@@ -140,7 +156,10 @@ class UserTable extends React.Component {
                   <div className="mr-3">
                     {t('Email')}
                   </div>
-                  { this.renderSortIcon('email')}
+                  {/* <SortIcons
+                    isSelected={adminUsersContainer.state.sort === 'email'}
+                  /> */}
+                  {/* { this.renderSortIcon('email')} */}
                 </div>
               </th>
               <th width="100px">
@@ -148,7 +167,10 @@ class UserTable extends React.Component {
                   <div className="mr-3">
                     {t('Created')}
                   </div>
-                  { this.renderSortIcon('createdAt')}
+                  {/* <SortIcons
+                    isSelected={adminUsersContainer.state.sort === 'createdAt'}
+                  /> */}
+                  {/* { this.renderSortIcon('createdAt')} */}
                 </div>
               </th>
               <th width="150px">
@@ -156,7 +178,10 @@ class UserTable extends React.Component {
                   <div className="mr-3">
                     {t('Last_Login')}
                   </div>
-                  { this.renderSortIcon('lastLoginAt')}
+                  {/* <SortIcons
+                    isSelected={adminUsersContainer.state.sort === 'lastLoginAt'}
+                  /> */}
+                  {/* { this.renderSortIcon('lastLoginAt')} */}
                 </div>
               </th>
               <th width="70px"></th>
@@ -193,9 +218,6 @@ class UserTable extends React.Component {
 
 }
 
-const UserTableWrapper = (props) => {
-  return createSubscribedElement(UserTable, props, [AppContainer, AdminUsersContainer]);
-};
 
 UserTable.propTypes = {
   t: PropTypes.func.isRequired, // i18next
@@ -204,4 +226,8 @@ UserTable.propTypes = {
 
 };
 
+const UserTableWrapper = (props) => {
+  return createSubscribedElement(UserTable, props, [AppContainer, AdminUsersContainer]);
+};
+
 export default withTranslation()(UserTableWrapper);