install forms

client/src/install/Setup/index.tsx

@@ -1,101 +1,77 @@
-import React, { Component, Fragment } from 'react';
-import { connect } from 'react-redux';
+import React, { useEffect, Fragment } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
 import debounce from 'lodash/debounce';
 
 import * as actionCreators from '../../actions/install';
 
 import { getWebAddress } from '../../helpers/helpers';
-import { INSTALL_FIRST_STEP, INSTALL_TOTAL_STEPS, ALL_INTERFACES_IP, DEBOUNCE_TIMEOUT } from '../../helpers/constants';
+import { INSTALL_TOTAL_STEPS, ALL_INTERFACES_IP, DEBOUNCE_TIMEOUT } from '../../helpers/constants';
 
 import Loading from '../../components/ui/Loading';
-
 import Greeting from './Greeting';
-
 import Settings from './Settings';
-
-import Auth from './Auth';
-
 import Devices from './Devices';
-
 import Submit from './Submit';
-
 import Progress from './Progress';
-
 import Toasts from '../../components/Toasts';
-
 import Footer from '../../components/ui/Footer';
-
 import Icons from '../../components/ui/Icons';
-
 import { Logo } from '../../components/ui/svg/logo';
 
 import './Setup.css';
 import '../../components/ui/Tabler.css';
+import Auth from './Auth';
 
-interface SetupProps {
-    getDefaultAddresses: (...args: unknown[]) => unknown;
-    setAllSettings: (...args: unknown[]) => unknown;
-    checkConfig: (...args: unknown[]) => unknown;
-    nextStep: (...args: unknown[]) => unknown;
-    prevStep: (...args: unknown[]) => unknown;
-    install: {
-        step: number;
-        processingDefault: boolean;
-        web;
-        dns;
-        staticIp;
-        interfaces;
-    };
-    step?: number;
-    web?: object;
-    dns?: object;
-}
+const Setup = () => {
+    const dispatch = useDispatch();
 
-class Setup extends Component<SetupProps> {
-    componentDidMount() {
-        this.props.getDefaultAddresses();
-    }
+    const install = useSelector((state: any) => state.install);
+    const { processingDefault, step, web, dns, staticIp, interfaces } = install;
 
-    handleFormSubmit = (values: any) => {
-        const { staticIp, ...config } = values;
+    useEffect(() => {
+        dispatch(actionCreators.getDefaultAddresses());
+    }, []);
 
-        this.props.setAllSettings(config);
+    const handleFormSubmit = (values: any) => {
+        const config = { ...values };
+        delete config.staticIp;
+
+        if (web.port && dns.port) {
+            dispatch(actionCreators.setAllSettings({
+                web,
+                dns,
+                ...config,
+            }));
+        }
     };
 
-    handleFormChange = debounce((values) => {
+    const checkConfig = debounce((values) => {
         const { web, dns } = values;
+
         if (values && web.port && dns.port) {
-            this.props.checkConfig({ web, dns, set_static_ip: false });
+            dispatch(actionCreators.checkConfig({ web, dns, set_static_ip: false }));
         }
     }, DEBOUNCE_TIMEOUT);
 
-    handleFix = (web: any, dns: any, set_static_ip: any) => {
-        this.props.checkConfig({ web, dns, set_static_ip });
+    const handleFix = (web: any, dns: any, set_static_ip: any) => {
+        dispatch(actionCreators.checkConfig({ web, dns, set_static_ip }));
     };
 
-    openDashboard = (ip: any, port: any) => {
+    const openDashboard = (ip: any, port: any) => {
         let address = getWebAddress(ip, port);
-
         if (ip === ALL_INTERFACES_IP) {
             address = getWebAddress(window.location.hostname, port);
         }
-
         window.location.replace(address);
     };
 
-    nextStep = () => {
-        if (this.props.install.step < INSTALL_TOTAL_STEPS) {
-            this.props.nextStep();
+    const handleNextStep = () => {
+        if (step < INSTALL_TOTAL_STEPS) {
+            dispatch(actionCreators.nextStep());
         }
     };
 
-    prevStep = () => {
-        if (this.props.install.step > INSTALL_FIRST_STEP) {
-            this.props.prevStep();
-        }
-    };
-
-    renderPage(step: any, config: any, interfaces: any) {
+    const renderPage = (step: any, config: any, interfaces: any) => {
         switch (step) {
             case 1:
                 return <Greeting />;
@@ -105,55 +81,43 @@ class Setup extends Component<SetupProps> {
                         config={config}
                         initialValues={config}
                         interfaces={interfaces}
-                        onSubmit={this.nextStep}
-                        onChange={this.handleFormChange}
-                        validateForm={this.handleFormChange}
-                        handleFix={this.handleFix}
+                        handleSubmit={handleNextStep}
+                        validateForm={checkConfig}
+                        handleFix={handleFix}
                     />
                 );
             case 3:
-                return <Auth onSubmit={this.handleFormSubmit} />;
+                return <Auth onAuthSubmit={handleFormSubmit} />;
             case 4:
                 return <Devices interfaces={interfaces} />;
             case 5:
-                return <Submit openDashboard={this.openDashboard} />;
+                return <Submit openDashboard={openDashboard} />;
             default:
                 return false;
         }
+    };
+
+    if (processingDefault) {
+        return <Loading />;
     }
 
-    render() {
-        const { processingDefault, step, web, dns, staticIp, interfaces } = this.props.install;
+    return (
+        <>
+            <div className="setup">
+                <div className="setup__container">
+                    <Logo className="setup__logo" />
+                    {renderPage(step, { web, dns, staticIp }, interfaces)}
+                    <Progress step={step} />
+                </div>
+            </div>
 
-        return (
-            <Fragment>
-                {processingDefault && <Loading />}
-                {!processingDefault && (
-                    <Fragment>
-                        <div className="setup">
-                            <div className="setup__container">
-                                <Logo className="setup__logo" />
-                                {this.renderPage(step, { web, dns, staticIp }, interfaces)}
-                                <Progress step={step} />
-                            </div>
-                        </div>
+            <Footer />
 
-                        <Footer />
+            <Toasts />
 
-                        <Toasts />
-
-                        <Icons />
-                    </Fragment>
-                )}
-            </Fragment>
-        );
-    }
-}
-
-const mapStateToProps = (state: any) => {
-    const { install, toasts } = state;
-    const props = { install, toasts };
-    return props;
+            <Icons />
+        </>
+    );
 };
 
-export default connect(mapStateToProps, actionCreators)(Setup);
+export default Setup;