apply eslint
This commit is contained in:
parent
32b1b48eac
commit
294d9f1579
24
.eslintrc.json
Normal file
24
.eslintrc.json
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
{
|
||||||
|
"extends": [
|
||||||
|
"react-app",
|
||||||
|
"eslint:recommended"
|
||||||
|
],
|
||||||
|
"rules": {
|
||||||
|
"semi": [
|
||||||
|
"error",
|
||||||
|
"always"
|
||||||
|
],
|
||||||
|
"no-extra-semi": [
|
||||||
|
"error"
|
||||||
|
],
|
||||||
|
"eqeqeq": [
|
||||||
|
"error",
|
||||||
|
"always"
|
||||||
|
],
|
||||||
|
"quotes": [
|
||||||
|
2,
|
||||||
|
"single",
|
||||||
|
"avoid-escape"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
6
.idea/inspectionProfiles/Project_Default.xml
Normal file
6
.idea/inspectionProfiles/Project_Default.xml
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
<component name="InspectionProjectProfileManager">
|
||||||
|
<profile version="1.0">
|
||||||
|
<option name="myName" value="Project Default" />
|
||||||
|
<inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
|
||||||
|
</profile>
|
||||||
|
</component>
|
6
.idea/jsLinters/eslint.xml
Normal file
6
.idea/jsLinters/eslint.xml
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<project version="4">
|
||||||
|
<component name="EslintConfiguration">
|
||||||
|
<option name="fix-on-save" value="true" />
|
||||||
|
</component>
|
||||||
|
</project>
|
1
package-lock.json
generated
1
package-lock.json
generated
@ -12,6 +12,7 @@
|
|||||||
"@testing-library/react": "^13.3.0",
|
"@testing-library/react": "^13.3.0",
|
||||||
"@testing-library/user-event": "^13.5.0",
|
"@testing-library/user-event": "^13.5.0",
|
||||||
"markdown": "^0.5.0",
|
"markdown": "^0.5.0",
|
||||||
|
"prop-types": "^15.8.1",
|
||||||
"react": "^18.2.0",
|
"react": "^18.2.0",
|
||||||
"react-dom": "^18.2.0",
|
"react-dom": "^18.2.0",
|
||||||
"react-media": "^1.10.0",
|
"react-media": "^1.10.0",
|
||||||
|
@ -7,6 +7,7 @@
|
|||||||
"@testing-library/react": "^13.3.0",
|
"@testing-library/react": "^13.3.0",
|
||||||
"@testing-library/user-event": "^13.5.0",
|
"@testing-library/user-event": "^13.5.0",
|
||||||
"markdown": "^0.5.0",
|
"markdown": "^0.5.0",
|
||||||
|
"prop-types": "^15.8.1",
|
||||||
"react": "^18.2.0",
|
"react": "^18.2.0",
|
||||||
"react-dom": "^18.2.0",
|
"react-dom": "^18.2.0",
|
||||||
"react-media": "^1.10.0",
|
"react-media": "^1.10.0",
|
||||||
|
18
src/App.js
18
src/App.js
@ -1,12 +1,12 @@
|
|||||||
import {ThemeProvider} from 'styled-components';
|
import {ThemeProvider} from 'styled-components';
|
||||||
import theme from "./utils/theme";
|
import theme from './utils/theme';
|
||||||
import LandingPage from "./pages/LandingPage";
|
import LandingPage from './pages/LandingPage';
|
||||||
import Challenges from "./pages/Challanges/Challenges";
|
import Challenges from './pages/Challanges/Challenges';
|
||||||
import {BrowserRouter, Route, Routes} from "react-router-dom";
|
import {BrowserRouter, Route, Routes} from 'react-router-dom';
|
||||||
import NavBar from "./components/elements/NavBar";
|
import NavBar from './components/elements/NavBar';
|
||||||
import Footer from "./components/sections/Footer";
|
import Footer from './components/sections/Footer';
|
||||||
import {CHALLENGE_PAGE, CHALLENGES_PAGE} from "./utils/globals";
|
import {CHALLENGE_PAGE, CHALLENGES_PAGE} from './utils/globals';
|
||||||
import Challenge from "./pages/Challenge";
|
import Challenge from './pages/Challenge';
|
||||||
|
|
||||||
const App = () => {
|
const App = () => {
|
||||||
return (
|
return (
|
||||||
@ -23,6 +23,6 @@ const App = () => {
|
|||||||
</ThemeProvider>
|
</ThemeProvider>
|
||||||
</BrowserRouter>
|
</BrowserRouter>
|
||||||
);
|
);
|
||||||
}
|
};
|
||||||
|
|
||||||
export default App;
|
export default App;
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
import React from "react";
|
import React from 'react';
|
||||||
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';
|
||||||
|
|
||||||
const ButtonStyle = styled(Medium)`
|
const ButtonStyle = styled(Medium)`
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -28,7 +28,7 @@ const Button = (props) => {
|
|||||||
{props.children}
|
{props.children}
|
||||||
</ButtonStyle>
|
</ButtonStyle>
|
||||||
);
|
);
|
||||||
}
|
};
|
||||||
|
|
||||||
Button.propTypes = {
|
Button.propTypes = {
|
||||||
handler: PropsTypes.func,
|
handler: PropsTypes.func,
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
import React from "react";
|
import React from 'react';
|
||||||
import styled from "styled-components";
|
import styled from 'styled-components';
|
||||||
import {Label} from "../../utils/fonts";
|
import {Label} from '../../utils/fonts';
|
||||||
import PropsTypes from "prop-types";
|
import PropsTypes from 'prop-types';
|
||||||
|
|
||||||
const ButtonLinkStyle = styled(Label)`
|
const ButtonLinkStyle = styled(Label)`
|
||||||
background-color: ${({theme}) => theme.colors.green};
|
background-color: ${({theme}) => theme.colors.green};
|
||||||
@ -32,7 +32,7 @@ const ButtonLink = (props) => {
|
|||||||
{props.children}
|
{props.children}
|
||||||
</ButtonLinkStyle>
|
</ButtonLinkStyle>
|
||||||
);
|
);
|
||||||
}
|
};
|
||||||
|
|
||||||
ButtonLink.propTypes = {
|
ButtonLink.propTypes = {
|
||||||
children: PropsTypes.node,
|
children: PropsTypes.node,
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
import React from "react";
|
import React from 'react';
|
||||||
import {Container} from "../../utils/containers";
|
import {Container} from '../../utils/containers';
|
||||||
import styled from "styled-components";
|
import styled from 'styled-components';
|
||||||
import PropsTypes from "prop-types";
|
import PropsTypes from 'prop-types';
|
||||||
|
|
||||||
const CircleNumberStyle = styled(Container)`
|
const CircleNumberStyle = styled(Container)`
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
@ -21,7 +21,7 @@ const CircleNumberStyle = styled(Container)`
|
|||||||
height: 36px;
|
height: 36px;
|
||||||
font-size: 22px;
|
font-size: 22px;
|
||||||
}
|
}
|
||||||
`
|
`;
|
||||||
|
|
||||||
const CircleNumber = (props) => {
|
const CircleNumber = (props) => {
|
||||||
return (
|
return (
|
||||||
@ -29,7 +29,7 @@ const CircleNumber = (props) => {
|
|||||||
{props.number}
|
{props.number}
|
||||||
</CircleNumberStyle>
|
</CircleNumberStyle>
|
||||||
);
|
);
|
||||||
}
|
};
|
||||||
|
|
||||||
CircleNumber.propTypes = {
|
CircleNumber.propTypes = {
|
||||||
number: PropsTypes.number,
|
number: PropsTypes.number,
|
||||||
|
@ -1,8 +1,8 @@
|
|||||||
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';
|
||||||
|
|
||||||
const DesktopChallengeMenuStyle = styled(FlexColumn)`
|
const DesktopChallengeMenuStyle = styled(FlexColumn)`
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
@ -47,11 +47,11 @@ const DesktopChallengeMenu = (props) => {
|
|||||||
{option}
|
{option}
|
||||||
</H3>
|
</H3>
|
||||||
</Option>
|
</Option>
|
||||||
)
|
);
|
||||||
})}
|
})}
|
||||||
</DesktopChallengeMenuStyle>
|
</DesktopChallengeMenuStyle>
|
||||||
);
|
);
|
||||||
}
|
};
|
||||||
|
|
||||||
DesktopChallengeMenu.propTypes = {
|
DesktopChallengeMenu.propTypes = {
|
||||||
section: PropsTypes.number,
|
section: PropsTypes.number,
|
||||||
@ -61,6 +61,6 @@ DesktopChallengeMenu.propTypes = {
|
|||||||
DesktopChallengeMenu.defaultProps = {
|
DesktopChallengeMenu.defaultProps = {
|
||||||
section: 0,
|
section: 0,
|
||||||
setSection: null,
|
setSection: null,
|
||||||
}
|
};
|
||||||
|
|
||||||
export default DesktopChallengeMenu;
|
export default DesktopChallengeMenu;
|
@ -1,7 +1,7 @@
|
|||||||
import React from "react";
|
import React from 'react';
|
||||||
import styled from "styled-components";
|
import styled from 'styled-components';
|
||||||
import {FlexRow} from "../../utils/containers";
|
import {FlexRow} from '../../utils/containers';
|
||||||
import PropsTypes from "prop-types";
|
import PropsTypes from 'prop-types';
|
||||||
|
|
||||||
const FilterStyle = styled(FlexRow)`
|
const FilterStyle = styled(FlexRow)`
|
||||||
width: fit-content;
|
width: fit-content;
|
||||||
@ -35,7 +35,7 @@ const Filter = (props) => {
|
|||||||
const onCheckHandler = (e) => {
|
const onCheckHandler = (e) => {
|
||||||
if (e.target.checked)
|
if (e.target.checked)
|
||||||
props.handler(Number(e.target.value));
|
props.handler(Number(e.target.value));
|
||||||
}
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
@ -61,6 +61,6 @@ Filter.propTypes = {
|
|||||||
Filter.defaultProps = {
|
Filter.defaultProps = {
|
||||||
handler: null,
|
handler: null,
|
||||||
children: '',
|
children: '',
|
||||||
}
|
};
|
||||||
|
|
||||||
export default Filter;
|
export default Filter;
|
@ -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 "../Button";
|
import Button from '../Button';
|
||||||
import theme from "../../../utils/theme";
|
import theme from '../../../utils/theme';
|
||||||
import styled from "styled-components";
|
import styled from 'styled-components';
|
||||||
import FilterBy from "../../sections/FilterBy";
|
import FilterBy from '../../sections/FilterBy';
|
||||||
import filterOptions from "./filterOptions";
|
import filterOptions from './filterOptions';
|
||||||
import Media from "react-media";
|
import Media from 'react-media';
|
||||||
import PropsTypes from "prop-types";
|
import PropsTypes from 'prop-types';
|
||||||
|
|
||||||
const FiltersMenuStyle = styled(FlexColumn)`
|
const FiltersMenuStyle = styled(FlexColumn)`
|
||||||
position: fixed;
|
position: fixed;
|
||||||
@ -45,7 +45,7 @@ const FiltersMenu = (props) => {
|
|||||||
props.statusHandler(0);
|
props.statusHandler(0);
|
||||||
props.challengeTypeHandler(0);
|
props.challengeTypeHandler(0);
|
||||||
props.commercialHandler(0);
|
props.commercialHandler(0);
|
||||||
}
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
@ -81,7 +81,7 @@ const FiltersMenu = (props) => {
|
|||||||
</FiltersMenuStyle>
|
</FiltersMenuStyle>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
};
|
||||||
|
|
||||||
FiltersMenu.propTypes = {
|
FiltersMenu.propTypes = {
|
||||||
translateX: PropsTypes.string,
|
translateX: PropsTypes.string,
|
||||||
|
@ -1,9 +1,9 @@
|
|||||||
import React from "react";
|
import React from 'react';
|
||||||
import {FlexRow, Svg} from "../../utils/containers";
|
import {FlexRow, Svg} from '../../utils/containers';
|
||||||
import {Body, Medium} from "../../utils/fonts";
|
import {Body, Medium} from '../../utils/fonts';
|
||||||
import styled from "styled-components";
|
import styled from 'styled-components';
|
||||||
import {RENDER_DEADLINE_TIME, RENDER_ICO} from "../../utils/globals";
|
import {RENDER_DEADLINE_TIME, RENDER_ICO} from '../../utils/globals';
|
||||||
import PropsTypes from "prop-types";
|
import PropsTypes from 'prop-types';
|
||||||
|
|
||||||
const HoverLabel = styled(Body)`
|
const HoverLabel = styled(Body)`
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@ -45,7 +45,7 @@ const renderHoverLabel = (type, time) => {
|
|||||||
default:
|
default:
|
||||||
return '';
|
return '';
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
||||||
const IconLabelStyle = styled(FlexRow)`
|
const IconLabelStyle = styled(FlexRow)`
|
||||||
position: relative;
|
position: relative;
|
||||||
@ -55,7 +55,7 @@ const IconLabelStyle = styled(FlexRow)`
|
|||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
`
|
`;
|
||||||
|
|
||||||
const IconLabel = (props) => {
|
const IconLabel = (props) => {
|
||||||
return (
|
return (
|
||||||
|
@ -1,8 +1,8 @@
|
|||||||
import React from "react";
|
import React from 'react';
|
||||||
import {FlexRow, Svg} from "../../utils/containers";
|
import {FlexRow, Svg} from '../../utils/containers';
|
||||||
import theme from "../../utils/theme";
|
import theme from '../../utils/theme';
|
||||||
import {Medium} from "../../utils/fonts";
|
import {Medium} from '../../utils/fonts';
|
||||||
import PropsTypes from "prop-types";
|
import PropsTypes from 'prop-types';
|
||||||
|
|
||||||
const InfoItem = (props) => {
|
const InfoItem = (props) => {
|
||||||
return (
|
return (
|
||||||
|
@ -1,16 +1,16 @@
|
|||||||
import React from "react";
|
import React from 'react';
|
||||||
import {FlexColumn} from "../../utils/containers";
|
import {FlexColumn} from '../../utils/containers';
|
||||||
import InfoItem from "./InfoItem";
|
import InfoItem from './InfoItem';
|
||||||
import textIco from "../../assets/text_ico.svg";
|
import textIco from '../../assets/text_ico.svg';
|
||||||
import metricIco from "../../assets/metric_ico.svg";
|
import metricIco from '../../assets/metric_ico.svg';
|
||||||
import bestScoreIco from "../../assets/cup_ico.svg";
|
import bestScoreIco from '../../assets/cup_ico.svg';
|
||||||
import baselineIco from "../../assets/baseline_ico.svg";
|
import baselineIco from '../../assets/baseline_ico.svg';
|
||||||
import timeIco from "../../assets/clock_ico.svg";
|
import timeIco from '../../assets/clock_ico.svg';
|
||||||
import {RENDER_DEADLINE_TIME} from "../../utils/globals";
|
import {RENDER_DEADLINE_TIME} from '../../utils/globals';
|
||||||
import coinsIco from "../../assets/coins_ico.svg";
|
import coinsIco from '../../assets/coins_ico.svg';
|
||||||
import Media from "react-media";
|
import Media from 'react-media';
|
||||||
import theme from "../../utils/theme";
|
import theme from '../../utils/theme';
|
||||||
import PropsTypes from "prop-types";
|
import PropsTypes from 'prop-types';
|
||||||
|
|
||||||
const InfoList = (props) => {
|
const InfoList = (props) => {
|
||||||
const itemsRender = (gap, iconsSize) => {
|
const itemsRender = (gap, iconsSize) => {
|
||||||
@ -36,7 +36,7 @@ const InfoList = (props) => {
|
|||||||
</InfoItem>
|
</InfoItem>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
@ -53,7 +53,7 @@ const InfoList = (props) => {
|
|||||||
</Media>
|
</Media>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
};
|
||||||
|
|
||||||
InfoList.propTypes = {
|
InfoList.propTypes = {
|
||||||
iconsSize: PropsTypes.string,
|
iconsSize: PropsTypes.string,
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
import React from "react";
|
import React from 'react';
|
||||||
import styled, {keyframes} from "styled-components";
|
import styled, {keyframes} from 'styled-components';
|
||||||
import {Container} from "../../utils/containers";
|
import {Container} from '../../utils/containers';
|
||||||
import PropsTypes from "prop-types";
|
import PropsTypes from 'prop-types';
|
||||||
|
|
||||||
const rotate = keyframes`
|
const rotate = keyframes`
|
||||||
from {
|
from {
|
||||||
@ -54,6 +54,6 @@ Loading.propTypes = {
|
|||||||
|
|
||||||
Loading.defaultProps = {
|
Loading.defaultProps = {
|
||||||
visible: true,
|
visible: true,
|
||||||
}
|
};
|
||||||
|
|
||||||
export default Loading;
|
export default Loading;
|
@ -1,8 +1,8 @@
|
|||||||
import React from "react";
|
import React from 'react';
|
||||||
import {H1} from "../../utils/fonts";
|
import {H1} from '../../utils/fonts';
|
||||||
import theme from "../../utils/theme";
|
import theme from '../../utils/theme';
|
||||||
import {Link} from "react-router-dom";
|
import {Link} from 'react-router-dom';
|
||||||
import styled from "styled-components";
|
import styled from 'styled-components';
|
||||||
|
|
||||||
const LogoStyle = styled(H1)`
|
const LogoStyle = styled(H1)`
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
|
@ -1,8 +1,8 @@
|
|||||||
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';
|
||||||
|
|
||||||
const MenuOption = styled(Medium)`
|
const MenuOption = styled(Medium)`
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
@ -1,13 +1,13 @@
|
|||||||
import React from "react";
|
import React from 'react';
|
||||||
import {FlexColumn, FlexRow, Svg, TransBack} from "../../utils/containers";
|
import {FlexColumn, FlexRow, Svg, TransBack} from '../../utils/containers';
|
||||||
import {Menu} from "../../utils/fonts";
|
import {Menu} from '../../utils/fonts';
|
||||||
import loginIco from '../../assets/login_ico.svg';
|
import loginIco from '../../assets/login_ico.svg';
|
||||||
import registerIco from '../../assets/register_ico.svg';
|
import registerIco from '../../assets/register_ico.svg';
|
||||||
import cupIco from '../../assets/cup_ico.svg';
|
import cupIco from '../../assets/cup_ico.svg';
|
||||||
import styled from "styled-components";
|
import styled from 'styled-components';
|
||||||
import {Link} from "react-router-dom";
|
import {Link} from 'react-router-dom';
|
||||||
import {CHALLENGES_PAGE} from "../../utils/globals";
|
import {CHALLENGES_PAGE} from '../../utils/globals';
|
||||||
import PropsTypes from "prop-types";
|
import PropsTypes from 'prop-types';
|
||||||
|
|
||||||
const MobileNavMenuStyle = styled(FlexColumn)`
|
const MobileNavMenuStyle = styled(FlexColumn)`
|
||||||
gap: 32px;
|
gap: 32px;
|
||||||
@ -72,7 +72,7 @@ const MobileNavMenu = (props) => {
|
|||||||
</MobileNavMenuStyle>
|
</MobileNavMenuStyle>
|
||||||
</TransBack>
|
</TransBack>
|
||||||
);
|
);
|
||||||
}
|
};
|
||||||
|
|
||||||
MobileNavMenu.propTypes = {
|
MobileNavMenu.propTypes = {
|
||||||
translateY: PropsTypes.string,
|
translateY: PropsTypes.string,
|
||||||
|
@ -1,16 +1,16 @@
|
|||||||
import React from "react";
|
import React from 'react';
|
||||||
import {Container, FlexRow, Svg} from "../../../utils/containers";
|
import {Container, FlexRow, Svg} from '../../../utils/containers';
|
||||||
import Logo from "../Logo";
|
import Logo from '../Logo';
|
||||||
import styled from "styled-components";
|
import styled from 'styled-components';
|
||||||
import menuButtonIcon from '../../../assets/menu-button.svg';
|
import menuButtonIcon from '../../../assets/menu-button.svg';
|
||||||
import MobileNavMenu from "../MobileNavMenu";
|
import MobileNavMenu from '../MobileNavMenu';
|
||||||
import {Link} from "react-router-dom";
|
import {Link} from 'react-router-dom';
|
||||||
import loginIco from "../../../assets/login_ico.svg";
|
import loginIco from '../../../assets/login_ico.svg';
|
||||||
import {Menu} from "../../../utils/fonts";
|
import {Menu} from '../../../utils/fonts';
|
||||||
import registerIco from "../../../assets/register_ico.svg";
|
import registerIco from '../../../assets/register_ico.svg';
|
||||||
import {CHALLENGES_PAGE} from "../../../utils/globals";
|
import {CHALLENGES_PAGE} from '../../../utils/globals';
|
||||||
import cupIco from "../../../assets/cup_ico.svg";
|
import cupIco from '../../../assets/cup_ico.svg';
|
||||||
import NavBarStyle from "./NavBarStyle";
|
import NavBarStyle from './NavBarStyle';
|
||||||
|
|
||||||
const MenuButton = styled(Container)`
|
const MenuButton = styled(Container)`
|
||||||
width: 20px;
|
width: 20px;
|
||||||
@ -35,7 +35,7 @@ const NavBar = () => {
|
|||||||
setNavMenuTranslateY('0');
|
setNavMenuTranslateY('0');
|
||||||
else
|
else
|
||||||
setNavMenuTranslateY('calc(-100vh - 42px)');
|
setNavMenuTranslateY('calc(-100vh - 42px)');
|
||||||
}
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<NavBarStyle as='header'>
|
<NavBarStyle as='header'>
|
||||||
@ -66,6 +66,6 @@ const NavBar = () => {
|
|||||||
<MobileNavMenu translateY={navMenuTranslateY} toggleNavMenu={toggleNavMenu}/>
|
<MobileNavMenu translateY={navMenuTranslateY} toggleNavMenu={toggleNavMenu}/>
|
||||||
</NavBarStyle>
|
</NavBarStyle>
|
||||||
);
|
);
|
||||||
}
|
};
|
||||||
|
|
||||||
export default NavBar;
|
export default NavBar;
|
@ -1,5 +1,5 @@
|
|||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
import {Container} from "../../../utils/containers";
|
import {Container} from '../../../utils/containers';
|
||||||
|
|
||||||
const NavBarStyle = styled(Container)`
|
const NavBarStyle = styled(Container)`
|
||||||
position: fixed;
|
position: fixed;
|
||||||
|
@ -1,10 +1,10 @@
|
|||||||
import React from "react";
|
import React from 'react';
|
||||||
import {FlexRow, Svg} from "../../utils/containers";
|
import {FlexRow, Svg} from '../../utils/containers';
|
||||||
import CircleNumber from "./CircleNumber";
|
import CircleNumber from './CircleNumber';
|
||||||
import polygon from '../../assets/polygon.svg';
|
import polygon from '../../assets/polygon.svg';
|
||||||
import styled from "styled-components";
|
import styled from 'styled-components';
|
||||||
import theme from "../../utils/theme";
|
import theme from '../../utils/theme';
|
||||||
import PropsTypes from "prop-types";
|
import PropsTypes from 'prop-types';
|
||||||
|
|
||||||
const PagerStyle = styled(FlexRow)`
|
const PagerStyle = styled(FlexRow)`
|
||||||
gap: 14px;
|
gap: 14px;
|
||||||
@ -63,7 +63,7 @@ const Pager = (props) => {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
return '';
|
return '';
|
||||||
}
|
};
|
||||||
|
|
||||||
Pager.propTypes = {
|
Pager.propTypes = {
|
||||||
visible: PropsTypes.bool,
|
visible: PropsTypes.bool,
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
import React from "react";
|
import React from 'react';
|
||||||
import {FlexColumn} from "../../utils/containers";
|
import {FlexColumn} from '../../utils/containers';
|
||||||
import theme from "../../utils/theme";
|
import theme from '../../utils/theme';
|
||||||
import PropsTypes from "prop-types";
|
import PropsTypes from 'prop-types';
|
||||||
|
|
||||||
const Placeholder = (props) => {
|
const Placeholder = (props) => {
|
||||||
return (
|
return (
|
||||||
|
@ -1,10 +1,10 @@
|
|||||||
import React from "react";
|
import React from 'react';
|
||||||
import {FlexRow, Svg} from "../../utils/containers";
|
import {FlexRow, Svg} from '../../utils/containers';
|
||||||
import loopIco from '../../assets/loop_ico.svg';
|
import loopIco from '../../assets/loop_ico.svg';
|
||||||
import filtersIco from '../../assets/filters_ico.svg';
|
import filtersIco from '../../assets/filters_ico.svg';
|
||||||
import styled from "styled-components";
|
import styled from 'styled-components';
|
||||||
import {Body} from "../../utils/fonts";
|
import {Body} from '../../utils/fonts';
|
||||||
import PropsTypes from "prop-types";
|
import PropsTypes from 'prop-types';
|
||||||
|
|
||||||
const SearchStyle = styled(FlexRow)`
|
const SearchStyle = styled(FlexRow)`
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
@ -1,14 +1,14 @@
|
|||||||
import React from "react";
|
import React from 'react';
|
||||||
import {FlexColumn, FlexRow, Grid} from "../../../utils/containers";
|
import {FlexColumn, FlexRow, Grid} from '../../../utils/containers';
|
||||||
import getChallengeSubmissions from "../../../api/getChallengeSubmissions";
|
import getChallengeSubmissions from '../../../api/getChallengeSubmissions';
|
||||||
import {H3, Medium} from "../../../utils/fonts";
|
import {H3, Medium} from '../../../utils/fonts';
|
||||||
import _renderSubmissions from "./_renderSubmissions";
|
import _renderSubmissions from './_renderSubmissions';
|
||||||
import Pager from "../Pager";
|
import Pager from '../Pager';
|
||||||
import {CALC_PAGES} from "../../../utils/globals";
|
import {CALC_PAGES} 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 "../Loading";
|
import Loading from '../Loading';
|
||||||
import PropsTypes from "prop-types";
|
import PropsTypes from 'prop-types';
|
||||||
|
|
||||||
const Table = (props) => {
|
const Table = (props) => {
|
||||||
const headerElements = ['#', 'submitter', 'when', 'result', 'entries'];
|
const headerElements = ['#', 'submitter', 'when', 'result', 'entries'];
|
||||||
@ -22,26 +22,26 @@ const Table = (props) => {
|
|||||||
|
|
||||||
const challengeDataRequest = () => {
|
const challengeDataRequest = () => {
|
||||||
getChallengeSubmissions(setChallengeData, setLoading, props.challengeName);
|
getChallengeSubmissions(setChallengeData, setLoading, props.challengeName);
|
||||||
}
|
};
|
||||||
|
|
||||||
const renderSubmissions = () => {
|
const renderSubmissions = () => {
|
||||||
return _renderSubmissions(pageNr, challengeData.submissions
|
return _renderSubmissions(pageNr, challengeData.submissions
|
||||||
? challengeData.submissions : []);
|
? challengeData.submissions : []);
|
||||||
}
|
};
|
||||||
|
|
||||||
const nextPage = () => {
|
const nextPage = () => {
|
||||||
if (pageNr !== CALC_PAGES(challengeData.submissions ? challengeData.submissions : [])) {
|
if (pageNr !== CALC_PAGES(challengeData.submissions ? challengeData.submissions : [])) {
|
||||||
let newPage = pageNr + 1;
|
let newPage = pageNr + 1;
|
||||||
setPageNr(newPage);
|
setPageNr(newPage);
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
||||||
const previousPage = () => {
|
const previousPage = () => {
|
||||||
if (pageNr !== 1) {
|
if (pageNr !== 1) {
|
||||||
let newPage = pageNr - 1;
|
let newPage = pageNr - 1;
|
||||||
setPageNr(newPage);
|
setPageNr(newPage);
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
||||||
const mobileRender = () => {
|
const mobileRender = () => {
|
||||||
return (
|
return (
|
||||||
@ -54,14 +54,14 @@ const Table = (props) => {
|
|||||||
alignmentX={elem === 'entries' ? 'flex-end' : 'flex-start'}>
|
alignmentX={elem === 'entries' ? 'flex-end' : 'flex-start'}>
|
||||||
<Medium as='th'>{elem}</Medium>
|
<Medium as='th'>{elem}</Medium>
|
||||||
</FlexRow>
|
</FlexRow>
|
||||||
)
|
);
|
||||||
})}
|
})}
|
||||||
</Grid>
|
</Grid>
|
||||||
{renderSubmissions()}
|
{renderSubmissions()}
|
||||||
</FlexColumn>
|
</FlexColumn>
|
||||||
|
|
||||||
);
|
);
|
||||||
}
|
};
|
||||||
|
|
||||||
const desktopRender = () => {
|
const desktopRender = () => {
|
||||||
return (
|
return (
|
||||||
@ -74,13 +74,13 @@ const Table = (props) => {
|
|||||||
alignmentX={elem === 'entries' ? 'flex-end' : 'flex-start'}>
|
alignmentX={elem === 'entries' ? 'flex-end' : 'flex-start'}>
|
||||||
<H3 as='th'>{elem}</H3>
|
<H3 as='th'>{elem}</H3>
|
||||||
</FlexRow>
|
</FlexRow>
|
||||||
)
|
);
|
||||||
})}
|
})}
|
||||||
</Grid>
|
</Grid>
|
||||||
{renderSubmissions()}
|
{renderSubmissions()}
|
||||||
</FlexColumn>
|
</FlexColumn>
|
||||||
);
|
);
|
||||||
}
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
@ -95,7 +95,7 @@ const Table = (props) => {
|
|||||||
pages={CALC_PAGES(challengeData.submissions ? challengeData.submissions : [])}/>
|
pages={CALC_PAGES(challengeData.submissions ? challengeData.submissions : [])}/>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
};
|
||||||
|
|
||||||
Table.propTypes = {
|
Table.propTypes = {
|
||||||
challengeName: PropsTypes.string,
|
challengeName: PropsTypes.string,
|
||||||
@ -103,6 +103,6 @@ Table.propTypes = {
|
|||||||
|
|
||||||
Table.defaultProps = {
|
Table.defaultProps = {
|
||||||
challengeName: '',
|
challengeName: '',
|
||||||
}
|
};
|
||||||
|
|
||||||
export default Table;
|
export default Table;
|
@ -1,7 +1,7 @@
|
|||||||
import {ELEMENTS_PER_PAGE} from "../../../utils/globals";
|
import {ELEMENTS_PER_PAGE} from '../../../utils/globals';
|
||||||
import {FlexColumn, FlexRow, Grid} from "../../../utils/containers";
|
import {FlexColumn, FlexRow, Grid} from '../../../utils/containers';
|
||||||
import {Body} from "../../../utils/fonts";
|
import {Body} from '../../../utils/fonts';
|
||||||
import styled from "styled-components";
|
import styled from 'styled-components';
|
||||||
|
|
||||||
const Line = styled(FlexRow)`
|
const Line = styled(FlexRow)`
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@ -44,6 +44,6 @@ const _renderSubmissions = (pageNr, submissions) => {
|
|||||||
</FlexColumn>
|
</FlexColumn>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
||||||
export default _renderSubmissions;
|
export default _renderSubmissions;
|
@ -1,9 +1,9 @@
|
|||||||
import React from "react";
|
import React from 'react';
|
||||||
import {FlexColumn, FlexRow, ImageBackground} from "../../utils/containers";
|
import {FlexColumn, FlexRow, ImageBackground} from '../../utils/containers';
|
||||||
import {Body, H2, Medium} from "../../utils/fonts";
|
import {Body, H2, Medium} from '../../utils/fonts';
|
||||||
import CircleNumber from "../elements/CircleNumber";
|
import CircleNumber from '../elements/CircleNumber';
|
||||||
import Media from "react-media";
|
import Media from 'react-media';
|
||||||
import theme from "../../utils/theme";
|
import theme from '../../utils/theme';
|
||||||
import commercialImage from '../../assets/commercial-image.svg';
|
import commercialImage from '../../assets/commercial-image.svg';
|
||||||
|
|
||||||
const Commercial = () => {
|
const Commercial = () => {
|
||||||
@ -100,6 +100,6 @@ const Commercial = () => {
|
|||||||
</Media>
|
</Media>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
};
|
||||||
|
|
||||||
export default Commercial;
|
export default Commercial;
|
@ -1,8 +1,8 @@
|
|||||||
import React from "react";
|
import React from 'react';
|
||||||
import {FlexColumn, FlexRow, Svg} from "../../utils/containers";
|
import {FlexColumn, FlexRow, Svg} from '../../utils/containers';
|
||||||
import {Body, H2, Medium} from "../../utils/fonts";
|
import {Body, H2, Medium} from '../../utils/fonts';
|
||||||
import Media from "react-media";
|
import Media from 'react-media';
|
||||||
import theme from "../../utils/theme";
|
import theme from '../../utils/theme';
|
||||||
import uamLogo from '../../assets/uam-logo.svg';
|
import uamLogo from '../../assets/uam-logo.svg';
|
||||||
|
|
||||||
const Csi = () => {
|
const Csi = () => {
|
||||||
@ -26,7 +26,7 @@ const Csi = () => {
|
|||||||
</Medium>
|
</Medium>
|
||||||
</FlexColumn>
|
</FlexColumn>
|
||||||
);
|
);
|
||||||
}
|
};
|
||||||
|
|
||||||
const desktopRender = () => {
|
const desktopRender = () => {
|
||||||
return (
|
return (
|
||||||
@ -53,7 +53,7 @@ const Csi = () => {
|
|||||||
<Svg src={uamLogo} width='200px' height='242px' size='contain'/>
|
<Svg src={uamLogo} width='200px' height='242px' size='contain'/>
|
||||||
</FlexRow>
|
</FlexRow>
|
||||||
);
|
);
|
||||||
}
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
@ -65,6 +65,6 @@ const Csi = () => {
|
|||||||
</Media>
|
</Media>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
};
|
||||||
|
|
||||||
export default Csi;
|
export default Csi;
|
@ -1,11 +1,11 @@
|
|||||||
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 "../elements/Filter";
|
import Filter from '../elements/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';
|
||||||
import PropsTypes from "prop-types";
|
import PropsTypes from 'prop-types';
|
||||||
|
|
||||||
const FilterBy = (props) => {
|
const FilterBy = (props) => {
|
||||||
const renderFilterOptions = () => {
|
const renderFilterOptions = () => {
|
||||||
@ -26,7 +26,7 @@ const FilterBy = (props) => {
|
|||||||
);
|
);
|
||||||
})
|
})
|
||||||
);
|
);
|
||||||
}
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<FlexColumn as='fieldset' width='94%' alignmentX='flex-start'>
|
<FlexColumn as='fieldset' width='94%' alignmentX='flex-start'>
|
||||||
@ -46,7 +46,7 @@ const FilterBy = (props) => {
|
|||||||
</Grid>
|
</Grid>
|
||||||
</FlexColumn>
|
</FlexColumn>
|
||||||
);
|
);
|
||||||
}
|
};
|
||||||
|
|
||||||
FilterBy.propTypes = {
|
FilterBy.propTypes = {
|
||||||
options: PropsTypes.arrayOf(PropsTypes.shape({
|
options: PropsTypes.arrayOf(PropsTypes.shape({
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
import React from "react";
|
import React from 'react';
|
||||||
import {Container, FlexRow} from "../../utils/containers";
|
import {Container, FlexRow} from '../../utils/containers';
|
||||||
import styled from "styled-components";
|
import styled from 'styled-components';
|
||||||
import {Medium} from "../../utils/fonts";
|
import {Medium} from '../../utils/fonts';
|
||||||
|
|
||||||
const FooterStyle = styled(FlexRow)`
|
const FooterStyle = styled(FlexRow)`
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@ -39,6 +39,6 @@ const Footer = () => {
|
|||||||
</Medium>
|
</Medium>
|
||||||
</FooterStyle>
|
</FooterStyle>
|
||||||
);
|
);
|
||||||
}
|
};
|
||||||
|
|
||||||
export default Footer;
|
export default Footer;
|
@ -1,12 +1,12 @@
|
|||||||
import React from "react";
|
import React from 'react';
|
||||||
import {Body, H1, Medium} from "../../utils/fonts";
|
import {Body, H1, Medium} from '../../utils/fonts';
|
||||||
import {Container, FlexColumn, FlexRow, Svg} from "../../utils/containers";
|
import {Container, FlexColumn, FlexRow, Svg} from '../../utils/containers';
|
||||||
import theme from "../../utils/theme";
|
import theme from '../../utils/theme';
|
||||||
import ButtonLink from "../elements/ButtonLink";
|
import ButtonLink from '../elements/ButtonLink';
|
||||||
import {Link} from "react-router-dom";
|
import {Link} from 'react-router-dom';
|
||||||
import Media from "react-media";
|
import Media from 'react-media';
|
||||||
import codepenIco from '../../assets/codepen_ico.svg';
|
import codepenIco from '../../assets/codepen_ico.svg';
|
||||||
import styled from "styled-components";
|
import styled from 'styled-components';
|
||||||
|
|
||||||
const TitleParagraph = styled(Medium)`
|
const TitleParagraph = styled(Medium)`
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
@ -31,7 +31,7 @@ const mobileRender = () => {
|
|||||||
</ButtonLink>
|
</ButtonLink>
|
||||||
</FlexColumn>
|
</FlexColumn>
|
||||||
);
|
);
|
||||||
}
|
};
|
||||||
|
|
||||||
const desktopRender = () => {
|
const desktopRender = () => {
|
||||||
return (
|
return (
|
||||||
@ -56,7 +56,7 @@ const desktopRender = () => {
|
|||||||
</FlexRow>
|
</FlexRow>
|
||||||
</FlexColumn>
|
</FlexColumn>
|
||||||
);
|
);
|
||||||
}
|
};
|
||||||
|
|
||||||
const Hero = () => {
|
const Hero = () => {
|
||||||
return (
|
return (
|
||||||
@ -69,6 +69,6 @@ const Hero = () => {
|
|||||||
</Media>
|
</Media>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
};
|
||||||
|
|
||||||
export default Hero;
|
export default Hero;
|
@ -1,6 +1,6 @@
|
|||||||
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';
|
||||||
|
|
||||||
const HowTo = () => {
|
const HowTo = () => {
|
||||||
return (
|
return (
|
||||||
@ -10,6 +10,6 @@ const HowTo = () => {
|
|||||||
</H2>
|
</H2>
|
||||||
</FlexColumn>
|
</FlexColumn>
|
||||||
);
|
);
|
||||||
}
|
};
|
||||||
|
|
||||||
export default HowTo;
|
export default HowTo;
|
@ -1,10 +1,10 @@
|
|||||||
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, FlexRow} from "../../utils/containers";
|
import {FlexColumn, FlexRow} from '../../utils/containers';
|
||||||
import {H2, H3} from "../../utils/fonts";
|
import {H2, H3} from '../../utils/fonts';
|
||||||
import Table from "../elements/Table";
|
import Table from '../elements/Table';
|
||||||
import styled from "styled-components";
|
import styled from 'styled-components';
|
||||||
import PropsTypes from 'prop-types';
|
import PropsTypes from 'prop-types';
|
||||||
|
|
||||||
const BoardVariantMobile = styled(FlexRow)`
|
const BoardVariantMobile = styled(FlexRow)`
|
||||||
@ -64,7 +64,7 @@ const Leaderboard = (props) => {
|
|||||||
<Table challengeName={props.challengeName}/>
|
<Table challengeName={props.challengeName}/>
|
||||||
</FlexColumn>
|
</FlexColumn>
|
||||||
);
|
);
|
||||||
}
|
};
|
||||||
|
|
||||||
const desktopRender = () => {
|
const desktopRender = () => {
|
||||||
return (
|
return (
|
||||||
@ -89,7 +89,7 @@ const Leaderboard = (props) => {
|
|||||||
<Table challengeName={props.challengeName}/>
|
<Table challengeName={props.challengeName}/>
|
||||||
</FlexColumn>
|
</FlexColumn>
|
||||||
);
|
);
|
||||||
}
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
@ -100,12 +100,12 @@ const Leaderboard = (props) => {
|
|||||||
{desktopRender()}
|
{desktopRender()}
|
||||||
</Media>
|
</Media>
|
||||||
</>
|
</>
|
||||||
)
|
);
|
||||||
}
|
};
|
||||||
|
|
||||||
Leaderboard.propsTypes = {
|
Leaderboard.propsTypes = {
|
||||||
challengeName: PropsTypes.string,
|
challengeName: PropsTypes.string,
|
||||||
}
|
};
|
||||||
|
|
||||||
Leaderboard.defaultProps = {
|
Leaderboard.defaultProps = {
|
||||||
challengeName: '',
|
challengeName: '',
|
||||||
|
@ -1,12 +1,12 @@
|
|||||||
import React from "react";
|
import React from 'react';
|
||||||
import {Container, FlexColumn, FlexRow, Grid} from "../../utils/containers";
|
import {Container, FlexColumn, FlexRow, Grid} from '../../utils/containers';
|
||||||
import {Body, H3} from "../../utils/fonts";
|
import {Body, H3} from '../../utils/fonts';
|
||||||
import styled from "styled-components";
|
import styled from 'styled-components';
|
||||||
import IconLabel from "../elements/IconLabel";
|
import IconLabel from '../elements/IconLabel';
|
||||||
import {Link} from "react-router-dom";
|
import {Link} from 'react-router-dom';
|
||||||
import {CHALLENGE_PAGE, MINI_DESCRIPTION_RENDER} from "../../utils/globals";
|
import {CHALLENGE_PAGE, MINI_DESCRIPTION_RENDER} from '../../utils/globals';
|
||||||
import theme from "../../utils/theme";
|
import theme from '../../utils/theme';
|
||||||
import PropsTypes from "prop-types";
|
import PropsTypes from 'prop-types';
|
||||||
|
|
||||||
const ChallengeStyle = styled(FlexColumn)`
|
const ChallengeStyle = styled(FlexColumn)`
|
||||||
padding: 12px;
|
padding: 12px;
|
||||||
@ -85,7 +85,7 @@ const MiniChallenge = (props) => {
|
|||||||
</FlexColumn>
|
</FlexColumn>
|
||||||
</ChallengeStyle>
|
</ChallengeStyle>
|
||||||
);
|
);
|
||||||
}
|
};
|
||||||
|
|
||||||
MiniChallenge.propTypes = {
|
MiniChallenge.propTypes = {
|
||||||
name: PropsTypes.string,
|
name: PropsTypes.string,
|
||||||
@ -109,6 +109,6 @@ MiniChallenge.defaultProps = {
|
|||||||
deadline: 'xxx',
|
deadline: 'xxx',
|
||||||
baseline: 'xxx',
|
baseline: 'xxx',
|
||||||
prize: 'xxx'
|
prize: 'xxx'
|
||||||
}
|
};
|
||||||
|
|
||||||
export default MiniChallenge;
|
export default MiniChallenge;
|
@ -1,10 +1,10 @@
|
|||||||
import React from "react";
|
import React from 'react';
|
||||||
import {FlexColumn, FlexRow, ImageBackground, Svg} from "../../utils/containers";
|
import {FlexColumn, FlexRow, ImageBackground, Svg} from '../../utils/containers';
|
||||||
import {Body, H2} from "../../utils/fonts";
|
import {Body, H2} from '../../utils/fonts';
|
||||||
import cubeIcon from '../../assets/cube_ico.svg';
|
import cubeIcon from '../../assets/cube_ico.svg';
|
||||||
import theme from "../../utils/theme";
|
import theme from '../../utils/theme';
|
||||||
import Media from "react-media";
|
import Media from 'react-media';
|
||||||
import ellipse from '../../assets/ellipse.svg'
|
import ellipse from '../../assets/ellipse.svg';
|
||||||
|
|
||||||
const Motivation = () => {
|
const Motivation = () => {
|
||||||
const content = [
|
const content = [
|
||||||
@ -38,7 +38,7 @@ const Motivation = () => {
|
|||||||
</FlexColumn>
|
</FlexColumn>
|
||||||
</FlexColumn>
|
</FlexColumn>
|
||||||
);
|
);
|
||||||
}
|
};
|
||||||
|
|
||||||
const desktopRender = () => {
|
const desktopRender = () => {
|
||||||
return (
|
return (
|
||||||
@ -65,7 +65,7 @@ const Motivation = () => {
|
|||||||
</FlexColumn>
|
</FlexColumn>
|
||||||
</ImageBackground>
|
</ImageBackground>
|
||||||
);
|
);
|
||||||
}
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
@ -77,6 +77,6 @@ const Motivation = () => {
|
|||||||
</Media>
|
</Media>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
};
|
||||||
|
|
||||||
export default Motivation;
|
export default Motivation;
|
@ -1,6 +1,6 @@
|
|||||||
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';
|
||||||
|
|
||||||
const MyEntries = () => {
|
const MyEntries = () => {
|
||||||
return (
|
return (
|
||||||
@ -10,6 +10,6 @@ const MyEntries = () => {
|
|||||||
</H2>
|
</H2>
|
||||||
</FlexColumn>
|
</FlexColumn>
|
||||||
);
|
);
|
||||||
}
|
};
|
||||||
|
|
||||||
export default MyEntries;
|
export default MyEntries;
|
@ -1,8 +1,8 @@
|
|||||||
import React from "react";
|
import React from 'react';
|
||||||
import {FlexColumn, Grid} from "../../utils/containers";
|
import {FlexColumn, Grid} from '../../utils/containers';
|
||||||
import {H2} from "../../utils/fonts";
|
import {H2} from '../../utils/fonts';
|
||||||
import Placeholder from "../elements/Placeholder";
|
import Placeholder from '../elements/Placeholder';
|
||||||
import styled from "styled-components";
|
import styled from 'styled-components';
|
||||||
|
|
||||||
const PartnershipsStyle = styled(FlexColumn)`
|
const PartnershipsStyle = styled(FlexColumn)`
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
@ -43,6 +43,6 @@ const Partnerships = () => {
|
|||||||
</FlexColumn>
|
</FlexColumn>
|
||||||
</PartnershipsStyle>
|
</PartnershipsStyle>
|
||||||
);
|
);
|
||||||
}
|
};
|
||||||
|
|
||||||
export default Partnerships;
|
export default Partnerships;
|
@ -1,15 +1,15 @@
|
|||||||
import React from "react";
|
import React from 'react';
|
||||||
import {FlexColumn} from "../../utils/containers";
|
import {FlexColumn} from '../../utils/containers';
|
||||||
import {Body, H2, Medium} from "../../utils/fonts";
|
import {Body, H2, Medium} 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 {markdown} from "markdown";
|
import {markdown} from 'markdown';
|
||||||
import styled from "styled-components";
|
import styled from 'styled-components';
|
||||||
import InfoList from "../elements/InfoList";
|
import InfoList from '../elements/InfoList';
|
||||||
import Loading from "../elements/Loading";
|
import Loading from '../elements/Loading';
|
||||||
import PropsTypes from "prop-types";
|
import PropsTypes from 'prop-types';
|
||||||
import MiniChallenge from "./MiniChallenge";
|
import MiniChallenge from './MiniChallenge';
|
||||||
|
|
||||||
const ReadmeStyle = styled(Body)`
|
const ReadmeStyle = styled(Body)`
|
||||||
h3 {
|
h3 {
|
||||||
@ -70,7 +70,7 @@ const Readme = (props) => {
|
|||||||
regex = /<\/h2>/g;
|
regex = /<\/h2>/g;
|
||||||
result = result.replace(regex, '</h3>');
|
result = result.replace(regex, '</h3>');
|
||||||
return result;
|
return result;
|
||||||
}
|
};
|
||||||
|
|
||||||
const mobileRender = () => {
|
const mobileRender = () => {
|
||||||
return (
|
return (
|
||||||
@ -109,7 +109,7 @@ const Readme = (props) => {
|
|||||||
</FlexColumn>
|
</FlexColumn>
|
||||||
</FlexColumn>
|
</FlexColumn>
|
||||||
);
|
);
|
||||||
}
|
};
|
||||||
|
|
||||||
const desktopRender = () => {
|
const desktopRender = () => {
|
||||||
return (
|
return (
|
||||||
@ -147,7 +147,7 @@ const Readme = (props) => {
|
|||||||
</FlexColumn>
|
</FlexColumn>
|
||||||
</FlexColumn>
|
</FlexColumn>
|
||||||
);
|
);
|
||||||
}
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
@ -159,7 +159,7 @@ const Readme = (props) => {
|
|||||||
</Media>
|
</Media>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
};
|
||||||
|
|
||||||
MiniChallenge.propTypes = {
|
MiniChallenge.propTypes = {
|
||||||
challengeName: PropsTypes.string,
|
challengeName: PropsTypes.string,
|
||||||
@ -169,6 +169,6 @@ MiniChallenge.propTypes = {
|
|||||||
MiniChallenge.defaultProps = {
|
MiniChallenge.defaultProps = {
|
||||||
challengeName: '',
|
challengeName: '',
|
||||||
description: '',
|
description: '',
|
||||||
}
|
};
|
||||||
|
|
||||||
export default Readme;
|
export default Readme;
|
@ -1,6 +1,6 @@
|
|||||||
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';
|
||||||
|
|
||||||
const Submit = () => {
|
const Submit = () => {
|
||||||
return (
|
return (
|
||||||
@ -10,6 +10,6 @@ const Submit = () => {
|
|||||||
</H2>
|
</H2>
|
||||||
</FlexColumn>
|
</FlexColumn>
|
||||||
);
|
);
|
||||||
}
|
};
|
||||||
|
|
||||||
export default Submit;
|
export default Submit;
|
@ -1,17 +1,17 @@
|
|||||||
import React from "react";
|
import React from 'react';
|
||||||
import {Body, H1} from "../../utils/fonts";
|
import {Body, H1} from '../../utils/fonts';
|
||||||
import {FlexColumn, FlexRow, Svg} from "../../utils/containers";
|
import {FlexColumn, FlexRow, Svg} from '../../utils/containers';
|
||||||
import Search from "../../components/elements/Search";
|
import Search from '../../components/elements/Search';
|
||||||
import Pager from "../../components/elements/Pager";
|
import Pager from '../../components/elements/Pager';
|
||||||
import FiltersMenu from "../../components/elements/FiltersMenu";
|
import FiltersMenu from '../../components/elements/FiltersMenu';
|
||||||
import _searchQueryHandler from "./_searchQueryHandler";
|
import _searchQueryHandler from './_searchQueryHandler';
|
||||||
import _renderChallenges from "./_renderChallenges";
|
import _renderChallenges from './_renderChallenges';
|
||||||
import Media from "react-media";
|
import Media from 'react-media';
|
||||||
import theme from "../../utils/theme";
|
import theme from '../../utils/theme';
|
||||||
import cupIco from '../../assets/cup_ico.svg';
|
import cupIco from '../../assets/cup_ico.svg';
|
||||||
import getChallenges from "../../api/getChallenges";
|
import getChallenges from '../../api/getChallenges';
|
||||||
import {CALC_PAGES} from "../../utils/globals";
|
import {CALC_PAGES} from '../../utils/globals';
|
||||||
import Loading from "../../components/elements/Loading";
|
import Loading from '../../components/elements/Loading';
|
||||||
|
|
||||||
const Challenges = () => {
|
const Challenges = () => {
|
||||||
const [pageNr, setPageNr] = React.useState(1);
|
const [pageNr, setPageNr] = React.useState(1);
|
||||||
@ -38,7 +38,7 @@ const Challenges = () => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const statusHandler = (value) => {
|
const statusHandler = (value) => {
|
||||||
setStatus(value)
|
setStatus(value);
|
||||||
};
|
};
|
||||||
|
|
||||||
const challengeTypeHandler = (value) => {
|
const challengeTypeHandler = (value) => {
|
||||||
@ -51,30 +51,30 @@ const Challenges = () => {
|
|||||||
|
|
||||||
const searchQueryHandler = (event) => {
|
const searchQueryHandler = (event) => {
|
||||||
_searchQueryHandler(event, challengesFromAPI, setPageNr, setChallenges);
|
_searchQueryHandler(event, challengesFromAPI, setPageNr, setChallenges);
|
||||||
}
|
};
|
||||||
|
|
||||||
const nextPage = () => {
|
const nextPage = () => {
|
||||||
if (pageNr !== CALC_PAGES(challenges)) {
|
if (pageNr !== CALC_PAGES(challenges)) {
|
||||||
let newPage = pageNr + 1;
|
let newPage = pageNr + 1;
|
||||||
setPageNr(newPage);
|
setPageNr(newPage);
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
||||||
const previousPage = () => {
|
const previousPage = () => {
|
||||||
if (pageNr !== 1) {
|
if (pageNr !== 1) {
|
||||||
let newPage = pageNr - 1;
|
let newPage = pageNr - 1;
|
||||||
setPageNr(newPage);
|
setPageNr(newPage);
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
||||||
const renderChallenges = () => {
|
const renderChallenges = () => {
|
||||||
return _renderChallenges(pageNr, challenges);
|
return _renderChallenges(pageNr, challenges);
|
||||||
}
|
};
|
||||||
|
|
||||||
const toggleFiltersMenu = () => {
|
const toggleFiltersMenu = () => {
|
||||||
let newFiltersMenu = !filtersMenu;
|
let newFiltersMenu = !filtersMenu;
|
||||||
setFiltersMenu(newFiltersMenu);
|
setFiltersMenu(newFiltersMenu);
|
||||||
}
|
};
|
||||||
|
|
||||||
const mobileRender = () => {
|
const mobileRender = () => {
|
||||||
return (
|
return (
|
||||||
@ -101,7 +101,7 @@ const Challenges = () => {
|
|||||||
</FlexColumn>
|
</FlexColumn>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
};
|
||||||
|
|
||||||
const desktopRender = () => {
|
const desktopRender = () => {
|
||||||
return (
|
return (
|
||||||
@ -136,7 +136,7 @@ const Challenges = () => {
|
|||||||
</FlexColumn>
|
</FlexColumn>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
@ -148,6 +148,6 @@ const Challenges = () => {
|
|||||||
</Media>
|
</Media>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
};
|
||||||
|
|
||||||
export default Challenges;
|
export default Challenges;
|
@ -1,7 +1,7 @@
|
|||||||
import {ELEMENTS_PER_PAGE} from "../../utils/globals";
|
import {ELEMENTS_PER_PAGE} from '../../utils/globals';
|
||||||
import MiniChallenge from "../../components/sections/MiniChallenge";
|
import MiniChallenge from '../../components/sections/MiniChallenge';
|
||||||
import {Grid} from "../../utils/containers";
|
import {Grid} from '../../utils/containers';
|
||||||
import styled from "styled-components";
|
import styled from 'styled-components';
|
||||||
|
|
||||||
const ChallengesGrid = styled(Grid)`
|
const ChallengesGrid = styled(Grid)`
|
||||||
margin: 32px 0;
|
margin: 32px 0;
|
||||||
@ -32,9 +32,9 @@ const _renderChallenges = (pageNr, challenges) => {
|
|||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
</ChallengesGrid>
|
</ChallengesGrid>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
return '';
|
return '';
|
||||||
}
|
};
|
||||||
|
|
||||||
export default _renderChallenges;
|
export default _renderChallenges;
|
@ -13,6 +13,6 @@ const _searchQueryHandler = (event, challengesFromAPI, setPageNr, setChallenges)
|
|||||||
}
|
}
|
||||||
setChallenges(challengesToRender);
|
setChallenges(challengesToRender);
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
||||||
export default _searchQueryHandler;
|
export default _searchQueryHandler;
|
@ -1,20 +1,20 @@
|
|||||||
import React from "react";
|
import React from 'react';
|
||||||
import {Container, FlexColumn, FlexRow, Svg} from "../utils/containers";
|
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 "../components/elements/MobileChallengeMenu";
|
import MobileChallengeMenu from '../components/elements/MobileChallengeMenu';
|
||||||
import Leaderboard from "../components/sections/Leaderboard";
|
import Leaderboard from '../components/sections/Leaderboard';
|
||||||
import Readme from "../components/sections/Readme";
|
import Readme from '../components/sections/Readme';
|
||||||
import HowTo from "../components/sections/HowTo";
|
import HowTo from '../components/sections/HowTo';
|
||||||
import MyEntries from "../components/sections/MyEntries";
|
import MyEntries from '../components/sections/MyEntries';
|
||||||
import Submit from "../components/sections/Submit";
|
import Submit from '../components/sections/Submit';
|
||||||
import Media from "react-media";
|
import Media from 'react-media';
|
||||||
import DesktopChallengeMenu from "../components/elements/DesktopChallengeMenu";
|
import DesktopChallengeMenu from '../components/elements/DesktopChallengeMenu';
|
||||||
import {RENDER_ICO} from "../utils/globals";
|
import {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 "../components/elements/Loading";
|
import Loading from '../components/elements/Loading';
|
||||||
|
|
||||||
const Challenge = () => {
|
const Challenge = () => {
|
||||||
const challengeName = useParams().challengeId;
|
const challengeName = useParams().challengeId;
|
||||||
@ -29,20 +29,20 @@ const Challenge = () => {
|
|||||||
const sectionRender = () => {
|
const sectionRender = () => {
|
||||||
switch (section) {
|
switch (section) {
|
||||||
case 0:
|
case 0:
|
||||||
return <Leaderboard challengeName={challengeName}/>
|
return <Leaderboard challengeName={challengeName}/>;
|
||||||
case 1:
|
case 1:
|
||||||
return <Readme challengeName={challengeName} metric={challenge.mainMetric}
|
return <Readme challengeName={challengeName} metric={challenge.mainMetric}
|
||||||
description={challenge.description} deadline={challenge.deadline}/>
|
description={challenge.description} deadline={challenge.deadline}/>;
|
||||||
case 2:
|
case 2:
|
||||||
return <HowTo challengeName={challengeName}/>
|
return <HowTo challengeName={challengeName}/>;
|
||||||
case 3:
|
case 3:
|
||||||
return <MyEntries challengeName={challengeName}/>
|
return <MyEntries challengeName={challengeName}/>;
|
||||||
case 4:
|
case 4:
|
||||||
return <Submit challengeName={challengeName}/>
|
return <Submit challengeName={challengeName}/>;
|
||||||
default:
|
default:
|
||||||
return <Leaderboard challengeName={challengeName}/>
|
return <Leaderboard challengeName={challengeName}/>;
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
||||||
const mobileRender = () => {
|
const mobileRender = () => {
|
||||||
return (
|
return (
|
||||||
@ -56,7 +56,7 @@ const Challenge = () => {
|
|||||||
{sectionRender()}
|
{sectionRender()}
|
||||||
</FlexColumn>
|
</FlexColumn>
|
||||||
);
|
);
|
||||||
}
|
};
|
||||||
|
|
||||||
const desktopRender = () => {
|
const desktopRender = () => {
|
||||||
return (
|
return (
|
||||||
@ -81,7 +81,7 @@ const Challenge = () => {
|
|||||||
</FlexColumn>
|
</FlexColumn>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
@ -93,6 +93,6 @@ const Challenge = () => {
|
|||||||
</Media>
|
</Media>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
};
|
||||||
|
|
||||||
export default Challenge;
|
export default Challenge;
|
@ -1,11 +1,11 @@
|
|||||||
import React from "react";
|
import React from 'react';
|
||||||
import {FlexColumn} from "../utils/containers";
|
import {FlexColumn} from '../utils/containers';
|
||||||
import Motivation from "../components/sections/Motivation";
|
import Motivation from '../components/sections/Motivation';
|
||||||
import Csi from "../components/sections/Csi";
|
import Csi from '../components/sections/Csi';
|
||||||
import Commercial from "../components/sections/Commercial";
|
import Commercial from '../components/sections/Commercial';
|
||||||
import Hero from "../components/sections/Hero";
|
import Hero from '../components/sections/Hero';
|
||||||
import Partnerships from "../components/sections/Partnerships";
|
import Partnerships from '../components/sections/Partnerships';
|
||||||
import styled from "styled-components";
|
import styled from 'styled-components';
|
||||||
|
|
||||||
const LandingPageStyle = styled(FlexColumn)`
|
const LandingPageStyle = styled(FlexColumn)`
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
@ -42,6 +42,6 @@ const LandingPage = () => {
|
|||||||
</FlexColumn>
|
</FlexColumn>
|
||||||
</LandingPageStyle>
|
</LandingPageStyle>
|
||||||
);
|
);
|
||||||
}
|
};
|
||||||
|
|
||||||
export default LandingPage;
|
export default LandingPage;
|
@ -1,11 +1,11 @@
|
|||||||
import metricIco from "../assets/metric_ico.svg";
|
import metricIco from '../assets/metric_ico.svg';
|
||||||
import coinsIco from "../assets/coins_ico.svg";
|
import coinsIco from '../assets/coins_ico.svg';
|
||||||
import baselineIco from "../assets/baseline_ico.svg";
|
import baselineIco from '../assets/baseline_ico.svg';
|
||||||
import clockIco from "../assets/clock_ico.svg";
|
import clockIco from '../assets/clock_ico.svg';
|
||||||
import cupIco from "../assets/cup_ico.svg";
|
import cupIco from '../assets/cup_ico.svg';
|
||||||
import textIco from "../assets/text_ico.svg";
|
import textIco from '../assets/text_ico.svg';
|
||||||
import imageIco from "../assets/image_ico.svg";
|
import imageIco from '../assets/image_ico.svg';
|
||||||
import tabularIco from "../assets/tabular_ico.svg";
|
import tabularIco from '../assets/tabular_ico.svg';
|
||||||
|
|
||||||
const ELEMENTS_PER_PAGE = 12;
|
const ELEMENTS_PER_PAGE = 12;
|
||||||
const MINI_DESCRIPTION_LENGTH = 70;
|
const MINI_DESCRIPTION_LENGTH = 70;
|
||||||
@ -20,7 +20,7 @@ const MINI_DESCRIPTION_RENDER = (description) => {
|
|||||||
return `${description.slice(0, MINI_DESCRIPTION_LENGTH)}...`;
|
return `${description.slice(0, MINI_DESCRIPTION_LENGTH)}...`;
|
||||||
}
|
}
|
||||||
return 'xxx';
|
return 'xxx';
|
||||||
}
|
};
|
||||||
|
|
||||||
const RENDER_ICO = (type) => {
|
const RENDER_ICO = (type) => {
|
||||||
switch (type) {
|
switch (type) {
|
||||||
@ -43,11 +43,11 @@ const RENDER_ICO = (type) => {
|
|||||||
default:
|
default:
|
||||||
return '';
|
return '';
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
||||||
const CALC_PAGES = (objects) => {
|
const CALC_PAGES = (objects) => {
|
||||||
return Math.ceil(objects.length / ELEMENTS_PER_PAGE);
|
return Math.ceil(objects.length / ELEMENTS_PER_PAGE);
|
||||||
}
|
};
|
||||||
|
|
||||||
const RENDER_DEADLINE_TIME = (time) => {
|
const RENDER_DEADLINE_TIME = (time) => {
|
||||||
if (time) {
|
if (time) {
|
||||||
@ -56,7 +56,7 @@ const RENDER_DEADLINE_TIME = (time) => {
|
|||||||
return `${date} ${hour}`;
|
return `${date} ${hour}`;
|
||||||
}
|
}
|
||||||
return '';
|
return '';
|
||||||
}
|
};
|
||||||
|
|
||||||
export {
|
export {
|
||||||
ELEMENTS_PER_PAGE,
|
ELEMENTS_PER_PAGE,
|
||||||
|
Loading…
Reference in New Issue
Block a user