@dvrd/dvr-controls 1.0.3 → 1.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dvrd/dvr-controls",
-  "version": "1.0.3",
+  "version": "1.0.6",
   "description": "Custom web controls",
   "main": "index.ts",
   "scripts": {},

package/src/js/link/link.tsx

@@ -13,24 +13,25 @@ interface Props {
     className?: string;
     disabled?: boolean;
     underline?: boolean;
+    target?: string;
 }
 
 export default function Link(props: React.PropsWithChildren<Props>) {
-    const onClick = (evt: React.MouseEvent) => {
+    const {className, disabled, route, children, underline, target, onClick} = props;
+
+    function _onClick(evt: React.MouseEvent) {
         evt.preventDefault();
-        const {disabled, route, onClick} = props;
         if (!disabled) {
             if (route) {
-                if (route.startsWith('http')) window.open(route);
+                if (/^(www|http).+/.test(route)) window.open(route, target);
                 else navigate(route);
             }
             if (onClick) onClick(evt);
         }
-    };
+    }
 
-    const {className, disabled, route, children, underline} = props;
     return (
-        <a href={route} onClick={onClick}
+        <a href={route} onClick={_onClick} target={target}
            className={classNames('app-link', className, disabled && 'disabled',
                underline && 'underline')}>{children}</a>
     );

package/src/js/sidebarMenu/sidebarMenu.tsx

@@ -7,7 +7,7 @@ import React, {MouseEventHandler, ReactNode, useContext, useEffect, useRef, useS
 import {useLocation} from 'react-router';
 import {SidebarItem, SideMenuMode} from "../util/interfaces";
 import classNames from 'classnames';
-import {AwesomeIcon, generateComponentId} from "../../../index";
+import {AwesomeIcon, generateComponentId, isAbsoluteLink} from "../../../index";
 import {ControlContext} from "../util/controlContext";
 import {defer} from 'lodash';
 
@@ -67,7 +67,14 @@ export default function SidebarMenu(props: Props) {
     function _onClickItem(item: SidebarItem) {
         return function (evt: React.MouseEvent) {
             evt.stopPropagation();
-            setActiveItem(item.id);
+            const {route} = item;
+            let _route: string | null = null;
+            if (route) {
+                if (Array.isArray(route) && route.length) _route = route[0];
+                else _route = route as string;
+            }
+            if (_route && !isAbsoluteLink(_route))
+                setActiveItem(item.id);
             onClickItem(item)(evt);
         }
     }

package/src/js/util/requestUtil.ts

@@ -9,6 +9,8 @@ import {FetchMethod, ResponseData} from './interfaces';
 import {getJwt} from './jwtUtil';
 import {voidFunction} from "./controlUtil";
 
+type ResponseHandler = (response: Response) => void;
+
 export interface FetchOptions {
     baseUrl?: string | null;
     url: string;
@@ -17,29 +19,24 @@ export interface FetchOptions {
     stringifyData?: boolean;
     headers?: OutgoingHttpHeaders;
     callback?: Function;
-    errorCallback?: Function;
+    errorCallback?: (response: Response | string) => void;
     credentials?: string;
-    responseParser?: (response: Response) => void;
+    responseParser?: ResponseHandler;
+    errorHandler?: ResponseHandler;
 }
 
 let abortController: AbortController;
 let signal: AbortSignal;
 let defaultHeaders: OutgoingHttpHeaders = {};
-
-// const getSignal = (): AbortSignal | null => {
-//     if ("AbortController" in window) {
-//         if (!abortController)
-//             abortController = new AbortController;
-//         if (!signal)
-//             signal = abortController.signal;
-//         return signal;
-//     }
-//     return null;
-// };
+let defaultErrorHandler: ResponseHandler | null = null;
 
 function getAbortController(): AbortController | null {
-    if (!('AbortController' in window)) return null;
-    return new AbortController();
+    try {
+        if (!('AbortController' in window)) return null;
+        return new AbortController();
+    } catch {
+        return null;
+    }
 }
 
 const responseDataIsSuccess = (data: ResponseData): boolean => data.status === 'success';
@@ -48,6 +45,10 @@ export const setDefaultHeaders = (headers: OutgoingHttpHeaders) => {
     defaultHeaders = headers;
 }
 
+export function setDefaultErrorHandler(errorHandler: ResponseHandler | null) {
+    defaultErrorHandler = errorHandler;
+}
+
 /**
  * Cancel all running requests and refresh the abort controller and signal
  */
@@ -59,64 +60,61 @@ export const cancelAllFetch = () => {
     }
 };
 
-export const sendFetch = (config: FetchOptions, legacySupport: boolean = false): AbortController | null => {
-    config = createFetchConfig(config, legacySupport);
-    const {url, method, headers, data} = config, options: { [index: string]: any } = {
+export function sendFetch(config: FetchOptions, legacySupport: boolean = false): AbortController | null {
+    const baseUrl = config.baseUrl || window.settings.platformUrl;
+    if (!baseUrl) throw new Error('Base url is not set!');
+
+    config = _prepareConfig(config, legacySupport);
+    const {url, method, headers, data} = config;
+    const options: { [index: string]: any } = {
         headers,
         method,
         body: config.stringifyData === false ? data : JSON.stringify(data),
         cache: 'no-store',
-    }, baseUrl = config.baseUrl || window.settings.platformUrl;
-    if (!baseUrl) throw new Error('Base url is not set!');
+    };
     const abortController = getAbortController();
-    if(abortController) options.signal = abortController.signal;
-    // if (getSignal()) options['signal'] = getSignal();
+    if (abortController) options.signal = abortController.signal;
+
     options['mode'] = 'cors';
     fetch(baseUrl + url, options).then((response: Response) => {
-        const {status} = response;
-        if (config.responseParser) {
-            config.responseParser(response);
-            if (config.callback) config.callback(response);
-        } else {
-            if (status === 200) {
-                if (config.callback) {
-                    if (response.headers.get('content-type') === 'application/json') {
-                        response.json().then((data: any) => {
-                            if (data.message === 'Invalid rights') {
-                                showDialog('Je hebt niet genoeg rechten voor deze actie.');
-                                data.handled = true;
-                                if (config.callback) config.callback(data);
-                            } else if (config.callback) {
-                                data.success = responseDataIsSuccess(data);
-                                config.callback(data);
-                            }
-                        });
-                    } else config.callback(response);
-                }
-            } else if (status === 500) {
-                if (config.errorCallback) config.errorCallback(response);
-                else if (config.callback) config.callback({
-                    status: 'error',
-                    message: 'Er is iets misgegaan in ons systeem.'
-                });
-            } else {
-                if (config.errorCallback) config.errorCallback(response);
-                else if (config.callback) config.callback({
-                    status: 'error',
-                    message: 'Er is iets misgegaan in ons systeem.'
-                });
-            }
-        }
+        _handleResponse(response, config);
     }).catch((reason: any) => {
         if (reason.code === DOMException.ABORT_ERR) {/*Request aborted*/
-        } else if (config.errorCallback) {
+        } else if (config.errorCallback)
             config.errorCallback(reason);
-        }
     });
     return abortController;
-};
+}
 
-const createFetchConfig = (options: FetchOptions, legacySupport: boolean = true): FetchOptions => {
+function _handleResponse(response: Response, config: FetchOptions) {
+    if (config.responseParser)
+        return config.responseParser(response);
+
+    if (response.ok) {
+        if (!config.callback) return;
+        if (response.headers.get('content-type') === 'application/json') {
+            response.json().then((data: any) => {
+                if (data.message === 'Invalid rights') {
+                    showDialog('Je hebt niet genoeg rechten voor deze actie.');
+                    data.handled = true;
+                    if (config.callback) config.callback(data);
+                } else if (config.callback) {
+                    data.success = responseDataIsSuccess(data);
+                    config.callback(data);
+                }
+            });
+        } else config.callback(response);
+    } else
+        _onErrorResponse(response, config);
+}
+
+function _onErrorResponse(response: Response, config: FetchOptions) {
+    if (config.errorHandler) config.errorHandler(response);
+    else if (config.errorCallback) config.errorCallback(response);
+    else if (config.callback) config.callback({status: 'error', message: 'Er is iets misgegaan in het systeem.'});
+}
+
+function _prepareConfig(options: FetchOptions, legacySupport: boolean = true): FetchOptions {
     const fetchOptions: FetchOptions = Object.assign({}, options);
     if (!fetchOptions.method) fetchOptions.method = FetchMethod.GET;
     if (!fetchOptions.callback) fetchOptions.callback = voidFunction;
@@ -135,12 +133,13 @@ const createFetchConfig = (options: FetchOptions, legacySupport: boolean = true)
         }
     }
     return setAuthHeader(fetchOptions);
-};
+}
 
-const setAuthHeader = (options: FetchOptions): FetchOptions => {
-    const headers: OutgoingHttpHeaders = Object.assign({}, defaultHeaders, options.headers || {}), jwt = getJwt();
+function setAuthHeader(options: FetchOptions): FetchOptions {
+    const headers: OutgoingHttpHeaders = Object.assign({}, defaultHeaders, options.headers || {});
+    const jwt = getJwt();
     if (jwt)
         headers.Authorization = `JWT ${jwt}`;
     options.headers = headers;
     return options;
-};
+}