wcz-layout 5.2.2 → 5.4.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "wcz-layout",
   "license": "MIT",
   "author": "Dalibor Homola",
-  "version": "5.2.2",
+  "version": "5.4.0",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "exports": {

package/src/components/layout/LeftDrawer.tsx

@@ -55,6 +55,8 @@ const Drawer = styled(MuiDrawer, { shouldForwardProp: (prop) => prop !== 'open'
     }),
 );
 
+const isExternalUrl = (url: string) => url.startsWith('http://') || url.startsWith('https://');
+
 interface LeftDrawerProps {
     appVersion: string,
     drawerOpen: boolean,
@@ -73,25 +75,32 @@ export default function LeftDrawer(props: LeftDrawerProps) {
     const closeDrawer = useCallback(() => setDrawerOpen(false), []);
 
     const handleMenuItemClick = useCallback((path: string) => () => {
-        navigate(path);
+        setDrawerOpen(false);
 
         if (location.pathname === path)
             return window.location.reload();
 
-        setDrawerOpen(false);
+        if (isExternalUrl(path))
+            return window.open(path, '_blank');
+
+        navigate(path);
     }, [location.pathname]);
 
     const menuItems = (
         <List>
             {items.filter(item => !item.hidden).map(item =>
-                <ListItem key={item.path} disablePadding sx={{ display: 'block' }} onClick={handleMenuItemClick(item.path)}>
-                    <ListItemButton selected={location.pathname === item.path} >
-                        <ListItemIcon>
-                            {item.icon}
-                        </ListItemIcon>
-                        <ListItemText primary={t(item.title)} />
-                    </ListItemButton>
-                </ListItem>
+                <Fragment key={item.path}>
+                    <ListItem disablePadding sx={{ display: 'block' }} onClick={handleMenuItemClick(item.path)}>
+                        <ListItemButton selected={location.pathname === item.path}>
+                            <ListItemIcon>
+                                {item.icon}
+                            </ListItemIcon>
+                            <ListItemText primary={t(item.title)} />
+                        </ListItemButton>
+                    </ListItem>
+
+                    {item.divider && <Divider sx={{ my: 1 }} />}
+                </Fragment>
             )}
         </List>
     );

package/src/contexts/LayoutContext.tsx

@@ -6,14 +6,15 @@ import I18NextHttpBackend from 'i18next-http-backend';
 import moment from 'moment';
 import { createContext, ReactNode, SyntheticEvent, useCallback, useEffect, useMemo, useState } from 'react';
 import { initReactI18next, useTranslation } from 'react-i18next';
-import Layout from '../components/Layout';
 import CenteredBox from '../components/common/CenteredBox';
+import Layout from '../components/Layout';
 import KeycloakExtendedConfig from '../models/KeycloakExtendedConfig';
 import { LeftDrawerItem } from '../models/LeftDrawerItem';
 import SnackbarModel from '../models/SnackbarModel';
-import { ExtendedUser, User } from '../models/User';
+import { User } from '../models/User';
 import { persistStorage } from '../utils/PersistStorage';
-import { doLogin, doLogout, initKeycloak, loggedIn } from '../utils/UserService';
+import { initKeycloak } from '../utils/UserService';
+import { useUser } from '../utils/UseUser';
 
 interface LayoutContextInterface {
     changeTitle: (title: string) => void,
@@ -27,7 +28,6 @@ export const LayoutContext = createContext({} as LayoutContextInterface);
 
 //User
 initKeycloak();
-const initialUser: ExtendedUser = { login: doLogin, logout: doLogout, loggedIn: loggedIn(), department: "", id: "", name: "" };
 
 //QueryClient
 const queryClient = new QueryClient({ defaultOptions: { queries: { enabled: false } } });
@@ -39,7 +39,6 @@ i18next
     .use(I18NextHttpBackend)
     .init({ fallbackLng: 'en' });
 
-//Moment
 moment.defaultFormat = 'YYYY-MM-DD';
 
 declare module "moment" {
@@ -69,28 +68,11 @@ interface LayoutProviderProps {
 }
 
 export function LayoutProvider(props: LayoutProviderProps) {
-    const [user, setUser] = useState<ExtendedUser>(initialUser);
     const [title, setTitle] = useState(props.title);
     const [snackbar, setSnackbar] = useState({} as SnackbarModel);
     const [initialized, setInitialized] = useState<boolean>(false);
     const { t, i18n } = useTranslation();
-
-    useEffect(() => {
-        window.addEventListener('user', initUserInfo);
-        return () => window.removeEventListener('user', initUserInfo);
-    }, []);
-
-    const initUserInfo = () => {
-        const userInfo: User | null = persistStorage.getObject<User>("user");
-        if (userInfo)
-            setUser({
-                ...user,
-                id: userInfo.id,
-                department: userInfo.department,
-                name: userInfo.name,
-                loggedIn: loggedIn()
-            });
-    };
+    const user = useUser();
 
     useEffect(() => setQueryClientDefaultOptions(), [user.loggedIn]);
 
@@ -103,10 +85,11 @@ export function LayoutProvider(props: LayoutProviderProps) {
             queries: {
                 enabled: enabled,
                 refetchOnWindowFocus: false,
-                onError: message => setSnackbar({ message: String(message), severity: "error" })
+                onError: message => setSnackbar({ message: String(message), severity: "error" }),
+                retry: false
             },
             mutations: {
-                onError: message => setSnackbar({ message: String(message), severity: "error" })
+                onError: message => setSnackbar({ message: String(message), severity: "error" }),
             }
         });
     };

package/src/models/KeycloakExtendedConfig.ts

@@ -1,12 +1,12 @@
-export default interface KeycloakExtendedConfig {
-    autoLogin?: boolean,
-    confidential?: Confidential,
-    realm: string,
-    "auth-server-url": string,
-    idpHint?: string
-}
-
-export interface Confidential {
-    client: string,
-    secret: string
+export default interface KeycloakExtendedConfig {
+    autoLogin?: boolean,
+    confidential?: Confidential,
+    realm: string,
+    "auth-server-url": string,
+    idpHint?: string
+}
+
+export interface Confidential {
+    client: string,
+    secret: string
 }

package/src/models/LeftDrawerItem.ts

@@ -2,5 +2,6 @@ export interface LeftDrawerItem {
     title: string,
     path: string,
     icon: React.ReactNode,
-    hidden?: boolean
+    hidden?: boolean,
+    divider?: boolean,
 }

package/src/models/SnackbarModel.ts

@@ -1,6 +1,6 @@
-import { AlertColor } from "@mui/material";
-
-export default interface SnackbarModel {
-    message: string,
-    severity?: AlertColor
+import { AlertColor } from "@mui/material";
+
+export default interface SnackbarModel {
+    message: string,
+    severity?: AlertColor
 }

package/src/utils/Fetches.ts

@@ -1,92 +1,92 @@
-import { getToken } from "./UserService";
-
-export const fetchGet = async (url: string, signal: AbortSignal | undefined): Promise<any> => {
-    const initReq: RequestInit = await getRequestInit("GET", null, signal);
-
-    const response: Response = await fetch(url, initReq);
-    if (!response.ok)
-        throw await getQueryErrorMessage(response);
-
-    return response.json();
-};
-
-export const fetchFileGet = async (url: string, signal: AbortSignal | undefined): Promise<Blob> => {
-    const initReq: RequestInit = await getRequestInit("GET", null, signal);
-
-    const response: Response = await fetch(url, initReq);
-    if (!response.ok)
-        throw await getQueryErrorMessage(response);
-
-    return response.blob();
-};
-
-export const fetchPost = async (url: string, data: unknown): Promise<any> => {
-    const initReq: RequestInit = await getRequestInit("POST", data);
-
-    const response: Response = await fetch(url, initReq);
-    if (!response.ok)
-        throw await getQueryErrorMessage(response);
-
-    return response.json();
-};
-
-export const fetchPut = async (url: string, data: unknown): Promise<Response> => {
-    const initReq: RequestInit = await getRequestInit("PUT", data);
-
-    const response: Response = await fetch(url, initReq);
-    if (!response.ok)
-        throw await getQueryErrorMessage(response);
-
-    return response;
-};
-
-export const fetchDelete = async (url: string): Promise<Response> => {
-    const initReq: RequestInit = await getRequestInit("DELETE");
-
-    const response: Response = await fetch(url, initReq);
-    if (!response.ok)
-        throw await getQueryErrorMessage(response);
-
-    return response;
-};
-
-const getRequestInit = async (method: string, data?: unknown, signal?: AbortSignal): Promise<RequestInit> => {
-    const request: RequestInit = {
-        method: method,
-        signal: signal,
-        credentials: 'include'
-    };
-
-    if (data) {
-        if (data instanceof FormData)
-            request.body = data;
-        else
-            request.body = JSON.stringify(data);
-    }
-
-    if (data instanceof FormData)
-        request.headers = {
-            'Authorization': `Bearer ${await getToken()}`
-        };
-    else {
-        request.headers = {
-            'Content-Type': 'application/json',
-            'Authorization': `Bearer ${await getToken()}`
-        };
-    }
-
-    return request;
-};
-
-const getQueryErrorMessage = async (response: Response): Promise<string> => {
-    let message: string = `Error connecting to server`;
-
-    const detailMessage: string | undefined = await response.json()
-        .then(data => data.message ?? data.title)
-        .catch(() => (message));
-
-    if (detailMessage)
-        message = detailMessage;
-
-    return message;
+import { getToken } from "./UserService";
+
+export const fetchGet = async (url: string, signal: AbortSignal | undefined): Promise<any> => {
+    const initReq: RequestInit = await getRequestInit("GET", null, signal);
+
+    const response: Response = await fetch(url, initReq);
+    if (!response.ok)
+        throw await getQueryErrorMessage(response);
+
+    return response.json();
+};
+
+export const fetchFileGet = async (url: string, signal: AbortSignal | undefined): Promise<Blob> => {
+    const initReq: RequestInit = await getRequestInit("GET", null, signal);
+
+    const response: Response = await fetch(url, initReq);
+    if (!response.ok)
+        throw await getQueryErrorMessage(response);
+
+    return response.blob();
+};
+
+export const fetchPost = async (url: string, data: unknown): Promise<any> => {
+    const initReq: RequestInit = await getRequestInit("POST", data);
+
+    const response: Response = await fetch(url, initReq);
+    if (!response.ok)
+        throw await getQueryErrorMessage(response);
+
+    return response.json();
+};
+
+export const fetchPut = async (url: string, data: unknown): Promise<Response> => {
+    const initReq: RequestInit = await getRequestInit("PUT", data);
+
+    const response: Response = await fetch(url, initReq);
+    if (!response.ok)
+        throw await getQueryErrorMessage(response);
+
+    return response;
+};
+
+export const fetchDelete = async (url: string): Promise<Response> => {
+    const initReq: RequestInit = await getRequestInit("DELETE");
+
+    const response: Response = await fetch(url, initReq);
+    if (!response.ok)
+        throw await getQueryErrorMessage(response);
+
+    return response;
+};
+
+const getRequestInit = async (method: string, data?: unknown, signal?: AbortSignal): Promise<RequestInit> => {
+    const request: RequestInit = {
+        method: method,
+        signal: signal,
+        credentials: 'include'
+    };
+
+    if (data) {
+        if (data instanceof FormData)
+            request.body = data;
+        else
+            request.body = JSON.stringify(data);
+    }
+
+    if (data instanceof FormData)
+        request.headers = {
+            'Authorization': `Bearer ${await getToken()}`
+        };
+    else {
+        request.headers = {
+            'Content-Type': 'application/json',
+            'Authorization': `Bearer ${await getToken()}`
+        };
+    }
+
+    return request;
+};
+
+const getQueryErrorMessage = async (response: Response): Promise<string> => {
+    let message: string = `[${response.status}] ${response.statusText}`;
+
+    const detailMessage: string | undefined = await response.json()
+        .then(data => `[${response.status}] ${data.message}`)
+        .catch(() => (message));
+
+    if (detailMessage)
+        message = detailMessage;
+
+    return message;
 };

package/src/utils/Helpers.ts

@@ -1,8 +1,8 @@
-import { Guid } from "guid-ts";
-
-export const isAndroid: boolean = /(android)/i.test(navigator.userAgent);
-export const isMobile: boolean = /(android|iphone)/i.test(navigator.userAgent);
-
-export const isDevelopment: boolean = window.location.href.includes(".dev") || window.location.href.includes("localhost");
-
-export const newGuid = (): string => Guid.newGuid().toString();
+import { Guid } from "guid-ts";
+
+export const isAndroid: boolean = /(android)/i.test(navigator.userAgent);
+export const isMobile: boolean = /(android|iphone)/i.test(navigator.userAgent);
+
+export const isDevelopment: boolean = window.location.href.includes(".dev") || window.location.href.includes("localhost");
+
+export const newGuid = (): string => Guid.newGuid().toString();

package/src/utils/UseUser.tsx

@@ -1,10 +1,13 @@
 import { useEffect, useState } from "react";
-import { User } from "../models/User";
+import { ExtendedUser, User } from "../models/User";
 import { persistStorage } from "./PersistStorage";
+import { doLogin, doLogout, loggedIn } from "./UserService";
+
+const initialUser: ExtendedUser = { login: doLogin, logout: doLogout, loggedIn: loggedIn(), department: "", id: "", name: "" };
 
 export const useUser = () => {
-    const [user, setUser] = useState<User>({ id: "", name: "", department: "" });
- 
+    const [user, setUser] = useState<ExtendedUser>(initialUser);
+
     useEffect(() => {
         window.addEventListener('user', initUser);
         return () => window.removeEventListener('user', initUser);
@@ -13,7 +16,13 @@ export const useUser = () => {
     const initUser = () => {
         const storedUser: User | null = persistStorage.getObject<User>("user");
         if (storedUser)
-            setUser(storedUser);
+            setUser({
+                ...user,
+                id: storedUser.id,
+                department: storedUser.department,
+                name: storedUser.name,
+                loggedIn: loggedIn()
+            });
     };
 
     return user;