packages/pass/hooks/useMenuItems.ts

   1 import { useDispatch } from 'react-redux';
   2
   3 import { c } from 'ttag';
   4
   5 import type { IconName } from '@proton/components';
   6 import { syncIntent } from '@proton/pass//store/actions';
   7 import { usePassCore } from '@proton/pass/components/Core/PassCoreProvider';
   8 import { usePasswordContext } from '@proton/pass/components/Password/PasswordContext';
   9 import { PASS_ANDROID_URL, PASS_IOS_URL, PASS_REDDIT_URL, PASS_REQUEST_URL, PASS_X_URL } from '@proton/pass/constants';
  10 import { SyncType } from '@proton/pass/store/sagas/client/sync';
  11 import { withTap } from '@proton/pass/utils/fp/pipe';
  12 import noop from '@proton/utils/noop';
  13
  14 export type MenuItem = {
  15     icon: IconName;
  16     label: string;
  17     url?: string;
  18     onClick?: () => void;
  19 };
  20
  21 type MenuItemsOptions = {
  22     onAction?: () => void;
  23     extra?: {
  24         advanced?: MenuItem[];
  25         download?: MenuItem[];
  26         feedback?: MenuItem[];
  27     };
  28 };
  29
  30 export const useMenuItems = ({
  31     onAction = noop,
  32     extra = {},
  33 }: MenuItemsOptions): Record<'feedback' | 'download' | 'advanced', MenuItem[]> => {
  34     const { openSettings } = usePassCore();
  35     const passwordContext = usePasswordContext();
  36     const dispatch = useDispatch();
  37     const withAction = withTap(onAction);
  38
  39     return {
  40         feedback: [
  41             {
  42                 icon: 'paper-plane',
  43                 label: c('Action').t`Send us a message`,
  44                 onClick: withAction(() => openSettings?.('support')),
  45             },
  46             {
  47                 icon: 'brand-twitter',
  48                 label: c('Action').t`Write us on Twitter`,
  49                 url: PASS_X_URL,
  50             },
  51             {
  52                 icon: 'brand-reddit',
  53                 label: c('Action').t`Write us on Reddit`,
  54                 url: PASS_REDDIT_URL,
  55             },
  56             {
  57                 icon: 'rocket',
  58                 label: c('Action').t`Request a feature`,
  59                 url: PASS_REQUEST_URL,
  60             },
  61             ...(extra.feedback ?? []),
  62         ],
  63         download: [
  64             {
  65                 icon: 'brand-android',
  66                 label: c('Action').t`Pass for Android`,
  67                 url: PASS_ANDROID_URL,
  68             },
  69             {
  70                 icon: 'brand-apple',
  71                 label: c('Action').t`Pass for iOS`,
  72                 url: PASS_IOS_URL,
  73             },
  74             ...(extra.download ?? []),
  75         ],
  76         advanced: [
  77             {
  78                 icon: 'key-history',
  79                 label: c('Action').t`Generated passwords`,
  80                 onClick: withAction(passwordContext.history.open),
  81             },
  82             {
  83                 icon: 'arrow-rotate-right',
  84                 label: c('Action').t`Manually sync your data`,
  85                 onClick: withAction(() => dispatch(syncIntent(SyncType.FULL))),
  86             },
  87             ...(extra.advanced ?? []),
  88         ],
  89     };
  90 };