refactor add propTypes and defaultProps to rest elements

This commit is contained in:
mattyl006 2022-07-29 09:32:14 +02:00
parent cb69dc4c13
commit 4a7fe8f9d5
9 changed files with 91 additions and 6 deletions

View File

@ -10,6 +10,7 @@ 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";
const InfoList = (props) => { const InfoList = (props) => {
const itemsRender = (gap, iconsSize) => { const itemsRender = (gap, iconsSize) => {
@ -54,4 +55,22 @@ const InfoList = (props) => {
); );
} }
InfoList.propTypes = {
iconsSize: PropsTypes.string,
metric: PropsTypes.string,
bestScore: PropsTypes.string,
baseline: PropsTypes.string,
deadline: PropsTypes.string,
prize: PropsTypes.string,
};
InfoList.defaultProps = {
iconsSize: '',
metric: '',
bestScore: '',
baseline: '',
deadline: '',
prize: '',
};
export default InfoList; export default InfoList;

View File

@ -1,6 +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";
const rotate = keyframes` const rotate = keyframes`
from { from {
@ -45,6 +46,14 @@ const Loading = (props) => {
</SpinnerContainer> : ''} </SpinnerContainer> : ''}
</> </>
); );
};
Loading.propTypes = {
visible: PropsTypes.bool,
};
Loading.defaultProps = {
visible: true,
} }
export default Loading; export default Loading;

View File

@ -19,6 +19,6 @@ const Logo = () => {
Gonito.net Gonito.net
</LogoStyle> </LogoStyle>
); );
} };
export default Logo; export default Logo;

View File

@ -2,6 +2,7 @@ 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";
const MenuOption = styled(Medium)` const MenuOption = styled(Medium)`
cursor: pointer; cursor: pointer;
@ -37,6 +38,14 @@ const MobileChallengeMenu = (props) => {
</FlexRow> </FlexRow>
</> </>
); );
} };
MobileChallengeMenu.propTypes = {
section: PropsTypes.number,
};
MobileChallengeMenu.defaultProps = {
section: 0,
};
export default MobileChallengeMenu; export default MobileChallengeMenu;

View File

@ -7,6 +7,7 @@ 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";
const MobileNavMenuStyle = styled(FlexColumn)` const MobileNavMenuStyle = styled(FlexColumn)`
gap: 32px; gap: 32px;
@ -73,4 +74,14 @@ const MobileNavMenu = (props) => {
); );
} }
MobileNavMenu.propTypes = {
translateY: PropsTypes.string,
toggleNavMenu: PropsTypes.func,
};
MobileNavMenu.defaultProps = {
translateY: 'calc(-100vh - 42px)',
toggleNavMenu: null,
};
export default MobileNavMenu; export default MobileNavMenu;

View File

@ -4,6 +4,7 @@ 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";
const PagerStyle = styled(FlexRow)` const PagerStyle = styled(FlexRow)`
gap: 14px; gap: 14px;
@ -64,4 +65,20 @@ const Pager = (props) => {
return ''; return '';
} }
Pager.propTypes = {
visible: PropsTypes.bool,
previousPage: PropsTypes.func,
pageNr: PropsTypes.number,
nextPage: PropsTypes.func,
pages: PropsTypes.number,
};
Pager.defaultProps = {
visible: false,
previousPage: null,
pageNr: 1,
nextPage: null,
pages: 1
};
export default Pager; export default Pager;

View File

@ -1,6 +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";
const Placeholder = (props) => { const Placeholder = (props) => {
return ( return (
@ -9,6 +10,14 @@ const Placeholder = (props) => {
{props.children} {props.children}
</FlexColumn> </FlexColumn>
); );
} };
Placeholder.propTypes = {
children: PropsTypes.node,
};
Placeholder.defaultProps = {
children: '',
};
export default Placeholder; export default Placeholder;

View File

@ -4,6 +4,7 @@ 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";
const SearchStyle = styled(FlexRow)` const SearchStyle = styled(FlexRow)`
width: 100%; width: 100%;
@ -48,6 +49,16 @@ const Search = (props) => {
<Svg as='button' src={filtersIco} onClick={props.toggleFiltersMenu}/> <Svg as='button' src={filtersIco} onClick={props.toggleFiltersMenu}/>
</SearchStyle> </SearchStyle>
); );
} };
Search.propTypes = {
searchQueryHandler: PropsTypes.func,
toggleFiltersMenu: PropsTypes.func,
};
Search.defaultProps = {
searchQueryHandler: null,
toggleFiltersMenu: null,
};
export default Search; export default Search;

View File

@ -79,7 +79,7 @@ const Readme = (props) => {
<H2 as='h2'> <H2 as='h2'>
Info Info
</H2> </H2>
<InfoList iconsSize='24px'/> <InfoList iconsSize='24px' metric={props.metric} deadline={props.deadline}/>
</FlexColumn> </FlexColumn>
<FlexColumn alignmentX='flex-start' maxWidth='260px'> <FlexColumn alignmentX='flex-start' maxWidth='260px'>
<H2 as='h2'> <H2 as='h2'>
@ -118,7 +118,7 @@ const Readme = (props) => {
<H2 as='h2'> <H2 as='h2'>
Info Info
</H2> </H2>
<InfoList iconsSize='32px'/> <InfoList iconsSize='32px' metric={props.metric} deadline={props.deadline}/>
</FlexColumn> </FlexColumn>
<FlexColumn alignmentX='flex-start' width='80%' maxWidth='1000px'> <FlexColumn alignmentX='flex-start' width='80%' maxWidth='1000px'>
<H2 as='h2'> <H2 as='h2'>