refactor files structure

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

View File

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

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;

View File

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

View File

@ -3,7 +3,7 @@ import Media from 'react-media';
import theme from '../../utils/theme'; import theme from '../../utils/theme';
import getChallenges from '../../api/getChallenges'; import getChallenges from '../../api/getChallenges';
import { CHALLENGES_STATUS_FILTER } from '../../utils/globals'; 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 statusFilterHandle from './functions/statusFilterHandle';
import ChallengesMobile from './components/ChallengesMobile'; import ChallengesMobile from './components/ChallengesMobile';
import ChallengesDesktop from './components/ChallengesDesktop'; import ChallengesDesktop from './components/ChallengesDesktop';

View File

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

View File

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

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;

View File

@ -1,5 +1,5 @@
import { ELEMENTS_PER_PAGE } from '../../../utils/globals'; 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 { Grid } from '../../../utils/containers';
import styled from 'styled-components'; import styled from 'styled-components';

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -1,14 +1,12 @@
import React from 'react'; import React from 'react';
import { FlexColumn } from '../../utils/containers'; import { FlexColumn } from '../utils/containers';
import { Body, H2 } from '../../utils/fonts'; import { Body, H2 } from '../utils/fonts';
import Media from 'react-media'; import Media from 'react-media';
import theme from '../../utils/theme'; import theme from '../utils/theme';
import getChallengeFullDescription from '../../api/getChallengeFullDescription'; import getChallengeFullDescription from '../api/getChallengeFullDescription';
import styled from 'styled-components'; import styled from 'styled-components';
import InfoList from '../generic/InfoList'; import InfoList from '../components/generic/InfoList';
import Loading from '../generic/Loading'; import Loading from '../components/generic/Loading';
import PropsTypes from 'prop-types';
import MiniChallenge from '../challenges_list/MiniChallenge';
import { marked } from 'marked'; import { marked } from 'marked';
const ReadmeStyle = styled(Body)` 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; export default Readme;

View File

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