@firedesktop/react-base 1.15.9 → 1.16.1

package/src/lib/components/AppIcon.tsx

@@ -1,49 +1,49 @@
-import React, { Fragment } from "react";
+import React, { Fragment } from 'react';
 
 type PropType = {
   name:
-  | "add"
-  | "edit"
-  | "delete"
-  | "list"
-  | "link"
-  | "unlink"
-  | "shrink"
-  | "arrow-first"
-  | "arrow-prev"
-  | "arrow-next"
-  | "arrow-last"
-  | "user"
-  | "password"
-  | "tickTrue"
-  | "document"
-  | "company"
-  | "tickFalse"
-  | "plantMonitor"
-  | "plantMissing"
-  | "circle"
-  | "tickStep"
-  | "unPin"
-  | "Pin"
-  | "contact"
-  | "userManagement"
-  | "configurations"
-  | "documentTemplate"
-  | "eye"
-  | "share"
-  | "download"
-  | "search"
-  | "logo-main"
-  | "backicon"
-  | "expand"
-  | "upload"
-  | "table"
-  | "pin-tilted"
-  | "home"
-  | "registry"
-  | "material"
-  | "supply"
-  | "delivery";
+  | 'add'
+  | 'edit'
+  | 'delete'
+  | 'list'
+  | 'link'
+  | 'unlink'
+  | 'shrink'
+  | 'arrow-first'
+  | 'arrow-prev'
+  | 'arrow-next'
+  | 'arrow-last'
+  | 'user'
+  | 'password'
+  | 'tickTrue'
+  | 'document'
+  | 'company'
+  | 'tickFalse'
+  | 'plantMonitor'
+  | 'plantMissing'
+  | 'circle'
+  | 'tickStep'
+  | 'unPin'
+  | 'Pin'
+  | 'contact'
+  | 'userManagement'
+  | 'configurations'
+  | 'documentTemplate'
+  | 'eye'
+  | 'share'
+  | 'download'
+  | 'search'
+  | 'logo-main'
+  | 'backicon'
+  | 'expand'
+  | 'upload'
+  | 'table'
+  | 'pin-tilted'
+  | 'home'
+  | 'registry'
+  | 'material'
+  | 'supply'
+  | 'delivery';
   className: string;
   iconClassName: string;
 };
