Frontend rewritten in TypeScript, added Node 18 support

client/src/containers/Clients.js

@@ -1,31 +0,0 @@
-import { connect } from 'react-redux';
-import { getClients } from '../actions';
-import { getStats } from '../actions/stats';
-import {
-    addClient, updateClient, deleteClient, toggleClientModal,
-} from '../actions/clients';
-import Clients from '../components/Settings/Clients';
-
-const mapStateToProps = (state) => {
-    const { dashboard, clients, stats } = state;
-    const props = {
-        dashboard,
-        clients,
-        stats,
-    };
-    return props;
-};
-
-const mapDispatchToProps = {
-    getClients,
-    getStats,
-    addClient,
-    updateClient,
-    deleteClient,
-    toggleClientModal,
-};
-
-export default connect(
-    mapStateToProps,
-    mapDispatchToProps,
-)(Clients);

client/src/containers/Clients.ts

@@ -0,0 +1,37 @@
+import { connect } from 'react-redux';
+
+import { getClients } from '../actions';
+import { getStats } from '../actions/stats';
+import { addClient, updateClient, deleteClient, toggleClientModal } from '../actions/clients';
+
+import Clients from '../components/Settings/Clients';
+
+const mapStateToProps = (state: any) => {
+    const { dashboard, clients, stats } = state;
+    const props = {
+        dashboard,
+        clients,
+        stats,
+    };
+    return props;
+};
+
+type DispatchProps = {
+    getClients: (dispatch: any) => void;
+    getStats: (...args: unknown[]) => unknown;
+    addClient: (dispatch: any) => void;
+    updateClient: (config: any, name: any) => (dispatch: any) => void;
+    deleteClient: (config: any, name: any) => (dispatch: any) => void;
+    toggleClientModal: (...args: unknown[]) => unknown;
+}
+
+const mapDispatchToProps: DispatchProps = {
+    getClients,
+    getStats,
+    addClient,
+    updateClient,
+    deleteClient,
+    toggleClientModal,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(Clients);

client/src/containers/CustomRules.js

@@ -1,26 +0,0 @@
-import { connect } from 'react-redux';
-import {
-    setRules,
-    getFilteringStatus,
-    handleRulesChange,
-    checkHost,
-} from '../actions/filtering';
-import CustomRules from '../components/Filters/CustomRules';
-
-const mapStateToProps = (state) => {
-    const { filtering } = state;
-    const props = { filtering };
-    return props;
-};
-
-const mapDispatchToProps = {
-    setRules,
-    getFilteringStatus,
-    handleRulesChange,
-    checkHost,
-};
-
-export default connect(
-    mapStateToProps,
-    mapDispatchToProps,
-)(CustomRules);

client/src/containers/CustomRules.ts

@@ -0,0 +1,27 @@
+import { connect } from 'react-redux';
+import { setRules, getFilteringStatus, handleRulesChange, checkHost } from '../actions/filtering';
+
+import CustomRules from '../components/Filters/CustomRules';
+import { RootState } from '../initialState';
+
+const mapStateToProps = (state: RootState) => {
+    const { filtering } = state;
+    const props = { filtering };
+    return props;
+};
+
+type DispatchProps = {
+    setRules: (...args: unknown[]) => unknown;
+    getFilteringStatus: (...args: unknown[]) => unknown;
+    handleRulesChange: (...args: unknown[]) => unknown;
+    checkHost: (dispatch: any) => void;
+}
+
+const mapDispatchToProps: DispatchProps = {
+    setRules,
+    getFilteringStatus,
+    handleRulesChange,
+    checkHost,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(CustomRules);

client/src/containers/Dashboard.js

@@ -1,25 +0,0 @@
-import { connect } from 'react-redux';
-import { toggleProtection, getClients } from '../actions';
-import { getStats, getStatsConfig, setStatsConfig } from '../actions/stats';
-import { getAccessList } from '../actions/access';
-import Dashboard from '../components/Dashboard';
-
-const mapStateToProps = (state) => {
-    const { dashboard, stats, access } = state;
-    const props = { dashboard, stats, access };
-    return props;
-};
-
-const mapDispatchToProps = {
-    toggleProtection,
-    getClients,
-    getStats,
-    getStatsConfig,
-    setStatsConfig,
-    getAccessList,
-};
-
-export default connect(
-    mapStateToProps,
-    mapDispatchToProps,
-)(Dashboard);

client/src/containers/Dashboard.ts

@@ -0,0 +1,32 @@
+import { connect } from 'react-redux';
+
+import { toggleProtection, getClients } from '../actions';
+import { getStats, getStatsConfig, setStatsConfig } from '../actions/stats';
+import { getAccessList } from '../actions/access';
+
+import Dashboard from '../components/Dashboard';
+import { RootState } from '../initialState';
+
+const mapStateToProps = (state: RootState) => {
+    const { dashboard, stats, access } = state;
+    const props = { dashboard, stats, access };
+    return props;
+};
+
+type DispatchProps = {
+    toggleProtection: (...args: unknown[]) => unknown;
+    getClients: (...args: unknown[]) => unknown;
+    getStats: (...args: unknown[]) => unknown;
+    getStatsConfig: (...args: unknown[]) => unknown;
+    getAccessList: () => (dispatch: any) => void;
+}
+
+const mapDispatchToProps: DispatchProps = {
+    toggleProtection,
+    getClients,
+    getStats,
+    getStatsConfig,
+    getAccessList,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(Dashboard);

client/src/containers/Dhcp.ts

@@ -10,9 +10,10 @@ import {
     removeStaticLease,
     resetDhcp,
 } from '../actions';
+
 import Dhcp from '../components/Settings/Dhcp';
 
-const mapStateToProps = (state) => {
+const mapStateToProps = (state: any) => {
     const { dhcp } = state;
     const props = {
         dhcp,
@@ -32,7 +33,4 @@ const mapDispatchToProps = {
     resetDhcp,
 };
 
-export default connect(
-    mapStateToProps,
-    mapDispatchToProps,
-)(Dhcp);
+export default connect(mapStateToProps, mapDispatchToProps)(Dhcp);

client/src/containers/Dns.ts

@@ -1,18 +1,12 @@
 import { connect } from 'react-redux';
 import { getAccessList, setAccessList } from '../actions/access';
-import {
-    getRewritesList,
-    addRewrite,
-    deleteRewrite,
-    toggleRewritesModal,
-} from '../actions/rewrites';
+import { getRewritesList, addRewrite, deleteRewrite, toggleRewritesModal } from '../actions/rewrites';
 import { getDnsConfig, setDnsConfig } from '../actions/dnsConfig';
+
 import Dns from '../components/Settings/Dns';
 
-const mapStateToProps = (state) => {
-    const {
-        dashboard, settings, access, rewrites, dnsConfig,
-    } = state;
+const mapStateToProps = (state: any) => {
+    const { dashboard, settings, access, rewrites, dnsConfig } = state;
     const props = {
         dashboard,
         settings,
@@ -34,7 +28,4 @@ const mapDispatchToProps = {
     setDnsConfig,
 };
 
-export default connect(
-    mapStateToProps,
-    mapDispatchToProps,
-)(Dns);
+export default connect(mapStateToProps, mapDispatchToProps)(Dns);

client/src/containers/DnsAllowlist.ts

@@ -10,9 +10,10 @@ import {
     handleRulesChange,
     editFilter,
 } from '../actions/filtering';
+
 import DnsAllowlist from '../components/Filters/DnsAllowlist';
 
-const mapStateToProps = (state) => {
+const mapStateToProps = (state: any) => {
     const { filtering } = state;
     const props = { filtering };
     return props;
@@ -30,7 +31,4 @@ const mapDispatchToProps = {
     editFilter,
 };
 
-export default connect(
-    mapStateToProps,
-    mapDispatchToProps,
-)(DnsAllowlist);
+export default connect(mapStateToProps, mapDispatchToProps)(DnsAllowlist);

client/src/containers/DnsBlocklist.ts

@@ -10,9 +10,10 @@ import {
     handleRulesChange,
     editFilter,
 } from '../actions/filtering';
+
 import DnsBlocklist from '../components/Filters/DnsBlocklist';
 
-const mapStateToProps = (state) => {
+const mapStateToProps = (state: any) => {
     const { filtering } = state;
     const props = { filtering };
     return props;
@@ -30,7 +31,4 @@ const mapDispatchToProps = {
     editFilter,
 };
 
-export default connect(
-    mapStateToProps,
-    mapDispatchToProps,
-)(DnsBlocklist);
+export default connect(mapStateToProps, mapDispatchToProps)(DnsBlocklist);

client/src/containers/DnsRewrites.js

@@ -1,28 +0,0 @@
-import { connect } from 'react-redux';
-import {
-    getRewritesList,
-    addRewrite,
-    deleteRewrite,
-    updateRewrite,
-    toggleRewritesModal,
-} from '../actions/rewrites';
-import Rewrites from '../components/Filters/Rewrites';
-
-const mapStateToProps = (state) => {
-    const { rewrites } = state;
-    const props = { rewrites };
-    return props;
-};
-
-const mapDispatchToProps = {
-    getRewritesList,
-    addRewrite,
-    deleteRewrite,
-    updateRewrite,
-    toggleRewritesModal,
-};
-
-export default connect(
-    mapStateToProps,
-    mapDispatchToProps,
-)(Rewrites);

client/src/containers/DnsRewrites.ts

@@ -0,0 +1,29 @@
+import { connect } from 'react-redux';
+import { getRewritesList, addRewrite, deleteRewrite, updateRewrite, toggleRewritesModal } from '../actions/rewrites';
+
+import Rewrites from '../components/Filters/Rewrites';
+import { RootState } from '../initialState';
+
+const mapStateToProps = (state: RootState) => {
+    const { rewrites } = state;
+    const props = { rewrites };
+    return props;
+};
+
+type DispatchProps = {
+    getRewritesList: () => (dispatch: any) => void;
+    toggleRewritesModal: (...args: unknown[]) => unknown;
+    addRewrite: (...args: unknown[]) => unknown;
+    deleteRewrite: (...args: unknown[]) => unknown;
+    updateRewrite: (...args: unknown[]) => unknown;
+}
+
+const mapDispatchToProps: DispatchProps = {
+    getRewritesList,
+    addRewrite,
+    deleteRewrite,
+    updateRewrite,
+    toggleRewritesModal,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(Rewrites);

client/src/containers/Encryption.ts

@@ -1,8 +1,9 @@
 import { connect } from 'react-redux';
 import { getTlsStatus, setTlsConfig, validateTlsConfig } from '../actions/encryption';
+
 import Encryption from '../components/Settings/Encryption';
 
-const mapStateToProps = (state) => {
+const mapStateToProps = (state: any) => {
     const { encryption } = state;
     const props = {
         encryption,
@@ -16,7 +17,4 @@ const mapDispatchToProps = {
     validateTlsConfig,
 };
 
-export default connect(
-    mapStateToProps,
-    mapDispatchToProps,
-)(Encryption);
+export default connect(mapStateToProps, mapDispatchToProps)(Encryption);

client/src/containers/Settings.ts

@@ -1,15 +1,15 @@
 import { connect } from 'react-redux';
+
 import { initSettings, toggleSetting } from '../actions';
 import { getBlockedServices, updateBlockedServices } from '../actions/services';
 import { getStatsConfig, setStatsConfig, resetStats } from '../actions/stats';
 import { clearLogs, getLogsConfig, setLogsConfig } from '../actions/queryLogs';
 import { getFilteringStatus, setFiltersConfig } from '../actions/filtering';
+
 import Settings from '../components/Settings';
 
-const mapStateToProps = (state) => {
-    const {
-        settings, services, stats, queryLogs, filtering,
-    } = state;
+const mapStateToProps = (state: any) => {
+    const { settings, services, stats, queryLogs, filtering } = state;
     const props = {
         settings,
         services,
@@ -35,7 +35,4 @@ const mapDispatchToProps = {
     setFiltersConfig,
 };
 
-export default connect(
-    mapStateToProps,
-    mapDispatchToProps,
-)(Settings);
+export default connect(mapStateToProps, mapDispatchToProps)(Settings);

client/src/containers/SetupGuide.ts

@@ -1,14 +1,13 @@
 import { connect } from 'react-redux';
+
 import * as actionCreators from '../actions';
+
 import SetupGuide from '../components/SetupGuide';
 
-const mapStateToProps = (state) => {
+const mapStateToProps = (state: any) => {
     const { dashboard } = state;
     const props = { dashboard };
     return props;
 };
 
-export default connect(
-    mapStateToProps,
-    actionCreators,
-)(SetupGuide);
+export default connect(mapStateToProps, actionCreators)(SetupGuide);