Merge branch 'dev' into 'master'

Release 3.0.0

See merge request turris/reforis/foris-js!68

Makefile

@@ -35,11 +35,6 @@ $(VENV_NAME)/bin/activate:
 install-js: package.json
 	npm install --save-dev
 
-watch-js:
-	npm run build:watch
-build-js:
-	npm run build
-
 collect-files:
 	sh scripts/collect_files.sh
 pack: collect-files

README.md

@@ -1,4 +1,5 @@
 # foris-js
+Set of utils and common React elements for reForis.
 
 ## Publishing package
 

babel.cfg

@@ -1 +0,0 @@
-[javascript: src/**.js]

package.json

@@ -1,18 +1,18 @@
 {
   "name": "foris",
-  "version": "1.4.0",
+  "version": "3.0.0",
   "description": "Set of components and utils for Foris and its plugins.",
   "author": "CZ.NIC, z.s.p.o.",
   "repository": {
     "type": "git",
-    "url": "https://gitlab.labs.nic.cz/turris/reforis/forisjs.git"
+    "url": "https://gitlab.labs.nic.cz/turris/reforis/foris-js.git"
   },
   "keywords": [
     "foris",
     "reforis"
   ],
   "license": "GPL-3.0",
-  "main": "index.js",
+  "main": "./index.js",
   "dependencies": {
     "axios": "^0.19.0",
     "jest-transform-css": "^2.0.0",
@@ -44,7 +44,7 @@
     "babel-plugin-react-transform": "^3.0.0",
     "babel-polyfill": "^6.26.0",
     "bootstrap": "^4.3.1",
-    "copy-webpack-plugin": "^5.0.4",
+    "copy-webpack-plugin": "^5.1.1",
     "css-loader": "^3.2.0",
     "eslint": "^6.1.0",
     "eslint-config-reforis": "^1.0.0",
@@ -56,14 +56,12 @@
     "moment-timezone": "^0.5.25",
     "react": "16.9.0",
     "react-dom": "16.9.0",
-    "react-styleguidist": "^9.1.16",
+    "react-styleguidist": "^10.3.2",
     "snapshot-diff": "^0.5.1",
     "style-loader": "^1.0.0",
     "webpack": "^4.41.0"
   },
   "scripts": {
-    "build": "rm -rf dist; babel src --out-dir dist --source-maps inline --copy-files",
-    "build:watch": "babel src --verbose --watch --out-dir dist --source-maps inline --copy-files",
     "lint": "eslint src",
     "test": "jest",
     "test:watch": "jest --watch",

scripts/collect_files.sh

@@ -1,8 +1,9 @@
 #!/bin/sh
 
 # Collect files
-npm run build
-cp package.json dist
+mkdir -p dist
+cp -rf ./src/* dist
+cp package.json package-lock.json README.md dist
 cp -rf translations dist
 # Remove unwanted files
 rm -rf dist/**/__tests__

src/alertContext/AlertContext.js

@@ -8,8 +8,8 @@
 import React, { useState, useContext, useCallback } from "react";
 import PropTypes from "prop-types";
 
-import { Alert, ALERT_TYPES } from "bootstrap/Alert";
-import { Portal } from "utils/Portal";
+import { Alert, ALERT_TYPES } from "../bootstrap/Alert";
+import { Portal } from "../utils/Portal";
 
 AlertContextProvider.propTypes = {
     children: PropTypes.oneOfType([

src/api/hooks.js

@@ -9,7 +9,7 @@ import {
     useCallback, useEffect, useReducer, useState,
 } from "react";
 
-import { ForisURLs } from "forisUrls";
+import { ForisURLs } from "../forisUrls";
 import {
     API_ACTIONS, API_METHODS, API_STATE, getErrorPayload, HEADERS, TIMEOUT,
 } from "./utils";
@@ -17,13 +17,13 @@ import {
 const DATA_METHODS = ["POST", "PATCH", "PUT"];
 
 function createAPIHook(method) {
-    return (url, contentType) => {
+    return (urlRoot, contentType) => {
         const [state, dispatch] = useReducer(APIReducer, {
             state: API_STATE.INIT,
             data: null,
         });
 
-        const sendRequest = useCallback(async (data) => {
+        const sendRequest = useCallback(async ({ data, suffix } = {}) => {
             const headers = { ...HEADERS };
             if (contentType) {
                 headers["Content-Type"] = contentType;
@@ -31,17 +31,23 @@ function createAPIHook(method) {
 
             dispatch({ type: API_ACTIONS.INIT });
             try {
+                // Prepare request
                 const request = API_METHODS[method];
                 const config = {
                     timeout: TIMEOUT,
                     headers,
                 };
+                const url = suffix ? `${urlRoot}/${suffix}` : urlRoot;
+
+                // Make request
                 let result;
                 if (DATA_METHODS.includes(method)) {
                     result = await request(url, data, config);
                 } else {
                     result = await request(url, config);
                 }
+
+                // Process request result
                 dispatch({
                     type: API_ACTIONS.SUCCESS,
                     payload: result.data,
@@ -53,7 +59,7 @@ function createAPIHook(method) {
                     payload: getErrorPayload(error),
                 });
             }
-        }, [url, contentType]);
+        }, [urlRoot, contentType]);
         return [state, sendRequest];
     };
 }

src/bootstrap/Button.js

@@ -8,11 +8,6 @@
 import React from "react";
 import PropTypes from "prop-types";
 
-const OFFSET = 8;
-const SIZE = 3;
-const SIZE_CLASS = ` offset-lg-${OFFSET} col-lg-${SIZE}`;
-const SIZE_CLASS_SM = " col-sm-12";
-
 Button.propTypes = {
     /** Additional class name. */
     className: PropTypes.string,
@@ -32,14 +27,16 @@ Button.propTypes = {
 export function Button({
     className, loading, forisFormSize, children, ...props
 }) {
-    className = className ? `btn ${className}` : "btn btn-primary ";
-    if (forisFormSize) className += SIZE_CLASS + SIZE_CLASS_SM;
+    let buttonClass = className ? `btn ${className}` : "btn btn-primary ";
+    if (forisFormSize) {
+        buttonClass = `${buttonClass} col-sm-12 col-lg-3`;
+    }
 
     const span = loading
         ? <span className="spinner-border spinner-border-sm" role="status" aria-hidden="true" /> : null;
 
     return (
-        <button type="button" className={className} {...props}>
+        <button type="button" className={buttonClass} {...props}>
             {span}
             {" "}
             {span ? " " : null}

src/bootstrap/CheckBox.js

@@ -9,30 +9,25 @@ import React from "react";
 import PropTypes from "prop-types";
 import { useUID } from "react-uid";
 
-import { formFieldsSize } from "./constants";
-
 CheckBox.propTypes = {
     /** Label message */
     label: PropTypes.string.isRequired,
     /** Help text message */
     helpText: PropTypes.string,
-    /** Apply default size (full-width) */
-    useDefaultSize: PropTypes.bool,
     /** Control if checkbox is clickable */
     disabled: PropTypes.bool,
 };
 
 CheckBox.defaultProps = {
-    useDefaultSize: true,
     disabled: false,
 };
 
 export function CheckBox({
-    label, helpText, useDefaultSize, disabled, ...props
+    label, helpText, disabled, ...props
 }) {
     const uid = useUID();
     return (
-        <div className={`form-group ${useDefaultSize ? formFieldsSize : ""}`.trim()}>
+        <div className="form-group">
             <div className="custom-control custom-checkbox ">
                 <input
                     className="custom-control-input"

src/bootstrap/DataTimeInput.css

@@ -0,0 +1,4 @@
+/* Override defaults from "react-datetime" - display picker above input */
+.rdtPicker {
+    bottom: 0;
+}

src/bootstrap/DataTimeInput.js

@@ -10,6 +10,7 @@ import PropTypes from "prop-types";
 import Datetime from "react-datetime/DateTime";
 import moment from "moment/moment";
 import "react-datetime/css/react-datetime.css";
+import "./DataTimeInput.css";
 
 import { Input } from "./Input";
 

src/bootstrap/DownloadButton.js

@@ -10,12 +10,25 @@ import PropTypes from "prop-types";
 
 DownloadButton.propTypes = {
     href: PropTypes.string.isRequired,
+    className: PropTypes.string,
     children: PropTypes.oneOfType([
         PropTypes.arrayOf(PropTypes.node),
         PropTypes.node,
     ]),
 };
 
-export function DownloadButton({ href, children }) {
-    return <a href={href} className="btn btn-primary" download>{children}</a>;
+DownloadButton.defaultProps = {
+    className: "btn-primary",
+};
+
+export function DownloadButton({ href, className, children }) {
+    return (
+        <a
+            href={href}
+            className={`btn ${className}`.trim()}
+            download
+        >
+            {children}
+        </a>
+    );
 }

src/bootstrap/EmailInput.js

@@ -6,8 +6,8 @@
  */
 
 import React from "react";
-
 import PropTypes from "prop-types";
+
 import { Input } from "./Input";
 
 export const EmailInput = ({ ...props }) => <Input type="email" {...props} />;

src/bootstrap/Input.js

@@ -9,8 +9,6 @@ import React from "react";
 import { useUID } from "react-uid";
 import PropTypes from "prop-types";
 
-import { formFieldsSize } from "./constants";
-
 Input.propTypes = {
     type: PropTypes.string.isRequired,
     label: PropTypes.string.isRequired,
@@ -32,7 +30,7 @@ export function Input({
     const uid = useUID();
     const inputClassName = `form-control ${className || ""} ${(error ? "is-invalid" : "")}`.trim();
     return (
-        <div className={`form-group ${formFieldsSize}`}>
+        <div className="form-group">
             <label className={labelClassName} htmlFor={uid}>{label}</label>
             <div className={`input-group ${groupClassName || ""}`.trim()}>
                 <input

src/bootstrap/Modal.js

@@ -5,10 +5,11 @@
  * See /LICENSE for more information.
  */
 
-import React, { useEffect, useRef } from "react";
+import React, { useRef } from "react";
 import PropTypes from "prop-types";
 
-import { Portal } from "utils/Portal";
+import { Portal } from "../utils/Portal";
+import { useClickOutside } from "../utils/hooks";
 
 Modal.propTypes = {
     /** Is modal shown value */
@@ -26,16 +27,7 @@ Modal.propTypes = {
 export function Modal({ shown, setShown, children }) {
     const dialogRef = useRef();
 
-    useEffect(() => {
-        function handleClickOutsideDialog(e) {
-            if (!dialogRef.current.contains(e.target)) setShown(false);
-        }
-
-        document.addEventListener("mousedown", handleClickOutsideDialog);
-        return () => {
-            document.removeEventListener("mousedown", handleClickOutsideDialog);
-        };
-    }, [setShown]);
+    useClickOutside(dialogRef, () => setShown(false));
 
     return (
         <Portal containerId="modal-container">

src/bootstrap/NumberInput.js

@@ -8,7 +8,7 @@
 import React from "react";
 import PropTypes from "prop-types";
 
-import { useConditionalTimeout } from "utils/hooks";
+import { useConditionalTimeout } from "../utils/hooks";
 import { Input } from "./Input";
 import "./NumberInput.css";
 

src/bootstrap/RadioSet.js

@@ -9,8 +9,6 @@ import React from "react";
 import PropTypes from "prop-types";
 import { useUID } from "react-uid";
 
-import { formFieldsSize } from "./constants";
-
 RadioSet.propTypes = {
     /** Name attribute of the input HTML tag. */
     name: PropTypes.string.isRequired,
@@ -51,7 +49,7 @@ export function RadioSet({
     });
 
     return (
-        <div className={`form-group ${formFieldsSize}`}>
+        <div className="form-group">
             {label && <label htmlFor={uid} className="d-block">{label}</label>}
             {radios}
             {helpText && <small className="form-text text-muted">{helpText}</small>}
@@ -65,7 +63,7 @@ Radio.propTypes = {
     helpText: PropTypes.string,
 };
 
-function Radio({
+export function Radio({
     label, id, helpText, ...props
 }) {
     return (

src/bootstrap/Select.js

@@ -33,7 +33,7 @@ export function Select({
     );
 
     return (
-        <div className="form-group col-sm-12 offset-lg-1 col-lg-10">
+        <div className="form-group">
             <label htmlFor={uid}>{label}</label>
             <select
                 className="custom-select"

src/bootstrap/Spinner.js

@@ -46,6 +46,8 @@ export function Spinner({
 SpinnerElement.propTypes = {
     /** Spinner's size */
     small: PropTypes.bool,
+    /** Additional className */
+    className: PropTypes.string,
     /** Children components */
     children: PropTypes.oneOfType([
         PropTypes.arrayOf(PropTypes.node),
@@ -53,13 +55,16 @@ SpinnerElement.propTypes = {
     ]),
 };
 
-export function SpinnerElement({ small, children }) {
+export function SpinnerElement({ small, className, children }) {
     return (
         <>
-            <div className={`spinner-border ${small ? "spinner-border-sm" : ""}`} role="status">
+            <div
+                className={`spinner-border ${small ? "spinner-border-sm" : ""} ${className || ""}`.trim()}
+                role="status"
+            >
                 <span className="sr-only" />
             </div>
-            <div className="spinner-text">{children}</div>
+            {children && <div className="spinner-text">{children}</div>}
         </>
     );
 }

src/bootstrap/__tests__/__snapshots__/CheckBox.test.js.snap

@@ -2,7 +2,7 @@
 
 exports[`<Checkbox/> Render checkbox 1`] = `
 <div
-  class="form-group col-sm-12 offset-lg-1 col-lg-10"
+  class="form-group"
 >
   <div
     class="custom-control custom-checkbox "
@@ -30,7 +30,7 @@ exports[`<Checkbox/> Render checkbox 1`] = `
 
 exports[`<Checkbox/> Render uncheked checkbox 1`] = `
 <div
-  class="form-group col-sm-12 offset-lg-1 col-lg-10"
+  class="form-group"
 >
   <div
     class="custom-control custom-checkbox "

src/bootstrap/__tests__/__snapshots__/NumberInput.test.js.snap

@@ -2,7 +2,7 @@
 
 exports[`<NumberInput/> Render number input 1`] = `
 <div
-  class="form-group col-sm-12 offset-lg-1 col-lg-10"
+  class="form-group"
 >
   <label
     for="1"

src/bootstrap/__tests__/__snapshots__/PasswordInput.test.js.snap

@@ -2,7 +2,7 @@
 
 exports[`<PasswordInput/> Render password input 1`] = `
 <div
-  class="form-group col-sm-12 offset-lg-1 col-lg-10"
+  class="form-group"
 >
   <label
     for="1"

src/bootstrap/__tests__/__snapshots__/RadioSet.test.js.snap

@@ -2,7 +2,7 @@
 
 exports[`<RadioSet/> Render radio set 1`] = `
 <div
-  class="form-group col-sm-12 offset-lg-1 col-lg-10"
+  class="form-group"
 >
   <label
     class="d-block"

src/bootstrap/__tests__/__snapshots__/Select.test.js.snap

@@ -3,7 +3,7 @@
 exports[`<Select/> Test with snapshot. 1`] = `
 <div>
   <div
-    class="form-group col-sm-12 offset-lg-1 col-lg-10"
+    class="form-group"
   >
     <label
       for="1"

src/bootstrap/__tests__/__snapshots__/TextInput.test.js.snap

@@ -2,7 +2,7 @@
 
 exports[`<TextInput/> Render text input 1`] = `
 <div
-  class="form-group col-sm-12 offset-lg-1 col-lg-10"
+  class="form-group"
 >
   <label
     for="1"

src/bootstrap/constants.js

@@ -7,4 +7,4 @@
 
 /** Bootstrap column size for form fields */
 // eslint-disable-next-line import/prefer-default-export
-export const formFieldsSize = "col-sm-12 offset-lg-1 col-lg-10";
+export const formFieldsSize = "col-sm-12 offset-lg-1 col-lg-10 p-0 mb-3";

src/common/RebootButton.js

@@ -8,15 +8,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 "forisUrls";
+import { useAPIPost } from "../api/hooks";
+import { API_STATE } from "../api/utils";
+import { ForisURLs } from "../forisUrls";
 
-import { Button } from "bootstrap/Button";
+import { Button } from "../bootstrap/Button";
 import {
     Modal, ModalHeader, ModalBody, ModalFooter,
-} from "bootstrap/Modal";
-import { useAlert } from "alertContext/AlertContext";
+} from "../bootstrap/Modal";
+import { useAlert } from "../alertContext/AlertContext";
 
 RebootButton.propTypes = {
     forisFormSize: PropTypes.bool,

src/form/__tests__/__snapshots__/SubmitButton.test.js.snap

@@ -3,7 +3,7 @@
 exports[`<SubmitButton/> Render load 1`] = `
 <div>
   <button
-    class="btn btn-primary  offset-lg-8 col-lg-3 col-sm-12"
+    class="btn btn-primary  col-sm-12 col-lg-3"
     disabled=""
     type="submit"
   >
@@ -23,7 +23,7 @@ exports[`<SubmitButton/> Render load 1`] = `
 exports[`<SubmitButton/> Render ready 1`] = `
 <div>
   <button
-    class="btn btn-primary  offset-lg-8 col-lg-3 col-sm-12"
+    class="btn btn-primary  col-sm-12 col-lg-3"
     type="submit"
   >
      
@@ -36,7 +36,7 @@ exports[`<SubmitButton/> Render ready 1`] = `
 exports[`<SubmitButton/> Render saving 1`] = `
 <div>
   <button
-    class="btn btn-primary  offset-lg-8 col-lg-3 col-sm-12"
+    class="btn btn-primary  col-sm-12 col-lg-3"
     disabled=""
     type="submit"
   >

src/form/__tests__/hooks.test.js

@@ -10,6 +10,7 @@ import React from 'react';
 import { act, fireEvent, render, waitForElement } from 'customTestRender';
 import mockAxios from 'jest-mock-axios';
 import { ForisForm } from "../components/ForisForm";
+import { WebSockets } from "webSockets/WebSockets";
 
 
 // It's possible to unittest each hooks via react-hooks-testing-library.
@@ -30,7 +31,6 @@ describe('useForm hook.', () => {
     let mockValidator;
     let mockPrepData;
     let mockPrepDataToSubmit;
-    let mockWebSockets;
     let input;
     let form;
     const Child = jest.fn(props => <TestForm {...props}/>);
@@ -41,7 +41,7 @@ describe('useForm hook.', () => {
         mockValidator = jest.fn(data => data.field === 'invalidValue' ? {field: 'Error'} : {});
         const {getByTestId, container} = render(
             <ForisForm
-                ws={mockWebSockets}
+                ws={new WebSockets()}
                 // Just some module which exists...
                 forisConfig={{
                     endpoint: 'testEndpoint',
@@ -59,7 +59,7 @@ describe('useForm hook.', () => {
         input = await waitForElement(() =>
             getByTestId('test-input')
         );
-        form = container.firstChild
+        form = container.firstChild.firstChild;
     });
 
     it('Validation on changing.', () => {

src/form/components/ForisForm.js

@@ -7,27 +7,30 @@
 
 import React, { useEffect } from "react";
 import PropTypes from "prop-types";
-
-import { Spinner } from "bootstrap/Spinner";
-import { useAPIPost } from "api/hooks";
-
 import { Prompt } from "react-router";
-import { API_STATE } from "api/utils";
-import { ErrorMessage } from "utils/ErrorMessage";
-import { useAlert } from "alertContext/AlertContext";
-import { ALERT_TYPES } from "bootstrap/Alert";
+
+import { ALERT_TYPES } from "../../bootstrap/Alert";
+import { API_STATE } from "../../api/utils";
+import { ErrorMessage } from "../../utils/ErrorMessage";
+import { formFieldsSize } from "../../bootstrap/constants";
+import { Spinner } from "../../bootstrap/Spinner";
+import { useAlert } from "../../alertContext/AlertContext";
+import { useAPIPost } from "../../api/hooks";
+
 import { useForisModule, useForm } from "../hooks";
 import { STATES as SUBMIT_BUTTON_STATES, SubmitButton } from "./SubmitButton";
 
 ForisForm.propTypes = {
-    /** WebSocket object see `scr/common/WebSockets.js`. */
+    /** Optional WebSocket object. See `scr/common/WebSockets.js`.
+     * `forisConfig.wsModule` should be specified when it's passed.
+     *  */
     ws: PropTypes.object,
     /** Foris configuration object. See usage in main components. */
     forisConfig: PropTypes.shape({
         /** reForis Flask aplication API endpoint from `src/common/API.js`. */
         endpoint: PropTypes.string.isRequired,
         /** `foris-controller` module name to be used via WebSockets.
-         *  If it's not passed then WebSockets aren't used
+         *  It can be use only with `ws` prop.
          * */
         wsModule: PropTypes.string,
         /** `foris-controller` action name to be used via WebSockets.
@@ -49,6 +52,17 @@ ForisForm.propTypes = {
     children: PropTypes.node.isRequired,
     /** Optional override of form submit callback */
     onSubmitOverridden: PropTypes.func,
+
+    // eslint-disable-next-line react/no-unused-prop-types
+    customWSProp(props) {
+        const wsModuleIsSpecified = !!(props.forisConfig && props.forisConfig.wsModule);
+        if (props.ws && !wsModuleIsSpecified) {
+            return new Error("forisConfig.wsModule should be specified when ws object is passed.");
+        }
+        if (!props.ws && wsModuleIsSpecified) {
+            return new Error("forisConfig.wsModule is specified without passing ws object.");
+        }
+    },
 };
 
 ForisForm.defaultProps = {
@@ -103,7 +117,7 @@ export function ForisForm({
         resetFormData();
         const copiedFormData = JSON.parse(JSON.stringify(formState.data));
         const preparedData = prepDataToSubmit(copiedFormData);
-        post(preparedData);
+        post({ data: preparedData });
     }
 
     function getSubmitButtonState() {
@@ -141,15 +155,17 @@ export function ForisForm({
     }
 
     return (
-        <>
+        <div className={formFieldsSize}>
             <Prompt message={getMessageOnLeavingPage} />
             <form onSubmit={onSubmit}>
                 {childrenWithFormProps}
-                <SubmitButton
-                    state={getSubmitButtonState()}
-                    disabled={submitButtonIsDisabled}
-                />
+                <div className="text-right">
+                    <SubmitButton
+                        state={getSubmitButtonState()}
+                        disabled={submitButtonIsDisabled}
+                    />
+                </div>
             </form>
-        </>
+        </div>
     );
 }

src/form/components/SubmitButton.js

@@ -8,7 +8,7 @@
 import React from "react";
 import PropTypes from "prop-types";
 
-import { Button } from "bootstrap/Button";
+import { Button } from "../../bootstrap/Button";
 
 export const STATES = {
     READY: 1,

src/form/hooks.js

@@ -8,8 +8,8 @@
 import { useCallback, useEffect, useReducer } from "react";
 import update from "immutability-helper";
 
-import { useAPIGet } from "api/hooks";
-import { useWSForisModule } from "webSockets/hooks";
+import { useAPIGet } from "../api/hooks";
+import { useWSForisModule } from "../webSockets/hooks";
 
 const FORM_ACTIONS = {
     updateValue: 1,

src/index.js

@@ -13,58 +13,59 @@ export {
     useAPIPut,
     useAPIDelete,
     useAPIPolling,
-} from "api/hooks";
-export { API_STATE } from "api/utils";
+} from "./api/hooks";
+export { API_STATE } from "./api/utils";
 
 // Bootstrap
-export { Alert, ALERT_TYPES } from "bootstrap/Alert";
-export { Button } from "bootstrap/Button";
-export { CheckBox } from "bootstrap/CheckBox";
-export { DownloadButton } from "bootstrap/DownloadButton";
-export { DataTimeInput } from "bootstrap/DataTimeInput";
-export { EmailInput } from "bootstrap/EmailInput";
-export { FileInput } from "bootstrap/FileInput";
-export { Input } from "bootstrap/Input";
-export { NumberInput } from "bootstrap/NumberInput";
-export { PasswordInput } from "bootstrap/PasswordInput";
-export { RadioSet } from "bootstrap/RadioSet";
-export { Select } from "bootstrap/Select";
-export { TextInput } from "bootstrap/TextInput";
-export { formFieldsSize } from "bootstrap/constants";
+export { Alert, ALERT_TYPES } from "./bootstrap/Alert";
+export { Button } from "./bootstrap/Button";
+export { CheckBox } from "./bootstrap/CheckBox";
+export { DownloadButton } from "./bootstrap/DownloadButton";
+export { DataTimeInput } from "./bootstrap/DataTimeInput";
+export { EmailInput } from "./bootstrap/EmailInput";
+export { FileInput } from "./bootstrap/FileInput";
+export { Input } from "./bootstrap/Input";
+export { NumberInput } from "./bootstrap/NumberInput";
+export { PasswordInput } from "./bootstrap/PasswordInput";
+export { Radio, RadioSet } from "./bootstrap/RadioSet";
+export { Select } from "./bootstrap/Select";
+export { TextInput } from "./bootstrap/TextInput";
+export { formFieldsSize } from "./bootstrap/constants";
 
 export {
     Spinner,
     SpinnerElement,
-} from "bootstrap/Spinner";
+} from "./bootstrap/Spinner";
 export {
     Modal,
     ModalBody,
     ModalFooter,
     ModalHeader,
-} from "bootstrap/Modal";
+} from "./bootstrap/Modal";
 
 // Common
-export { RebootButton } from "common/RebootButton";
+export { RebootButton } from "./common/RebootButton";
 
 // Form
-export { ForisForm } from "form/components/ForisForm";
-export { SubmitButton, STATES as SUBMIT_BUTTON_STATES } from "form/components/SubmitButton";
-export { useForisModule, useForm } from "form/hooks";
+export { ForisForm } from "./form/components/ForisForm";
+export { SubmitButton, STATES as SUBMIT_BUTTON_STATES } from "./form/components/SubmitButton";
+export { useForisModule, useForm } from "./form/hooks";
 
 // WebSockets
-export { useWSForisModule } from "webSockets/hooks";
-export { WebSockets } from "webSockets/WebSockets";
+export { useWSForisModule } from "./webSockets/hooks";
+export { WebSockets } from "./webSockets/WebSockets";
 
 // Utils
-export { Portal } from "utils/Portal";
-export { undefinedIfEmpty, withoutUndefinedKeys, onlySpecifiedKeys } from "utils/objectHelpers";
+export { Portal } from "./utils/Portal";
+export { undefinedIfEmpty, withoutUndefinedKeys, onlySpecifiedKeys } from "./utils/objectHelpers";
 export {
     withEither, withSpinner, withSending, withSpinnerOnSending, withError, withErrorMessage,
-} from "utils/conditionalHOCs";
-export { ErrorMessage } from "utils/ErrorMessage";
+} from "./utils/conditionalHOCs";
+export { ErrorMessage } from "./utils/ErrorMessage";
+export { useClickOutside } from "./utils/hooks";
 
 // Foris URL
-export { ForisURLs, REFORIS_URL_PREFIX } from "forisUrls";
+export { ForisURLs, REFORIS_URL_PREFIX } from "./forisUrls";
 
 // Validation
 export {
@@ -75,7 +76,7 @@ export {
     validateDUID,
     validateMAC,
     validateMultipleEmails,
-} from "validations";
+} from "./validations";
 
 // Alert context
-export { AlertContextProvider, useAlert } from "alertContext/AlertContext";
+export { AlertContextProvider, useAlert } from "./alertContext/AlertContext";

src/utils/__tests__/__snapshots__/conditionalHOCs.test.js.snap

@@ -26,16 +26,13 @@ exports[`conditional HOCs withSpinner should render spinner 1`] = `
     class="spinner-wrapper my-3 text-center"
   >
     <div
-      class="spinner-border "
+      class="spinner-border"
       role="status"
     >
       <span
         class="sr-only"
       />
     </div>
-    <div
-      class="spinner-text"
-    />
   </div>
 </div>
 `;
@@ -46,16 +43,13 @@ exports[`conditional HOCs withSpinnerOnSending should render spinner 1`] = `
     class="spinner-wrapper my-3 text-center"
   >
     <div
-      class="spinner-border "
+      class="spinner-border"
       role="status"
     >
       <span
         class="sr-only"
       />
     </div>
-    <div
-      class="spinner-text"
-    />
   </div>
 </div>
 `;

src/utils/conditionalHOCs.js

@@ -7,8 +7,8 @@
 
 import React from "react";
 
-import { Spinner } from "bootstrap/Spinner";
-import { API_STATE } from "api/utils";
+import { Spinner } from "../bootstrap/Spinner";
+import { API_STATE } from "../api/utils";
 import { ErrorMessage } from "./ErrorMessage";
 
 function withEither(conditionalFn, Either) {

src/utils/hooks.js

@@ -18,3 +18,19 @@ export function useConditionalTimeout({ callback, timeout = 125 }, ...callbackAr
     }, [condition, callback, timeout, callbackArgs]);
     return setCondition;
 }
+
+/** Execute callback when user clicks outside specified element. */
+export function useClickOutside(element, callback) {
+    function handleClickOutside(event) {
+        if (element.current && !element.current.contains(event.target)) {
+            callback(event);
+        }
+    }
+
+    useEffect(() => {
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => {
+            document.removeEventListener("mousedown", handleClickOutside);
+        };
+    });
+}

src/webSockets/WebSockets.js

@@ -7,7 +7,7 @@
 
 /* eslint no-console: "off" */
 
-import { ForisURLs } from "forisUrls";
+import { ForisURLs } from "../forisUrls";
 
 const PROTOCOL = window.location.protocol === "http:" ? "ws" : "wss";
 
@@ -25,18 +25,18 @@ export class WebSockets {
                 console.error("WS: Error observed, you aren't logged probably.");
                 window.location.replace(ForisURLs.login);
             }
-            console.log(`WS: Error: ${e}`);
+            console.error(`WS: Error: ${e}`);
         };
         this.ws.onmessage = (e) => {
-            console.log(`WS: Received Message: ${e.data}`);
+            console.debug(`WS: Received Message: ${e.data}`);
             const data = JSON.parse(e.data);
             this.dispatch(data);
         };
         this.ws.onopen = () => {
-            console.log("WS: Connection open.");
+            console.debug("WS: Connection open.");
         };
         this.ws.onclose = () => {
-            console.log("WS: Connection closed.");
+            console.debug("WS: Connection closed.");
         };
 
         // callbacks[module][action]
@@ -61,9 +61,36 @@ export class WebSockets {
         return this;
     }
 
-    subscribe(params) {
+    subscribe(module) {
         this.waitForConnection(() => {
-            this.send("subscribe", params);
+            this.send("subscribe", module);
+        });
+        return this;
+    }
+
+    unbind(module, action, callback) {
+        const callbacks = this.callbacks[module][action];
+
+        const index = callbacks.indexOf(callback);
+        if (index !== -1) {
+            callbacks.splice(index, 1);
+        }
+
+        if (callbacks.length === 0) {
+            delete this.callbacks[module][action];
+        }
+
+        if (Object.keys(this.callbacks[module]).length === 0) {
+            this.unsubscribe(module);
+        }
+
+        return this;
+    }
+
+    unsubscribe(module) {
+        this.waitForConnection(() => {
+            this.send("unsubscribe", module);
+            delete this.callbacks[module];
         });
         return this;
     }
@@ -82,15 +109,15 @@ export class WebSockets {
         let chain;
         try {
             chain = this.callbacks[json.module][json.action];
-        } catch (e) {
-            if (e instanceof TypeError) {
-                console.log(`Callback for this message wasn't found:${e.data}`);
-            } else throw e;
+        } catch (error) {
+            if (error instanceof TypeError) {
+                console.warn(`Callback for this message wasn't found:${error.data}`);
+            } else throw error;
         }
 
         if (typeof chain === "undefined") return;
 
-        for (let i = 0; i < chain.length; i++) chain[i](json);
+        chain.forEach((callback) => callback(json));
     }
 
     close() {

src/webSockets/hooks.js

@@ -11,12 +11,21 @@ export function useWSForisModule(ws, module, action = "update_settings") {
     const [data, setData] = useState(null);
 
     useEffect(() => {
-        if (ws && module) {
-            ws.subscribe(module)
-                .bind(module, action, (msg) => {
-                    setData(msg.data);
-                });
+        // Sometimes we want to disable this hook if WS is not passed. We can't make conditional
+        // hooks, but we can disable it here. It's used especially in ForisForm when a module
+        // doesn't present any WS endpoint.
+        if (!ws) return;
+
+        function callback(msg) {
+            setData(msg.data);
         }
+
+        ws.subscribe(module)
+            .bind(module, action, callback);
+
+        return () => {
+            ws.unbind(module, action, callback);
+        };
     }, [action, module, ws]);
 
     return [data];