From c2b61bbb5287786fa2deb31f8676dcd9aef9c726 Mon Sep 17 00:00:00 2001
From: mattyl006 <mattyl@st.amu.edu.pl>
Date: Fri, 14 Oct 2022 10:20:35 +0200
Subject: [PATCH] loading metrics in Leaderboard

---
 src/App.js                                    |  1 -
 .../sections/Leaderboard/Leaderboard.js       | 50 ++++++++++---------
 2 files changed, 27 insertions(+), 24 deletions(-)

diff --git a/src/App.js b/src/App.js
index d101201..a538ed9 100644
--- a/src/App.js
+++ b/src/App.js
@@ -65,7 +65,6 @@ const App = () => {
                     <Route path='/register' element={<Register/>}/>
                     <Route path={`${CHALLENGE_PAGE}/:challengeId`} element={<Challenge/>}/>
                     <Route path={CHALLENGES_PAGE} element={<Challenges/>}/>
-
                     {
                         KeyCloakService.isLoggedIn() ? <>
                             <Route exact path='/' element={<Challenges/>}/>
diff --git a/src/components/sections/Leaderboard/Leaderboard.js b/src/components/sections/Leaderboard/Leaderboard.js
index 52cc9d1..ab6a203 100644
--- a/src/components/sections/Leaderboard/Leaderboard.js
+++ b/src/components/sections/Leaderboard/Leaderboard.js
@@ -83,7 +83,11 @@ const Leaderboard = (props) => {
                 <H2 as='h2' margin='0 0 12px 0'>
                     Leaderboard
                 </H2>
-                <FlexRow width='100%' gap='16px' as='section' margin='16px 0'>
+                <Search searchQueryHandler={tableSearchQueryHandler}/>
+                {/*<FilterBy header='Sort by' options={sortOptions} gridTemplateColumns='auto auto'*/}
+                {/*          option={sortBy} textAlign='center'*/}
+                {/*          alignmentX='center' handler={sortByHandler}/>*/}
+                {!loading ? <FlexRow width='100%' gap='16px' as='section' margin='16px 0'>
                     <H3>
                         Metric:
                     </H3>
@@ -95,8 +99,7 @@ const Leaderboard = (props) => {
                                 {metric}
                             </Filter>);
                     }) : ''}
-                </FlexRow>
-                <Search searchQueryHandler={tableSearchQueryHandler}/>
+                </FlexRow> : ''}
                 <Table challengeName={props.challengeName} loading={loading}
                        renderElements={renderSubmissions} headerElements={headerElements}/>
                 <Pager pageNr={pageNr} width='48px' borderRadius='64px'
@@ -115,30 +118,31 @@ const Leaderboard = (props) => {
                 </H2>
                 <Search searchQueryHandler={tableSearchQueryHandler}/>
                 <FlexRow gap='40px' margin='32px 0'>
-                    <FilterBy header='Sort by' options={sortOptions} gridTemplateColumns='auto auto auto auto'
-                              option={sortBy} textAlign='center'
-                              alignmentX='center' handler={sortByHandler}/>
-                    <FlexColumn gap='32px' as='section'>
-                        <H3>
-                            Metric
-                        </H3>
-                        <FlexRow gap='32px'>
-                            {getPossibleMetrics() ? getPossibleMetrics().map((metric, index) => {
-                                return (
-                                    <Filter option={metricChoose} index={index} borderRadius='4px' width='200px'
-                                            height='40px'
-                                            key={`metric-${index}`} handler={metricChooseHandler}
-                                            id={`metric-${index}`} name={`metric-${index}`}>
-                                        {metric}
-                                    </Filter>);
-                            }) : ''}
-                        </FlexRow>
-                    </FlexColumn>
+                    {!loading ? <>
+                        <FilterBy header='Sort by' options={sortOptions} gridTemplateColumns='auto auto auto auto'
+                                  option={sortBy} textAlign='center'
+                                  alignmentX='center' handler={sortByHandler}/>
+                        <FlexColumn gap='32px' as='section'>
+                            <H3>
+                                Metric
+                            </H3>
+                            <FlexRow gap='32px'>
+                                {getPossibleMetrics() ? getPossibleMetrics().map((metric, index) => {
+                                    return (
+                                        <Filter option={metricChoose} index={index} borderRadius='4px' width='200px'
+                                                height='40px'
+                                                key={`metric-${index}`} handler={metricChooseHandler}
+                                                id={`metric-${index}`} name={`metric-${index}`}>
+                                            {metric}
+                                        </Filter>);
+                                }) : ''}
+                            </FlexRow>
+                        </FlexColumn>
+                    </> : ''}
                 </FlexRow>
                 <Table challengeName={props.challengeName} loading={loading}
                        renderElements={renderSubmissions}
                        headerElements={headerElements}/>
-
                 <Pager pageNr={pageNr} width='72px' borderRadius='64px'
                        pages={CALC_PAGES(entries ? entries : [])}
                        nextPage={nextPage} previousPage={previousPage}