frontend/hooks/useShare.ts (view raw)
1import {useTranslation} from 'react-i18next';
2import {Enum_Userspermissionsuser_Lang as SupportedLocales} from '../generated/graphql';
3import useToastStore from '../stores/useToastStore';
4
5const FALLBACK_LANGUAGE = process.env.FALLBACK_LANGUAGE || 'en';
6
7const navigatorHasShareCapability =
8 typeof navigator !== 'undefined' && !!navigator.share;
9const navigatorHasClipboardCapability =
10 typeof navigator !== 'undefined' && !!navigator.clipboard;
11
12const useShare = () => {
13 const {t} = useTranslation();
14 const addToast = useToastStore(s => s.addToast);
15
16 return {
17 navigatorHasShareCapability,
18 share: async ({title}) => {
19 const url = typeof window !== 'undefined' ? window.location.href : '';
20 if (!url || !title) return null;
21 const splittedUrl = url.split('/');
22 const localeParamIndex = splittedUrl.findIndex(
23 member => SupportedLocales[member]
24 );
25 const urlCopy = [...splittedUrl]
26 urlCopy[localeParamIndex] = FALLBACK_LANGUAGE;
27 const withDefaultLocaleURL = urlCopy.join('/');
28 const isPhone = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
29 // If navigator share capability and a phone
30 if (navigatorHasShareCapability && isPhone) {
31 return await navigator.share({
32 title,
33 url: withDefaultLocaleURL,
34 });
35 }
36 // Else copy URL in clipboard
37 else if (navigatorHasClipboardCapability) {
38 await navigator.clipboard.writeText(withDefaultLocaleURL);
39 addToast(t('event.actions.copied'));
40 return true;
41 }
42 addToast(t('event.actions.noShareCapability'));
43 },
44 };
45};
46
47export default useShare;