From e030b3d18cc720fd92fcd1d54207800c679b7b36 Mon Sep 17 00:00:00 2001 From: Evan Hahn <69474926+EvanHahn-Signal@users.noreply.github.com> Date: Wed, 1 Dec 2021 11:24:00 -0600 Subject: [PATCH] Require badge props in `` to ensure no missing spots --- ts/components/Avatar.stories.tsx | 3 +- ts/components/Avatar.tsx | 10 +-- ts/components/AvatarPopup.stories.tsx | 25 +++++-- ts/components/AvatarPopup.tsx | 3 +- ts/components/CallNeedPermissionScreen.tsx | 1 + ts/components/CallScreen.tsx | 2 + ts/components/CallingParticipantsList.tsx | 1 + ts/components/CallingPipRemoteVideo.tsx | 1 + ts/components/CallingPreCallInfo.tsx | 1 + ts/components/ContactPill.tsx | 1 + ts/components/DirectCallRemoteParticipant.tsx | 1 + ts/components/GroupCallRemoteParticipant.tsx | 1 + ts/components/GroupV2JoinDialog.tsx | 1 + ts/components/IncomingCallBar.tsx | 1 + ts/components/LeftPaneSearchInput.tsx | 1 + ts/components/Lightbox.tsx | 1 + .../conversation/ConversationHero.stories.tsx | 16 +++++ .../conversation/Timeline.stories.tsx | 1 + ts/components/conversation/_contactUtil.tsx | 1 + .../BaseConversationListItem.tsx | 68 ++++++++++--------- 20 files changed, 94 insertions(+), 46 deletions(-) diff --git a/ts/components/Avatar.stories.tsx b/ts/components/Avatar.stories.tsx index 31a3e4a8d0f7..ecb38d4c25f6 100644 --- a/ts/components/Avatar.stories.tsx +++ b/ts/components/Avatar.stories.tsx @@ -16,6 +16,7 @@ import type { AvatarColorType } from '../types/Colors'; import { AvatarColors } from '../types/Colors'; import { StorybookThemeContext } from '../../.storybook/StorybookThemeContext'; import { getFakeBadge } from '../test-both/helpers/getFakeBadge'; +import { ThemeType } from '../types/Util'; const i18n = setupI18n('en', enMessages); @@ -64,7 +65,7 @@ const createProps = (overrideProps: Partial = {}): Props => ({ sharedGroupNames: [], size: 80, title: overrideProps.title || '', - theme: overrideProps.theme, + theme: overrideProps.theme || ThemeType.light, }); const sizes: Array = [112, 96, 80, 52, 32, 28]; diff --git a/ts/components/Avatar.tsx b/ts/components/Avatar.tsx index a72133275508..5cc26d3ebd6a 100644 --- a/ts/components/Avatar.tsx +++ b/ts/components/Avatar.tsx @@ -49,7 +49,6 @@ type BadgePlacementType = { bottom: number; right: number }; export type Props = { avatarPath?: string; - badge?: BadgeType; blur?: AvatarBlur; color?: AvatarColorType; loading?: boolean; @@ -63,7 +62,6 @@ export type Props = { profileName?: string; sharedGroupNames: Array; size: AvatarSize; - theme?: ThemeType; title: string; unblurredAvatarPath?: string; searchResult?: boolean; @@ -75,7 +73,11 @@ export type Props = { innerRef?: React.Ref; i18n: LocalizerType; -} & Pick, 'className'>; +} & ( + | { badge: undefined; theme?: ThemeType } + | { badge: BadgeType; theme: ThemeType } +) & + Pick, 'className'>; const BADGE_PLACEMENT_BY_SIZE = new Map([ [28, { bottom: -4, right: -2 }], @@ -290,8 +292,6 @@ export const Avatar: FunctionComponent = ({ ); } } - } else if (badge && !theme) { - log.error(' requires a theme if a badge is provided'); } return ( diff --git a/ts/components/AvatarPopup.stories.tsx b/ts/components/AvatarPopup.stories.tsx index 458a03fd4b24..63f61ab671ff 100644 --- a/ts/components/AvatarPopup.stories.tsx +++ b/ts/components/AvatarPopup.stories.tsx @@ -13,6 +13,8 @@ import type { AvatarColorType } from '../types/Colors'; import { AvatarColors } from '../types/Colors'; import { setupI18n } from '../util/setupI18n'; import enMessages from '../../_locales/en/messages.json'; +import { StorybookThemeContext } from '../../.storybook/StorybookThemeContext'; +import { getFakeBadge } from '../test-both/helpers/getFakeBadge'; const i18n = setupI18n('en', enMessages); @@ -29,9 +31,10 @@ const conversationTypeMap: Record = { group: 'group', }; -const createProps = (overrideProps: Partial = {}): Props => ({ +const useProps = (overrideProps: Partial = {}): Props => ({ acceptedMessageRequest: true, avatarPath: text('avatarPath', overrideProps.avatarPath || ''), + badge: overrideProps.badge, color: select('color', colorMap, overrideProps.color || AvatarColors[0]), conversationType: select( 'conversationType', @@ -52,19 +55,29 @@ const createProps = (overrideProps: Partial = {}): Props => ({ size: 80, startUpdate: action('startUpdate'), style: {}, + theme: React.useContext(StorybookThemeContext), title: text('title', overrideProps.title || ''), }); const stories = storiesOf('Components/Avatar Popup', module); stories.add('Avatar Only', () => { - const props = createProps(); + const props = useProps(); + + return ; +}); + +stories.add('Has badge', () => { + const props = useProps({ + badge: getFakeBadge(), + title: 'Janet Yellen', + }); return ; }); stories.add('Title', () => { - const props = createProps({ + const props = useProps({ title: 'My Great Title', }); @@ -72,7 +85,7 @@ stories.add('Title', () => { }); stories.add('Profile Name', () => { - const props = createProps({ + const props = useProps({ profileName: 'Sam Neill', }); @@ -80,7 +93,7 @@ stories.add('Profile Name', () => { }); stories.add('Phone Number', () => { - const props = createProps({ + const props = useProps({ profileName: 'Sam Neill', phoneNumber: '(555) 867-5309', }); @@ -89,7 +102,7 @@ stories.add('Phone Number', () => { }); stories.add('Update Available', () => { - const props = createProps({ + const props = useProps({ hasPendingUpdate: true, }); diff --git a/ts/components/AvatarPopup.tsx b/ts/components/AvatarPopup.tsx index 84616db88bd7..48157ee550f3 100644 --- a/ts/components/AvatarPopup.tsx +++ b/ts/components/AvatarPopup.tsx @@ -8,10 +8,11 @@ import type { Props as AvatarProps } from './Avatar'; import { Avatar } from './Avatar'; import { useRestoreFocus } from '../hooks/useRestoreFocus'; -import type { LocalizerType } from '../types/Util'; +import type { LocalizerType, ThemeType } from '../types/Util'; export type Props = { readonly i18n: LocalizerType; + readonly theme: ThemeType; hasPendingUpdate: boolean; startUpdate: () => unknown; diff --git a/ts/components/CallNeedPermissionScreen.tsx b/ts/components/CallNeedPermissionScreen.tsx index 48e9b74a8ca7..5b30ff874975 100644 --- a/ts/components/CallNeedPermissionScreen.tsx +++ b/ts/components/CallNeedPermissionScreen.tsx @@ -47,6 +47,7 @@ export const CallNeedPermissionScreen: React.FC = ({ = ({ = ({ = ({
= ({ = React.memo( { { ( { = - React.memo(function BaseConversationListItem({ - acceptedMessageRequest, - avatarPath, - badge, - checked, - color, - conversationType, - disabled, - headerDate, - headerName, - i18n, - id, - isMe, - isNoteToSelf, - isUsernameSearchResult, - isSelected, - markedUnread, - messageStatusIcon, - messageText, - messageTextIsAlwaysFullSize, - name, - onClick, - phoneNumber, - profileName, - sharedGroupNames, - shouldShowSpinner, - theme, - title, - unblurredAvatarPath, - unreadCount, - }) { + React.memo(function BaseConversationListItem(props) { + const { + acceptedMessageRequest, + avatarPath, + checked, + color, + conversationType, + disabled, + headerDate, + headerName, + i18n, + id, + isMe, + isNoteToSelf, + isUsernameSearchResult, + isSelected, + markedUnread, + messageStatusIcon, + messageText, + messageTextIsAlwaysFullSize, + name, + onClick, + phoneNumber, + profileName, + sharedGroupNames, + shouldShowSpinner, + title, + unblurredAvatarPath, + unreadCount, + } = props; + const identifier = id ? cleanId(id) : undefined; const htmlId = useMemo(() => uuid(), []); const isUnread = isConversationUnread({ markedUnread, unreadCount }); @@ -145,7 +145,6 @@ export const BaseConversationListItem: FunctionComponent = = name={name} phoneNumber={phoneNumber} profileName={profileName} - theme={theme} title={title} sharedGroupNames={sharedGroupNames} size={AvatarSize.FORTY_EIGHT} unblurredAvatarPath={unblurredAvatarPath} + // This is here to appease the type checker. + {...(props.badge + ? { badge: props.badge, theme: props.theme } + : { badge: undefined })} />