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

refactor files structure

Browse Source
This commit is contained in:
Mateusz Tylka 2023-05-12 12:18:05 +02:00
parent 1464bc084a
commit 6270a6f194
30 changed files with 203 additions and 215 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.js
View File

@ -21,7 +21,7 @@ import Loading from './components/generic/Loading';
import { FlexColumn } from './utils/containers';
import PopupMessage from './components/generic/PopupMessage';
import PolicyPrivacy from './pages/PolicyPrivacy';
import Challenge from './components/specific_challenge/Challenge';
import Challenge from './pages/Challenge';
const App = () => {
const [loggedBarVisible, setLoggedBarVisible] = React.useState('100vw');

122
src/components/challenges_list/MiniChallenge.js
View File

@ -1,122 +0,0 @@
import React from 'react';
import {Container, FlexColumn, FlexRow, Grid} from '../../utils/containers';
import {Body, H3} from '../../utils/fonts';
import styled from 'styled-components';
import IconLabel from '../generic/IconLabel';
import {Link} from 'react-router-dom';
import {CHALLENGE_PAGE, MINI_DESCRIPTION_RENDER} from '../../utils/globals';
import theme from '../../utils/theme';
import PropsTypes from 'prop-types';
const ChallengeStyle = styled(FlexColumn)`
padding: 12px;
border: 1px solid ${({theme}) => theme.colors.dark05};
cursor: pointer;
transition: transform 0.3s ease-in-out;
position: relative;
max-width: 420px;
* {
cursor: pointer;
}
&:hover {
transform: scale(1.05);
}
article {
width: 100%;
align-items: flex-start;
p {
width: 80%;
}
}
@media (min-width: ${({theme}) => theme.overMobile}) {
width: 360px;
padding: 20px;
justify-content: flex-start;
}
`;
const IconsGrid = styled(Grid)`
width: 100%;
grid-gap: 14px;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
@media (min-width: 500px) {
grid-template-columns: auto auto auto;
}
`;
const MiniChallenge = (props) => {
const deadlineRender = () => {
if (props.deadline) {
return (
<IconLabel size='24px' gap='8px' type='deadline' time={props.deadline}>
{props.deadline.slice(0, 10)}
</IconLabel>
);
}
};
return (
<ChallengeStyle as={Link} to={`${CHALLENGE_PAGE}/${props.name}`}>
<FlexColumn as='article'>
<FlexRow margin='0 0 14px 0' gap='12px' width='100%' alignmentX='space-between'>
<H3 as='h3' width='85%'>
{props.title}
</H3>
{props.type ? <IconLabel type={props.type} size='30px'/> : 'xxx'}
</FlexRow>
<Container margin='0 0 14px 0' width='85%' height='1px' backgroundColor={theme.colors.dark05}/>
<Body as='p' margin='0 0 14px 0'>
{props.description ? MINI_DESCRIPTION_RENDER(props.description) : 'xxx'}
</Body>
<IconsGrid>
<IconLabel size='24px' gap='8px' type='metric'>
{props.metric ? props.metric : 'xxx'}
</IconLabel>
<IconLabel size='24px' gap='8px' type='bestScore'>
{props.bestScore ? props.bestScore : 'xxx'}
</IconLabel>
{deadlineRender()}
<IconLabel size='24px' gap='8px' type='baseline'>
{props.baseline ? props.baseline : 'xxx'}
</IconLabel>
{props.prize ? <IconLabel size='24px' gap='8px' type='prize'>
{props.prize}
</IconLabel> : ''}
</IconsGrid>
</FlexColumn>
</ChallengeStyle>
);
};
MiniChallenge.propTypes = {
name: PropsTypes.string,
title: PropsTypes.string,
type: PropsTypes.string,
description: PropsTypes.string,
metric: PropsTypes.string,
bestScore: PropsTypes.string,
deadline: PropsTypes.string,
baseline: PropsTypes.string,
prize: PropsTypes.string
};
MiniChallenge.defaultProps = {
name: 'xxx',
title: 'xxx',
type: 'xxx',
description: 'xxx',
metric: 'xxx',
bestScore: 'xxx',
deadline: 'xxx',
baseline: 'xxx',
prize: 'xxx'
};
export default MiniChallenge;

0
src/components/specific_challenge/ColumnFilterIcon.js → src/components/generic/ColumnFilterIcon.js
View File

0
src/components/specific_challenge/Table.js → src/components/generic/Table.js
View File

18
src/components/specific_challenge/AllEntries/AllEntries.js → src/pages/AllEntries/AllEntries.js
View File

@ -1,20 +1,20 @@
import React from 'react';
import theme from '../../../utils/theme';
import theme from '../../utils/theme';
import Media from 'react-media';
import { FlexColumn } from '../../../utils/containers';
import { H2 } from '../../../utils/fonts';
import { FlexColumn } from '../../utils/containers';
import { H2 } from '../../utils/fonts';
import {
CALC_PAGES,
EVALUATIONS_FORMAT,
RENDER_WHEN,
IS_MOBILE,
} from '../../../utils/globals';
import Loading from '../../generic/Loading';
import Pager from '../../generic/Pager';
import Table from '../Table';
import Search from '../../generic/Search';
} from '../../utils/globals';
import Loading from '../../components/generic/Loading';
import Pager from '../../components/generic/Pager';
import Table from '../../components/generic/Table';
import Search from '../../components/generic/Search';
import allEntriesSearchQueryHandler from './allEntriesSearchQueryHandler';
import getAllEntries from '../../../api/getAllEntries';
import getAllEntries from '../../api/getAllEntries';
const AllEntries = (props) => {
const [entriesFromApi, setEntriesFromApi] = React.useState([]);

0
src/components/specific_challenge/AllEntries/allEntriesSearchQueryHandler.js → src/pages/AllEntries/allEntriesSearchQueryHandler.js
View File

0
src/components/specific_challenge/AllEntries/index.js → src/pages/AllEntries/index.js
View File

2
src/pages/Challanges/Challenges.js
View File

@ -3,7 +3,7 @@ import Media from 'react-media';
import theme from '../../utils/theme';
import getChallenges from '../../api/getChallenges';
import { CHALLENGES_STATUS_FILTER } from '../../utils/globals';
import FiltersMenu from '../../components/challenges_list/FiltersMenu';
import FiltersMenu from './components/FiltersMenu';
import statusFilterHandle from './functions/statusFilterHandle';
import ChallengesMobile from './components/ChallengesMobile';
import ChallengesDesktop from './components/ChallengesDesktop';

10
src/components/challenges_list/FilterBy.js → src/pages/Challanges/components/FilterBy.js
View File

@ -1,10 +1,10 @@
import React from 'react';
import { FlexColumn, Grid, Svg } from '../../utils/containers';
import Filter from '../generic/Filter';
import { Body, H3, Medium } from '../../utils/fonts';
import arrow from '../../assets/arrow.svg';
import { FlexColumn, Grid, Svg } from '../../../utils/containers';
import Filter from '../../../components/generic/Filter';
import { Body, H3, Medium } from '../../../utils/fonts';
import arrow from '../../../assets/arrow.svg';
import Media from 'react-media';
import theme from '../../utils/theme';
import theme from '../../../utils/theme';
const FilterBy = (props) => {
const renderFilterOptions = () => {

8
src/components/challenges_list/FiltersMenu/FiltersMenu.js → src/pages/Challanges/components/FiltersMenu/FiltersMenu.js
View File

@ -1,12 +1,12 @@
import React from 'react';
import { FlexColumn, FlexRow, TransBack } from '../../../utils/containers';
import Button from '../../generic/Button';
import theme from '../../../utils/theme';
import { FlexColumn, FlexRow, TransBack } from '../../../../utils/containers';
import Button from '../../../../components/generic/Button';
import theme from '../../../../utils/theme';
import styled from 'styled-components';
import FilterBy from '../FilterBy';
import filterOptions from './filterOptions';
import Media from 'react-media';
import CHALLENGES_ACTION from '../../../pages/Challanges/model/ChallengesActionEnum';
import CHALLENGES_ACTION from '../../model/ChallengesActionEnum';
const FiltersMenuStyle = styled(FlexColumn)`
position: fixed;

0
src/components/challenges_list/FiltersMenu/filterOptions.js → src/pages/Challanges/components/FiltersMenu/filterOptions.js
View File

0
src/components/challenges_list/FiltersMenu/index.js → src/pages/Challanges/components/FiltersMenu/index.js
View File

121
src/pages/Challanges/components/MiniChallenge.js Normal file
View File

@ -0,0 +1,121 @@
import React from 'react';
import {
Container,
FlexColumn,
FlexRow,
Grid,
} from '../../../utils/containers';
import { Body, H3 } from '../../../utils/fonts';
import styled from 'styled-components';
import IconLabel from '../../../components/generic/IconLabel';
import { Link } from 'react-router-dom';
import {
CHALLENGE_PAGE,
MINI_DESCRIPTION_RENDER,
} from '../../../utils/globals';
import theme from '../../../utils/theme';
const ChallengeStyle = styled(FlexColumn)`
padding: 12px;
border: 1px solid ${({ theme }) => theme.colors.dark05};
cursor: pointer;
transition: transform 0.3s ease-in-out;
position: relative;
max-width: 420px;
* {
cursor: pointer;
}
&:hover {
transform: scale(1.05);
}
article {
width: 100%;
align-items: flex-start;
p {
width: 80%;
}
}
@media (min-width: ${({ theme }) => theme.overMobile}) {
width: 360px;
padding: 20px;
justify-content: flex-start;
}
`;
const IconsGrid = styled(Grid)`
width: 100%;
grid-gap: 14px;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
@media (min-width: 500px) {
grid-template-columns: auto auto auto;
}
`;
const MiniChallenge = (props) => {
const deadlineRender = () => {
if (props.deadline) {
return (
<IconLabel size="24px" gap="8px" type="deadline" time={props.deadline}>
{props.deadline.slice(0, 10)}
</IconLabel>
);
}
};
return (
<ChallengeStyle as={Link} to={`${CHALLENGE_PAGE}/${props.name}`}>
<FlexColumn as="article">
<FlexRow
margin="0 0 14px 0"
gap="12px"
width="100%"
alignmentX="space-between"
>
<H3 as="h3" width="85%">
{props.title}
</H3>
{props.type ? <IconLabel type={props.type} size="30px" /> : 'xxx'}
</FlexRow>
<Container
margin="0 0 14px 0"
width="85%"
height="1px"
backgroundColor={theme.colors.dark05}
/>
<Body as="p" margin="0 0 14px 0">
{props.description
? MINI_DESCRIPTION_RENDER(props.description)
: 'xxx'}
</Body>
<IconsGrid>
<IconLabel size="24px" gap="8px" type="metric">
{props.metric ? props.metric : 'xxx'}
</IconLabel>
<IconLabel size="24px" gap="8px" type="bestScore">
{props.bestScore ? props.bestScore : 'xxx'}
</IconLabel>
{deadlineRender()}
<IconLabel size="24px" gap="8px" type="baseline">
{props.baseline ? props.baseline : 'xxx'}
</IconLabel>
{props.prize ? (
<IconLabel size="24px" gap="8px" type="prize">
{props.prize}
</IconLabel>
) : (
''
)}
</IconsGrid>
</FlexColumn>
</ChallengeStyle>
);
};
export default MiniChallenge;

2
src/pages/Challanges/functions/renderChallenges.js
View File

@ -1,5 +1,5 @@
import { ELEMENTS_PER_PAGE } from '../../../utils/globals';
import MiniChallenge from '../../../components/challenges_list/MiniChallenge';
import MiniChallenge from '../components/MiniChallenge';
import { Grid } from '../../../utils/containers';
import styled from 'styled-components';

18
src/components/specific_challenge/Challenge.js → src/pages/Challenge/Challenge.js
View File

@ -3,20 +3,20 @@ import { Container, FlexColumn, FlexRow, Svg } from '../../utils/containers';
import { useParams } from 'react-router-dom';
import { H1, Medium } from '../../utils/fonts';
import theme from '../../utils/theme';
import MobileChallengeMenu from './MobileChallengeMenu';
import Leaderboard from './Leaderboard/Leaderboard';
import Readme from './Readme';
import HowTo from './HowTo/HowTo';
import MyEntries from './MyEntries/MyEntries';
import Submit from './Submit';
import MobileChallengeMenu from './components/MobileChallengeMenu';
import Leaderboard from '../Leaderboard/Leaderboard';
import Readme from '../Readme';
import HowTo from '../HowTo/HowTo';
import MyEntries from '../MyEntries/MyEntries';
import Submit from '../Submit';
import Media from 'react-media';
import DesktopChallengeMenu from './DesktopChallengeMenu';
import DesktopChallengeMenu from './components/DesktopChallengeMenu';
import { CHALLENGE_SECTIONS, RENDER_ICO } from '../../utils/globals';
import textIco from '../../assets/text_ico.svg';
import getChallengeInfo from '../../api/getChallengeInfo';
import Loading from '../generic/Loading';
import Loading from '../../components/generic/Loading';
import getUser from '../../api/getUser';
import AllEntries from './AllEntries/AllEntries';
import AllEntries from '../AllEntries/AllEntries';
const Challenge = (props) => {
const challengeName = useParams().challengeId;

8
src/components/specific_challenge/DesktopChallengeMenu.js → src/pages/Challenge/components/DesktopChallengeMenu.js
View File

@ -1,15 +1,15 @@
import React from 'react';
import styled from 'styled-components';
import { FlexColumn } from '../../utils/containers';
import { H3 } from '../../utils/fonts';
import { FlexColumn } from '../../../utils/containers';
import { H3 } from '../../../utils/fonts';
import PropsTypes from 'prop-types';
import KeyCloakService from '../../services/KeyCloakService';
import KeyCloakService from '../../../services/KeyCloakService';
import { Link } from 'react-router-dom';
import {
MENU_CHALLENGE_SECTIONS_WITH_LOGIN,
MENU_CHALLENGE_SECTIONS_NO_LOGIN,
IS_MOBILE,
} from '../../utils/globals';
} from '../../../utils/globals';
const DesktopChallengeMenuStyle = styled(FlexColumn)`
justify-content: flex-start;

8
src/components/specific_challenge/MobileChallengeMenu.js → src/pages/Challenge/components/MobileChallengeMenu.js
View File

@ -1,14 +1,14 @@
import React from 'react';
import { FlexRow } from '../../utils/containers';
import { FlexRow } from '../../../utils/containers';
import styled from 'styled-components';
import { Medium } from '../../utils/fonts';
import { Medium } from '../../../utils/fonts';
import PropsTypes from 'prop-types';
import KeyCloakService from '../../services/KeyCloakService';
import KeyCloakService from '../../../services/KeyCloakService';
import {
CHALLENGE_SECTIONS,
MENU_CHALLENGE_SECTIONS_WITH_LOGIN,
MENU_CHALLENGE_SECTIONS_NO_LOGIN,
} from '../../utils/globals';
} from '../../../utils/globals';
import { Link } from 'react-router-dom';
const MenuOption = styled(Medium)`

1
src/pages/Challenge/index.js Normal file
View File

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

10
src/components/specific_challenge/HowTo/HowTo.js → src/pages/HowTo/HowTo.js
View File

@ -1,9 +1,9 @@
import React from 'react';
import getFullUser from '../../../api/getFullUserInfo';
import KeyCloakService from '../../../services/KeyCloakService';
import { FlexColumn } from '../../../utils/containers';
import { IS_MOBILE } from '../../../utils/globals';
import HowToContent from './sections/HowToContent';
import getFullUser from '../../api/getFullUserInfo';
import KeyCloakService from '../../services/KeyCloakService';
import { FlexColumn } from '../../utils/containers';
import { IS_MOBILE } from '../../utils/globals';
import HowToContent from './components/HowToContent';
const HowTo = (props) => {
const [userFullInfo, setUserFullInfo] = React.useState(null);

10
src/components/specific_challenge/HowTo/sections/HowToContent.js → src/pages/HowTo/components/HowToContent.js
View File

@ -1,9 +1,9 @@
import React from 'react';
import { IS_MOBILE } from '../../../../utils/globals';
import { Body, H2, Medium } from '../../../../utils/fonts';
import { FlexColumn, Grid } from '../../../../utils/containers';
import CircleNumber from '../../../generic/CircleNumber';
import CodeShell from '../../../generic/CodeShell';
import { IS_MOBILE } from '../../../utils/globals';
import { Body, H2, Medium } from '../../../utils/fonts';
import { FlexColumn, Grid } from '../../../utils/containers';
import CircleNumber from '../../../components/generic/CircleNumber';
import CodeShell from '../../../components/generic/CodeShell';
const HowToContent = (props) => {
const pullCodeLineRender = () => {

0
src/components/specific_challenge/HowTo/index.js → src/pages/HowTo/index.js
View File

18
src/components/specific_challenge/Leaderboard/Leaderboard.js → src/pages/Leaderboard/Leaderboard.js
View File

@ -1,20 +1,20 @@
import React from 'react';
import Media from 'react-media';
import theme from '../../../utils/theme';
import { FlexColumn } from '../../../utils/containers';
import { H2 } from '../../../utils/fonts';
import Table from '../Table';
import theme from '../../utils/theme';
import { FlexColumn } from '../../utils/containers';
import { H2 } from '../../utils/fonts';
import Table from '../../components/generic/Table';
import PropsTypes from 'prop-types';
import getChallengeLeaderboard from '../../../api/getChallengeLeaderboard';
import getChallengeLeaderboard from '../../api/getChallengeLeaderboard';
import leaderboardSearchQueryHandler from './leaderboardSearchQueryHandler';
import {
CALC_PAGES,
EVALUATIONS_FORMAT,
RENDER_WHEN,
} from '../../../utils/globals';
import Search from '../../generic/Search';
import Pager from '../../generic/Pager';
import Loading from '../../generic/Loading';
} from '../../utils/globals';
import Search from '../../components/generic/Search';
import Pager from '../../components/generic/Pager';
import Loading from '../../components/generic/Loading';
const Leaderboard = (props) => {
const [entriesFromApi, setEntriesFromApi] = React.useState([]);

0
src/components/specific_challenge/Leaderboard/index.js → src/pages/Leaderboard/index.js
View File

0
src/components/specific_challenge/Leaderboard/leaderboardSearchQueryHandler.js → src/pages/Leaderboard/leaderboardSearchQueryHandler.js
View File

0
src/components/specific_challenge/Leaderboard/sortOptions.js → src/pages/Leaderboard/sortOptions.js
View File

18
src/components/specific_challenge/MyEntries/MyEntries.js → src/pages/MyEntries/MyEntries.js
View File

@ -1,20 +1,20 @@
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 { FlexColumn } from '../../utils/containers';
import { H2 } from '../../utils/fonts';
import getMyEntries from '../../api/getMyEntries';
import Pager from '../../components/generic/Pager';
import {
CALC_PAGES,
EVALUATIONS_FORMAT,
IS_MOBILE,
RENDER_WHEN,
} from '../../../utils/globals';
} from '../../utils/globals';
import Media from 'react-media';
import theme from '../../../utils/theme';
import Loading from '../../generic/Loading';
import Table from '../Table';
import theme from '../../utils/theme';
import Loading from '../../components/generic/Loading';
import Table from '../../components/generic/Table';
import myEntriesSearchQueryHandler from './myEntriesSearchQueryHandler';
import Search from '../../generic/Search';
import Search from '../../components/generic/Search';
const MyEntries = (props) => {
const [myEntriesFromAPI, setMyEntriesFromAPI] = React.useState({});

0
src/components/specific_challenge/MyEntries/index.js → src/pages/MyEntries/index.js
View File

0
src/components/specific_challenge/MyEntries/myEntriesSearchQueryHandler.js → src/pages/MyEntries/myEntriesSearchQueryHandler.js
View File

24
src/components/specific_challenge/Readme.js → src/pages/Readme.js
View File

@ -1,14 +1,12 @@
import React from 'react';
import { FlexColumn } from '../../utils/containers';
import { Body, H2 } from '../../utils/fonts';
import { FlexColumn } from '../utils/containers';
import { Body, H2 } from '../utils/fonts';
import Media from 'react-media';
import theme from '../../utils/theme';
import getChallengeFullDescription from '../../api/getChallengeFullDescription';
import theme from '../utils/theme';
import getChallengeFullDescription from '../api/getChallengeFullDescription';
import styled from 'styled-components';
import InfoList from '../generic/InfoList';
import Loading from '../generic/Loading';
import PropsTypes from 'prop-types';
import MiniChallenge from '../challenges_list/MiniChallenge';
import InfoList from '../components/generic/InfoList';
import Loading from '../components/generic/Loading';
import { marked } from 'marked';
const ReadmeStyle = styled(Body)`
@ -154,14 +152,4 @@ const Readme = (props) => {
);
};
MiniChallenge.propTypes = {
challengeName: PropsTypes.string,
description: PropsTypes.string,
};
MiniChallenge.defaultProps = {
challengeName: '',
description: '',
};
export default Readme;

18
src/components/specific_challenge/Submit.js → src/pages/Submit.js
View File

@ -1,14 +1,14 @@
import React from 'react';
import { createPortal } from 'react-dom';
import { FlexColumn } from '../../utils/containers';
import { H2, Menu } from '../../utils/fonts';
import SubmitInput from '../generic/SubmitInput';
import Button from '../generic/Button';
import theme from '../../utils/theme';
import challengeSubmission from '../../api/challengeSubmissionPost';
import Loading from '../generic/Loading';
import getTags from '../../api/getTags';
import DropdownWithPopup from '../generic/DropdownWithPopup';
import { FlexColumn } from '../utils/containers';
import { H2, Menu } from '../utils/fonts';
import SubmitInput from '../components/generic/SubmitInput';
import Button from '../components/generic/Button';
import theme from '../utils/theme';
import challengeSubmission from '../api/challengeSubmissionPost';
import Loading from '../components/generic/Loading';
import getTags from '../api/getTags';
import DropdownWithPopup from '../components/generic/DropdownWithPopup';
const Submit = (props) => {
const [description, setDescription] = React.useState('');