correct search in Leaderboard and implement search in MyEntries

.env

@@ -1,3 +1,3 @@
 REACT_APP_KC_URL=https://auth-dev.csi.wmi.amu.edu.pl/
 REACT_APP_KC_REALM=gonito-dev
-REACT_APP_KC_CLIENT_ID=gonito-dev-localhost
+REACT_APP_KC_CLIENT_ID=gonito-dev-heroku

src/api/getMyEntries.js

@@ -1,7 +1,7 @@
 import {API} from '../utils/globals';
 import KeyCloakService from '../services/KeyCloakService';
 
-const getMyEntries = (challengeName, setDataOriginalState, setDataState, setLoadingState, setScoreSorted) => {
+const getMyEntries = (challengeName, setDataOriginalState, setDataStateForSearch, setDataState, setLoadingState, setScoreSorted) => {
     fetch(`${API}/challenge-my-submissions/${challengeName}`, {
         headers: {'Authorization': `Bearer ${KeyCloakService.getToken()}`}
     })
@@ -47,6 +47,7 @@ const getMyEntries = (challengeName, setDataOriginalState, setDataState, setLoad
                 initSetScoreSorted.push(false);
             }
             setScoreSorted(initSetScoreSorted);
+            setDataStateForSearch(result);
             setDataState(result);
             setLoadingState(false);
         });

src/components/specific_challenge/Leaderboard/Leaderboard.js

@@ -6,7 +6,7 @@ import {H2} from '../../../utils/fonts';
 import Table from '../Table';
 import PropsTypes from 'prop-types';
 import getChallengeLeaderboard from '../../../api/getChallengeLeaderboard';
-import _tableSearchQueryHandler from './_tableSearchQueryHandler';
+import leaderboardSearchQueryHandler from './leaderboardSearchQueryHandler';
 import {CALC_PAGES, EVALUATIONS_FORMAT, RENDER_WHEN} from '../../../utils/globals';
 import Search from '../../generic/Search';
 import Pager from '../../generic/Pager';
@@ -22,8 +22,6 @@ 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]);
@@ -43,8 +41,8 @@ const Leaderboard = (props) => {
         }
     };
 
