convert Home page to use TypeScript

src/components/Home/Buttons.jsx → src/components/Home/Buttons.tsx

@@ -1,13 +1,14 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
-import PropTypes from 'prop-types';
 import FlatButton from 'material-ui/FlatButton';
 import { connect } from 'react-redux';
 import { IconSteam } from '../Icons';
 import { ButtonsDiv } from './Styled';
 import config from '../../config';
 
-const Buttons = ({ user, strings }) => (
+import { HomePageProps } from './Home';
+
+const Buttons = ({ user, strings }: HomePageProps) => (
   <ButtonsDiv>
     {
       !user &&
@@ -30,12 +31,7 @@ const Buttons = ({ user, strings }) => (
   </ButtonsDiv>
 );
 
-Buttons.propTypes = {
-  user: PropTypes.shape({}),
-  strings: PropTypes.shape({}),
-};
-
-const mapStateToProps = (state) => {
+const mapStateToProps = (state: any) => {
   const { data } = state.app.metadata;
   return {
     user: data.user,

src/components/Home/Home.jsx → src/components/Home/Home.tsx

@@ -1,12 +1,16 @@
 import React from 'react';
 import { connect } from 'react-redux';
-import PropTypes from 'prop-types';
 import Buttons from './Buttons';
 import Why from './Why';
 import Sponsors from './Sponsors';
 import { HeadContainerDiv, HeadlineDiv, DescriptionDiv, BottomTextDiv } from './Styled';
 
-const Home = ({ strings }) => (
+export interface HomePageProps {
+  user?: string;
+  strings: { [key: string]: string };
+}
+
+const Home = ({ strings }: HomePageProps) => (
   <div>
     <HeadContainerDiv>
       <HeadlineDiv>
@@ -15,29 +19,25 @@ const Home = ({ strings }) => (
       <DescriptionDiv>
         <h2>{strings.app_description}</h2>
       </DescriptionDiv>
-      <Buttons />
+      <Buttons strings={strings} />
     </HeadContainerDiv>
     <Why />
     <Sponsors />
     <BottomTextDiv>
       <span id="bg-image-description">{strings.home_background_by}</span>
-      <a 
-        href="//www.artstation.com/artist/mikeazevedo" 
-        target="_blank" 
-        rel="noopener noreferrer" 
-        aria-describedby="bg-image-description" 
+      <a
+        href="//www.artstation.com/artist/mikeazevedo"
+        target="_blank"
+        rel="noopener noreferrer"
+        aria-describedby="bg-image-description"
         aria-label="Mike Azevedo on artstation.com"
       > Mike Azevedo
-      </a> 
+      </a>
     </BottomTextDiv>
   </div>
 );
 
-Home.propTypes = {
-  strings: PropTypes.shape({}),
-};
-
-const mapStateToProps = state => ({
+const mapStateToProps = (state: any) => ({
   content: state.content,
   strings: state.app.strings,
 });

src/components/Home/Sponsors.jsx → src/components/Home/Sponsors.tsx

@@ -1,11 +1,12 @@
 import React from 'react';
 import FlatButton from 'material-ui/FlatButton';
 import { connect } from 'react-redux';
-import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { ButtonsDiv } from './Styled';
 import config from '../../config';
 
+import { HomePageProps } from './Home';
+
 const StyledDiv = styled.div`
   display: flex;
   flex-direction: column;
@@ -34,11 +35,11 @@ const StyledDiv = styled.div`
   }
 `;
 
-const Sponsors = ({ strings }) => (
+const Sponsors = ({ strings }: HomePageProps) => (
   <StyledDiv>
     <div className="headline">{strings.home_sponsored_by}</div>
     <div className="images">
-      {config.VITE_ENABLE_DOTA_COACH && (
+      {config.VITE_ENABLE_DOTACOACH && (
         <a
           href="https://dota-coach.com?s=OpenDota&c=main"
           target="_blank"
@@ -84,11 +85,7 @@ const Sponsors = ({ strings }) => (
   </StyledDiv>
 );
 
-Sponsors.propTypes = {
-  strings: PropTypes.shape({}),
-};
-
-const mapStateToProps = (state) => ({
+const mapStateToProps = (state: any) => ({
   strings: state.app.strings,
 });
 

src/components/Home/Why.jsx → src/components/Home/Why.tsx

@@ -1,10 +1,11 @@
 import React from 'react';
 import styled from 'styled-components';
 import { connect } from 'react-redux';
-import PropTypes from 'prop-types';
 import { IconOpenSource, IconStatsBars, IconWand } from '../Icons';
 import constants from '../constants';
 
+import { HomePageProps } from './Home';
+
 const StyledDiv = styled.div`
   margin: 50px auto 0;
   text-align: center;
@@ -50,7 +51,7 @@ const StyledDiv = styled.div`
   }
 `;
 
-const Why = ({ strings }) => (
+const Why = ({ strings }: HomePageProps) => (
   <StyledDiv>
     <div className="whyList">
       <div className="whyElement">
@@ -84,11 +85,7 @@ const Why = ({ strings }) => (
   </StyledDiv>
 );
 
-Why.propTypes = {
-  strings: PropTypes.shape({}),
-};
-
-const mapStateToProps = state => ({
+const mapStateToProps = (state: any) => ({
   strings: state.app.strings,
 });