react-healthy/dist/esm/components/Healthy/index.js

Incrementally check and alert your users to the health of your APIs

import React, { useState, useEffect, useMemo, useCallback } from 'react';
import { cx, css } from '@emotion/css';
import { useHealthCheck } from '../../hooks/useHealthCheck.js';

function Healthy(a){let{config:b}=a;const{apis:c,onError:d,interval:f=void 0,classes:g=void 0,closeable:h=!1,messages:e}=b,[i,j]=useState(!1),{pageHasError:k,apisWithErrors:l}=useHealthCheck({apis:c,interval:f,onError:d});useEffect(()=>{j(k);},[k]);const m=useMemo(()=>h?/*#__PURE__*/React.createElement("button",{className:cx(closeButtonStyles,null===g||void 0===g?void 0:g.closeButton),onClick:()=>j(!1),"data-testid":"CLOSE_BUTTON"},"\xD7"):null,[h,null===g||void 0===g?void 0:g.closeButton]),n=useCallback(()=>{if(l.length){// single issue
if(1===l.length){const a=l.values().next().value,b=`We are currently experiencing issues with our ${a.name} service`;return (null===e||void 0===e?void 0:e.singleError)||b}// multiple issues
return (null===e||void 0===e?void 0:e.multipleErrors)||"We are currently experiencing issues with our services"}},[e,l]),o=n();return i?/*#__PURE__*/React.createElement("div",{className:cx(bannerWrapperStyles,null===g||void 0===g?void 0:g.banner),"data-testid":"BANNER"},/*#__PURE__*/React.createElement("div",{className:cx(bannerContentStyles,null===g||void 0===g?void 0:g.content)},/*#__PURE__*/React.createElement("span",null,o)),m):null}const bannerWrapperStyles=css({color:"white",backgroundColor:"#ef5350",width:"100%",position:"relative"}),bannerContentStyles=css({padding:"20px",maxWidth:"1000px",fontSize:"16px",fontFamily:"inherit",margin:"0 auto",textAlign:"center"}),closeButtonStyles=css({position:"absolute",top:"30%",right:"30px",backgroundColor:"transparent",color:"white",border:"none",boxShadow:"none",cursor:"pointer",fontSize:"16px",fontFamily:"inherit","&:hover":{background:"#e53935"},"&:focus, &:active":{outline:"none"}});

export { Healthy, Healthy as default };