@firedesktop/react-base 1.50.0 → 1.52.0

package/src/lib/styles/toaster.css

@@ -0,0 +1,50 @@
+@font-face {
+    font-family: 'Toast_icons';
+    src: url(data:application/x-font-ttf;charset=utf-8;base64,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) format('truetype');
+    font-weight: normal;
+    font-style: normal;
+  }
+
+  #toast_types button {
+    margin: 5px;
+    min-width: 160px;
+    max-width: 160px;
+  }
+
+  #toast_types {
+    text-align: center;
+  }
+
+  .toast-icons {
+    font-family: 'Toast_icons' !important;
+    speak: none;
+    font-size: 55px;
+    font-style: normal;
+    font-weight: normal;
+    font-variant: normal;
+    text-transform: none;
+    line-height: 1;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  #toast_type .e-toast-icon.e-icons {
+    height: auto;
+    font-size: 30px;
+  }
+
+  .toast-icons.e-success::before {
+    content: "\e701";
+  }
+
+  .toast-icons.e-error::before {
+    content: "\e700";
+  }
+
+  .toast-icons.e-info::before {
+    content: "\e704";
+  }
+
+  .toast-icons.e-warning::before {
+    content: "\e703";
+  }

package/src/lib/utils/CurrencyUtiles.ts

@@ -0,0 +1,28 @@
+export default function CurrencyUtiles() {
+    /**
+     *  Intl
+     *      https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat
+     *
+     * @param value 
+     * @param locale 'en-US' or 'en' or 'US'...
+     * @param currency https://www.easymarkets.com/eu/learn-centre/discover-trading/currency-acronyms-and-abbreviations/, default EUR
+     * @returns 
+     */
+    const numberToCurrencyString = (value: string | number | undefined, locale: string = 'IT', currency = 'EUR'): String => {
+        try {
+            const valueNumber = Number(value);
+
+            if (value === undefined || value === null || isNaN(valueNumber))
+                return '';
+
+            return new Intl.NumberFormat(locale, { style: 'currency', currency }).format(valueNumber);
+        } catch (err) { }
+
+        return '';
+    };
+
+
+    return {
+        numberToCurrencyString
+    };
+}

package/src/lib/utils/DateUtils.ts

@@ -0,0 +1,135 @@
+export default function DateUtils() {
+
+    /**
+     *  Intl
+     *      https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat
+     *  format
+     *      https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/format
+     * @param inComingDate 
+     * @param locale 'en-US' or 'en' or 'US'...
+     * @returns 
+     */
+    const dateToString = (inComingDate: string | Date, locale: string = 'IT'): String => {
+        try {
+            if (inComingDate instanceof Date)
+                return new Intl.DateTimeFormat(locale, {
+
+                }).format(inComingDate);
+            else
+                return new Intl.DateTimeFormat(locale).format(new Date(inComingDate));
+        } catch (err) { }
+
+        return '';
+    };
+
+    const dateToString_Italian = (inComingDate: string | Date | undefined, separator: string,
+        time: 'HH:mm' | 'HH:mm:ss' | undefined): string => {
+        if (!inComingDate)
+            return '';
+
+        try {
+            let day = 0;
+            let month = 0;
+            let year = 0;
+            let hour = 0;
+            let minutes = 0;
+            let seconds = 0;
+
+            if (inComingDate instanceof Date) {
+                day = inComingDate.getDate();
+                month = inComingDate.getMonth();
+                year = inComingDate.getFullYear();
+
+                hour = inComingDate.getHours();
+                minutes = inComingDate.getMinutes();
+                seconds = inComingDate.getSeconds();
+            }
+            else {
+                const newD = new Date(inComingDate);
+                day = newD.getDate();
+                month = newD.getMonth();
+                year = newD.getFullYear();
+
+                hour = newD.getHours();
+                minutes = newD.getMinutes();
+                seconds = newD.getSeconds();
+            }
+
+            let value = `${('' + day).padStart(2, '0')}${separator}${('' + (month + 1)).padStart(2, '0')}${separator}${year}`;
+
+            if (time) {
+                value += ` ${('' + hour).padStart(2, '0')}:${('' + minutes).padStart(2, '0')}`;
+                if (time === 'HH:mm:ss')
+                    value += `:${('' + seconds).padStart(2, '0')}`;
+            }
+            return value;
+        } catch (err) { }
+
+        return '';
+    };
+
+    const isoStringToDate = (value: string | undefined): Date | undefined => {
+        if (!value)
+            return undefined;
+
+        try {
+            return new Date(value);
+        } catch (err) { }
+
+        return undefined;
+    };
+
+    const removeTime = (inComingDate?: string | Date): Date | undefined => {
+        if (!inComingDate)
+            return undefined;
+
+        try {
+            let date: Date;
+            if (inComingDate instanceof Date) {
+                date = inComingDate;
+            }
+            else {
+                date = new Date(inComingDate);
+            }
+
+            return new Date(
+                date.getFullYear(),
+                date.getMonth(),
+                date.getDate()
+            );
+        } catch (err) { }
+    };
+
+    /**
+     * inComingDate: must be in the following format '2022-07-07T14:00:00.000Z'
+     */
+    const zuluTimeUTC_to_yourTimeZone = (inComingDate: string): string => {
+        if (inComingDate && inComingDate[inComingDate.length - 1] === 'Z') {
+            try {
+                const date = new Date(inComingDate);
+                const day = date.getDate();
+                const month = date.getMonth();
+                const year = date.getFullYear();
+                const hour = date.getHours();
+                const minutes = date.getMinutes();
+                const seconds = date.getSeconds();
+                const separator = '-';
+
+                return `${year}${separator}${('' + (month + 1)).padStart(2, '0')}${separator}${('' + day).padStart(2, '0')}` +
+                    `T${('' + hour).padStart(2, '0')}:${('' + minutes).padStart(2, '0')}:${('' + seconds).padStart(2, '0')}`;
+            }
+            catch (err) { }
+        }
+
+        return inComingDate;
+    };
+
+
+    return {
+        dateToString,
+        dateToString_Italian,
+        isoStringToDate,
+        removeTime,
+        zuluTimeUTC_to_yourTimeZone
+    };
+}

