get user request and bold current user in Table logic

This commit is contained in:
mattyl006 2022-11-30 17:36:20 +01:00
parent 3af9523a79
commit bd176e2329
5 changed files with 49 additions and 13 deletions

View File

@ -42,9 +42,6 @@ const App = () => {
}); });
const popUpMessageHandler = (header, message) => { const popUpMessageHandler = (header, message) => {
console.log('elo');
console.log(header);
console.log(message);
setPopUpHeader(header); setPopUpHeader(header);
setPopUpMessage(message); setPopUpMessage(message);
}; };

14
src/api/getUser.js Normal file
View File

@ -0,0 +1,14 @@
import {API} from '../utils/globals';
const getUser = (setDataState, setLoadingState) => {
fetch(`${API}/user-info`)
.then(response => response.text())
.then(data => {
console.log(data);
setDataState(data);
if (setLoadingState)
setLoadingState(false);
});
};
export default getUser;

View File

@ -11,6 +11,7 @@ import {CALC_PAGES, EVALUATIONS_FORMAT, RENDER_WHEN} from '../../../utils/global
import Search from '../../generic/Search'; import Search from '../../generic/Search';
import Pager from '../../generic/Pager'; import Pager from '../../generic/Pager';
import Loading from '../../generic/Loading'; import Loading from '../../generic/Loading';
import getUser from '../../../api/getUser';
const Leaderboard = (props) => { const Leaderboard = (props) => {
const [entriesFromApi, setEntriesFromApi] = React.useState([]); const [entriesFromApi, setEntriesFromApi] = React.useState([]);
@ -21,6 +22,7 @@ const Leaderboard = (props) => {
const [entriesSorted, setEntriesSorted] = React.useState(false); const [entriesSorted, setEntriesSorted] = React.useState(false);
const [whenSorted, setWhenSorted] = React.useState(false); const [whenSorted, setWhenSorted] = React.useState(false);
const [scoreSorted, setScoreSorted] = React.useState(false); const [scoreSorted, setScoreSorted] = React.useState(false);
const [user, setUser] = React.useState('');
React.useEffect(() => { React.useEffect(() => {
challengeDataRequest(props.challengeName); challengeDataRequest(props.challengeName);
@ -28,6 +30,7 @@ const Leaderboard = (props) => {
const challengeDataRequest = (challengeName) => { const challengeDataRequest = (challengeName) => {
getChallengeLeaderboard(setEntriesFromApi, challengeName); getChallengeLeaderboard(setEntriesFromApi, challengeName);
getUser(setUser);
getChallengeLeaderboard(setEntries, challengeName, setLoading); getChallengeLeaderboard(setEntries, challengeName, setLoading);
}; };
@ -156,6 +159,7 @@ const Leaderboard = (props) => {
<Search searchQueryHandler={searchQueryHandler}/> <Search searchQueryHandler={searchQueryHandler}/>
<Table challengeName={props.challengeName} headerElements={getLeaderboardHeader()} <Table challengeName={props.challengeName} headerElements={getLeaderboardHeader()}
gridTemplateColumns={entries[0] ? '1fr 3fr ' + '2fr '.repeat(entries[0].evaluations.length) + '1fr 2fr' : ''} gridTemplateColumns={entries[0] ? '1fr 3fr ' + '2fr '.repeat(entries[0].evaluations.length) + '1fr 2fr' : ''}
user={user}
staticColumnElements={ staticColumnElements={
[ [
{name: 'id', format: null, order: 1, align: 'left'}, {name: 'id', format: null, order: 1, align: 'left'},

View File

@ -24,7 +24,9 @@ const Submit = (props) => {
}; };
const challengeSubmissionSubmit = () => { const challengeSubmissionSubmit = () => {
challengeSubmission(props.challengeName, repoUrl, repoBranch, description).then(r => console.log(r)); challengeSubmission(props.challengeName, repoUrl, repoBranch, description)
.then((response) => response.text())
.then((data) => console.log(data));
props.popUpMessageHandler('Submit success!', 'Check your entries.'); props.popUpMessageHandler('Submit success!', 'Check your entries.');
}; };

View File

@ -60,6 +60,33 @@ const Table = (props) => {
); );
}; };
const rowRender = (elem) => {
if (elem.submitter === props.user) {
return (
props.staticColumnElements.map((elemName, i) => {
return (
<Medium 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]}
</Medium>
);
})
);
}
return (
props.staticColumnElements.map((elemName, i) => {
return (
<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>
);
})
);
};
const desktopRender = () => { const desktopRender = () => {
const n = (props.pageNr - 1) * (ELEMENTS_PER_PAGE * 2); const n = (props.pageNr - 1) * (ELEMENTS_PER_PAGE * 2);
let elementsToMap = props.elements.slice(n, n + (ELEMENTS_PER_PAGE * 2)); let elementsToMap = props.elements.slice(n, n + (ELEMENTS_PER_PAGE * 2));
@ -104,15 +131,7 @@ const Table = (props) => {
backgroundColor={index % 2 === 1 ? theme.colors.dark01 : 'transparent'} backgroundColor={index % 2 === 1 ? theme.colors.dark01 : 'transparent'}
gridTemplateColumns={props.gridTemplateColumns} gridTemplateColumns={props.gridTemplateColumns}
gridGap='20px' position='relative' width='100%' padding='4px'> gridGap='20px' position='relative' width='100%' padding='4px'>
{props.staticColumnElements.map((elemName, i) => { {rowRender(elem)}
return (
<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>
);
})}
{props.headerElements ? metricsRender(elem) : ''} {props.headerElements ? metricsRender(elem) : ''}
</Grid> </Grid>
); );