Typescript support (#4475)

Author: AuroraLS3

Plan/common/build.gradle

@@ -140,7 +140,9 @@ tasks.register("bundle", YarnTask) {
     dependsOn yarn
     inputs.files(fileTree("$rootDir/react/dashboard/src"))
     inputs.file("$rootDir/react/dashboard/package.json")
-    inputs.file("$rootDir/react/dashboard/vite.config.js")
+    inputs.file("$rootDir/react/dashboard/vite.config.ts")
+    inputs.file("$rootDir/react/dashboard/tsconfig.json")
+    inputs.file("$rootDir/react/dashboard/tsconfig.node.json")
 
     outputs.dir("$rootDir/react/dashboard/build")
 

Plan/react/dashboard/global.d.ts

@@ -0,0 +1,7 @@
+declare global {
+    interface Window {
+        global: typeof window;
+    }
+}
+
+export {};

Plan/react/dashboard/index.html

@@ -23,6 +23,6 @@
 <script src="/pageExtensionApi.js"></script>
 <noscript>You need to enable JavaScript to run this app.</noscript>
 <div id="root"></div>
-<script src="/src/index.jsx" type="module"></script>
+<script src="/src/index.tsx" type="module"></script>
 </body>
 </html>

Plan/react/dashboard/package.json

@@ -49,7 +49,7 @@
   },
   "scripts": {
     "start": "vite",
-    "build": "vite build",
+    "build": "tsc && vite build",
     "analyze": "source-map-explorer 'build/static/js/*.js'"
   },
   "eslintConfig": {
@@ -71,7 +71,10 @@
     ]
   },
   "devDependencies": {
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^5.1.4",
+    "typescript": "^5.9.3",
     "vite": "^7.3.1"
   }
 }

Plan/react/dashboard/src/App.test.js

@@ -1,8 +1,8 @@
 import {render, screen} from '@testing-library/react';
-import App from './App';
+import App from './App.tsx';
 
 test('renders learn react link', () => {
-  render(<App/>);
-  const linkElement = screen.getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
+    render(<App/>);
+    const linkElement = screen.getByText(/learn react/i);
+    expect(linkElement).toBeInTheDocument();
 });

Plan/react/dashboard/src/App.jsx Plan/react/dashboard/src/App.tsxPlan/react/dashboard/src/App.jsx renamed to Plan/react/dashboard/src/App.tsx

@@ -6,10 +6,10 @@ import './style/mobile.css';
 import 'react-bootstrap-range-slider/dist/react-bootstrap-range-slider.css';
 
 import {createBrowserRouter, createRoutesFromElements, Navigate, Route, RouterProvider} from "react-router";
-import React, {useCallback, useEffect} from "react";
+import React, {PropsWithChildren, useCallback, useEffect} from "react";
 import {ThemeContextProvider, useTheme} from "./hooks/themeHook";
 import axios from "axios";
-import ErrorView from "./views/ErrorView";
+import ErrorView, {PlanError} from "./views/ErrorView";
 import {faMapSigns} from "@fortawesome/free-solid-svg-icons";
 import {MetadataContextProvider} from "./hooks/metadataHook";
 import {AuthenticationContextProvider} from "./hooks/authenticationHook";
@@ -20,8 +20,8 @@ import {PageExtensionContextProvider} from "./hooks/pageExtensionHook";
 import ErrorBoundary from "./components/ErrorBoundary";
 import {AlertPopupContextProvider} from "./hooks/context/alertPopupContext";
 import {PreferencesContextProvider} from "./hooks/preferencesHook";
-import {ThemeStorageContextProvider} from "./hooks/context/themeContextHook.jsx";
-import {ThemeStyleCss} from "./components/theme/ThemeStyleCss.jsx";
+import {ThemeStorageContextProvider} from "./hooks/context/themeContextHook.js";
+import {ThemeStyleCss} from "./components/theme/ThemeStyleCss.js";
 
 const PlayerPage = React.lazy(() => import("./views/layout/PlayerPage"));
 const PlayerOverview = React.lazy(() => import("./views/player/PlayerOverview"));
@@ -88,28 +88,28 @@ const GroupsRedirect = () => {
     return (<Navigate to={"groups"} replace={true}/>)
 }
 
