From 4334e4dfcc636faf77a9cc4cd14d373dbcf80949 Mon Sep 17 00:00:00 2001 From: mattyl006 Date: Wed, 9 Nov 2022 19:19:13 +0100 Subject: [PATCH] filter icon which rotate init --- src/assets/filter_direction.svg | 9 +++--- src/components/elements/ColumnFilterIcon.js | 31 +++++++++++++++++++ src/components/elements/Table.js | 23 ++++++++------ .../sections/Leaderboard/Leaderboard.js | 10 +++--- src/components/sections/MyEntries.js | 11 +++---- 5 files changed, 60 insertions(+), 24 deletions(-) create mode 100644 src/components/elements/ColumnFilterIcon.js diff --git a/src/assets/filter_direction.svg b/src/assets/filter_direction.svg index 5e232d0..60ddaab 100644 --- a/src/assets/filter_direction.svg +++ b/src/assets/filter_direction.svg @@ -1,6 +1,5 @@ - - - - - + + + + diff --git a/src/components/elements/ColumnFilterIcon.js b/src/components/elements/ColumnFilterIcon.js new file mode 100644 index 0000000..49418e7 --- /dev/null +++ b/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 ( + + ); + } else { + return ( + + ); + } + }; + + return ( + <> + + {renderSecondIcon()} + + ); +}; + +export default ColumnFilterIcon; \ No newline at end of file diff --git a/src/components/elements/Table.js b/src/components/elements/Table.js index 15f3b0f..eed6ee0 100644 --- a/src/components/elements/Table.js +++ b/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 ( { - props.sortByUpdate(elem); + if (activeIcon === i) { + let newRotateActiveIcon = !rotateActiveIcon; + setRotateActiveIcon(newRotateActiveIcon); + } else { + setRotateActiveIcon(false); + } + setActiveIcon(i); + props.sortByUpdate(elem, i); forceUpdate(); }}> { {elem} {elem !== '#' ? - <> - - - : ''} + + : ''} ); })} diff --git a/src/components/sections/Leaderboard/Leaderboard.js b/src/components/sections/Leaderboard/Leaderboard.js index 7cc1234..70774bf 100644 --- a/src/components/sections/Leaderboard/Leaderboard.js +++ b/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; diff --git a/src/components/sections/MyEntries.js b/src/components/sections/MyEntries.js index 4fab9b7..67fce0a 100644 --- a/src/components/sections/MyEntries.js +++ b/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); };