filter icon which rotate init

src/assets/filter_direction.svg

@@ -1,6 +1,5 @@
-<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
-<line y1="0.5" x2="10" y2="0.5" stroke="#343434"/>
+<line y1="7" x2="4" y2="7" stroke="#343434" stroke-width="2"/>
-<line y1="9.5" x2="4" y2="9.5" stroke="#343434"/>
+<line y1="4" x2="6" y2="4" stroke="#343434" stroke-width="2"/>
-<line y1="6.5" x2="6" y2="6.5" stroke="#343434"/>
+<line y1="1" x2="8" y2="1" stroke="#343434" stroke-width="2"/>
-<line y1="3.5" x2="8" y2="3.5" stroke="#343434"/>
 </svg>

src/components/elements/ColumnFilterIcon.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import {Svg} from '../../utils/containers';
+import arrow from '../../assets/arrow.svg';
+import filterIco from '../../assets/filter_direction.svg';
+import theme from '../../utils/theme';
+
+const ColumnFilterIcon = (props) => {
+    const renderSecondIcon = () => {
+        if (props.index === props.active) {
+            return (
+                <Svg width='8px' src={filterIco} backgroundColor={theme.colors.dark}
+                     margin='0 0 0 2px' rotate={props.rotateIcon ? '0' : '180deg'}/>
+            );
+        } else {
+            return (
+                <Svg width='8px' src={arrow} backgroundColor={theme.colors.dark}
+                     margin='0 0 2px 0'/>
+            );
+        }
+    };
+
+    return (
+        <>
+            <Svg width='8px' rotate='180deg' src={arrow}
+                 backgroundColor={theme.colors.dark} margin='2px 0 0 0'/>
+            {renderSecondIcon()}
+        </>
+    );
+};
+
+export default ColumnFilterIcon;

src/components/elements/Table.js

@@ -1,11 +1,11 @@
 import React from 'react';
-import {FlexColumn, FlexRow, Grid, Svg} from '../../utils/containers';
+import {FlexColumn, FlexRow, Grid} from '../../utils/containers';
 import Media from 'react-media';
 import theme from '../../utils/theme';
 import {ELEMENTS_PER_PAGE} from '../../utils/globals';
 import {Body, Medium} from '../../utils/fonts';
-import arrow from '../../assets/arrow.svg';
 import styled from 'styled-components';
+import ColumnFilterIcon from './ColumnFilterIcon';
 
 const Line = styled(FlexRow)`
   position: absolute;
@@ -20,6 +20,8 @@ const Line = styled(FlexRow)`
 const Table = (props) => {
     const [, updateState] = React.useState();
     const forceUpdate = React.useCallback(() => updateState({}), []);
+    const [activeIcon, setActiveIcon] = React.useState(null);
+    const [rotateActiveIcon, setRotateActiveIcon] = React.useState(false);
 
     const mobileRender = () => {
         return (
@@ -71,7 +73,14 @@ const Table = (props) => {
                             return (
                                 <FlexRow key={`table-header-${i}`} alignmentX='flex-start' as='td'
                                          onClick={() => {
-                                             props.sortByUpdate(elem);
+                                             if (activeIcon === i) {
+                                                 let newRotateActiveIcon = !rotateActiveIcon;
+                                                 setRotateActiveIcon(newRotateActiveIcon);
+                                             } else {
+                                                 setRotateActiveIcon(false);
+                                             }
+                                             setActiveIcon(i);
+                                             props.sortByUpdate(elem, i);
                                              forceUpdate();
                                          }}>
                                     <Medium textAlign={elem === 'submitter' ? 'left' : 'right'}
@@ -80,12 +89,8 @@ const Table = (props) => {
                                         {elem}
                                     </Medium>
                                     {elem !== '#' ?
-                                        <>
+                                        <ColumnFilterIcon index={i} active={activeIcon} rotateIcon={rotateActiveIcon}/>
-                                            <Svg width='8px' rotate='180deg' src={arrow}
+                                        : ''}
-                                                 backgroundColor={theme.colors.dark} margin='2px 0 0 0'/>
-                                            <Svg width='8px' src={arrow} backgroundColor={theme.colors.dark}
-                                                 margin='0 0 2px 0'/>
-                                        </> : ''}
                                 </FlexRow>
                             );
                         })}

src/components/sections/Leaderboard/Leaderboard.js

@@ -22,6 +22,8 @@ const Leaderboard = (props) => {
     const [whenSorted, setWhenSorted] = React.useState(false);
     const [scoreSorted, setScoreSorted] = React.useState(false);
 
+    // const [columnIcons, setColumnIcons] = React.useState([]);
+
     React.useEffect(() => {
         challengeDataRequest(props.challengeName);
     }, [props.challengeName]);
@@ -97,19 +99,19 @@ const Leaderboard = (props) => {
                 break;
             case 'entries':
                 if (entriesSorted) {
-                    newEntries = newEntries.sort((a, b) => a.times - b.times);
+                    newEntries = newEntries.sort((a, b) => b.times - a.times);
                     setEntriesSorted(false);
                 } else {
-                    newEntries = newEntries.sort((a, b) => b.times - a.times);
+                    newEntries = newEntries.sort((a, b) => a.times - b.times);
                     setEntriesSorted(true);
                 }
                 break;
             case 'when':
                 if (whenSorted) {
-                    newEntries = newEntries.sort((a, b) => (a.when > b.when) ? 1 : ((b.when > a.when) ? -1 : 0));
+                    newEntries = newEntries.sort((a, b) => (a.when < b.when) ? 1 : ((b.when < a.when) ? -1 : 0));
                     setWhenSorted(false);
                 } else {
-                    newEntries = newEntries.sort((a, b) => (a.when < b.when) ? 1 : ((b.when < a.when) ? -1 : 0));
+                    newEntries = newEntries.sort((a, b) => (a.when > b.when) ? 1 : ((b.when > a.when) ? -1 : 0));
                     setWhenSorted(true);
                 }
                 break;

src/components/sections/MyEntries.js

@@ -69,31 +69,30 @@ const MyEntries = (props) => {
 
     }
 
-    const sortByUpdate = (elem) => {
+    const sortByUpdate = (elem, i) => {
         let newEntries = myEntries;
         switch (elem) {
             case '#':
                 break;
             case 'when':
                 if (whenSorted) {
-                    newEntries = newEntries.sort((a, b) => (a.when > b.when) ? 1 : ((b.when > a.when) ? -1 : 0));
+                    newEntries = newEntries.sort((a, b) => (a.when < b.when) ? 1 : ((b.when < a.when) ? -1 : 0));
                     setWhenSorted(false);
                 } else {
-                    newEntries = newEntries.sort((a, b) => (a.when < b.when) ? 1 : ((b.when < a.when) ? -1 : 0));
+                    newEntries = newEntries.sort((a, b) => (a.when > b.when) ? 1 : ((b.when > a.when) ? -1 : 0));
                     setWhenSorted(true);
                 }
                 break;
             default:
                 if (scoreSorted) {
-                    newEntries = newEntries.sort((a, b) => b.evaluations[elem] - a.evaluations[elem]);
+                    newEntries = newEntries.sort((a, b) => a.evaluations[elem] - b.evaluations[elem]);
                     setScoreSorted(false);
                 } else {
-                    newEntries = newEntries.sort((a, b) => a.evaluations[elem] - b.evaluations[elem]);
+                    newEntries = newEntries.sort((a, b) => b.evaluations[elem] - a.evaluations[elem]);
                     setScoreSorted(true);
                 }
                 break;
         }
-        console.log(newEntries);
         setMyEntries(newEntries);
     };