From 49b70ec46de5a58aa1e1de1b96b6e8d846c14431 Mon Sep 17 00:00:00 2001 From: Mehrdad Rafiee Date: Fri, 17 Nov 2023 23:29:31 -0800 Subject: [PATCH 1/2] convert Home page to use TypeScript --- .../Home/{Buttons.jsx => Buttons.tsx} | 12 ++--- src/components/Home/{Home.jsx => Home.tsx} | 44 +++++++++++++------ .../Home/{Sponsors.jsx => Sponsors.tsx} | 13 +++--- .../Home/{Styled.jsx => Styled.tsx} | 0 src/components/Home/{Why.jsx => Why.tsx} | 11 ++--- src/components/Home/{index.js => index.ts} | 0 6 files changed, 43 insertions(+), 37 deletions(-) rename src/components/Home/{Buttons.jsx => Buttons.tsx} (83%) rename src/components/Home/{Home.jsx => Home.tsx} (50%) rename src/components/Home/{Sponsors.jsx => Sponsors.tsx} (91%) rename src/components/Home/{Styled.jsx => Styled.tsx} (100%) rename src/components/Home/{Why.jsx => Why.tsx} (92%) rename src/components/Home/{index.js => index.ts} (100%) diff --git a/src/components/Home/Buttons.jsx b/src/components/Home/Buttons.tsx similarity index 83% rename from src/components/Home/Buttons.jsx rename to src/components/Home/Buttons.tsx index 6e6c7db3d9..bee2e061ee 100644 --- a/src/components/Home/Buttons.jsx +++ b/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) => ( { !user && @@ -30,12 +31,7 @@ const Buttons = ({ user, strings }) => ( ); -Buttons.propTypes = { - user: PropTypes.shape({}), - strings: PropTypes.shape({}), -}; - -const mapStateToProps = (state) => { +const mapStateToProps = (state: any) => { const { data } = state.app.metadata; return { user: data.user, diff --git a/src/components/Home/Home.jsx b/src/components/Home/Home.tsx similarity index 50% rename from src/components/Home/Home.jsx rename to src/components/Home/Home.tsx index e0025d919e..42c3722895 100644 --- a/src/components/Home/Home.jsx +++ b/src/components/Home/Home.tsx @@ -1,12 +1,32 @@ 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: { + app_name: string + app_description: string + home_background_by: string + home_login: string + home_login_desc: string + home_parse: string + home_parse_desc: string + home_sponsored_by: string + home_become_sponsor: string + home_opensource_title: string + home_opensource_desc: string + home_indepth_title: string + home_indepth_desc: string + home_free_title: string + home_free_desc: string + } +} + +const Home = ({ strings }: HomePageProps) => (
@@ -15,29 +35,25 @@ const Home = ({ strings }) => (

{strings.app_description}

 - + {strings.home_background_by} - Mike Azevedo - +
); -Home.propTypes = { - strings: PropTypes.shape({}), -}; - -const mapStateToProps = state => ({ +const mapStateToProps = (state: any) => ({ content: state.content, strings: state.app.strings, }); diff --git a/src/components/Home/Sponsors.jsx b/src/components/Home/Sponsors.tsx similarity index 91% rename from src/components/Home/Sponsors.jsx rename to src/components/Home/Sponsors.tsx index 8787d89df6..278dc402c4 100644 --- a/src/components/Home/Sponsors.jsx +++ b/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) => (
{strings.home_sponsored_by}
- {config.VITE_ENABLE_DOTA_COACH && ( + {config.VITE_ENABLE_DOTACOACH && ( ( ); -Sponsors.propTypes = { - strings: PropTypes.shape({}), -}; - -const mapStateToProps = (state) => ({ +const mapStateToProps = (state: any) => ({ strings: state.app.strings, }); diff --git a/src/components/Home/Styled.jsx b/src/components/Home/Styled.tsx similarity index 100% rename from src/components/Home/Styled.jsx rename to src/components/Home/Styled.tsx diff --git a/src/components/Home/Why.jsx b/src/components/Home/Why.tsx similarity index 92% rename from src/components/Home/Why.jsx rename to src/components/Home/Why.tsx index 12f272fbbd..e3bf5b0642 100644 --- a/src/components/Home/Why.jsx +++ b/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) => (
@@ -84,11 +85,7 @@ const Why = ({ strings }) => ( ); -Why.propTypes = { - strings: PropTypes.shape({}), -}; - -const mapStateToProps = state => ({ +const mapStateToProps = (state: any) => ({ strings: state.app.strings, }); diff --git a/src/components/Home/index.js b/src/components/Home/index.ts similarity index 100% rename from src/components/Home/index.js rename to src/components/Home/index.ts From 600424ee08f43f5c68130d2bbe2cb0b34ad96b84 Mon Sep 17 00:00:00 2001 From: Mehrdad Rafiee Date: Sat, 18 Nov 2023 22:44:05 -0800 Subject: [PATCH 2/2] generic type for strings --- package-lock.json | 2 +- src/components/Home/Home.tsx | 20 ++------------------ 2 files changed, 3 insertions(+), 19 deletions(-) diff --git a/package-lock.json b/package-lock.json index 67d7f02f40..9fba9cfc93 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15825,7 +15825,7 @@ }, "heatmap.js": { "version": "git+ssh://git@github.com/muyao1987/heatmap.js.git#28b6ea93819375d2f7de1a49f37d106b2370744d", - "from": "heatmap.js@muyao1987/heatmap.js" + "from": "heatmap.js@github:muyao1987/heatmap.js" }, "highlight-es": { "version": "1.0.3", diff --git a/src/components/Home/Home.tsx b/src/components/Home/Home.tsx index 42c3722895..1fa0492f5b 100644 --- a/src/components/Home/Home.tsx +++ b/src/components/Home/Home.tsx @@ -6,24 +6,8 @@ import Sponsors from './Sponsors'; import { HeadContainerDiv, HeadlineDiv, DescriptionDiv, BottomTextDiv } from './Styled'; export interface HomePageProps { - user?: string - strings: { - app_name: string - app_description: string - home_background_by: string - home_login: string - home_login_desc: string - home_parse: string - home_parse_desc: string - home_sponsored_by: string - home_become_sponsor: string - home_opensource_title: string - home_opensource_desc: string - home_indepth_title: string - home_indepth_desc: string - home_free_title: string - home_free_desc: string - } + user?: string; + strings: { [key: string]: string }; } const Home = ({ strings }: HomePageProps) => (