From fbcbe3fe1ee92c79d1a0371d70b0f12629d56add Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= Date: Thu, 29 Aug 2024 21:09:42 +0200 Subject: [PATCH] lol i think i fixed the privacy dropdown MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: marcin mikołajczak --- .../compose/components/privacy-dropdown.tsx | 79 +++++++++---------- 1 file changed, 38 insertions(+), 41 deletions(-) diff --git a/packages/pl-fe/src/features/compose/components/privacy-dropdown.tsx b/packages/pl-fe/src/features/compose/components/privacy-dropdown.tsx index 46811f5c0..79ad41151 100644 --- a/packages/pl-fe/src/features/compose/components/privacy-dropdown.tsx +++ b/packages/pl-fe/src/features/compose/components/privacy-dropdown.tsx @@ -1,6 +1,6 @@ import clsx from 'clsx'; -import React, { useEffect, useRef } from 'react'; -import { useIntl, defineMessages, FormattedMessage } from 'react-intl'; +import React, { useEffect, useMemo, useRef } from 'react'; +import { useIntl, defineMessages, FormattedMessage, IntlShape } from 'react-intl'; import { changeComposeFederated, changeComposeVisibility } from 'pl-fe/actions/compose'; import DropdownMenu from 'pl-fe/components/dropdown-menu'; @@ -8,6 +8,8 @@ import Icon from 'pl-fe/components/icon'; import { Button, Toggle } from 'pl-fe/components/ui'; import { useAppDispatch, useCompose, useFeatures } from 'pl-fe/hooks'; +import type { Features } from 'pl-api'; + const messages = defineMessages({ public_short: { id: 'privacy.public.short', defaultMessage: 'Public' }, public_long: { id: 'privacy.public.long', defaultMessage: 'Post to public timelines' }, @@ -34,19 +36,33 @@ interface Option { } interface IPrivacyDropdownMenu { - items: any[]; - value: string; - onClose: () => void; - onChange: (value: string | null) => void; - unavailable?: boolean; - showFederated?: boolean; - federated?: boolean; - onChangeFederated: () => void; + handleClose: () => any; } -const PrivacyDropdownMenu: React.FC = ({ - items, value, onClose, onChange, showFederated, federated, onChangeFederated, -}) => { +const getItems = (features: Features, intl: IntlShape) => [ + { icon: require('@tabler/icons/outline/world.svg'), value: 'public', text: intl.formatMessage(messages.public_short), meta: intl.formatMessage(messages.public_long) }, + { icon: require('@tabler/icons/outline/lock-open.svg'), value: 'unlisted', text: intl.formatMessage(messages.unlisted_short), meta: intl.formatMessage(messages.unlisted_long) }, + { icon: require('@tabler/icons/outline/lock.svg'), value: 'private', text: intl.formatMessage(messages.private_short), meta: intl.formatMessage(messages.private_long) }, + features.visibilityMutualsOnly ? { icon: require('@tabler/icons/outline/users-group.svg'), value: 'mutuals_only', text: intl.formatMessage(messages.mutuals_only_short), meta: intl.formatMessage(messages.mutuals_only_long) } : undefined, + { icon: require('@tabler/icons/outline/mail.svg'), value: 'direct', text: intl.formatMessage(messages.direct_short), meta: intl.formatMessage(messages.direct_long) }, + features.visibilityLocalOnly ? { icon: require('@tabler/icons/outline/affiliate.svg'), value: 'local', text: intl.formatMessage(messages.local_short), meta: intl.formatMessage(messages.local_long) } : undefined, +].filter((option): option is Option => !!option); + +const getPrivacyDropdown = (composeId: string): React.FC => ({ handleClose: handleMenuClose }) => { + const dispatch = useAppDispatch(); + const intl = useIntl(); + const features = useFeatures(); + + const compose = useCompose(composeId); + + const value = compose.privacy; + + const items = getItems(features, intl); + + const onChange = (value: string | null) => value && dispatch(changeComposeVisibility(composeId, value)); + + const onChangeFederated = () => dispatch(changeComposeFederated(composeId)); + const node = useRef(null); const focusedItem = useRef(null); @@ -56,7 +72,7 @@ const PrivacyDropdownMenu: React.FC = ({ switch (e.key) { case 'Escape': - onClose(); + handleMenuClose(); break; case 'Enter': handleClick(e); @@ -98,7 +114,7 @@ const PrivacyDropdownMenu: React.FC = ({ if (value === 'local_switch') onChangeFederated(); else { - onClose(); + handleMenuClose(); onChange(value); } }; @@ -143,7 +159,7 @@ const PrivacyDropdownMenu: React.FC = ({ ); })} - {showFederated && ( + {features.localOnlyStatuses && (
  • = ({ - +
    • )} @@ -180,7 +196,6 @@ interface IPrivacyDropdown { const PrivacyDropdown: React.FC = ({ composeId, }) => { - const dispatch = useAppDispatch(); const intl = useIntl(); const features = useFeatures(); @@ -189,38 +204,20 @@ const PrivacyDropdown: React.FC = ({ const value = compose.privacy; const unavailable = compose.id; - const options = [ - { icon: require('@tabler/icons/outline/world.svg'), value: 'public', text: intl.formatMessage(messages.public_short), meta: intl.formatMessage(messages.public_long) }, - { icon: require('@tabler/icons/outline/lock-open.svg'), value: 'unlisted', text: intl.formatMessage(messages.unlisted_short), meta: intl.formatMessage(messages.unlisted_long) }, - { icon: require('@tabler/icons/outline/lock.svg'), value: 'private', text: intl.formatMessage(messages.private_short), meta: intl.formatMessage(messages.private_long) }, - features.visibilityMutualsOnly ? { icon: require('@tabler/icons/outline/users-group.svg'), value: 'mutuals_only', text: intl.formatMessage(messages.mutuals_only_short), meta: intl.formatMessage(messages.mutuals_only_long) } : undefined, - { icon: require('@tabler/icons/outline/mail.svg'), value: 'direct', text: intl.formatMessage(messages.direct_short), meta: intl.formatMessage(messages.direct_long) }, - features.visibilityLocalOnly ? { icon: require('@tabler/icons/outline/affiliate.svg'), value: 'local', text: intl.formatMessage(messages.local_short), meta: intl.formatMessage(messages.local_long) } : undefined, - ].filter((option): option is Option => !!option); + const items = getItems(features, intl); - const onChange = (value: string | null) => value && dispatch(changeComposeVisibility(composeId, value)); - - const onChangeFederated = () => dispatch(changeComposeFederated(composeId)); + const PrivacyDropdownMenu = useMemo(() => getPrivacyDropdown(composeId), [composeId]); if (unavailable) { return null; } - const valueOption = options.find(item => item.value === value); + const valueOption = items.find(item => item.value === value); + return ( ( - - )} + component={PrivacyDropdownMenu} >