package/src/lib/utils/FileUtil.ts

@@ -0,0 +1,27 @@
+function FileUtils() {
+    const b64toBlob = (b64Data, contentType = '', sliceSize = 512) => {
+        const byteCharacters = atob(b64Data);
+        const byteArrays = [];
+
+        for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
+            const slice = byteCharacters.slice(offset, offset + sliceSize);
+
+            const byteNumbers = new Array(slice.length);
+            for (let i = 0; i < slice.length; i++) {
+                byteNumbers[i] = slice.charCodeAt(i);
+            }
+
+            const byteArray = new Uint8Array(byteNumbers);
+            byteArrays.push(byteArray);
+        }
+
+        const blob = new Blob(byteArrays, { type: contentType });
+        return blob;
+    };
+
+    return {
+        b64toBlob
+    };
+}
+
+export default FileUtils;

package/src/lib/utils/configuration/ConfigurationLoader.tsx

@@ -0,0 +1,43 @@
+import React, { useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+
+import ConfigurationManager from './ConfigurationManager';
+
+export type configurationLoaderParamsType = {
+    updateAppState: (name: string, value: object) => any,
+    path?: string
+}
+
+function ConfigurationLoader({ updateAppState, path }: configurationLoaderParamsType) {
+    const dispatch = useDispatch();
+    const { configuration }: any = useSelector(state => state);
+    const { loadConfiguration } = ConfigurationManager();
+
+    let fullPath = '/configuration/config.json';
+    if (path)
+        fullPath = path;
+
+    useEffect(() => {
+        async function justAsync() {
+            if (!configuration || !configuration.loaded) {
+                console.log(`Loading Configuration for this Site in this path: ${fullPath}`);
+                await loadConfiguration(fullPath).then((response: any) => {
+                    console.log(`Loaded Configuration for this Site in this path: ${fullPath}`, response);
+                    dispatch(updateAppState('configuration', response));
+
+                }).catch((err: any) => {
+                    console.error(`Problem loading the Site Configuration in this path: ${fullPath}`);
+                });
+            }
+        }
+        justAsync();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    return (
+        <React.Fragment>
+        </React.Fragment>
+    );
+}
+
+export default ConfigurationLoader;

package/src/lib/utils/configuration/ConfigurationManager.ts

@@ -0,0 +1,29 @@
+function ConfigurationManager() {
+
+    async function loadConfiguration(fullPath: string) {
+        try {
+            const res = await fetch(fullPath, { headers: { 'Content-Type': 'application/json; charset=utf-8' } });
+            return await res.json();
+        }
+        catch (err) {
+            console.error('Problem loading the Site Labels');
+        }
+    };
+
+    async function loadConfigurationWithDispatch(dispatch: any, updateAppState: any, configuration: any) {
+        if (!configuration || !configuration.loaded) {
+            const fullPath = '/configuration/config.json';
+            console.log(`Loading Configuration for this Site from this path: ${fullPath}`);
+            loadConfiguration(fullPath).then((response: any) => {
+                console.log(`Loaded Configuration for this Site in this path: ${fullPath}`, response);
+                dispatch(updateAppState('configuration', response));
+            }).catch((err: any) => {
+                console.error(`Problem loading the Site Configuration in this path: ${fullPath}`);
+            });
+        }
+    }
+
+    return { loadConfiguration, loadConfigurationWithDispatch };
+}
+
+export default ConfigurationManager;

package/src/lib/utils/configuration/ConfigurationReturner.tsx

@@ -0,0 +1,39 @@
+import React, { useEffect } from 'react';
+
+import ConfigurationManager from './ConfigurationManager';
+
+export type Configuration_Type = {
+    loaded: boolean
+}
+export type configurationLoaderParamsType = {
+    configuration?: Configuration_Type
+    onConfigurationLoad: (condifiguration?: Configuration_Type) => void
+    path: string
+}
+
+export default function ConfigurationReturner({ configuration, onConfigurationLoad, path }: configurationLoaderParamsType) {
+    const { loadConfiguration } = ConfigurationManager();
+
+    const fullPath = `${path}/config.json`;
+
+    useEffect(() => {
+        async function justAsync() {
+            if (!configuration || !configuration.loaded) {
+                console.log(`Loading Configuration for this Path: ${path} in this fullpath: ${fullPath}`);
+                await loadConfiguration(fullPath).then((response: any) => {
+                    console.log(`Loaded Configuration for this Path: ${path} in this fullpath: ${fullPath}`, response);
+                    onConfigurationLoad(response);
+                }).catch((err: any) => {
+                    console.error(`Problem loading the Path: ${path} Configuration in this fullpath: ${fullPath}`);
+                });
+            }
+        }
+        justAsync();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    return (
+        <React.Fragment>
+        </React.Fragment>
+    );
+}

package/src/lib/utils/configuration/index.ts

@@ -0,0 +1,9 @@
+import ConfigurationManager from './ConfigurationManager';
+import ConfigurationLoader from './ConfigurationLoader';
+import ConfigurationReturner from './ConfigurationReturner';
+
+export {
+    ConfigurationLoader,
+    ConfigurationManager,
+    ConfigurationReturner
+};

package/src/lib/utils/fetch/Types.ts

@@ -0,0 +1,11 @@
+export interface ILabels {
+    errorBadRequest: string,
+    errorGeneric: string;
+    errorServerNotAvailable: string;
+    errorSessionExpired: string;
+}
+
+export type AdditionalParamsType = {
+    name: string,
+    value: string | number
+}

package/src/lib/utils/fetch/fetchWrapper.ts

@@ -0,0 +1,144 @@
+import * as Types from './Types';
+
+class Constants {
+    static labels = {
+        errorBadRequest: 'Request is not in a valid format',
+        errorGeneric: 'Sorry we have errors on the remote server',
+        errorServerNotAvailable: 'Server not available',
+        errorSessionExpired: 'Your session has expired, please login.',
+    } as Types.ILabels;
+}
+
+class FetchWrapper {
+    apiVersion?: string;
+    labels?: Types.ILabels;
+    status_401?: () => void;
+    status_403?: () => void;
+
+    constructor(apiVersion?: string, labels?: Types.ILabels, status_401?: () => void, status_403?: () => void) {
+        this.apiVersion = apiVersion;
+        this.status_401 = status_401;
+        this.status_403 = status_403;
+
+        if (labels && labels !== null && labels.errorGeneric && labels.errorServerNotAvailable && labels.errorSessionExpired)
+            this.labels = labels;
+        else
+            this.labels = Constants.labels;
+    }
+
+    get = (url: string, applicationName?: string, token?: string, onGenericServerError?: (status: number, error?: any) => void, params?: Blob | any, isFile = false, isBlobInReturn = false) => {
+        return this.generic('GET', url, applicationName, token, onGenericServerError, params, isFile, isBlobInReturn);
+    };
+
+    post = (url: string, applicationName?: string, token?: string, onGenericServerError?: (status: number, error?: any) => void, params?: Blob | any, isFile = false, isBlobInReturn = false,
+        additionalParams: Types.AdditionalParamsType[] = []) => {
+        return this.generic('POST', url, applicationName, token, onGenericServerError, params, isFile, isBlobInReturn, this.apiVersion, additionalParams);
+    };
+
+    put = (url: string, applicationName?: string, token?: string, onGenericServerError?: (status: number, error?: any) => void, params?: Blob | any, isFile = false, isBlobInReturn = false) => {
+        return this.generic('PUT', url, applicationName, token, onGenericServerError, params, isFile, isBlobInReturn);
+    };
+
+    delete = (url: string, applicationName?: string, token?: string, onGenericServerError?: (status: number, error?: any) => void, params?: Blob | any, isFile = false, isBlobInReturn = false) => {
+        return this.generic('DELETE', url, applicationName, token, onGenericServerError, params, isFile, isBlobInReturn);
+    };
+
+    generic = (method: string, url: string, applicationName?: string, token?: string, onGenericServerError?: (status: number, error?: any) => void, params?: Blob | any, isFile = false,
+        isBlobInReturn = false, version = this.apiVersion, additionalParams: Types.AdditionalParamsType[] = []) => {
+        // Headers & Body
+        let body: BodyInit;
+        const headers = new Headers();
+        headers.append('pragma', 'no-cache');
+        if (version)
+            headers.append('api-version', version);
+        if (applicationName)
+            headers.append('ApplicationName', applicationName);
+        if (token)
+            headers.append('SessionToken', token);
+        // This should be the right way, but here we use SessionToken
+        // headers.append('Authorization', 'Bearer ' + token);
+
+        if (params) {
+            if (isFile) {
+                var formData = new FormData();
+                formData.append('file', params);
+                body = formData;
+                if (additionalParams) {
+                    for (let index = 0; index < additionalParams.length; index++) {
+                        const element = additionalParams[index];
+                        formData.append(element.name, '' + element.value);
+                    }
+                }
+            } else {
+                headers.append('Content-Type', 'application/json');
+                body = JSON.stringify(params);
+            }
+        }
+
+        const requestInit = {
+            body,
+            method: method,
+            mode: 'cors',
+            cache: 'no-cache',
+            credentials: 'omit',
+            headers
+        } as RequestInit;
+
+        const labels = this.labels;
+        const status_401 = this.status_401;
+        const status_403 = this.status_403;
+
+        return fetch(encodeURI(url), requestInit)
+            .then(response => {
+                // Others Status Code
+                if (response.status < 200 || response.status >= 300)
+                    throw response;
+
+                return isBlobInReturn ? response.blob() : response.json();
+            })
+            .then(json => {
+                return json;
+            })
+            .catch(error => {
+                console.error(`Error on fetch url: ${url}`);
+
+                if (!error || error.message === 'Failed to fetch')
+                    throw new Error(labels.errorServerNotAvailable);
+
+                // This is an error coming from BE
+                if (error.status === 401 && status_401) {
+                    status_401();
+                } else if (error.status === 403 && status_401) {
+                    status_403();
+                } else if (error.status === 400 && onGenericServerError) {
+                    onGenericServerError(error.status, error);
+                }
+
+                if (!error.text) {
+                    if (error.status === 400) {
+                        throw new Error(labels.errorBadRequest);
+                    } else if (error.status === 401 || error.status === 403) {
+                        throw new Error(labels.errorSessionExpired);
+                    }
+                }
+                else
+                    return error.text();
+
+                if (error.message && error.message !== '')
+                    throw error.message;
+
+                throw new Error(labels.errorGeneric);
+            })
+            .then(finalMessage => {
+                if (typeof (finalMessage) === 'object')
+                    return finalMessage;
+
+                if (finalMessage)
+                    throw new Error(finalMessage);
+
+                throw new Error(labels.errorGeneric);
+            });
+    };
+}
+
+export default FetchWrapper;

package/src/lib/utils/fetch/index.ts

@@ -0,0 +1,4 @@
+import FetchWrapper from './fetchWrapper';
+import * as Types from './Types';
+
+export { FetchWrapper, Types };

package/src/lib/utils/index.ts

@@ -0,0 +1,8 @@
+import * as Fetch from './fetch';
+import * as Configuration from './configuration';
+import CurrencyUtiles from './CurrencyUtiles';
+import DateUtils from './DateUtils';
+import FileUtils from './FileUtil';
+import * as Labels from './labels';
+
+export { Configuration, CurrencyUtiles, DateUtils, Fetch, FileUtils, Labels };

package/src/lib/utils/labels/LanguageLoader.tsx

@@ -0,0 +1,67 @@
+import _ from 'lodash';
+import React, { useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+
+import LanguageManager from './LanguageManager';
+
+export type languageLoaderParamsType = {
+    updateAppState: (name: string, value: object) => any,
+    language: string,
+    path?: string,
+}
+
+function LanguageLoader({ updateAppState, language, path }: languageLoaderParamsType) {
+    const dispatch = useDispatch();
+    const { labels }: any = useSelector(state => state);
+    const { loadLabels } = LanguageManager();
+
+    const fileName = `${language}.json`;
+
+    const baseLanguageFullPath = `./labels/${fileName}`;
+
+    let fullPath = `./labels/${fileName}`;
+    if (path)
+        fullPath = `./${path}/${fileName}`;
+
+    // Do it on change language
+    useEffect(() => {
+        async function justAsync() {
+            if (!labels || !labels.language || labels.language !== language) {
+
+                console.log(`Loading Base Language Labels for this Site in this path: ${baseLanguageFullPath}`);
+                let allLabels: any = {};
+                try {
+                    allLabels = await loadLabels(baseLanguageFullPath);
+                    console.log(`Loaded Base Language Labels for this Site in this path: ${baseLanguageFullPath}`, allLabels);
+                }
+                catch (err) {
+                    console.error(`Problem loading Base Site Language Labels in this path: ${baseLanguageFullPath}`);
+                }
+
+                console.log(`Loading Custom Language Labels for this Site in this path: ${fullPath}`);
+                loadLabels(fullPath).then((response: any) => {
+                    if (response) {
+                        console.log(`Loaded Custom Language Labels for this Site in this path: ${fullPath}`, response);
+                        const merged = _.merge(allLabels, response);
+                        dispatch(updateAppState('labels', merged));
+                    }
+                    else {
+                        console.warn(`Custom Site Language Labels NOT FOUND in this path: ${fullPath}`);
+                        dispatch(updateAppState('labels', allLabels));
+                    }
+                }).catch((err: any) => {
+                    console.warn(`Custom Site Language Labels NOT FOUND in this path: ${fullPath}`);
+                });
+            }
+        }
+        justAsync();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [language]);
+
+    return (
+        <React.Fragment>
+        </React.Fragment>
+    );
+}
+
+export default LanguageLoader;

package/src/lib/utils/labels/LanguageManager.ts

@@ -0,0 +1,53 @@
+function LanguageManager() {
+
+    async function loadLabels(fullPath: string) {
+        try {
+            const res = await fetch(fullPath, { headers: { 'Content-Type': 'application/json; charset=utf-8' } });
+            return await res.json();
+        }
+        catch (err) {
+            console.warn(`Problem loading the Site Labels, Path ${fullPath}`);
+        }
+    };
+
+    async function loadLabelsWithDispatch(dispatch: any, updateAppState: any, labels: any, language: string) {
+        if (!labels || !labels.language || labels.language !== language) {
+            const fullPath = `./labels/${language}.json`;
+            console.log(`Loading Labels for this Language ${language}, from this path: ${fullPath}`);
+            loadLabels(fullPath).then((response: any) => {
+                console.log(`Loaded Labels for this Language ${language}`, response);
+                dispatch(updateAppState('labels', response));
+            }).catch((err: any) => {
+                console.warn(`Problem loading the Site Labels, language: ${language}, fullPath: ${fullPath}`);
+            });
+        }
+    }
+
+    function getLabel(labels: any, id: string, defaultValue?: string) {
+        if (labels === null || labels === undefined)
+            return defaultValue || '';
+
+        try {
+            const splits = id.split('.');
+            let message = labels;
+            for (let index = 0; index < splits.length; index++) {
+                const element = splits[index];
+                message = message[element];
+            }
+            if (message !== null && message !== undefined)
+                return message;
+
+            return defaultValue ? defaultValue : id;
+        } catch (ex) {
+            return defaultValue ? defaultValue : id;
+        }
+    }
+
+    return {
+        getLabel,
+        loadLabels,
+        loadLabelsWithDispatch
+    };
+}
+
+export default LanguageManager;