From 6c01051b9aa40a0ebd000386183201150a700774 Mon Sep 17 00:00:00 2001
From: Mehrdad Rafiee <rafiee.mehrdad@gmail.com>
Date: Mon, 20 Nov 2023 23:20:07 -0800
Subject: [PATCH 1/3] convert App/ directory to use TypeScript

---
 src/components/App/{App.jsx => App.tsx}       | 144 ++++++++++--------
 .../App/{AppLogo.jsx => AppLogo.tsx}          |  17 +--
 src/components/App/{index.js => index.ts}     |   0
 .../App/{muiTheme.js => muiTheme.ts}          |   0
 4 files changed, 92 insertions(+), 69 deletions(-)
 rename src/components/App/{App.jsx => App.tsx} (73%)
 rename src/components/App/{AppLogo.jsx => AppLogo.tsx} (75%)
 rename src/components/App/{index.js => index.ts} (100%)
 rename src/components/App/{muiTheme.js => muiTheme.ts} (100%)

diff --git a/src/components/App/App.jsx b/src/components/App/App.tsx
similarity index 73%
rename from src/components/App/App.jsx
rename to src/components/App/App.tsx
index 264108e60e..7c8be4d2fc 100644
--- a/src/components/App/App.jsx
+++ b/src/components/App/App.tsx
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import darkBaseTheme from 'material-ui/styles/baseThemes/darkBaseTheme';
 import getMuiTheme from 'material-ui/styles/getMuiTheme';
 import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
@@ -6,8 +7,7 @@ import Helmet from 'react-helmet';
 import { connect } from 'react-redux';
 import { Route, Switch, withRouter } from 'react-router-dom';
 import styled from 'styled-components';
-
-import Combos from './../Combos/Combos';
+import Combos from '../Combos/Combos';
 import Api from '../Api';
 import Subscription from '../Subscription';
 import constants from '../constants';
@@ -33,7 +33,26 @@ import GlobalStyle from './GlobalStyle';
 import muiTheme from './muiTheme';
 import config from '../../config';
 
-const StyledDiv = styled.div`
+interface AppStylesProps {
+  open?: boolean;
+  location: {
+    pathname?: string;
+  };
+}
+
+interface Back2TopStylesProps {
+  open?: boolean;
+  location: {
+    pathname: string;
+  };
+}
+
+interface AppProps {
+  location: { [key: string]: string }
+  strings: { [key: string]: string }
+}
+
+const StyledDiv = styled.div<AppStylesProps>`
   transition: ${constants.normalTransition};
   position: relative;
   display: flex;
@@ -41,49 +60,51 @@ const StyledDiv = styled.div`
   height: 100%;
   left: ${(props) => (props.open ? '256px' : '0px')};
   margin-top: 0px;
+
   background-image: ${(props) =>
     props.location.pathname === '/'
-      ? 'url("/assets/images/home-background.png")'
+      ? `url("/assets/images/home-background.png")`
       : ''};
   background-position: center top -56px;
   background-repeat: ${(props) =>
     props.location.pathname === '/' ? 'no-repeat' : ''};
+`;
 
-  #back2Top {
-    position: fixed;
-    left: auto;
-    right: 0px;
-    top: auto;
-    bottom: 20px;
-    outline: none;
-    color: rgb(196, 196, 196);
-    text-align: center;
-    outline: none;
-    border: none;
-    background-color: rgba(0, 0, 0, 0.3);
-    width: 40px;
-    font-size: 14px;
-    border-radius: 2px;
-    cursor: pointer;
-    z-index: 999999;
-    opacity: 0;
-    display: block;
-    pointer-events: none;
-    -webkit-transform: translate3d(0, 0, 0);
-    padding: 3px;
-    transition: opacity 0.3s ease-in-out;
-
-    & #back2TopTxt {
-      font-size: 10px;
-      line-height: 12px;
-      text-align: center;
-      margin-bottom: 3px;
-    }
-  }
 
