Pull request #2231: ADG-8368 Frontend rewritten in TypeScript, added Node 18 support

Merge in DNS/adguard-home from ADG-8368-typescript-node-18 to master Squashed commit of the following: commit daa288ae0d76178af24595cc807055902e6f09ab Merge: 4c89cf720 1085d59a6 Author: Igor Lobanov <bniwredyc@gmail.com> Date: Mon Jun 10 17:22:20 2024 +0200 merge commit 4c89cf7209 Author: Ildar Kamalov <ik@adguard.com> Date: Thu Jun 6 13:27:18 2024 +0300 remove install from initial state commit b943f2011f Author: Igor Lobanov <bniwredyc@gmail.com> Date: Wed Jun 5 23:10:55 2024 +0200 frontend production build fix commit cd1be2d66d Author: Igor Lobanov <bniwredyc@gmail.com> Date: Wed Jun 5 20:23:14 2024 +0200 production build quickfix commit 7b8ac01fc2 Author: Ainar Garipov <A.Garipov@AdGuard.COM> Date: Wed Jun 5 19:57:31 2024 +0300 all: upd node docker commit 02afed66d5 Author: Igor Lobanov <bniwredyc@gmail.com> Date: Wed Jun 5 18:23:12 2024 +0200 changelog fixes commit 9c0f736f0c Merge: 62c4fbf1e e04775c4f Author: Igor Lobanov <bniwredyc@gmail.com> Date: Wed Jun 5 18:18:29 2024 +0200 merge commit 62c4fbf1e3 Author: Igor Lobanov <bniwredyc@gmail.com> Date: Wed Jun 5 16:22:22 2024 +0200 empty line in changelog commit 76b1e44a93 Author: Igor Lobanov <bniwredyc@gmail.com> Date: Wed Jun 5 16:20:37 2024 +0200 changelog commit f783e90040 Author: Igor Lobanov <bniwredyc@gmail.com> Date: Wed Jun 5 16:19:13 2024 +0200 filters.js -> filters.ts commit 3d4ce6554c Author: Igor Lobanov <bniwredyc@gmail.com> Date: Wed Jun 5 16:18:03 2024 +0200 generated file removed commit e35ba58f2a Author: Igor Lobanov <bniwredyc@gmail.com> Date: Wed Jun 5 15:45:21 2024 +0200 rollback unwanted changes commit 1f30d4216d Author: Igor Lobanov <bniwredyc@gmail.com> Date: Wed Jun 5 15:27:36 2024 +0200 review fix commit 6cd4e44f07 Author: Igor Lobanov <bniwredyc@gmail.com> Date: Wed Jun 5 11:55:39 2024 +0200 missing generated file restoresd commit 2ab738b303 Author: Igor Lobanov <bniwredyc@gmail.com> Date: Wed Jun 5 11:40:32 2024 +0200 Frontend rewritten in TypeScript, added Node 18 support
2024-06-10 18:42:23 +03:00
parent 1085d59a65
commit 1afe226ce8
296 changed files with 32122 additions and 32651 deletions
--- a/client/src/components/App/index.css
+++ b/client/src/components/App/index.css
@@ -15,8 +15,8 @@
    --btn-success-bgcolor: #5eba00;
    --form-disabled-bgcolor: #f8f9fa;
    --form-disabled-color: #495057;
-    --rt-nodata-bgcolor: rgba(255,255,255,0.8);
-    --rt-nodata-color: rgba(0,0,0,0.5);
+    --rt-nodata-bgcolor: rgba(255, 255, 255, 0.8);
+    --rt-nodata-color: rgba(0, 0, 0, 0.5);
    --modal-overlay-bgcolor: rgba(255, 255, 255, 0.75);
    --logs__table-bgcolor: #fff;
    --logs__row--blue-bgcolor: #e5effd;
@@ -28,7 +28,7 @@
    --gray-d8: #d8d8d8;
    --gray-f3: #f3f3f3;
    --loading-bg: rgba(255, 255, 255, 0.48);
-    --font-family-monospace: Monaco, Menlo, "Ubuntu Mono", Consolas, source-code-pro, monospace;
+    --font-family-monospace: Monaco, Menlo, 'Ubuntu Mono', Consolas, source-code-pro, monospace;
    --font-size-disable-autozoom: 1rem;
    --alert-message-color: #24426c;
    --alert-message-border: #cbdbf2;
@@ -37,7 +37,7 @@
    --radio-bg: #ffffff;
 }

