refactor add propTypes and defaultProps to rest elements

src/components/elements/InfoList.js

@@ -10,6 +10,7 @@ import {RENDER_DEADLINE_TIME} from "../../utils/globals";
 import coinsIco from "../../assets/coins_ico.svg";
 import Media from "react-media";
 import theme from "../../utils/theme";
+import PropsTypes from "prop-types";
 
 const InfoList = (props) => {
     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;

src/components/elements/Loading.js

@@ -1,6 +1,7 @@
 import React from "react";
 import styled, {keyframes} from "styled-components";
 import {Container} from "../../utils/containers";
+import PropsTypes from "prop-types";
 
 const rotate = keyframes`
   from {
@@ -45,6 +46,14 @@ const Loading = (props) => {
             </SpinnerContainer> : ''}
         </>
     );
+};
+
+Loading.propTypes = {
+    visible: PropsTypes.bool,
+};
+
+Loading.defaultProps = {
+    visible: true,
 }
 
 export default Loading;

src/components/elements/Logo.js

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

src/components/elements/MobileChallengeMenu.js

@@ -2,6 +2,7 @@ import React from "react";
 import {FlexRow} from "../../utils/containers";
 import styled from "styled-components";
 import {Medium} from "../../utils/fonts";
+import PropsTypes from "prop-types";
 
 const MenuOption = styled(Medium)`
   cursor: pointer;
@@ -37,6 +38,14 @@ const MobileChallengeMenu = (props) => {
             </FlexRow>
         </>
     );
-}
+};
+
+MobileChallengeMenu.propTypes = {
+    section: PropsTypes.number,
+};
+
+MobileChallengeMenu.defaultProps = {
+    section: 0,
+};
 
 export default MobileChallengeMenu;

src/components/elements/MobileNavMenu.js

@@ -7,6 +7,7 @@ import cupIco from '../../assets/cup_ico.svg';
 import styled from "styled-components";
 import {Link} from "react-router-dom";
 import {CHALLENGES_PAGE} from "../../utils/globals";
+import PropsTypes from "prop-types";
 
 const MobileNavMenuStyle = styled(FlexColumn)`
   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;

src/components/elements/Pager.js

@@ -4,6 +4,7 @@ import CircleNumber from "./CircleNumber";
 import polygon from '../../assets/polygon.svg';
 import styled from "styled-components";
 import theme from "../../utils/theme";
+import PropsTypes from "prop-types";
 
 const PagerStyle = styled(FlexRow)`
   gap: 14px;
@@ -64,4 +65,20 @@ const Pager = (props) => {
     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;

src/components/elements/Placeholder.js

@@ -1,6 +1,7 @@
 import React from "react";
 import {FlexColumn} from "../../utils/containers";
 import theme from "../../utils/theme";
+import PropsTypes from "prop-types";
 
 const Placeholder = (props) => {
     return (
@@ -9,6 +10,14 @@ const Placeholder = (props) => {
             {props.children}
         </FlexColumn>
     );
-}
+};
+
+Placeholder.propTypes = {
+    children: PropsTypes.node,
+};
+
+Placeholder.defaultProps = {
+    children: '',
+};
 
 export default Placeholder;

src/components/elements/Search.js

@@ -4,6 +4,7 @@ import loopIco from '../../assets/loop_ico.svg';
 import filtersIco from '../../assets/filters_ico.svg';
 import styled from "styled-components";
 import {Body} from "../../utils/fonts";
+import PropsTypes from "prop-types";
 
 const SearchStyle = styled(FlexRow)`
   width: 100%;
@@ -48,6 +49,16 @@ const Search = (props) => {
             <Svg as='button' src={filtersIco} onClick={props.toggleFiltersMenu}/>
         </SearchStyle>
     );
-}
+};
+
+Search.propTypes = {
+    searchQueryHandler: PropsTypes.func,
+    toggleFiltersMenu: PropsTypes.func,
+};
+
+Search.defaultProps = {
+    searchQueryHandler: null,
+    toggleFiltersMenu: null,
+};
 
 export default Search;

src/components/sections/Readme.js

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