shlink-web-client/src/domains/helpers/DomainStatusIcon.tsx

60 lines
2 KiB
TypeScript
Raw Normal View History

import { FC, useEffect, useState } from 'react';
2021-12-28 00:27:13 +03:00
import { UncontrolledTooltip } from 'reactstrap';
import { ExternalLink } from 'react-external-link';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import {
faTimes as invalidIcon,
2021-12-28 00:27:13 +03:00
faCheck as checkIcon,
faCircleNotch as loadingStatusIcon,
} from '@fortawesome/free-solid-svg-icons';
import { MediaMatcher } from '../../utils/types';
2021-12-28 00:27:13 +03:00
import { DomainStatus } from '../data';
import { useElementRef } from '../../utils/helpers/hooks';
2021-12-28 00:27:13 +03:00
interface DomainStatusIconProps {
status: DomainStatus;
matchMedia?: MediaMatcher;
}
export const DomainStatusIcon: FC<DomainStatusIconProps> = ({ status, matchMedia = window.matchMedia }) => {
const ref = useElementRef<HTMLSpanElement>();
const matchesMobile = () => matchMedia('(max-width: 991px)').matches;
2022-03-26 14:17:42 +03:00
const [isMobile, setIsMobile] = useState<boolean>(matchesMobile());
useEffect(() => {
const listener = () => setIsMobile(matchesMobile());
window.addEventListener('resize', listener);
return () => window.removeEventListener('resize', listener);
}, []);
2021-12-28 00:27:13 +03:00
if (status === 'validating') {
return <FontAwesomeIcon fixedWidth icon={loadingStatusIcon} spin />;
}
return (
<>
<span ref={ref}>
2021-12-28 00:27:13 +03:00
{status === 'valid'
? <FontAwesomeIcon fixedWidth icon={checkIcon} className="text-muted" />
: <FontAwesomeIcon fixedWidth icon={invalidIcon} className="text-danger" />}
2021-12-28 00:27:13 +03:00
</span>
<UncontrolledTooltip
target={ref}
placement={isMobile ? 'top-start' : 'left'}
autohide={status === 'valid'}
>
2021-12-28 00:27:13 +03:00
{status === 'valid' ? 'Congratulations! This domain is properly configured.' : (
2021-12-29 00:48:35 +03:00
<span>
2021-12-28 00:27:13 +03:00
Oops! There is some missing configuration, and short URLs shared with this domain will not work.
<br />
Check the <ExternalLink href="https://slnk.to/multi-domain-docs">documentation</ExternalLink> in order to
2021-12-28 00:27:13 +03:00
find out what is missing.
2021-12-29 00:48:35 +03:00
</span>
2021-12-28 00:27:13 +03:00
)}
</UncontrolledTooltip>
</>
);
};