-const ContextProviders = ({children}) => (
+const ContextProviders = ({children}: React.PropsWithChildren) => (
     <AuthenticationContextProvider>
         <MetadataContextProvider>
             <PreferencesContextProvider>
-                <ThemeContextProvider>
-                    <ThemeStorageContextProvider>
-                        <NavigationContextProvider>
-                            <AlertPopupContextProvider>
+                <AlertPopupContextProvider>
+                    <ThemeContextProvider>
+                        <ThemeStorageContextProvider>
+                            <NavigationContextProvider>
                                 <PageExtensionContextProvider>
                                     {children}
                                 </PageExtensionContextProvider>
-                            </AlertPopupContextProvider>
-                        </NavigationContextProvider>
-                    </ThemeStorageContextProvider>
-                </ThemeContextProvider>
+                            </NavigationContextProvider>
+                        </ThemeStorageContextProvider>
+                    </ThemeContextProvider>
+                </AlertPopupContextProvider>
             </PreferencesContextProvider>
         </MetadataContextProvider>
     </AuthenticationContextProvider>
 )
 
-const Lazy = ({children}) => {
-    const fallbackFunction = useCallback((error) => <ErrorView error={error}/>, []);
+const Lazy = ({children}: React.PropsWithChildren) => {
+    const fallbackFunction = useCallback((error: PlanError) => <ErrorView error={error}/>, []);
     return (
         <React.Suspense fallback={<></>}>
             <ErrorBoundary fallbackFunction={fallbackFunction}>
@@ -226,7 +226,7 @@ const router = createBrowserRouter(
     ), {basename: getBasename()}
 );
 
-const Wrapper = ({children}) => {
+const Wrapper = ({children}: PropsWithChildren) => {
     const {nightModeEnabled} = useTheme();
 
     useEffect(() => {

Plan/react/dashboard/src/components/alert/AlertPopupArea.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import {useAlertPopupContext} from "../../hooks/context/alertPopupContext";
-import LoadIn from "../animation/LoadIn";
+import {useAlertPopupContext} from "../../hooks/context/alertPopupContext.tsx";
+import LoadIn from "../animation/LoadIn.tsx";
 
 const Alert = ({alert}) => {
     const {dismissAlert} = useAlertPopupContext();

…oard/src/components/animation/LoadIn.jsx …oard/src/components/animation/LoadIn.tsxPlan/react/dashboard/src/components/animation/LoadIn.jsx renamed to Plan/react/dashboard/src/components/animation/LoadIn.tsx Plan/react/dashboard/src/components/animation/LoadIn.jsx renamed to Plan/react/dashboard/src/components/animation/LoadIn.tsx

@@ -1,10 +1,18 @@
-import React, {useEffect, useRef, useState} from 'react';
-import {Transition} from 'react-transition-group';
+import React, {CSSProperties, PropsWithChildren, RefObject, useEffect, useRef, useState} from 'react';
+import {Transition, TransitionStatus} from 'react-transition-group';
 
 const defaultDuration = 250;
 
-const LoadIn = ({children, duration}) => {
-    const nodeRef = useRef();
+type Props = {
+    duration?: number;
+} & PropsWithChildren;
+
+type Animation = {
+    [key in TransitionStatus]: CSSProperties;
+};
+
+const LoadIn = ({children, duration}: Props) => {
+    const nodeRef: RefObject<HTMLDivElement | null> = useRef(null);
 
     if (!duration) duration = defaultDuration;
     const reduceAnimations = window.matchMedia(`(prefers-reduced-motion: reduce)`).matches;
@@ -18,7 +26,7 @@ const LoadIn = ({children, duration}) => {
         transform: "scale(0.99)"
     }
 
-    const transitionStyles = reduceAnimations ? {
+    const transitionStyles: Animation = reduceAnimations ? {
         entering: {
             opacity: 1,
         },
@@ -30,7 +38,8 @@ const LoadIn = ({children, duration}) => {
         },
         exiting: {
             opacity: 0,
-        }
+        },
+        unmounted: {}
     } : {
         entering: {
             opacity: 1,
@@ -48,6 +57,7 @@ const LoadIn = ({children, duration}) => {
             opacity: 0,
             transform: "scale(0.99)"
         },
+        unmounted: {}
     };
 
     const [visible, setVisible] = useState(false);

Plan/react/dashboard/src/components/cards/common/JoinAddresses.jsx

@@ -1,4 +1,4 @@
-import LoadIn from "../../animation/LoadIn.jsx";
+import LoadIn from "../../animation/LoadIn.tsx";
 import ExtendableRow from "../../layout/extension/ExtendableRow.jsx";
 import JoinAddressGraphCard from "../server/graphs/JoinAddressGraphCard.jsx";
 import {Col} from "react-bootstrap";

Plan/react/dashboard/src/components/cards/common/PlayerRetention.jsx

@@ -1,4 +1,4 @@
-import LoadIn from "../../animation/LoadIn.jsx";
+import LoadIn from "../../animation/LoadIn.tsx";
 import ExtendableRow from "../../layout/extension/ExtendableRow.jsx";
 import {Col} from "react-bootstrap";
 import PlayerRetentionGraphCard from "./PlayerRetentionGraphCard.jsx";