-[data-theme="dark"] {
+[data-theme='dark'] {
    --black: #ffffff;
    --bgcolor: #131313;
    --mcolor: #e6e6e6;
@@ -74,12 +74,14 @@
 body {
    margin: 0;
    padding: 0;
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
 }

 /* Disable Auto Zoom in Input - Safari on iPhone https://stackoverflow.com/a/6394497 */
@media screen and (max-width: 767px) {
-    input, select, textarea {
+    input,
+    select,
+    textarea {
        font-size: var(--font-size-disable-autozoom);
    }
 }
--- a/client/src/components/App/index.tsx
+++ b/client/src/components/App/index.tsx
@@ -1,4 +1,5 @@
 import React, { useEffect } from 'react';
+
 import { HashRouter, Route } from 'react-router-dom';
 import LoadingBar from 'react-redux-loading-bar';
 import { hot } from 'react-hot-loader/root';
@@ -9,8 +10,6 @@ import '../ui/ReactTable.css';
 import './index.css';

 import { shallowEqual, useDispatch, useSelector } from 'react-redux';
-
-import propTypes from 'prop-types';
 import Toasts from '../Toasts';
 import Footer from '../ui/Footer';
 import Status from '../ui/Status';
@@ -19,15 +18,14 @@ import UpdateOverlay from '../ui/UpdateOverlay';
 import EncryptionTopline from '../ui/EncryptionTopline';
 import Icons from '../ui/Icons';
 import i18n from '../../i18n';
+
 import Loading from '../ui/Loading';
-import {
-    FILTERS_URLS,
-    MENU_URLS,
-    SETTINGS_URLS,
-    THEMES,
-} from '../../helpers/constants';
+import { FILTERS_URLS, MENU_URLS, SETTINGS_URLS, THEMES } from '../../helpers/constants';
+
 import { getLogsUrlParams, setHtmlLangAttr, setUITheme } from '../../helpers/helpers';
+
 import Header from '../Header';
+
 import { changeLanguage, getDnsStatus, getTimerStatus } from '../../actions';

 import Dashboard from '../../containers/Dashboard';
@@ -35,15 +33,19 @@ import SetupGuide from '../../containers/SetupGuide';
 import Settings from '../../containers/Settings';
 import Dns from '../../containers/Dns';
 import Encryption from '../../containers/Encryption';
+
 import Dhcp from '../Settings/Dhcp';
 import Clients from '../../containers/Clients';
 import DnsBlocklist from '../../containers/DnsBlocklist';
 import DnsAllowlist from '../../containers/DnsAllowlist';
 import DnsRewrites from '../../containers/DnsRewrites';
 import CustomRules from '../../containers/CustomRules';
+
 import Services from '../Filters/Services';
+
 import Logs from '../Logs';
 import ProtectionTimer from '../ProtectionTimer';
+import { RootState } from '../../initialState';

 const ROUTES = [
    {
@@ -101,26 +103,17 @@ const ROUTES = [
    },
 ];

-const renderRoute = ({ path, component, exact }, idx) => <Route
-        key={idx}
-        exact={exact}
-        path={path}
-        component={component}
-/>;
-
 const App = () => {
    const dispatch = useDispatch();
-    const {
-        language,
-        isCoreRunning,
-        isUpdateAvailable,
-        processing,
-        theme,
-    } = useSelector((state) => state.dashboard, shallowEqual);
+    const { language, isCoreRunning, isUpdateAvailable, processing, theme } = useSelector<
+        RootState,
+        RootState['dashboard']
+    >((state) => state.dashboard, shallowEqual);

-    const { processing: processingEncryption } = useSelector((
-        state,
-    ) => state.encryption, shallowEqual);
+    const { processing: processingEncryption } = useSelector<RootState, RootState['encryption']>(
+        (state) => state.encryption,
+        shallowEqual,
+    );

    const updateAvailable = isCoreRunning && isUpdateAvailable;

@@ -157,7 +150,7 @@ const App = () => {
        setLanguage();
    }, [language]);

-    const handleAutoTheme = (e, accountTheme) => {
+    const handleAutoTheme = (e: any, accountTheme: any) => {
        if (accountTheme !== THEMES.auto) {
            return;
        }
@@ -195,35 +188,50 @@ const App = () => {
        window.location.reload();
    };

-    return <HashRouter hashType="noslash">
-        {updateAvailable && <>
-            <UpdateTopline />
-            <UpdateOverlay />
-        </>}
-        {!processingEncryption && <EncryptionTopline />}
-        <LoadingBar className="loading-bar" updateTime={1000} />
-        <Header />
-        <ProtectionTimer />
-        <div className="container container--wrap pb-5 pt-5">
-            {processing && <Loading />}
-            {!isCoreRunning && <div className="row row-cards">
-                <div className="col-lg-12">
-                    <Status reloadPage={reloadPage} message="dns_start" />
-                    <Loading />
-                </div>
-            </div>}
-            {!processing && isCoreRunning && ROUTES.map(renderRoute)}
-        </div>
-        <Footer />
-        <Toasts />
-        <Icons />
-    </HashRouter>;
-};
+    return (
+        <HashRouter hashType="noslash">
+            {updateAvailable && (
+                <>
+                    <UpdateTopline />

-renderRoute.propTypes = {
-    path: propTypes.oneOfType([propTypes.string, propTypes.arrayOf(propTypes.string)]).isRequired,
-    component: propTypes.element.isRequired,
-    exact: propTypes.bool,
+                    <UpdateOverlay />
+                </>
+            )}
+
+            {!processingEncryption && <EncryptionTopline />}
+
+            <LoadingBar className="loading-bar" updateTime={1000} />
+
+            <Header />
+
+            <ProtectionTimer />
+
+            <div className="container container--wrap pb-5 pt-5">
+                {processing && <Loading />}
+
+                {!isCoreRunning && (
+                    <div className="row row-cards">
+                        <div className="col-lg-12">
+                            <Status reloadPage={reloadPage} message="dns_start" />
+
+                            <Loading />
+                        </div>
+                    </div>
+                )}
+                {!processing &&
+                    isCoreRunning &&
+                    ROUTES.map((route, index) => (
+                        <Route key={index} exact={route.exact} path={route.path} component={route.component} />
+                    ))}
+            </div>
+
+            <Footer />
+
+            <Toasts />
+
+            <Icons />
+        </HashRouter>
+    );
 };

 export default hot(App);