WIP: add props 'isAsc' to SortIcons

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

@@ -7,15 +7,17 @@ import { withTranslation } from 'react-i18next';
 
 const SortIcons = (props) => {
 
+  const { isSelected, isAsc } = props;
+
   return (
     <div className="d-flex flex-column text-center">
       <a
-        className={`fa ${props.isSelected ? 'fa-chevron-up' : 'fa-angle-up'}`}
+        className={`fa ${isSelected && isAsc ? 'fa-chevron-up' : 'fa-angle-up'}`}
         aria-hidden="true"
         onClick={() => props.onClick('asc')}
       />
       <a
-        className={`fa ${props.isSelected ? 'fa-chevron-down' : 'fa-angle-down'}`}
+        className={`fa ${isSelected && !isAsc ? 'fa-chevron-down' : 'fa-angle-down'}`}
         aria-hidden="true"
         onClick={() => props.onClick('desc')}
       />
@@ -26,6 +28,7 @@ const SortIcons = (props) => {
 SortIcons.propTypes = {
   onClick: PropTypes.func.isRequired,
   isSelected: PropTypes.bool.isRequired,
+  isAsc: PropTypes.bool.isRequired,
 };
 
 

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

@@ -115,6 +115,8 @@ class UserTable extends React.Component {
   render() {
     const { t, adminUsersContainer } = this.props;
 
+    const isCurrentSortOrderAsc = adminUsersContainer.state.sortOrder === 'asc';
+
     return (
       <Fragment>
         <table className="table table-default table-bordered table-user-list">
@@ -127,8 +129,8 @@ class UserTable extends React.Component {
                     {t('status')}
                   </div>
                   <SortIcons
-                    sortColumns="status"
                     isSelected={adminUsersContainer.state.sort === 'status'}
+                    isAsc={isCurrentSortOrderAsc}
                     // eslint-disable-next-line react/jsx-no-bind
                     onClick={(sortOrder) => {
                       console.log('arrow function', sortOrder);