packages/pass/components/SecureLink/SecureLinkView.tsx

   1 import { type FC, useEffect, useState } from 'react';
   2 import { useLocation, useParams } from 'react-router';
   3
   4 import { c } from 'ttag';
   5
   6 import warningIcon from '@proton/pass/assets/secure-link/secure-link-warning.svg';
   7 import { ItemContentView } from '@proton/pass/components/Item/Containers/ItemContentView';
   8 import { DateBadge } from '@proton/pass/components/Layout/Badge/DateBadge';
   9 import { useRequest } from '@proton/pass/hooks/useActionRequest';
  10 import { intoSecureLinkItemRevision } from '@proton/pass/lib/secure-links/secure-links.utils';
  11 import { secureLinkOpen } from '@proton/pass/store/actions';
  12 import type { Maybe, MaybeNull, SecureLinkItem } from '@proton/pass/types';
  13 import { PASS_APP_NAME } from '@proton/shared/lib/constants';
  14
  15 type SecureLinkParams = { token: string };
  16
  17 const SecureLinkView: FC = () => {
  18     const { hash } = useLocation();
  19     const { token } = useParams<SecureLinkParams>();
  20     const [response, setResponse] = useState<Maybe<SecureLinkItem>>();
  21     const [error, setError] = useState<MaybeNull<string>>(null);
  22
  23     const { dispatch, loading } = useRequest(secureLinkOpen, {
  24         initial: { token, linkKey: '' },
  25         onStart: () => setError(null),
  26         onSuccess: ({ data }) => setResponse(data),
  27         onFailure: ({ data }) => setError(data.error),
  28     });
  29
  30     useEffect(() => dispatch({ token, linkKey: hash.replaceAll('#', '') }), []);
  31
  32     return (
  33         <>
  34             {response && (
  35                 <>
  36                     <h3 className="text-bold mb-4 xs:px-8 sm:px-16 sm:mx-4 md:mx-10">
  37                         {c('Action').t`Someone shared an item with you on ${PASS_APP_NAME}.`}
  38                     </h3>
  39
  40                     {response.expirationDate && <DateBadge expirationTime={response?.expirationDate} />}
  41                     {response.item && (
  42                         <ItemContentView revision={intoSecureLinkItemRevision(response)} secureLinkItem />
  43                     )}
  44                 </>
  45             )}
  46
  47             {loading && (
  48                 <div className="flex flex-column gap-2">
  49                     <div className="pass-skeleton pass-skeleton--box" style={{ '--skeleton-height': '3.5rem' }} />
  50                     <div className="pass-skeleton pass-skeleton--box" style={{ '--skeleton-height': '3rem' }} />
  51                     <div className="pass-skeleton pass-skeleton--box" style={{ '--skeleton-height': '30rem' }} />
  52                 </div>
  53             )}
  54
  55             {error && (
  56                 <div className="flex flex-column items-center">
  57                     <img src={warningIcon} alt="" />
  58                     <h4 className="text-bold mb-3">{error}</h4>
  59                     <div>{c('Error').t`Try reaching out to the link owner.`}</div>
  60                 </div>
  61             )}
  62         </>
  63     );
  64 };
  65
  66 export default SecureLinkView;