-    const tableSearchQueryHandler = (event) => {
+    const searchQueryHandler = (event) => {
-        _tableSearchQueryHandler(event, entriesFromApi, setPageNr, setEntries);
+        leaderboardSearchQueryHandler(event, entriesFromApi, setPageNr, setEntries);
     };
 
     const nextPage = () => {
@@ -135,7 +133,7 @@ const Leaderboard = (props) => {
                 <H2 as='h2' margin='0 0 12px 0'>
                     Leaderboard
                 </H2>
-                <Search searchQueryHandler={tableSearchQueryHandler}/>
+                <Search searchQueryHandler={searchQueryHandler}/>
                 <Table challengeName={props.challengeName} loading={loading}
                        headerElements={['#', 'submitter', 'result', 'entries', 'when']}
                        pageNr={pageNr} submissions={entries} sortByUpdate={sortByUpdate}/>
@@ -155,7 +153,7 @@ const Leaderboard = (props) => {
                 </H2>
                 {!loading ?
                     <>
-                        <Search searchQueryHandler={tableSearchQueryHandler}/>
+                        <Search searchQueryHandler={searchQueryHandler}/>
                         <Table challengeName={props.challengeName} headerElements={getLeaderboardHeader()}
                                gridTemplateColumns={entries[0] ? '1fr 3fr ' + '2fr '.repeat(entries[0].evaluations.length) + '1fr 2fr' : ''}
                                staticColumnElements={

src/components/specific_challenge/Leaderboard/_tableSearchQueryHandler.js

@@ -1,18 +0,0 @@
-const _tableSearchQueryHandler = (event, entriesFromApi, setPageNr, setEntries) => {
-    let searchQuery = event.target.value;
-    let submissionsToRender = [];
-    setPageNr(1);
-    if (searchQuery === '')
-        setEntries(entriesFromApi);
-    else {
-        for (let entry of entriesFromApi) {
-            const {submitter, when, evaluations, times} = entry;
-            const str = `${submitter} ${when.slice(11, 16)} ${when.slice(0, 10)} ${evaluations} ${times}`;
-            if (str.toLowerCase().includes(searchQuery.toLowerCase()))
-                submissionsToRender.push(entry);
-        }
-        setEntries(submissionsToRender);
-    }
-};
-
-export default _tableSearchQueryHandler;

src/components/specific_challenge/Leaderboard/leaderboardSearchQueryHandler.js

@@ -0,0 +1,22 @@
+const leaderboardSearchQueryHandler = (event, entriesFromApi, setPageNr, setEntries) => {
+    let searchQuery = event.target.value;
+    let submissionsToRender = [];
+    setPageNr(1);
+    if (searchQuery === '')
+        setEntries(entriesFromApi);
+    else {
+        for (let entry of entriesFromApi) {
+            const {id, submitter, when, times} = entry;
+            let evaluations = '';
+            for (let evaluation of entry.evaluations) {
+                evaluations += ` ${evaluation.score}`;
+            }
+            const str = `${id} ${submitter} ${when.slice(11, 16)} ${when.slice(0, 10)} ${evaluations} ${times}`;
+            if (str.toLowerCase().includes(searchQuery.toLowerCase()))
+                submissionsToRender.push(entry);
+        }
+        setEntries(submissionsToRender);
+    }
+};
+
+export default leaderboardSearchQueryHandler;

src/components/specific_challenge/MyEntries/MyEntries.js

@@ -1,17 +1,19 @@
 import React from 'react';
-import {FlexColumn} from '../../utils/containers';
+import {FlexColumn} from '../../../utils/containers';
-import {H2} from '../../utils/fonts';
+import {H2} from '../../../utils/fonts';
-import getMyEntries from '../../api/getMyEntries';
+import getMyEntries from '../../../api/getMyEntries';
-import Pager from '../generic/Pager';
+import Pager from '../../generic/Pager';
-import {CALC_PAGES, EVALUATIONS_FORMAT, RENDER_WHEN} from '../../utils/globals';
+import {CALC_PAGES, EVALUATIONS_FORMAT, RENDER_WHEN} from '../../../utils/globals';
 import Media from 'react-media';
-import theme from '../../utils/theme';
+import theme from '../../../utils/theme';
-import _tableSearchQueryHandler from './Leaderboard/_tableSearchQueryHandler';
+import Loading from '../../generic/Loading';
-import Loading from '../generic/Loading';
+import Table from '../Table';
-import Table from './Table';
+import myEntriesSearchQueryHandler from './myEntriesSearchQueryHandler';
+import Search from '../../generic/Search';
 
 const MyEntries = (props) => {
     const [myEntriesFromAPI, setMyEntriesFromAPI] = React.useState({});
+    const [myEntriesAll, setMyEntriesAll] = React.useState({});
     const [myEntries, setMyEntries] = React.useState({});
     const [loading, setLoading] = React.useState(true);
     const [pageNr, setPageNr] = React.useState(1);
@@ -23,8 +25,8 @@ const MyEntries = (props) => {
         challengesRequest();
     }, []);
 
-    const tableSearchQueryHandler = (event) => {
+    const searchQueryHandler = (event) => {
-        _tableSearchQueryHandler(event, myEntriesFromAPI, setPageNr, setMyEntries);
+        myEntriesSearchQueryHandler(event, myEntriesAll, setPageNr, setMyEntries);
     };
 
     const getPossibleMetrics = () => {
@@ -62,7 +64,7 @@ const MyEntries = (props) => {
     };
 
     const challengesRequest = () => {
-        getMyEntries(props.challengeName, setMyEntriesFromAPI, setMyEntries, setLoading, setScoresSorted);
+        getMyEntries(props.challengeName, setMyEntriesFromAPI, setMyEntriesAll, setMyEntries, setLoading, setScoresSorted);
     };
 
     const mobileRender = () => {
@@ -108,6 +110,7 @@ const MyEntries = (props) => {
                 </H2>
                 {myEntries && !loading ?
                     <>
+                        <Search searchQueryHandler={searchQueryHandler}/>
                         <Table challengeName={props.challengeName} headerElements={getMyEntriesHeader()}
                                possibleMetrics={getPossibleMetrics()}
                                gridTemplateColumns={'1fr ' + '4fr '.repeat(getMyEntriesHeader().length - 1)}

src/components/specific_challenge/MyEntries/index.js

@@ -0,0 +1 @@
+export {default} from './MyEntries';

src/components/specific_challenge/MyEntries/myEntriesSearchQueryHandler.js

@@ -0,0 +1,24 @@
+const myEntriesSearchQueryHandler = (event, entriesFromApi, setPageNr, setEntries) => {
+    let searchQuery = event.target.value;
+    let submissionsToRender = [];
+    setPageNr(1);
+    if (searchQuery === '')
+        setEntries(entriesFromApi);
+    else {
+        for (let entry of entriesFromApi) {
+            const {id, when} = entry;
+            let evaluations = '';
+            for (let evaluation of Object.values(entry.evaluations)) {
+                evaluations += ` ${evaluation}`;
+            }
+            const str = `${id} ${when.slice(11, 16)} ${when.slice(0, 10)} ${evaluations}`;
+            console.log(entry);
+            console.log(str);
+            if (str.toLowerCase().includes(searchQuery.toLowerCase()))
+                submissionsToRender.push(entry);
+        }
+        setEntries(submissionsToRender);
+    }
+};
+
+export default myEntriesSearchQueryHandler;

src/components/specific_challenge/Table.js

@@ -63,6 +63,7 @@ const Table = (props) => {
     const desktopRender = () => {
         const n = (props.pageNr - 1) * (ELEMENTS_PER_PAGE * 2);
         let elementsToMap = props.elements.slice(n, n + (ELEMENTS_PER_PAGE * 2));
+        if (elementsToMap.length > 0) {
             return (
                 <FlexColumn as='table' margin='32px 0 72px 0' width='100%'>
                     <FlexColumn as='tbody' width='100%'>
@@ -89,7 +90,8 @@ const Table = (props) => {
                                             {elem}
                                         </Medium>
                                         {elem !== '#' ?
-                                        <ColumnFilterIcon index={i} active={activeIcon} rotateIcon={rotateActiveIcon}/>
+                                            <ColumnFilterIcon index={i} active={activeIcon}
+                                                              rotateIcon={rotateActiveIcon}/>
                                             : ''}
                                     </FlexRow>
                                 );
@@ -104,7 +106,8 @@ const Table = (props) => {
                                       gridGap='20px' position='relative' width='100%' padding='4px'>
                                     {props.staticColumnElements.map((elemName, i) => {
                                         return (
-                                        <Body key={`leaderboard-static-elemName-${i}-${elem[elemName.name]}`} as='td'
+                                            <Body key={`leaderboard-static-elemName-${i}-${elem[elemName.name]}`}
+                                                  as='td'
                                                   order={elemName.order} textAlign={elemName.align}>
                                                 {elemName.format ? elemName.format(elem[elemName.name]) : elem[elemName.name]}
                                             </Body>
@@ -117,6 +120,13 @@ const Table = (props) => {
                     </FlexColumn>
                 </FlexColumn>
             );
+        } else {
+            return (
+                <Medium margin='72px 0'>
+                    Query not found
+                </Medium>
+            );
+        }
     };
 
     return (

src/pages/Challanges/Challenges.js

@@ -4,7 +4,7 @@ import {FlexColumn, FlexRow, Svg} from '../../utils/containers';
 import Search from '../../components/generic/Search';
 import Pager from '../../components/generic/Pager';
 import FiltersMenu from '../../components/challenges_list/FiltersMenu';
-import _searchQueryHandler from './_searchQueryHandler';
+import challengeSearchQueryHandler from './challengeSearchQueryHandler';
 import _renderChallenges from './_renderChallenges';
 import Media from 'react-media';
 import theme from '../../utils/theme';
@@ -50,7 +50,7 @@ const Challenges = () => {
     };
 
     const searchQueryHandler = (event) => {
-        _searchQueryHandler(event, challengesFromAPI, setPageNr, setChallenges);
+        challengeSearchQueryHandler(event, challengesFromAPI, setPageNr, setChallenges);
     };
 
     const nextPage = () => {

src/pages/Challanges/challengeSearchQueryHandler.js

@@ -1,4 +1,4 @@
-const _searchQueryHandler = (event, challengesFromAPI, setPageNr, setChallenges) => {
+const challengeSearchQueryHandler = (event, challengesFromAPI, setPageNr, setChallenges) => {
     let searchQuery = event.target.value;
     let challengesToRender = [];
     setPageNr(1);
@@ -16,4 +16,4 @@ const _searchQueryHandler = (event, challengesFromAPI, setPageNr, setChallenges)
     }
 };
 
-export default _searchQueryHandler;
+export default challengeSearchQueryHandler;

src/pages/Challenge.js

@@ -7,7 +7,7 @@ import MobileChallengeMenu from '../components/specific_challenge/MobileChalleng
 import Leaderboard from '../components/specific_challenge/Leaderboard/Leaderboard';
 import Readme from '../components/specific_challenge/Readme';
 import HowTo from '../components/specific_challenge/HowTo';
-import MyEntries from '../components/specific_challenge/MyEntries';
+import MyEntries from '../components/specific_challenge/MyEntries/MyEntries';
 import Submit from '../components/specific_challenge/Submit';
 import Media from 'react-media';
 import DesktopChallengeMenu from '../components/specific_challenge/DesktopChallengeMenu';