s444498/gonito-frontend
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

create PopupMessage component

Browse Source
This commit is contained in:
mattyl006 2022-11-16 16:01:05 +01:00
parent b1419783e3
commit f0a2220577
5 changed files with 56 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/App.js
View File

@ -16,10 +16,13 @@ import LoggedBar from './components/navigation/LoggedBar';
import addUser from './api/addUser';
import Loading from './components/generic/Loading';
import {FlexColumn} from './utils/containers';
import PopupMessage from './components/generic/PopupMessage';
const App = () => {
const [loggedBarVisible, setLoggedBarVisible] = React.useState('100vw');
const [loggedBarHover, setLoggedBarHover] = React.useState(false);
const [popUpHeader, setPopUpHeader] = React.useState('');
const [popUpMessage, setPopUpMessage] = React.useState('');
React.useEffect(() => {
if (sessionStorage.getItem('logged') !== 'yes') {
@ -38,6 +41,22 @@ const App = () => {
}, 1500);
});
const popUpMessageHandler = (header, message) => {
console.log('elo');
console.log(header);
console.log(message);
setPopUpHeader(header);
setPopUpMessage(message);
};
const popUpMessageRender = () => {
if (popUpHeader !== '' || popUpMessage !== '') {
return (
<PopupMessage header={popUpHeader} message={popUpMessage} popUpMessageHandler={popUpMessageHandler}/>
);
}
};
const loggedBarVisibleHandler = () => {
if (loggedBarVisible === '0' && !loggedBarHover)
setLoggedBarVisible('100vw');
@ -56,6 +75,7 @@ const App = () => {
return (
<BrowserRouter>
<ThemeProvider theme={theme}>
{popUpMessageRender()}
<NavBar loggedBarVisibleHandler={loggedBarVisibleHandler}/>
{!IS_MOBILE() ?
<LoggedBar visible={loggedBarVisible} loggedBarVisibleHandler={loggedBarVisibleHandler}
@ -67,7 +87,8 @@ const App = () => {
<Route path='/login-email' element={<LoginWithEmail/>}/>
<Route path='/login' element={<Login/>}/>
<Route path='/register' element={<Register/>}/>
<Route path={`${CHALLENGE_PAGE}/:challengeId`} element={<Challenge/>}/>
<Route path={`${CHALLENGE_PAGE}/:challengeId`}
element={<Challenge popUpMessageHandler={popUpMessageHandler}/>}/>
<Route path={CHALLENGES_PAGE} element={<Challenges/>}/>
{
KeyCloakService.isLoggedIn() ? <>

30
src/components/generic/PopupMessage.js Normal file
View File

@ -0,0 +1,30 @@
import React from 'react';
import {FlexColumn} from '../../utils/containers';
import theme from '../../utils/theme';
import {Body, H3} from '../../utils/fonts';
import Button from './Button';
const PopupMessage = (props) => {
return (
<FlexColumn position='fixed' top='0' left='0' zIndex='100'
width='100%' height='100vh' backgroundColor={theme.colors.dark01}>
<FlexColumn alignmentY='space-between' width='40%' height='50%' borderRadius='12px'
backgroundColor={theme.colors.white} padding='56px' border={`4px solid ${theme.colors.green}`}>
<FlexColumn gap='48px'>
<H3>
{props.header}
</H3>
<Body>
{props.message}
</Body>
</FlexColumn>
<Button handler={() => props.popUpMessageHandler('', '')}>
Ok
</Button>
</FlexColumn>
</FlexColumn>
);
};
export default PopupMessage;

1
src/components/specific_challenge/Submit.js
View File

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

4
src/pages/Challenge.js
View File

@ -16,7 +16,7 @@ import textIco from '../assets/text_ico.svg';
import getChallengeInfo from '../api/getChallengeInfo';
import Loading from '../components/generic/Loading';
const Challenge = () => {
const Challenge = (props) => {
const challengeName = useParams().challengeId;
const [challenge, setChallenge] = React.useState([]);
const [section, setSection] = React.useState(0);
@ -38,7 +38,7 @@ const Challenge = () => {
case 3:
return <MyEntries challengeName={challengeName}/>;
case 4:
return <Submit challengeName={challengeName}/>;
return <Submit popUpMessageHandler={props.popUpMessageHandler} challengeName={challengeName}/>;
default:
return <Leaderboard challengeName={challengeName} mainMetric={challenge.mainMetric}/>;
}

1
src/utils/containers.js
View File

@ -27,6 +27,7 @@ const Container = styled.div`
opacity: ${({opacity}) => opacity ? opacity : '1'};
transform: translate(${({translateX}) => translateX ? translateX : 0}, ${({translateY}) => translateY ? translateY : 0});
order: ${({order}) => order ? order : '0'};
z-index: ${({zIndex}) => zIndex ? zIndex : '0'};
`;
const FlexRow = styled(Container)`