refactor: add to most of components propTypes and defaultProps

src/components/elements/Button.js

@@ -1,6 +1,7 @@
 import React from "react";
 import styled from "styled-components";
 import {Medium} from "../../utils/fonts";
+import PropsTypes from "prop-types";
 
 const ButtonStyle = styled(Medium)`
   display: flex;
@@ -29,4 +30,22 @@ const Button = (props) => {
     );
 }
 
+Button.propTypes = {
+    handler: PropsTypes.func,
+    width: PropsTypes.string,
+    height: PropsTypes.string,
+    color: PropsTypes.string,
+    backgroundColor: PropsTypes.string,
+    children: PropsTypes.node
+};
+
+Button.defaultProps = {
+    handler: null,
+    width: '64px',
+    height: '28px',
+    color: '',
+    backgroundColor: '',
+    children: ''
+};
+
 export default Button;

src/components/elements/ButtonLink.js

@@ -1,6 +1,7 @@
 import React from "react";
 import styled from "styled-components";
 import {Label} from "../../utils/fonts";
+import PropsTypes from "prop-types";
 
 const ButtonLinkStyle = styled(Label)`
   background-color: ${({theme}) => theme.colors.green};
@@ -33,4 +34,12 @@ const ButtonLink = (props) => {
     );
 }
 
+ButtonLink.propTypes = {
+    children: PropsTypes.node,
+};
+
+ButtonLink.defaultProps = {
+    children: '',
+};
+
 export default ButtonLink;

src/components/elements/CircleNumber.js

@@ -1,6 +1,7 @@
 import React from "react";
 import {Container} from "../../utils/containers";
 import styled from "styled-components";
+import PropsTypes from "prop-types";
 
 const CircleNumberStyle = styled(Container)`
   border-radius: 50%;
@@ -30,4 +31,12 @@ const CircleNumber = (props) => {
     );
 }
 
+CircleNumber.propTypes = {
+    number: PropsTypes.number,
+};
+
+CircleNumber.defaultProps = {
+    number: 0,
+};
+
 export default CircleNumber;

src/components/elements/DesktopChallengeMenu.js

@@ -2,6 +2,7 @@ import React from "react";
 import styled from "styled-components";
 import {FlexColumn} from "../../utils/containers";
 import {H3} from "../../utils/fonts";
+import PropsTypes from "prop-types";
 
 const DesktopChallengeMenuStyle = styled(FlexColumn)`
   justify-content: flex-start;
@@ -52,4 +53,14 @@ const DesktopChallengeMenu = (props) => {
     );
 }
 
+DesktopChallengeMenu.propTypes = {
+    section: PropsTypes.number,
+    setSection: PropsTypes.func
+};
+
+DesktopChallengeMenu.defaultProps = {
+    section: 0,
+    setSection: null,
+}
+
 export default DesktopChallengeMenu;

src/components/elements/Filter.js

@@ -1,6 +1,7 @@
 import React from "react";
 import styled from "styled-components";
 import {FlexRow} from "../../utils/containers";
+import PropsTypes from "prop-types";
 
 const FilterStyle = styled(FlexRow)`
   width: fit-content;
@@ -31,7 +32,6 @@ const FilterStyle = styled(FlexRow)`
 `;
 
 const Filter = (props) => {
-
     const onCheckHandler = (e) => {
         if (e.target.checked)
             props.handler(Number(e.target.value));
@@ -47,6 +47,20 @@ const Filter = (props) => {
                      id={props.id} name={props.name} onChange={(e) => onCheckHandler(e)}/>
         </>
     );
+};
+
+Filter.propTypes = {
+    index: PropsTypes.number.isRequired,
+    option: PropsTypes.number.isRequired,
+    handler: PropsTypes.func,
+    id: PropsTypes.string.isRequired,
+    name: PropsTypes.string.isRequired,
+    children: PropsTypes.node,
+};
+
+Filter.defaultProps = {
+    handler: null,
+    children: '',
 }
 
 export default Filter;

src/components/elements/FiltersMenu/FiltersMenu.js

@@ -6,6 +6,7 @@ import styled from "styled-components";
 import FilterBy from "../../sections/FilterBy";
 import filterOptions from "./filterOptions";
 import Media from "react-media";
+import PropsTypes from "prop-types";
 
 const FiltersMenuStyle = styled(FlexColumn)`
   position: fixed;