-  #back2Top:hover {
+const Back2Top = styled.button<Back2TopStylesProps>`
+  position: fixed;
+  left: auto;
+  right: 0px;
+  top: auto;
+  bottom: 20px;
+  outline: none;
+  color: rgb(196, 196, 196);
+  text-align: center;
+  outline: none;
+  border: none;
+  background-color: rgba(0, 0, 0, 0.3);
+  width: 40px;
+  font-size: 14px;
+  border-radius: 2px;
+  cursor: pointer;
+  z-index: 999999;
+  opacity: 0;
+  display: block;
+  pointer-events: none;
+  -webkit-transform: translate3d(0, 0, 0);
+  padding: 3px;
+  transition: opacity 0.3s ease-in-out;
+
+  &:hover {
     background-color: rgb(26, 108, 239);
   }
+
+  #back2TopTxt {
+    font-size: 10px;
+    line-height: 12px;
+    text-align: center;
+    margin-bottom: 3px;
+  }
 `;
 
 const StyledBodyDiv = styled.div`
@@ -100,33 +121,36 @@ const AdBannerDiv = styled.div`
   text-align: center;
   margin-bottom: 5px;
 
-  & img {
+  img {
     margin-top: 10px;
     max-width: 100%;
   }
 `;
 
-const App = (props) => {
-  const { strings, location } = props;
+declare let window: Window & { adsbygoogle: any }
 
-  const back2Top = React.useRef();
+const App = (props: AppProps) => {
+  const { strings, location } = props;
+  const back2Top = React.useRef<HTMLButtonElement>();
 
   React.useEffect(() => {
     const handleScroll = () => {
       let wait = false;
       const { current } = back2Top;
-      if (!wait) {
+
+      if (!wait && current) {
         if (
           document.body.scrollTop > 1000 ||
           document.documentElement.scrollTop > 1000
         ) {
-          current.style.opacity = 1;
+          current.style.opacity = '1';
           current.style.pointerEvents = 'auto';
         } else {
-          current.style.opacity = 0;
+          current.style.opacity = '0';
           current.style.pointerEvents = 'none';
         }
       }
+
       setTimeout(() => {
         wait = !wait;
       }, 300);
@@ -137,7 +161,7 @@ const App = (props) => {
     return () => {
       window.removeEventListener('scroll', handleScroll);
     };
-  });
+  }, []);
 
   React.useLayoutEffect(() => {
     window.scrollTo(0, 0);
@@ -152,7 +176,7 @@ const App = (props) => {
   }, []);
 
   return (
-    <MuiThemeProvider muiTheme={getMuiTheme(darkBaseTheme, muiTheme)}>
+    <MuiThemeProvider muiTheme={getMuiTheme(darkBaseTheme, muiTheme)}> {/* muiTheme types are missing here */}
       <GlobalStyle />
       <StyledDiv {...props}>
         <Helmet
@@ -161,15 +185,15 @@ const App = (props) => {
         />
         <Header location={location} />
         <StyledBodyDiv {...props}>
-        <AdBannerDiv>
-        {includeAds && config.VITE_ENABLE_ADSENSE && (
-        <ins 
-          className="adsbygoogle"
-          style={{display: 'block', width: 728, height: 90, margin: 'auto'}}
-          data-ad-client="ca-pub-5591574346816667"
-          data-ad-slot="9789745633"
-        />)}
-        </AdBannerDiv>
+          <AdBannerDiv>
+            {includeAds && config.VITE_ENABLE_ADSENSE && (
+              <ins
+                className="adsbygoogle"
+                style={{ display: 'block', width: 728, height: 90, margin: 'auto' }}
+                data-ad-client="ca-pub-5591574346816667"
+                data-ad-slot="9789745633"
+              />)}
+          </AdBannerDiv>
           <Switch>
             <Route exact path="/" component={Home} />
             <Route exact path="/matches/:matchId?/:info?" component={Matches} />
@@ -214,15 +238,15 @@ const App = (props) => {
           {includeAds && config.VITE_ENABLE_ADSENSE && (
             <ins
               className="adsbygoogle"
-              style={{display: 'block', width: 728, height: 90, margin: 'auto'}}
+              style={{ display: 'block', width: 728, height: 90, margin: 'auto' }}
               data-ad-client="ca-pub-5591574346816667"
               data-ad-slot="7739169508"
             />
           )}
         </AdBannerDiv>
         <Footer />
-        <button
-          ref={back2Top}
+        <Back2Top
+          ref={back2Top} // Type 'undefined' is not assignable to type 'HTMLButtonElement | null' 
           id="back2Top"
           title={strings.back2Top}
           onClick={() => {
@@ -232,14 +256,14 @@ const App = (props) => {
         >
           <div>&#9650;</div>
           <div id="back2TopTxt">{strings.back2Top}</div>
-        </button>
+        </Back2Top>
       </StyledDiv>
     </MuiThemeProvider>
   );
 };
 
-const mapStateToProps = (state) => ({
+const mapStateToProps = (state: any) => ({
   strings: state.app.strings,
 });
 
-export default connect(mapStateToProps)(withRouter(App));
+export default connect(mapStateToProps)(withRouter(App)); // Property 'strings' is missing in type
\ No newline at end of file
diff --git a/src/components/App/AppLogo.jsx b/src/components/App/AppLogo.tsx
similarity index 75%
rename from src/components/App/AppLogo.jsx
rename to src/components/App/AppLogo.tsx
index 08d8b772df..151371099c 100644
--- a/src/components/App/AppLogo.jsx
+++ b/src/components/App/AppLogo.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import { connect } from 'react-redux';
-import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
 import styled from 'styled-components';
 import constants from '../constants';
@@ -16,7 +15,13 @@ const StyledLink = styled(Link)`
   }
 `;
 
-const AppLogo = ({ size, strings, onClick }) => (
+interface AppLogoProps {
+  size: string
+  strings: { [key: string]: string }
+  onClick: () => void
+}
+
+const AppLogo = ({ size, strings, onClick }: AppLogoProps) => (
   <StyledLink aria-label="Go to the Open Dota homepage" to="/" onClick={onClick}>
     <span style={{ fontSize: size }}>
       {strings.app_name && `<${strings.app_name}/>`}
@@ -24,13 +29,7 @@ const AppLogo = ({ size, strings, onClick }) => (
   </StyledLink>
 );
 
-AppLogo.propTypes = {
-  size: PropTypes.string,
-  strings: PropTypes.shape({}),
-  onClick: PropTypes.func,
-};
-
-const mapStateToProps = state => ({
+const mapStateToProps = (state: any) => ({
   strings: state.app.strings,
 });
 
diff --git a/src/components/App/index.js b/src/components/App/index.ts
similarity index 100%
rename from src/components/App/index.js
rename to src/components/App/index.ts
diff --git a/src/components/App/muiTheme.js b/src/components/App/muiTheme.ts
similarity index 100%
rename from src/components/App/muiTheme.js
rename to src/components/App/muiTheme.ts

From 227252ec1b7f58e973f9a1e38ca13ab96927f394 Mon Sep 17 00:00:00 2001
From: Mehrdad Rafiee <rafiee.mehrdad@gmail.com>
Date: Mon, 20 Nov 2023 23:48:41 -0800
Subject: [PATCH 2/3] ignore lines one by one

---
 src/components/App/App.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/App/App.tsx b/src/components/App/App.tsx
index 7c8be4d2fc..96abfbda0b 100644
--- a/src/components/App/App.tsx
+++ b/src/components/App/App.tsx
@@ -1,4 +1,3 @@
-// @ts-nocheck
 import darkBaseTheme from 'material-ui/styles/baseThemes/darkBaseTheme';
 import getMuiTheme from 'material-ui/styles/getMuiTheme';
 import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
@@ -176,6 +175,7 @@ const App = (props: AppProps) => {
   }, []);
 
   return (
+    // @ts-ignore
     <MuiThemeProvider muiTheme={getMuiTheme(darkBaseTheme, muiTheme)}> {/* muiTheme types are missing here */}
       <GlobalStyle />
       <StyledDiv {...props}>
@@ -246,6 +246,7 @@ const App = (props: AppProps) => {
         </AdBannerDiv>
         <Footer />
         <Back2Top
+          // @ts-ignore
           ref={back2Top} // Type 'undefined' is not assignable to type 'HTMLButtonElement | null' 
           id="back2Top"
           title={strings.back2Top}
@@ -266,4 +267,5 @@ const mapStateToProps = (state: any) => ({
   strings: state.app.strings,
 });
 
+// @ts-ignore
 export default connect(mapStateToProps)(withRouter(App)); // Property 'strings' is missing in type
\ No newline at end of file

From 00f5314ed4410b847152382ed60761d87f121b7b Mon Sep 17 00:00:00 2001
From: Mehrdad Rafiee <rafiee.mehrdad@gmail.com>
Date: Thu, 30 May 2024 12:09:06 +0330
Subject: [PATCH 3/3] addresses the comment and uses the builtin type

---
 src/components/App/App.tsx | 273 +++++++++++++++++++++++++++++++++++++
 1 file changed, 273 insertions(+)

diff --git a/src/components/App/App.tsx b/src/components/App/App.tsx
index e69de29bb2..5f795267e8 100644
--- a/src/components/App/App.tsx
+++ b/src/components/App/App.tsx
@@ -0,0 +1,273 @@
+import darkBaseTheme from 'material-ui/styles/baseThemes/darkBaseTheme';
+import getMuiTheme from 'material-ui/styles/getMuiTheme';
+import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
+import React, { Suspense } from 'react';
+import Helmet from 'react-helmet';
+import { connect } from 'react-redux';
+import { Route, Switch, withRouter } from 'react-router-dom';
+import styled from 'styled-components';
+
+import Combos from '../Combos/Combos';
+import Api from '../Api';
+import Subscription from '../Subscription';
+import constants from '../constants';
+import Distributions from '../Distributions';
+import Footer from '../Footer';
+import FourOhFour from '../FourOhFour';
+import Header from '../Header';
+import Home from '../Home';
+import Matches from '../Matches';
+import Player from '../Player';
+import Records from '../Records';
+import Request from '../Request';
+import Scenarios from '../Scenarios';
+import Search from '../Search';
+import Teams from '../Teams';
+import GlobalStyle from './GlobalStyle';
+import muiTheme from './muiTheme';
+import config from '../../config';
+import Spinner from '../Spinner';
+
+const Status = React.lazy(() => import('../Status'));
+const Explorer = React.lazy(() => import('../Explorer'));
+const Heroes = React.lazy(() => import('../Heroes'));
+
+type AppStylesProps = {
+  open?: boolean;
+  location: {
+    pathname?: string;
+  };
+}
+
+type Back2TopStylesProps = {
+  open?: boolean;
+  location: {
+    pathname: string;
+  };
+}
+
+type AppProps = {
+  location: Record<string, string>
+  strings: Record<string, string>
+}
+
+const StyledDiv = styled.div<AppStylesProps>`
+  transition: ${constants.normalTransition};
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  left: ${(props) => (props.open ? '256px' : '0px')};
+  margin-top: 0px;
+
+  background-image: ${(props) =>
+    props.location.pathname === '/'
+      ? `url("/assets/images/home-background.png")`
+      : ''};
+  background-position: center top -56px;
+  background-repeat: ${(props) =>
+    props.location.pathname === '/' ? 'no-repeat' : ''};
+`;
+
+
+const Back2Top = styled.button<Back2TopStylesProps>`
+  position: fixed;
+  left: auto;
+  right: 0px;
+  top: auto;
+  bottom: 20px;
+  outline: none;
+  color: rgb(196, 196, 196);
+  text-align: center;
+  outline: none;
+  border: none;
+  background-color: rgba(0, 0, 0, 0.3);
+  width: 40px;
+  font-size: 14px;
+  border-radius: 2px;
+  cursor: pointer;
+  z-index: 999999;
+  opacity: 0;
+  display: block;
+  pointer-events: none;
+  -webkit-transform: translate3d(0, 0, 0);
+  padding: 3px;
+  transition: opacity 0.3s ease-in-out;
+
+  &:hover {
+    background-color: rgb(26, 108, 239);
+  }
+
+  #back2TopTxt {
+    font-size: 10px;
+    line-height: 12px;
+    text-align: center;
+    margin-bottom: 3px;
+  }
+`;
+
+const StyledBodyDiv = styled.div`
+  padding: 0px 25px 25px 25px;
+  flex-grow: 1;
+
+  @media only screen and (min-width: ${constants.appWidth}px) {
+    width: ${constants.appWidth}px;
+    margin: auto;
+  }
+`;
+
+const AdBannerDiv = styled.div`
+  text-align: center;
+  margin-bottom: 5px;
+
+  img {
+    margin-top: 10px;
+    max-width: 100%;
+  }
+`;
+
+declare let window: Window & { adsbygoogle: any }
+
+const App = (props: AppProps) => {
+  const { strings, location } = props;
+
+  const back2Top = React.useRef<HTMLButtonElement>();
+
+  React.useEffect(() => {
+    const handleScroll = () => {
+      let wait = false;
+      const { current } = back2Top;
+
+      if (!wait && current) {
+        if (
+          document.body.scrollTop > 1000 ||
+          document.documentElement.scrollTop > 1000
+        ) {
+          current.style.opacity = '1';
+          current.style.pointerEvents = 'auto';
+        } else {
+          current.style.opacity = '0';
+          current.style.pointerEvents = 'none';
+        }
+      }
+      setTimeout(() => {
+        wait = !wait;
+      }, 300);
+    };
+
+    window.addEventListener('scroll', handleScroll);
+
+    return () => {
+      window.removeEventListener('scroll', handleScroll);
+    };
+  });
+
+  React.useLayoutEffect(() => {
+    window.scrollTo(0, 0);
+  }, [location]);
+
+  const includeAds = !['/', '/api-keys', '/status'].includes(location.pathname);
+
+  React.useEffect(() => {
+    if (includeAds) {
+      (window.adsbygoogle = window.adsbygoogle || []).push({});
+    }
+  }, []);
+
+  return (
+    // @ts-ignore
+    <MuiThemeProvider muiTheme={getMuiTheme(darkBaseTheme, muiTheme)}> {/* muiTheme types are missing here */}
+      <Suspense fallback={<Spinner />}>
+        <GlobalStyle />
+        <StyledDiv {...props}>
+          <Helmet
+            defaultTitle={strings.title_default}
+            titleTemplate={strings.title_template}
+          />
+          <Header location={location} />
+          <StyledBodyDiv {...props}>
+            <AdBannerDiv>
+              {includeAds && config.VITE_ENABLE_ADSENSE && (
+                <ins
+                  className="adsbygoogle"
+                  style={{ display: 'block', width: 728, height: 90, margin: 'auto' }}
+                  data-ad-client="ca-pub-5591574346816667"
+                  data-ad-slot="9789745633"
+                />)}
+            </AdBannerDiv>
+            <Switch>
+              <Route exact path="/" component={Home} />
+              <Route exact path="/matches/:matchId?/:info?" component={Matches} />
+              <Route
+                exact
+                path="/players/:playerId/:info?/:subInfo?"
+                component={Player}
+              />
+              <Route exact path="/heroes/:heroId?/:info?" component={Heroes} />
+              <Route exact path="/teams/:teamId?/:info?" component={Teams} />
+              <Route
+                exact
+                path="/distributions/:info?"
+                component={Distributions}
+              />
+              <Route exact path="/request" component={Request} />
+              <Route exact path="/status" component={Status} />
+              <Route exact path="/explorer" component={Explorer} />
+              <Route exact path="/combos" component={Combos} />
+              <Route exact path="/search" component={Search} />
+              <Route exact path="/records/:info?" component={Records} />
+              {/* <Route exact path="/meta" component={Meta} /> */}
+              <Route exact path="/scenarios/:info?" component={Scenarios} />
+              {/* <Route exact path="/predictions" component={Predictions} /> */}
+              <Route exact path="/api-keys" component={Api} />
+              <Route exact path="/subscribe" component={Subscription} />
+              <Route component={FourOhFour} />
+            </Switch>
+          </StyledBodyDiv>
+          <AdBannerDiv>
+            {includeAds && config.VITE_ENABLE_RIVALRY && (
+              <div style={{ fontSize: '12px' }}>
+                <a href="https://www.rivalry.com/opendota">
+                  <img src="/assets/images/rivalry-banner.gif" alt="Logo for Rivalry.com" />
+                </a>
+                <div>
+                  {strings.home_sponsored_by}{' '}
+                  <a href="https://www.rivalry.com/opendota">Rivalry</a>
+                </div>
+              </div>
+            )}
+            {includeAds && config.VITE_ENABLE_ADSENSE && (
+              <ins
+                className="adsbygoogle"
+                style={{ display: 'block', width: 728, height: 90, margin: 'auto' }}
+                data-ad-client="ca-pub-5591574346816667"
+                data-ad-slot="7739169508"
+              />
+            )}
+          </AdBannerDiv>
+          <Footer />
+          <Back2Top
+            // @ts-ignore
+            ref={back2Top} // type 'undefined' is not assignable to type 'HTMLButtonElement | null' 
+            id="back2Top"
+            title={strings.back2Top}
+            onClick={() => {
+              document.body.scrollTop = 0;
+              document.documentElement.scrollTop = 0;
+            }}
+          >
+            <div>&#9650;</div>
+            <div id="back2TopTxt">{strings.back2Top}</div>
+          </Back2Top>
+        </StyledDiv>
+      </Suspense>
+    </MuiThemeProvider>
+  );
+};
+
+const mapStateToProps = (state: any) => ({
+  strings: state.app.strings,
+});
+
+// @ts-ignore
+export default connect(mapStateToProps)(withRouter(App)); // property 'strings' is missing in type
\ No newline at end of file