Fix linting issues

src/api/hooks.js

@@ -111,9 +111,7 @@ const useAPIPatch = createAPIHook("PATCH");
 const useAPIPut = createAPIHook("PUT");
 const useAPIDelete = createAPIHook("DELETE");
 
-export { useAPIGet, useAPIPost, useAPIPatch, useAPIPut, useAPIDelete };
+function useAPIPolling(endpoint, until, delay = 1000) {
-
-export function useAPIPolling(endpoint, delay = 1000, until) {
     // delay ms
     const [state, setState] = useState({ state: API_STATE.INIT });
     const [getResponse, get] = useAPIGet(endpoint);
@@ -133,3 +131,12 @@ export function useAPIPolling(endpoint, delay = 1000, until) {
 
     return [state];
 }
+
+export {
+    useAPIGet,
+    useAPIPost,
+    useAPIPatch,
+    useAPIPut,
+    useAPIDelete,
+    useAPIPolling,
+};

src/bootstrap/Alert.js

@@ -6,6 +6,7 @@
  */
 
 import React from "react";
+
 import PropTypes from "prop-types";
 
 export const ALERT_TYPES = Object.freeze({

src/bootstrap/Button.js

@@ -6,6 +6,7 @@
  */
 
 import React from "react";
+
 import PropTypes from "prop-types";
 
 Button.propTypes = {

src/bootstrap/CheckBox.js

@@ -6,6 +6,7 @@
  */
 
 import React from "react";
+
 import PropTypes from "prop-types";
 import { useUID } from "react-uid";
 

src/bootstrap/CopyInput.js

@@ -6,7 +6,9 @@
  */
 
 import React, { useState, useRef } from "react";
+
 import PropTypes from "prop-types";
+
 import { Input } from "./Input";
 
 CopyInput.propTypes = {

src/bootstrap/DataTimeInput.js

@@ -6,9 +6,10 @@
  */
 
 import React from "react";
+
+import moment from "moment/moment";
 import PropTypes from "prop-types";
 import Datetime from "react-datetime";
-import moment from "moment/moment";
 import "react-datetime/css/react-datetime.css";
 import "./DataTimeInput.css";
 
@@ -46,13 +47,13 @@ export function DataTimeInput({
     children,
     ...props
 }) {
-    function renderInput(datetimeProps) {
+    const renderInput = (datetimeProps) => {
         return (
             <Input {...props} {...datetimeProps}>
                 {children}
             </Input>
         );
-    }
+    };
 
     return (
         <Datetime

src/bootstrap/DownloadButton.js

@@ -6,6 +6,7 @@
  */
 
 import React from "react";
+
 import PropTypes from "prop-types";
 
 DownloadButton.propTypes = {

src/bootstrap/EmailInput.js

@@ -6,11 +6,14 @@
  */
 
 import React from "react";
+
 import PropTypes from "prop-types";
 
 import { Input } from "./Input";
 
-export const EmailInput = ({ ...props }) => <Input type="email" {...props} />;
+export function EmailInput({ ...props }) {
+    return <Input type="email" {...props} />;
+}
 
 EmailInput.propTypes = {
     /** Field label. */

src/bootstrap/FileInput.js

@@ -8,6 +8,7 @@
 import React from "react";
 
 import PropTypes from "prop-types";
+
 import { Input } from "./Input";
 
 FileInput.propTypes = {

src/bootstrap/Input.js

@@ -6,11 +6,12 @@
  */
 
 import React, { forwardRef } from "react";
-import { useUID } from "react-uid";
+
 import PropTypes from "prop-types";
+import { useUID } from "react-uid";
 
 /** Base bootstrap input component. */
-export const Input = forwardRef(
+const Input = forwardRef(
     (
         {
             type,
@@ -73,3 +74,5 @@ Input.propTypes = {
     labelClassName: PropTypes.string,
     groupClassName: PropTypes.string,
 };
+
+export { Input };

src/bootstrap/Modal.js

@@ -6,10 +6,11 @@
  */
 
 import React, { useRef, useEffect } from "react";
+
 import PropTypes from "prop-types";
 
-import { Portal } from "../utils/Portal";
 import { useClickOutside } from "../utils/hooks";
+import { Portal } from "../utils/Portal";
 import "./Modal.css";
 
 Modal.propTypes = {

src/bootstrap/NumberInput.js

@@ -6,10 +6,11 @@
  */
 
 import React from "react";
+
 import PropTypes from "prop-types";
 
-import { useConditionalTimeout } from "../utils/hooks";
 import { Input } from "./Input";
+import { useConditionalTimeout } from "../utils/hooks";
 import "./NumberInput.css";
 
 NumberInput.propTypes = {

src/bootstrap/PasswordInput.js

@@ -6,6 +6,7 @@
  */
 
 import React, { useState } from "react";
+
 import PropTypes from "prop-types";
 
 import { Input } from "./Input";

src/bootstrap/RadioSet.js

@@ -6,6 +6,7 @@
  */
 
 import React from "react";
+
 import PropTypes from "prop-types";
 import { useUID } from "react-uid";
 
@@ -94,27 +95,25 @@ Radio.propTypes = {
 
 export function Radio({ label, id, helpText, inline, ...props }) {
     return (
-        <>
+        <div
-            <div
+            className={`mb-2 ${
-                className={`mb-2 ${
+                inline ? "form-check form-check-inline" : ""
-                    inline ? "form-check form-check-inline" : ""
+            }`.trim()}
-                }`.trim()}
+        >
-            >
+            <input
-                <input
+                id={id}
-                    id={id}
+                className="form-check-input me-2"
-                    className="form-check-input me-2"
+                type="radio"
-                    type="radio"
+                {...props}
-                    {...props}
+            />
-                />
+            <label className="form-check-label" htmlFor={id}>
-                <label className="form-check-label" htmlFor={id}>
+                {label}
-                    {label}
+                {helpText && (
-                    {helpText && (
+                    <div className="form-text">
-                        <div className="form-text">
+                        <small>{helpText}</small>
-                            <small>{helpText}</small>
+                    </div>
-                        </div>
+                )}
-                    )}
+            </label>
-                </label>
+        </div>
-            </div>
-        </>
     );
 }

src/bootstrap/Select.js

@@ -6,6 +6,7 @@
  */
 
 import React from "react";
+
 import PropTypes from "prop-types";
 import { useUID } from "react-uid";
 

src/bootstrap/Spinner.js

@@ -6,6 +6,7 @@
  */
 
 import React from "react";
+
 import PropTypes from "prop-types";
 
 import "./Spinner.css";

src/bootstrap/Switch.js

@@ -6,6 +6,7 @@
  */
 
 import React from "react";
+
 import PropTypes from "prop-types";
 import { useUID } from "react-uid";
 

src/bootstrap/TextInput.js

@@ -6,11 +6,14 @@
  */
 
 import React from "react";
+
 import PropTypes from "prop-types";
 
 import { Input } from "./Input";
 
-export const TextInput = ({ ...props }) => <Input type="text" {...props} />;
+export function TextInput({ ...props }) {
+    return <Input type="text" {...props} />;
+}
 
 TextInput.propTypes = {
     /** Field label. */

src/common/RebootButton.js

@@ -6,15 +6,15 @@
  */
 
 import React, { useState, useEffect } from "react";
+
 import PropTypes from "prop-types";
 
 import { useAPIPost } from "../api/hooks";
 import { API_STATE } from "../api/utils";
-import { ForisURLs } from "../utils/forisUrls";
-
 import { Button } from "../bootstrap/Button";
 import { Modal, ModalHeader, ModalBody, ModalFooter } from "../bootstrap/Modal";
 import { useAlert } from "../context/alertContext/AlertContext";
+import { ForisURLs } from "../utils/forisUrls";
 
 export function RebootButton(props) {
     const [triggered, setTriggered] = useState(false);

src/common/WiFiSettings/ResetWiFiSettings.js

@@ -6,14 +6,15 @@
  */
 
 import React, { useEffect, useState } from "react";
+
 import PropTypes from "prop-types";
 
-import { Button } from "../../bootstrap/Button";
-import { useAlert } from "../../context/alertContext/AlertContext";
-import { ALERT_TYPES } from "../../bootstrap/Alert";
 import { useAPIPost } from "../../api/hooks";
 import { API_STATE } from "../../api/utils";
+import { ALERT_TYPES } from "../../bootstrap/Alert";
+import { Button } from "../../bootstrap/Button";
 import { formFieldsSize } from "../../bootstrap/constants";
+import { useAlert } from "../../context/alertContext/AlertContext";
 
 ResetWiFiSettings.propTypes = {
     ws: PropTypes.object.isRequired,

src/common/WiFiSettings/WiFiForm.js

@@ -6,15 +6,17 @@
  */
 
 import React from "react";
+
 import PropTypes from "prop-types";
-import { Switch } from "../../bootstrap/Switch";
+
+import { HELP_TEXTS, HTMODES, HWMODES, ENCRYPTIONMODES } from "./constants";
+import WifiGuestForm from "./WiFiGuestForm";
+import WiFiQRCode from "./WiFiQRCode";
 import { PasswordInput } from "../../bootstrap/PasswordInput";
 import { RadioSet } from "../../bootstrap/RadioSet";
 import { Select } from "../../bootstrap/Select";
+import { Switch } from "../../bootstrap/Switch";
 import { TextInput } from "../../bootstrap/TextInput";
-import WiFiQRCode from "./WiFiQRCode";
-import WifiGuestForm from "./WiFiGuestForm";
-import { HELP_TEXTS, HTMODES, HWMODES, ENCRYPTIONMODES } from "./constants";
 
 WiFiForm.propTypes = {
     formData: PropTypes.shape({ devices: PropTypes.arrayOf(PropTypes.object) })
@@ -267,8 +269,8 @@ function getChannelChoices(device) {
             channelChoices[availableChannel.number.toString()] = `
                         ${availableChannel.number}
                         (${availableChannel.frequency} MHz ${
-                availableChannel.radar ? " ,DFS" : ""
+                            availableChannel.radar ? " ,DFS" : ""
-            })
+                        })
                     `;
         });
     });

src/common/WiFiSettings/WiFiGuestForm.js

@@ -6,13 +6,14 @@
  */
 
 import React from "react";
+
 import PropTypes from "prop-types";
 
-import { TextInput } from "../../bootstrap/TextInput";
-import { Switch } from "../../bootstrap/Switch";
-import { PasswordInput } from "../../bootstrap/PasswordInput";
-import WiFiQRCode from "./WiFiQRCode";
 import { HELP_TEXTS } from "./constants";
+import WiFiQRCode from "./WiFiQRCode";
+import { PasswordInput } from "../../bootstrap/PasswordInput";
+import { Switch } from "../../bootstrap/Switch";
+import { TextInput } from "../../bootstrap/TextInput";
 
 WifiGuestForm.propTypes = {
     formData: PropTypes.shape({

src/common/WiFiSettings/WiFiQRCode.js

@@ -6,10 +6,11 @@
  */
 
 import React, { useState } from "react";
-import QRCode from "qrcode.react";
-import PropTypes from "prop-types";
 
-import { ForisURLs } from "../../utils/forisUrls";
+import PropTypes from "prop-types";
+import QRCode from "qrcode.react";
+
+import { createAndDownloadPdf, toQRCodeContent } from "./qrCodeHelpers";
 import { Button } from "../../bootstrap/Button";
 import {
     Modal,
@@ -17,7 +18,7 @@ import {
     ModalFooter,
     ModalHeader,
 } from "../../bootstrap/Modal";
-import { createAndDownloadPdf, toQRCodeContent } from "./qrCodeHelpers";
+import { ForisURLs } from "../../utils/forisUrls";
 
 WiFiQRCode.propTypes = {
     SSID: PropTypes.string.isRequired,

src/common/WiFiSettings/WiFiSettings.js

@@ -6,11 +6,12 @@
  */
 
 import React from "react";
+
 import PropTypes from "prop-types";
 
-import { ForisForm } from "../../form/components/ForisForm";
-import WiFiForm from "./WiFiForm";
 import { ResetWiFiSettings } from "./ResetWiFiSettings";
+import WiFiForm from "./WiFiForm";
+import { ForisForm } from "../../form/components/ForisForm";
 
 WiFiSettings.propTypes = {
     ws: PropTypes.object.isRequired,

src/context/alertContext/AlertContext.js

@@ -6,6 +6,7 @@
  */
 
 import React, { useState, useContext, useCallback } from "react";
+
 import PropTypes from "prop-types";
 
 import { Alert, ALERT_TYPES } from "../../bootstrap/Alert";

src/context/customizationContext/CustomizationContext.js

@@ -6,12 +6,12 @@
  */
 
 import React, { useContext, useEffect } from "react";
+
 import PropTypes from "prop-types";
 
 import { useAPIGet } from "../../api/hooks";
-import { ForisURLs } from "../../utils/forisUrls";
-
 import { Spinner } from "../../bootstrap/Spinner";
+import { ForisURLs } from "../../utils/forisUrls";
 
 CustomizationContextProvider.propTypes = {
     children: PropTypes.oneOfType([

src/form/components/ForisForm.js

@@ -6,19 +6,19 @@
  */
 
 import React, { useEffect } from "react";
+
 import PropTypes from "prop-types";
 import { Prompt } from "react-router-dom";
 
-import { ALERT_TYPES } from "../../bootstrap/Alert";
+import { STATES as SUBMIT_BUTTON_STATES, SubmitButton } from "./SubmitButton";
+import { useAPIPost } from "../../api/hooks";
 import { API_STATE } from "../../api/utils";
+import { ALERT_TYPES } from "../../bootstrap/Alert";
 import { formFieldsSize } from "../../bootstrap/constants";
 import { Spinner } from "../../bootstrap/Spinner";
 import { useAlert } from "../../context/alertContext/AlertContext";
-import { useAPIPost } from "../../api/hooks";
-
-import { useForisModule, useForm } from "../hooks";
-import { STATES as SUBMIT_BUTTON_STATES, SubmitButton } from "./SubmitButton";
 import { ErrorMessage } from "../../utils/ErrorMessage";
+import { useForisModule, useForm } from "../hooks";
 
 ForisForm.propTypes = {
     /** Optional WebSocket object. See `scr/common/WebSockets.js`.

src/form/components/SubmitButton.js

@@ -6,6 +6,7 @@
  */
 
 import React from "react";
+
 import PropTypes from "prop-types";
 
 import { Button } from "../../bootstrap/Button";

src/form/hooks.js

@@ -6,6 +6,7 @@
  */
 
 import { useCallback, useEffect, useReducer } from "react";
+
 import update from "immutability-helper";
 
 import { useAPIGet } from "../api/hooks";

src/utils/ErrorMessage.js

@@ -6,6 +6,7 @@
  */
 
 import React from "react";
+
 import PropTypes from "prop-types";
 
 ErrorMessage.propTypes = {

src/utils/conditionalHOCs.js

@@ -7,17 +7,18 @@
 
 import React from "react";
 
-import { Spinner } from "../bootstrap/Spinner";
-import { API_STATE } from "../api/utils";
 import { ErrorMessage } from "./ErrorMessage";
+import { API_STATE } from "../api/utils";
+import { Spinner } from "../bootstrap/Spinner";
 
 function withEither(conditionalFn, Either) {
-    return (Component) => (props) => {
+    return (Component) =>
-        if (conditionalFn(props)) {
+        function (props) {
-            return <Either {...props} />;
+            if (conditionalFn(props)) {
-        }
+                return <Either {...props} />;
-        return <Component {...props} />;
+            }
-    };
+            return <Component {...props} />;
+        };
 }
 
 // Loading

src/utils/validations.js

@@ -23,12 +23,15 @@ export const ERROR_MESSAGES = {
 const REs = {
     IPv4: /^((25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/,
     IPv6: /^(([0-9a-fA-F]{1,4}:){7,7}[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,7}:|([0-9a-fA-F]{1,4}:){1,6}:[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,5}(:[0-9a-fA-F]{1,4}){1,2}|([0-9a-fA-F]{1,4}:){1,4}(:[0-9a-fA-F]{1,4}){1,3}|([0-9a-fA-F]{1,4}:){1,3}(:[0-9a-fA-F]{1,4}){1,4}|([0-9a-fA-F]{1,4}:){1,2}(:[0-9a-fA-F]{1,4}){1,5}|[0-9a-fA-F]{1,4}:((:[0-9a-fA-F]{1,4}){1,6})|:((:[0-9a-fA-F]{1,4}){1,7}|:)|fe80:(:[0-9a-fA-F]{0,4}){0,4}%[0-9a-zA-Z]{1,}|::(ffff(:0{1,4}){0,1}:){0,1}((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])\.){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])|([0-9a-fA-F]{1,4}:){1,4}:((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])\.){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9]))$/,
-    IPv6Prefix: /^s*((([0-9A-Fa-f]{1,4}:){7}([0-9A-Fa-f]{1,4}|:))|(([0-9A-Fa-f]{1,4}:){6}(:[0-9A-Fa-f]{1,4}|((25[0-5]|2[0-4]d|1dd|[1-9]?d)(.(25[0-5]|2[0-4]d|1dd|[1-9]?d)){3})|:))|(([0-9A-Fa-f]{1,4}:){5}(((:[0-9A-Fa-f]{1,4}){1,2})|:((25[0-5]|2[0-4]d|1dd|[1-9]?d)(.(25[0-5]|2[0-4]d|1dd|[1-9]?d)){3})|:))|(([0-9A-Fa-f]{1,4}:){4}(((:[0-9A-Fa-f]{1,4}){1,3})|((:[0-9A-Fa-f]{1,4})?:((25[0-5]|2[0-4]d|1dd|[1-9]?d)(.(25[0-5]|2[0-4]d|1dd|[1-9]?d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){3}(((:[0-9A-Fa-f]{1,4}){1,4})|((:[0-9A-Fa-f]{1,4}){0,2}:((25[0-5]|2[0-4]d|1dd|[1-9]?d)(.(25[0-5]|2[0-4]d|1dd|[1-9]?d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){2}(((:[0-9A-Fa-f]{1,4}){1,5})|((:[0-9A-Fa-f]{1,4}){0,3}:((25[0-5]|2[0-4]d|1dd|[1-9]?d)(.(25[0-5]|2[0-4]d|1dd|[1-9]?d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){1}(((:[0-9A-Fa-f]{1,4}){1,6})|((:[0-9A-Fa-f]{1,4}){0,4}:((25[0-5]|2[0-4]d|1dd|[1-9]?d)(.(25[0-5]|2[0-4]d|1dd|[1-9]?d)){3}))|:))|(:(((:[0-9A-Fa-f]{1,4}){1,7})|((:[0-9A-Fa-f]{1,4}){0,5}:((25[0-5]|2[0-4]d|1dd|[1-9]?d)(.(25[0-5]|2[0-4]d|1dd|[1-9]?d)){3}))|:)))(%.+)?s*(\/([0-9]|[1-9][0-9]|1[0-1][0-9]|12[0-8]))$/,
+    IPv6Prefix:
+        /^s*((([0-9A-Fa-f]{1,4}:){7}([0-9A-Fa-f]{1,4}|:))|(([0-9A-Fa-f]{1,4}:){6}(:[0-9A-Fa-f]{1,4}|((25[0-5]|2[0-4]d|1dd|[1-9]?d)(.(25[0-5]|2[0-4]d|1dd|[1-9]?d)){3})|:))|(([0-9A-Fa-f]{1,4}:){5}(((:[0-9A-Fa-f]{1,4}){1,2})|:((25[0-5]|2[0-4]d|1dd|[1-9]?d)(.(25[0-5]|2[0-4]d|1dd|[1-9]?d)){3})|:))|(([0-9A-Fa-f]{1,4}:){4}(((:[0-9A-Fa-f]{1,4}){1,3})|((:[0-9A-Fa-f]{1,4})?:((25[0-5]|2[0-4]d|1dd|[1-9]?d)(.(25[0-5]|2[0-4]d|1dd|[1-9]?d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){3}(((:[0-9A-Fa-f]{1,4}){1,4})|((:[0-9A-Fa-f]{1,4}){0,2}:((25[0-5]|2[0-4]d|1dd|[1-9]?d)(.(25[0-5]|2[0-4]d|1dd|[1-9]?d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){2}(((:[0-9A-Fa-f]{1,4}){1,5})|((:[0-9A-Fa-f]{1,4}){0,3}:((25[0-5]|2[0-4]d|1dd|[1-9]?d)(.(25[0-5]|2[0-4]d|1dd|[1-9]?d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){1}(((:[0-9A-Fa-f]{1,4}){1,6})|((:[0-9A-Fa-f]{1,4}){0,4}:((25[0-5]|2[0-4]d|1dd|[1-9]?d)(.(25[0-5]|2[0-4]d|1dd|[1-9]?d)){3}))|:))|(:(((:[0-9A-Fa-f]{1,4}){1,7})|((:[0-9A-Fa-f]{1,4}){0,5}:((25[0-5]|2[0-4]d|1dd|[1-9]?d)(.(25[0-5]|2[0-4]d|1dd|[1-9]?d)){3}))|:)))(%.+)?s*(\/([0-9]|[1-9][0-9]|1[0-1][0-9]|12[0-8]))$/,
     domain: /^([a-z0-9]+(-[a-z0-9]+)*\.)+[a-z]{2,}$/,
-    hostname: /^[a-z\d]([a-z\d-]{0,61}[a-z\d])?(\.[a-z\d]([a-z\d-]{0,61}[a-z\d])?)*$/i,
+    hostname:
+        /^[a-z\d]([a-z\d-]{0,61}[a-z\d])?(\.[a-z\d]([a-z\d-]{0,61}[a-z\d])?)*$/i,
     DUID: /^([0-9a-fA-F]{2}){4}([0-9a-fA-F]{2})*$/,
     MAC: /^([a-fA-F0-9]{2}:){5}[a-fA-F0-9]{2}$/,
-    MultipleEmails: /^([a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+ *)( *, *[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+ *)*$/,
+    MultipleEmails:
+        /^([a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+ *)( *, *[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+ *)*$/,
 };
 
 const createValidator = (fieldType) => (value) => {