@@ -76,4 +77,34 @@ const FiltersMenu = (props) => {
     );
 }
 
+FiltersMenu.propTypes = {
+    translateX: PropsTypes.string,
+    opacity: PropsTypes.string,
+    transBackDisplay: PropsTypes.string,
+    toggleFiltersMenu: PropsTypes.func,
+    sortByHandler: PropsTypes.func,
+    statusHandler: PropsTypes.func,
+    challengeTypeHandler: PropsTypes.func,
+    commercialHandler: PropsTypes.func,
+    sortBy: PropsTypes.number,
+    status: PropsTypes.number,
+    challengeType: PropsTypes.number,
+    commercial: PropsTypes.number,
+};
+
+FiltersMenu.defaultProps = {
+    translateX: '',
+    opacity: '',
+    transBackDisplay: 'flex',
+    toggleFiltersMenu: null,
+    sortByHandler: null,
+    statusHandler: null,
+    challengeTypeHandler: null,
+    commercialHandler: null,
+    sortBy: 0,
+    status: 0,
+    challengeType: 0,
+    commercial: 0,
+};
+
 export default FiltersMenu;

src/components/elements/FiltersMenu/filterOptions.js

@@ -3,6 +3,7 @@ const filterOptions = [
         {
             name: 'Closing',
             sort: true,
+            rotate: ''
         },
         {
             name: 'Closing',
@@ -12,6 +13,7 @@ const filterOptions = [
         {
             name: 'Hotness',
             sort: true,
+            rotate: ''
         },
         {
             name: 'Hotness',
@@ -21,6 +23,7 @@ const filterOptions = [
         {
             name: 'Reward',
             sort: true,
+            rotate: ''
         },
         {
             name: 'Reward',
@@ -29,36 +32,56 @@ const filterOptions = [
         }
     ], [
         {
-            name: 'Both'
+            name: 'Both',
+            sort: false,
+            rotate: ''
         },
         {
-            name: 'Completed'
+            name: 'Completed',
+            sort: false,
+            rotate: ''
         },
         {
-            name: 'Active'
+            name: 'Active',
+            sort: false,
+            rotate: ''
         },
     ], [
         {
-            name: 'All'
+            name: 'All',
+            sort: false,
+            rotate: ''
         },
         {
-            name: 'Tabular'
+            name: 'Tabular',
+            sort: false,
+            rotate: ''
         },
         {
-            name: 'Text'
+            name: 'Text',
+            sort: false,
+            rotate: ''
         },
         {
-            name: 'Image'
+            name: 'Image',
+            sort: false,
+            rotate: ''
         },
     ], [
         {
-            name: 'Both'
+            name: 'Both',
+            sort: false,
+            rotate: ''
         },
         {
-            name: 'Yes'
+            name: 'Yes',
+            sort: false,
+            rotate: ''
         },
         {
-            name: 'No'
+            name: 'No',
+            sort: false,
+            rotate: ''
         },
     ]
 ];

src/components/elements/IconLabel.js

@@ -3,6 +3,7 @@ import {FlexRow, Svg} from "../../utils/containers";
 import {Body, Medium} from "../../utils/fonts";
 import styled from "styled-components";
 import {RENDER_DEADLINE_TIME, RENDER_ICO} from "../../utils/globals";
+import PropsTypes from "prop-types";
 
 const HoverLabel = styled(Body)`
   position: absolute;
@@ -68,6 +69,22 @@ const IconLabel = (props) => {
             {renderHoverLabel(props.type, props.time)}
         </IconLabelStyle>
     );
-}
+};
+
+IconLabel.propTypes = {
+    gap: PropsTypes.string,
+    size: PropsTypes.string,
+    type: PropsTypes.string,
+    time: PropsTypes.string,
+    children: PropsTypes.node,
+};
+
+IconLabel.defaultProps = {
+    gap: '0',
+    size: '24px',
+    type: '',
+    time: '',
+    children: '',
+};
 
 export default IconLabel;

src/components/elements/InfoItem.js

@@ -2,6 +2,7 @@ import React from "react";
 import {FlexRow, Svg} from "../../utils/containers";
 import theme from "../../utils/theme";
 import {Medium} from "../../utils/fonts";
+import PropsTypes from "prop-types";
 
 const InfoItem = (props) => {
     return (
@@ -13,6 +14,20 @@ const InfoItem = (props) => {
             </Medium>
         </FlexRow>
     );
-}
+};
+
+InfoItem.propTypes = {
+    gap: PropsTypes.string,
+    icon: PropsTypes.object,
+    size: PropsTypes.string,
+    children: PropsTypes.node,
+};
+
+InfoItem.defaultProps = {
+    gap: '0',
+    icon: null,
+    size: '24px',
+    children: '',
+};
 
 export default InfoItem;

src/components/elements/Table/Table.js

@@ -8,6 +8,7 @@ import {CALC_PAGES} from "../../../utils/globals";
 import Media from "react-media";
 import theme from "../../../utils/theme";
 import Loading from "../Loading";
+import PropsTypes from "prop-types";
 
 const Table = (props) => {
     const headerElements = ['#', 'submitter', 'when', 'result', 'entries'];
@@ -56,7 +57,6 @@ const Table = (props) => {
                         )
                     })}
                 </Grid>
-                <Loading visible={loading}/>
                 {renderSubmissions()}
             </FlexColumn>
 
@@ -77,7 +77,6 @@ const Table = (props) => {
                         )
                     })}
                 </Grid>
-                <Loading visible={loading}/>
                 {renderSubmissions()}
             </FlexColumn>
         );
@@ -85,6 +84,7 @@ const Table = (props) => {
 
     return (
         <>
+            <Loading visible={loading}/>
             <Media query={theme.mobile}>
                 {mobileRender()}
             </Media>
@@ -97,4 +97,12 @@ const Table = (props) => {
     );
 }
 
+Table.propTypes = {
+    challengeName: PropsTypes.string,
+};
+
+Table.defaultProps = {
+    challengeName: '',
+}
+
 export default Table;

src/components/sections/FilterBy.js

@@ -5,6 +5,7 @@ import {Body, H3, Medium} from "../../utils/fonts";
 import arrow from "../../assets/arrow.svg";
 import Media from "react-media";
 import theme from "../../utils/theme";
+import PropsTypes from "prop-types";
 
 const FilterBy = (props) => {
     const renderFilterOptions = () => {
@@ -47,4 +48,16 @@ const FilterBy = (props) => {
     );
 }
 
+FilterBy.propTypes = {
+    options: PropsTypes.arrayOf(PropsTypes.shape({
+        name: PropsTypes.string,
+        sort: PropsTypes.bool,
+        rotate: PropsTypes.string
+    }))
+};
+
+FilterBy.defaultProps = {
+    options: [],
+};
+
 export default FilterBy;

src/components/sections/Leaderboard.js

@@ -5,6 +5,7 @@ import {FlexColumn, FlexRow} from "../../utils/containers";
 import {H2, H3} from "../../utils/fonts";
 import Table from "../elements/Table";
 import styled from "styled-components";
+import PropsTypes from 'prop-types';
 
 const BoardVariantMobile = styled(FlexRow)`
   transition: color, background-color 0.3s ease-in-out;
@@ -102,4 +103,12 @@ const Leaderboard = (props) => {
     )
 }
 
+Leaderboard.propsTypes = {
+    challengeName: PropsTypes.string,
+}
+
+Leaderboard.defaultProps = {
+    challengeName: '',
+};
+
 export default Leaderboard;

src/components/sections/MiniChallenge.js

@@ -6,6 +6,7 @@ import IconLabel from "../elements/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;
@@ -86,4 +87,28 @@ const MiniChallenge = (props) => {
     );
 }
 
+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;

src/components/sections/Motivation.js

@@ -7,7 +7,6 @@ import Media from "react-media";
 import ellipse from '../../assets/ellipse.svg'
 
 const Motivation = () => {
-
     const content = [
         'Explore interesting solutions to problems using AI',
         'Train by solving our challenges',

src/components/sections/Readme.js

@@ -8,6 +8,8 @@ import {markdown} from "markdown";
 import styled from "styled-components";
 import InfoList from "../elements/InfoList";
 import Loading from "../elements/Loading";
+import PropsTypes from "prop-types";
+import MiniChallenge from "./MiniChallenge";
 
 const ReadmeStyle = styled(Body)`
   h3 {
@@ -159,4 +161,14 @@ const Readme = (props) => {
     );
 }
 
+MiniChallenge.propTypes = {
+    challengeName: PropsTypes.string,
+    description: PropsTypes.string,
+};
+
+MiniChallenge.defaultProps = {
+    challengeName: '',
+    description: '',
+}
+
 export default Readme;