@@ -51,7 +51,7 @@ type PropType = {
 function AppIcon({ name, className, iconClassName }: PropType) {
   return (
     <Fragment>
-      {name === "expand" ?
+      {name === 'expand' ?
         <svg
         width="19"
         height="12"
@@ -66,7 +66,7 @@ function AppIcon({ name, className, iconClassName }: PropType) {
         />
       </svg> : ''}
 
-      {name === "backicon" ?
+      {name === 'backicon' ?
         <svg
           width="15"
           height="26"
@@ -81,7 +81,7 @@ function AppIcon({ name, className, iconClassName }: PropType) {
           />
         </svg> : ''}
 
-      {name === "table" ?
+      {name === 'table' ?
         <svg
           width="18"
           height="19"
@@ -95,7 +95,7 @@ function AppIcon({ name, className, iconClassName }: PropType) {
           />
         </svg> : ''}
 
-      {name === "logo-main" ?
+      {name === 'logo-main' ?
         <svg
           width="93"
           height="96"
@@ -130,7 +130,7 @@ function AppIcon({ name, className, iconClassName }: PropType) {
           </defs>
         </svg> : ''}
 
-      {name === "pin-tilted" ?
+      {name === 'pin-tilted' ?
         <svg
           width="17"
           height="17"
@@ -145,7 +145,7 @@ function AppIcon({ name, className, iconClassName }: PropType) {
           />
         </svg> : ''}
 
-      {name === "search" ?
+      {name === 'search' ?
         <svg
           width="26"
           height="26"
@@ -161,7 +161,7 @@ function AppIcon({ name, className, iconClassName }: PropType) {
         </svg> : ''}
 
       {/* List Actions */}
-      {name === "download" ?
+      {name === 'download' ?
         <svg
           width="19"
           height="19"
@@ -176,7 +176,7 @@ function AppIcon({ name, className, iconClassName }: PropType) {
           />
         </svg> : ''}
 
-      {name === "share" ?
+      {name === 'share' ?
         <svg
           width="23"
           height="20"
@@ -192,7 +192,7 @@ function AppIcon({ name, className, iconClassName }: PropType) {
           />
         </svg> : ''}
 
-      {name === "eye" ?
+      {name === 'eye' ?
         <svg
           width="32"
           height="32"
@@ -212,7 +212,7 @@ function AppIcon({ name, className, iconClassName }: PropType) {
         </svg> : ''}
 
       {/* Actions */}
-      {name === "add" ?
+      {name === 'add' ?
         <svg
           width="21"
           height="20"
@@ -227,7 +227,7 @@ function AppIcon({ name, className, iconClassName }: PropType) {
           />
         </svg> : ''}
 
-      {name === "upload" ?
+      {name === 'upload' ?
         <svg
           width="22"
           height="22"
@@ -243,7 +243,7 @@ function AppIcon({ name, className, iconClassName }: PropType) {
           />
         </svg> : ''}
 
-      {name === "edit" ?
+      {name === 'edit' ?
         <svg
           width="26"
           height="20"
@@ -258,7 +258,7 @@ function AppIcon({ name, className, iconClassName }: PropType) {
           />
         </svg> : ''}
 
-      {name === "delete" ?
+      {name === 'delete' ?
         <svg
           width="16"
           height="21"
@@ -273,7 +273,7 @@ function AppIcon({ name, className, iconClassName }: PropType) {
           />
         </svg>: ''}
 
-      {name === "list" ?
+      {name === 'list' ?
         <svg
           width="20"
           height="17"
@@ -295,7 +295,7 @@ function AppIcon({ name, className, iconClassName }: PropType) {
           </defs>
         </svg>: ''}
 
-      {name === "link" ?
+      {name === 'link' ?
         <svg
           width="20"
           height="20"
@@ -314,7 +314,7 @@ function AppIcon({ name, className, iconClassName }: PropType) {
           />
         </svg> : ''}
 
-      {name === "unlink" ?
+      {name === 'unlink' ?
         <svg
           width="20"
           height="20"
@@ -349,7 +349,7 @@ function AppIcon({ name, className, iconClassName }: PropType) {
           />
         </svg> : ''}
 
-      {name === "shrink" ?
+      {name === 'shrink' ?
         <svg
           width="19"
           height="11"
@@ -365,7 +365,7 @@ function AppIcon({ name, className, iconClassName }: PropType) {
         </svg> : ''}
 
       {/* Pagination */}
-      {name === "arrow-first" ?
+      {name === 'arrow-first' ?
         <svg
           width="9"
           height="9"
@@ -380,7 +380,7 @@ function AppIcon({ name, className, iconClassName }: PropType) {
           />
         </svg> : ''}
 
-      {name === "arrow-prev" ?
+      {name === 'arrow-prev' ?
         <svg
           width="6"
           height="9"
@@ -395,7 +395,7 @@ function AppIcon({ name, className, iconClassName }: PropType) {
           />
         </svg> : ''}
 
-      {name === "arrow-next" ?
+      {name === 'arrow-next' ?
         <svg
           width="5"
           height="8"
@@ -410,7 +410,7 @@ function AppIcon({ name, className, iconClassName }: PropType) {
           />
         </svg> : ''}
 
-      {name === "arrow-last" ?
+      {name === 'arrow-last' ?
         <svg
           width="9"
           height="8"
@@ -426,7 +426,7 @@ function AppIcon({ name, className, iconClassName }: PropType) {
         </svg> : ''}
 
       {/* Form */}
-      {name === "user" ?
+      {name === 'user' ?
         <svg
           width="28"
           height="28"
@@ -441,7 +441,7 @@ function AppIcon({ name, className, iconClassName }: PropType) {
           />
         </svg> : ''}
 
-      {name === "password" ?
+      {name === 'password' ?
         <svg
           width="20"
           height="23"
@@ -457,7 +457,7 @@ function AppIcon({ name, className, iconClassName }: PropType) {
         </svg> : ''}
 
       {/* Dashboard */}
-      {name === "tickTrue" ?
+      {name === 'tickTrue' ?
         <svg
           width="37"
           height="33"
@@ -472,7 +472,7 @@ function AppIcon({ name, className, iconClassName }: PropType) {
           />
         </svg> : ''}
 
-      {name === "tickFalse" ?
+      {name === 'tickFalse' ?
         <svg
           width="40"
           height="40"
@@ -500,7 +500,7 @@ function AppIcon({ name, className, iconClassName }: PropType) {
           />
         </svg> : ''}
 
-      {name === "circle" ?
+      {name === 'circle' ?
         <svg
           width="31"
           height="31"
@@ -512,7 +512,7 @@ function AppIcon({ name, className, iconClassName }: PropType) {
           <circle cx="15.5" cy="15.5" r="15.5" className={className} />
         </svg> : ''}
 
-      {name === "tickStep" ?
+      {name === 'tickStep' ?
         <svg
           width="25"
           height="23"
@@ -528,7 +528,7 @@ function AppIcon({ name, className, iconClassName }: PropType) {
         </svg> : ''}
 
       {/* Sidebar */}
-      {name === "document" ?
+      {name === 'document' ?
         <svg
           className={iconClassName}
           width="21"
@@ -545,7 +545,7 @@ function AppIcon({ name, className, iconClassName }: PropType) {
           />
         </svg> : ''}
 
-      {name === "company" ?
+      {name === 'company' ?
         <svg
           width="32"
           height="30"
@@ -555,7 +555,7 @@ function AppIcon({ name, className, iconClassName }: PropType) {
         >
           <path
             d="M29.2567 29.0409H17.1983C16.2082 29.0409 15.4072 28.2289 15.4072 27.2251V14.156C15.4072 13.1522 16.2082 12.3401 17.1983 12.3401H29.2567C30.2468 12.3401 31.0477 13.1522 31.0477 14.156V27.2251C31.0541 28.2225 30.2468 29.0409 29.2567 29.0409Z"
-            stroke={className === "primary-svg" ? "#0057FF" : "#B1AEAE"}
+            stroke={className === 'primary-svg' ? '#0057FF' : '#B1AEAE'}
             strokeWidth="3"
             strokeMiterlimit="10"
           />
@@ -581,7 +581,7 @@ function AppIcon({ name, className, iconClassName }: PropType) {
           />
         </svg> : ''}
 
-      {name === "plantMonitor" ?
+      {name === 'plantMonitor' ?
         <svg
           className={iconClassName}
           width="29"
@@ -597,7 +597,7 @@ function AppIcon({ name, className, iconClassName }: PropType) {
           />
         </svg> : ''}
 
-      {name === "plantMissing" ?
+      {name === 'plantMissing' ?
         <svg
           className={iconClassName}
           width="34"
@@ -618,7 +618,7 @@ function AppIcon({ name, className, iconClassName }: PropType) {
           />
         </svg> : ''}
 
-      {name === "contact" ?
+      {name === 'contact' ?
         <svg
           className={`align-self-center mr-3 ${iconClassName}`}
           width="28"
@@ -641,7 +641,7 @@ function AppIcon({ name, className, iconClassName }: PropType) {
           />
         </svg> : ''}
 
-      {name === "userManagement" ?
+      {name === 'userManagement' ?
         <svg
           width="30"
           height="31"
@@ -662,7 +662,7 @@ function AppIcon({ name, className, iconClassName }: PropType) {
           />
         </svg> : ''}
 
-      {name === "configurations" ?
+      {name === 'configurations' ?
         <svg
           width="26"
           height="28"
@@ -679,7 +679,7 @@ function AppIcon({ name, className, iconClassName }: PropType) {
           />
         </svg> : ''}
 
-      {name === "documentTemplate" ?
+      {name === 'documentTemplate' ?
         <svg
           width="24"
           height="28"
@@ -695,7 +695,7 @@ function AppIcon({ name, className, iconClassName }: PropType) {
         </svg> : ''}
 
       {/* Other */}
-      {name === "unPin" ?
+      {name === 'unPin' ?
         <svg
           width="17"
           height="17"
@@ -710,7 +710,7 @@ function AppIcon({ name, className, iconClassName }: PropType) {
           />
         </svg> : ''}
 
-      {name === "Pin" ?
+      {name === 'Pin' ?
         <svg
           width="23"
           height="23"
@@ -725,29 +725,29 @@ function AppIcon({ name, className, iconClassName }: PropType) {
           />
         </svg> : ''}
 
-      {name === "home" ?
+      {name === 'home' ?
         <svg width="30" height="28" viewBox="0 0 30 28" fill="none" xmlns="http://www.w3.org/2000/svg">
           <path className={className} d="M29.0318 13.7752L16.3962 1.14624L15.5493 0.299293C15.3563 0.107591 15.0953 0 14.8233 0C14.5513 0 14.2904 0.107591 14.0974 0.299293L0.614907 13.7752C0.41717 13.9722 0.260895 14.2068 0.155307 14.4651C0.0497187 14.7235 -0.00304321 15.0004 0.000135543 15.2795C0.0132158 16.4305 0.971344 17.3494 2.12241 17.3494H3.51218V28H26.1345V17.3494H27.5537C28.1129 17.3494 28.6393 17.1303 29.035 16.7346C29.2299 16.5404 29.3842 16.3095 29.4892 16.0552C29.5942 15.801 29.6476 15.5284 29.6465 15.2533C29.6465 14.6974 29.4274 14.1709 29.0318 13.7752ZM16.6546 25.6456H12.9921V18.9746H16.6546V25.6456ZM23.78 14.995V25.6456H18.7474V18.1898C18.7474 17.4671 18.1621 16.8818 17.4394 16.8818H12.2073C11.4846 16.8818 10.8993 17.4671 10.8993 18.1898V25.6456H5.86663V14.995H2.72737L14.8266 2.90553L15.582 3.66092L26.9226 14.995H23.78Z" fill="#B0AEAE" />
         </svg> : ''}
 
-      {name === "registry" ?
+      {name === 'registry' ?
         <svg
           className={iconClassName}
           width="26" height="30" viewBox="0 0 26 30" fill="none" xmlns="http://www.w3.org/2000/svg">
           <path className={className} d="M22.0547 0.75H4.60938C4.16964 0.75 3.77863 0.850347 3.44845 1.06336C3.13194 1.26756 2.89559 1.5259 2.75429 1.8411C2.6204 2.13979 2.55469 2.46204 2.55469 2.80469V6.02734H1.84766C1.54151 6.02734 1.27552 6.14254 1.06461 6.36517C0.856876 6.58444 0.75 6.85093 0.75 7.15234C0.75 7.34178 0.797803 7.52322 0.888787 7.69382C0.985045 7.8743 1.1257 8.01496 1.30618 8.11121C1.47678 8.2022 1.65822 8.25 1.84766 8.25H2.55469V11.2773H1.92969C1.74026 11.2773 1.55881 11.3251 1.38821 11.4161C1.20773 11.5124 1.06708 11.653 0.970818 11.8335C0.879834 12.0041 0.832031 12.1856 0.832031 12.375C0.832031 12.6767 0.93929 12.9413 1.15135 13.1533C1.36341 13.3654 1.62799 13.4727 1.92969 13.4727H2.55469V16.5273H1.90234C1.75703 16.5273 1.61696 16.5579 1.48444 16.6181C1.36146 16.674 1.24918 16.747 1.14836 16.8366C1.03603 16.9364 0.951142 17.0594 0.892278 17.2007C0.835077 17.338 0.804688 17.48 0.804688 17.625C0.804688 17.9307 0.919369 18.1987 1.13768 18.417C1.35161 18.6309 1.6091 18.75 1.90234 18.75H2.55469V21.75H1.90234C1.80836 21.75 1.71509 21.7618 1.62296 21.7848C1.52835 21.8085 1.4386 21.8442 1.35448 21.8923C1.2704 21.9404 1.19358 21.9997 1.124 22.0693C1.05443 22.1389 0.995049 22.2157 0.947001 22.2998C0.898932 22.3839 0.863147 22.4737 0.839496 22.5683C0.816462 22.6604 0.804688 22.7537 0.804688 22.8477C0.804688 23.1534 0.919369 23.4214 1.13768 23.6397C1.35161 23.8536 1.6091 23.9727 1.90234 23.9727H2.55469V27.25C2.55469 27.9347 2.75706 28.4796 3.22087 28.8076C3.63471 29.1003 4.09034 29.25 4.58203 29.25H22.0547C22.8494 29.25 23.533 28.969 24.0908 28.4112C24.6487 27.8533 24.9297 27.1697 24.9297 26.375V3.625C24.9297 2.83029 24.6487 2.14668 24.0908 1.58885C23.533 1.03102 22.8494 0.75 22.0547 0.75ZM4.80469 27V23.9727H5.45703C5.76275 23.9727 6.03073 23.858 6.24904 23.6397C6.46735 23.4214 6.58203 23.1534 6.58203 22.8477C6.58203 22.7026 6.55164 22.5607 6.49444 22.4234C6.43558 22.2821 6.35069 22.1591 6.23836 22.0592C6.13754 21.9696 6.02526 21.8967 5.90228 21.8408C5.76477 21.7783 5.6147 21.75 5.45703 21.75H4.80469V18.75H5.45703C5.66496 18.75 5.8585 18.6973 6.02972 18.5872C6.18745 18.4858 6.31788 18.3554 6.41928 18.1977C6.52935 18.0265 6.58203 17.8329 6.58203 17.625C6.58203 17.3189 6.46684 17.0529 6.2442 16.8419C6.02493 16.6342 5.75845 16.5273 5.45703 16.5273H4.80469V13.4727H5.48438C5.68677 13.4727 5.87628 13.4273 6.04591 13.3303C6.21227 13.2353 6.34465 13.1029 6.43972 12.9365C6.53665 12.7669 6.58203 12.5774 6.58203 12.375C6.58203 12.2373 6.55901 12.1013 6.51451 11.9678C6.46494 11.8191 6.38213 11.6901 6.2657 11.5866C6.16488 11.497 6.05261 11.424 5.92962 11.3681C5.79211 11.3056 5.64204 11.2773 5.48438 11.2773H4.80469V8.25H5.40234C5.70404 8.25 5.96862 8.14274 6.18068 7.93068C6.39274 7.71862 6.5 7.45404 6.5 7.15234C6.5 6.85093 6.39312 6.58444 6.18539 6.36517C5.97447 6.14254 5.70849 6.02734 5.40234 6.02734H4.80469V3H18.3047V27H4.80469ZM22.6797 26.375C22.6797 26.5432 22.6212 26.6854 22.4931 26.8135C22.3651 26.9415 22.2229 27 22.0547 27H20.5547V3H22.0547C22.2229 3 22.3651 3.0585 22.4931 3.18654C22.6212 3.31459 22.6797 3.45676 22.6797 3.625V26.375Z" fill="#B0AEAE" />
         </svg> : ''}
 
-      {name === "material" ?
+      {name === 'material' ?
         <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
           <path className={className} fillRule="evenodd" clipRule="evenodd" d="M15.8385 11.5611L26.4319 22.1544C26.8985 22.6211 26.8985 23.3561 26.4319 23.7994L23.7485 26.4827C23.2935 26.9377 22.5585 26.9377 22.1035 26.4827L11.4752 15.8544C8.76854 16.8694 5.60688 16.2977 3.43688 14.1277C0.753544 11.4561 0.508544 7.26773 2.67854 4.3044L7.14688 8.77273L8.80354 7.12773L4.32354 2.63606C7.29854 0.466063 11.4752 0.711063 14.1585 3.3944C16.3635 5.61106 16.9235 8.83106 15.8385 11.5611ZM11.8952 12.9844L22.9319 24.0211L23.9586 22.9827L12.9336 11.9577C13.4702 11.2694 13.8202 10.4994 13.9602 9.67106C14.2519 8.04939 13.7736 6.31106 12.5136 5.05106C11.4052 3.95439 9.94689 3.44106 8.50022 3.52272L12.1052 7.12772L7.15855 12.0744L3.55355 8.46939C3.47189 9.91606 3.98522 11.3861 5.09355 12.4827C6.30689 13.6961 7.97522 14.1744 9.56189 13.9411C10.3902 13.8244 11.1836 13.5094 11.8952 12.9844Z" fill="#B0AEAE" />
         </svg> : ''}
 
-      {name === "supply" ?
+      {name === 'supply' ?
         <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
           <path fillRule="evenodd" clipRule="evenodd" d="M17.21 9.48977H22C22.55 9.48977 23 9.93977 23 10.4898L22.97 10.7598L20.43 20.0298C20.19 20.8698 19.42 21.4898 18.5 21.4898H5.5C4.58 21.4898 3.81 20.8698 3.58 20.0298L1.04 10.7598C1.01 10.6698 1 10.5798 1 10.4898C1 9.93977 1.45 9.48977 2 9.48977H6.79L11.17 2.93977C11.36 2.64977 11.68 2.50977 12 2.50977C12.32 2.50977 12.64 2.64977 12.83 2.92977L17.21 9.48977ZM14.8 9.48977L12 5.28977L9.2 9.48977H14.8ZM18.5 19.4898L5.51 19.4998L3.31 11.4898H20.7L18.5 19.4898ZM10 15.4898C10 14.3898 10.9 13.4898 12 13.4898C13.1 13.4898 14 14.3898 14 15.4898C14 16.5898 13.1 17.4898 12 17.4898C10.9 17.4898 10 16.5898 10 15.4898Z" fill="#0057FF" />
         </svg> : ''}
 
-      {name === "delivery" ?
+      {name === 'delivery' ?
         <svg width="27" height="27" viewBox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg">
           <path fillRule="evenodd" clipRule="evenodd" d="M22.5 9H19.125V4.5H3.375C2.1375 4.5 1.125 5.5125 1.125 6.75V19.125H3.375C3.375 20.9925 4.8825 22.5 6.75 22.5C8.6175 22.5 10.125 20.9925 10.125 19.125H16.875C16.875 20.9925 18.3825 22.5 20.25 22.5C22.1175 22.5 23.625 20.9925 23.625 19.125H25.875V13.5L22.5 9ZM21.9375 10.6875L24.1425 13.5H19.125V10.6875H21.9375ZM5.625 19.125C5.625 19.7437 6.13125 20.25 6.75 20.25C7.36875 20.25 7.875 19.7437 7.875 19.125C7.875 18.5063 7.36875 18 6.75 18C6.13125 18 5.625 18.5063 5.625 19.125ZM9.2475 16.875C8.62875 16.1888 7.75125 15.75 6.75 15.75C5.74875 15.75 4.87125 16.1888 4.2525 16.875H3.375V6.75H16.875V16.875H9.2475ZM19.125 19.125C19.125 19.7437 19.6313 20.25 20.25 20.25C20.8687 20.25 21.375 19.7437 21.375 19.125C21.375 18.5063 20.8687 18 20.25 18C19.6313 18 19.125 18.5063 19.125 19.125Z" fill="#0057FF" />
         </svg> : ''}
@@ -757,8 +757,8 @@ function AppIcon({ name, className, iconClassName }: PropType) {
 }
 
 AppIcon.defaultProps = {
-  className: "primary-svg",
-  iconClassName: ""
+  className: 'primary-svg',
+  iconClassName: ''
 };
 
 export default AppIcon;

package/src/lib/components/Spin.tsx

@@ -26,6 +26,6 @@ const Spin = ({ spinning, targetId = 'root' }: Spin_TYPE) => {
     return (
         <React.Fragment />
     );
-}
+};
 
 export default Spin;

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

@@ -1,5 +1,5 @@
-import React, { useEffect } from "react";
-import { useDispatch, useSelector } from "react-redux";
+import React, { useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
 
 import ConfigurationManager from './ConfigurationManager';
 
@@ -23,7 +23,7 @@ function ConfigurationLoader({ updateAppState, path }: configurationLoaderParams
                 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));
+                    dispatch(updateAppState('configuration', response));
 
                 }).catch((err: any) => {
                     console.log(`Problem loading the Site Configuration in this path: ${fullPath}`);

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

@@ -2,11 +2,11 @@ function ConfigurationManager() {
 
     async function loadConfiguration(fullPath: string) {
         try {
-            const res = await fetch(fullPath, { headers: { "Content-Type": "application/json; charset=utf-8" } });
+            const res = await fetch(fullPath, { headers: { 'Content-Type': 'application/json; charset=utf-8' } });
             return await res.json();
         }
         catch (err) {
-            console.log("Problem loading the Site Labels");
+            console.log('Problem loading the Site Labels');
         }
     };
 
@@ -16,7 +16,7 @@ function ConfigurationManager() {
             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));
+                dispatch(updateAppState('configuration', response));
             }).catch((err: any) => {
                 console.log(`Problem loading the Site Configuration in this path: ${fullPath}`);
             });

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

@@ -1,4 +1,5 @@
 export interface ILabels {
+    errorBadRequest: string,
     errorGeneric: string;
     errorServerNotAvailable: string;
     errorSessionExpired: string;

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

@@ -2,6 +2,7 @@ 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.',
@@ -11,11 +12,13 @@ class Constants {
 class FetchWrapper {
     apiVersion?: string;
     labels?: Types.ILabels;
-    status_401_403?: () => void;
+    status_401?: () => void;
+    status_403?: () => void;
 
-    constructor(apiVersion?: string, labels?: Types.ILabels, status_401_403?: () => void) {
+    constructor(apiVersion?: string, labels?: Types.ILabels, status_401?: () => void, status_403?: () => void) {
         this.apiVersion = apiVersion;
-        this.status_401_403 = status_401_403;
+        this.status_401 = status_401;
+        this.status_403 = status_403;
 
         if (labels && labels !== null && labels.errorGeneric && labels.errorServerNotAvailable && labels.errorSessionExpired)
             this.labels = labels;
@@ -23,23 +26,23 @@ class FetchWrapper {
             this.labels = Constants.labels;
     }
 
-    get = (url: string, token?: string, params?: Blob | any, isFile = false, isBlob = false) => {
-        return this.generic('GET', url, token, params, isFile, isBlob);
+    get = (url: string, token?: string, onGenericServerError?: (status: number) => void, params?: Blob | any, isFile = false, isBlob = false) => {
+        return this.generic('GET', url, token, onGenericServerError, params, isFile, isBlob);
     }
 
-    post = (url: string, token?: string, params?: Blob | any, isFile = false, isBlob = false, additionalParams: Types.AdditionalParamsType[] = []) => {
-        return this.generic('POST', url, token, params, isFile, isBlob, this.apiVersion, additionalParams);
+    post = (url: string, token?: string, onGenericServerError?: (status: number) => void, params?: Blob | any, isFile = false, isBlob = false, additionalParams: Types.AdditionalParamsType[] = []) => {
+        return this.generic('POST', url, token, onGenericServerError, params, isFile, isBlob, this.apiVersion, additionalParams);
     }
 
-    put = (url: string, token?: string, params?: Blob | any, isFile = false, isBlob = false) => {
-        return this.generic('PUT', url, token, params, isFile, isBlob);
+    put = (url: string, token?: string, onGenericServerError?: (status: number) => void, params?: Blob | any, isFile = false, isBlob = false) => {
+        return this.generic('PUT', url, token, onGenericServerError, params, isFile, isBlob);
     }
 
-    delete = (url: string, token?: string, params?: Blob | any, isFile = false, isBlob = false) => {
-        return this.generic('DELETE', url, token, params, isFile, isBlob);
+    delete = (url: string, token?: string, onGenericServerError?: (status: number) => void, params?: Blob | any, isFile = false, isBlob = false) => {
+        return this.generic('DELETE', url, token, onGenericServerError, params, isFile, isBlob);
     }
 
-    generic = (method: string, url: string, token?: string, params?: Blob | any, isFile = false, isBlob = false, version = this.apiVersion, additionalParams: Types.AdditionalParamsType[] = []) => {
+    generic = (method: string, url: string, token?: string, onGenericServerError?: (status: number) => void, params?: Blob | any, isFile = false, isBlob = false, version = this.apiVersion, additionalParams: Types.AdditionalParamsType[] = []) => {
         // Headers & Body
         let body: BodyInit;
         const headers = new Headers();
@@ -76,7 +79,8 @@ class FetchWrapper {
         } as RequestInit;
 
         const labels = this.labels;
-        const status_401_403 = this.status_401_403;
+        const status_401 = this.status_401;
+        const status_403 = this.status_403;
 
         return fetch(url, requestInit)
             .then(response => {
@@ -95,15 +99,24 @@ class FetchWrapper {
                 if (!error || error.message === 'Failed to fetch')
                     throw new Error(labels.errorServerNotAvailable);
 
-                // This is an error coming from then
-                if (error.text) {
-                    if ((error.status === 401 || error.status === 403) && status_401_403) {
-                        status_401_403();
+                // 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);
+                }
+
+                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()
                 }
+                else
+                    return error.text();
 
                 if (error.message && error.message !== '')
                     throw error.message;

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

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

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

@@ -1,5 +1,5 @@
-import React, { useEffect } from "react";
-import { useDispatch, useSelector } from "react-redux";
+import React, { useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
 
 import LanguageManager from './LanguageManager';
 
@@ -27,7 +27,7 @@ function LanguageLoader({ updateAppState, language, path }: languageLoaderParams
                 console.log(`Loading Language Labels for this Site in this path: ${fullPath}`);
                 loadLabels(fullPath).then((response: any) => {
                     console.log(`Loaded Language Labels for this Site in this path: ${fullPath}`, response);
-                    dispatch(updateAppState("labels", response));
+                    dispatch(updateAppState('labels', response));
                 })
                     .catch((err: any) => {
                         console.log(`Problem loading the Site Language Labels in this path: ${fullPath}`);