From b1419783e39c45f8d3313c4eb58105cc3c75748a Mon Sep 17 00:00:00 2001 From: mattyl006 Date: Wed, 16 Nov 2022 14:53:27 +0100 Subject: [PATCH] correct search in Leaderboard and implement search in MyEntries --- .env | 2 +- src/api/getMyEntries.js | 3 +- .../Leaderboard/Leaderboard.js | 12 +- .../Leaderboard/_tableSearchQueryHandler.js | 18 --- .../leaderboardSearchQueryHandler.js | 22 ++++ .../{ => MyEntries}/MyEntries.js | 27 +++-- .../specific_challenge/MyEntries/index.js | 1 + .../MyEntries/myEntriesSearchQueryHandler.js | 24 ++++ src/components/specific_challenge/Table.js | 110 ++++++++++-------- src/pages/Challanges/Challenges.js | 4 +- ...dler.js => challengeSearchQueryHandler.js} | 4 +- src/pages/Challenge.js | 2 +- 12 files changed, 135 insertions(+), 94 deletions(-) delete mode 100644 src/components/specific_challenge/Leaderboard/_tableSearchQueryHandler.js create mode 100644 src/components/specific_challenge/Leaderboard/leaderboardSearchQueryHandler.js rename src/components/specific_challenge/{ => MyEntries}/MyEntries.js (86%) create mode 100644 src/components/specific_challenge/MyEntries/index.js create mode 100644 src/components/specific_challenge/MyEntries/myEntriesSearchQueryHandler.js rename src/pages/Challanges/{_searchQueryHandler.js => challengeSearchQueryHandler.js} (84%) diff --git a/.env b/.env index 1009950..2488d38 100644 --- a/.env +++ b/.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 diff --git a/src/api/getMyEntries.js b/src/api/getMyEntries.js index 0763fd6..2d2af05 100644 --- a/src/api/getMyEntries.js +++ b/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); }); diff --git a/src/components/specific_challenge/Leaderboard/Leaderboard.js b/src/components/specific_challenge/Leaderboard/Leaderboard.js index 581555d..87279d1 100644 --- a/src/components/specific_challenge/Leaderboard/Leaderboard.js +++ b/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) => { - _tableSearchQueryHandler(event, entriesFromApi, setPageNr, setEntries); + const searchQueryHandler = (event) => { + leaderboardSearchQueryHandler(event, entriesFromApi, setPageNr, setEntries); }; const nextPage = () => { @@ -135,7 +133,7 @@ const Leaderboard = (props) => {

Leaderboard

- + @@ -155,7 +153,7 @@ const Leaderboard = (props) => { {!loading ? <> - +
{ - 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; \ No newline at end of file diff --git a/src/components/specific_challenge/Leaderboard/leaderboardSearchQueryHandler.js b/src/components/specific_challenge/Leaderboard/leaderboardSearchQueryHandler.js new file mode 100644 index 0000000..8ac7a0e --- /dev/null +++ b/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; \ No newline at end of file diff --git a/src/components/specific_challenge/MyEntries.js b/src/components/specific_challenge/MyEntries/MyEntries.js similarity index 86% rename from src/components/specific_challenge/MyEntries.js rename to src/components/specific_challenge/MyEntries/MyEntries.js index c584ee5..86fcf9f 100644 --- a/src/components/specific_challenge/MyEntries.js +++ b/src/components/specific_challenge/MyEntries/MyEntries.js @@ -1,17 +1,19 @@ import React from 'react'; -import {FlexColumn} from '../../utils/containers'; -import {H2} from '../../utils/fonts'; -import getMyEntries from '../../api/getMyEntries'; -import Pager from '../generic/Pager'; -import {CALC_PAGES, EVALUATIONS_FORMAT, RENDER_WHEN} from '../../utils/globals'; +import {FlexColumn} from '../../../utils/containers'; +import {H2} from '../../../utils/fonts'; +import getMyEntries from '../../../api/getMyEntries'; +import Pager from '../../generic/Pager'; +import {CALC_PAGES, EVALUATIONS_FORMAT, RENDER_WHEN} from '../../../utils/globals'; import Media from 'react-media'; -import theme from '../../utils/theme'; -import _tableSearchQueryHandler from './Leaderboard/_tableSearchQueryHandler'; -import Loading from '../generic/Loading'; -import Table from './Table'; +import theme from '../../../utils/theme'; +import Loading from '../../generic/Loading'; +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) => { - _tableSearchQueryHandler(event, myEntriesFromAPI, setPageNr, setMyEntries); + const searchQueryHandler = (event) => { + 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) => { {myEntries && !loading ? <> +
{ + 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; \ No newline at end of file diff --git a/src/components/specific_challenge/Table.js b/src/components/specific_challenge/Table.js index eed6ee0..761c3c3 100644 --- a/src/components/specific_challenge/Table.js +++ b/src/components/specific_challenge/Table.js @@ -63,60 +63,70 @@ 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)); - return ( - - - - {props.headerElements.map((elem, i) => { + if (elementsToMap.length > 0) { + return ( + + + + {props.headerElements.map((elem, i) => { + return ( + { + if (activeIcon === i) { + let newRotateActiveIcon = !rotateActiveIcon; + setRotateActiveIcon(newRotateActiveIcon); + } else { + setRotateActiveIcon(false); + } + setActiveIcon(i); + props.sortByUpdate(elem, i); + forceUpdate(); + }}> + + {elem} + + {elem !== '#' ? + + : ''} + + ); + })} + + + {elementsToMap.map((elem, index) => { return ( - { - if (activeIcon === i) { - let newRotateActiveIcon = !rotateActiveIcon; - setRotateActiveIcon(newRotateActiveIcon); - } else { - setRotateActiveIcon(false); - } - setActiveIcon(i); - props.sortByUpdate(elem, i); - forceUpdate(); - }}> - - {elem} - - {elem !== '#' ? - - : ''} - + + {props.staticColumnElements.map((elemName, i) => { + return ( + + {elemName.format ? elemName.format(elem[elemName.name]) : elem[elemName.name]} + + ); + })} + {props.headerElements ? metricsRender(elem) : ''} + ); })} - - - {elementsToMap.map((elem, index) => { - return ( - - {props.staticColumnElements.map((elemName, i) => { - return ( - - {elemName.format ? elemName.format(elem[elemName.name]) : elem[elemName.name]} - - ); - })} - {props.headerElements ? metricsRender(elem) : ''} - - ); - })} + - - ); + ); + } else { + return ( + + Query not found + + ); + } }; return ( diff --git a/src/pages/Challanges/Challenges.js b/src/pages/Challanges/Challenges.js index 4d9c352..8451f9b 100644 --- a/src/pages/Challanges/Challenges.js +++ b/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 = () => { diff --git a/src/pages/Challanges/_searchQueryHandler.js b/src/pages/Challanges/challengeSearchQueryHandler.js similarity index 84% rename from src/pages/Challanges/_searchQueryHandler.js rename to src/pages/Challanges/challengeSearchQueryHandler.js index b29ab02..5987b31 100644 --- a/src/pages/Challanges/_searchQueryHandler.js +++ b/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; \ No newline at end of file +export default challengeSearchQueryHandler; \ No newline at end of file diff --git a/src/pages/Challenge.js b/src/pages/Challenge.js index a3c5eee..deaa3c8 100644 --- a/src/pages/Challenge.js +++ b/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';