Migrate most React class components to function components
This commit is contained in:
Jamie Kyle
GitHub
parent
4c9baaef80
commit
558b5a4a38
23 changed files with 1444 additions and 1775 deletions
|
|
@ -184,200 +184,195 @@ export type PropsType = PropsLocalType &
|
|||
| 'shouldHideMetadata'
|
||||
>;
|
||||
|
||||
export class TimelineItem extends React.PureComponent<PropsType> {
|
||||
public override render(): JSX.Element | null {
|
||||
const {
|
||||
containerElementRef,
|
||||
conversationId,
|
||||
getPreferredBadge,
|
||||
i18n,
|
||||
id,
|
||||
isNextItemCallingNotification,
|
||||
isTargeted,
|
||||
item,
|
||||
platform,
|
||||
renderUniversalTimerNotification,
|
||||
returnToActiveCall,
|
||||
targetMessage,
|
||||
shouldCollapseAbove,
|
||||
shouldCollapseBelow,
|
||||
shouldHideMetadata,
|
||||
shouldRenderDateHeader,
|
||||
startCallingLobby,
|
||||
theme,
|
||||
...reducedProps
|
||||
} = this.props;
|
||||
export function TimelineItem({
|
||||
containerElementRef,
|
||||
conversationId,
|
||||
getPreferredBadge,
|
||||
i18n,
|
||||
id,
|
||||
isNextItemCallingNotification,
|
||||
isTargeted,
|
||||
item,
|
||||
platform,
|
||||
renderUniversalTimerNotification,
|
||||
returnToActiveCall,
|
||||
targetMessage,
|
||||
shouldCollapseAbove,
|
||||
shouldCollapseBelow,
|
||||
shouldHideMetadata,
|
||||
shouldRenderDateHeader,
|
||||
startCallingLobby,
|
||||
theme,
|
||||
...reducedProps
|
||||
}: PropsType): JSX.Element | null {
|
||||
if (!item) {
|
||||
// This can happen under normal conditions.
|
||||
//
|
||||
// `<Timeline>` and `<TimelineItem>` are connected to Redux separately. If a
|
||||
// timeline item is removed from Redux, `<TimelineItem>` might re-render before
|
||||
// `<Timeline>` does, which means we'll try to render nothing. This should resolve
|
||||
// itself quickly, as soon as `<Timeline>` re-renders.
|
||||
return null;
|
||||
}
|
||||
|
||||
if (!item) {
|
||||
// This can happen under normal conditions.
|
||||
//
|
||||
// `<Timeline>` and `<TimelineItem>` are connected to Redux separately. If a
|
||||
// timeline item is removed from Redux, `<TimelineItem>` might re-render before
|
||||
// `<Timeline>` does, which means we'll try to render nothing. This should resolve
|
||||
// itself quickly, as soon as `<Timeline>` re-renders.
|
||||
return null;
|
||||
}
|
||||
let itemContents: ReactChild;
|
||||
if (item.type === 'message') {
|
||||
itemContents = (
|
||||
<TimelineMessage
|
||||
{...reducedProps}
|
||||
{...item.data}
|
||||
isTargeted={isTargeted}
|
||||
targetMessage={targetMessage}
|
||||
shouldCollapseAbove={shouldCollapseAbove}
|
||||
shouldCollapseBelow={shouldCollapseBelow}
|
||||
shouldHideMetadata={shouldHideMetadata}
|
||||
containerElementRef={containerElementRef}
|
||||
getPreferredBadge={getPreferredBadge}
|
||||
platform={platform}
|
||||
i18n={i18n}
|
||||
theme={theme}
|
||||
/>
|
||||
);
|
||||
} else {
|
||||
let notification;
|
||||
|
||||
let itemContents: ReactChild;
|
||||
if (item.type === 'message') {
|
||||
itemContents = (
|
||||
<TimelineMessage
|
||||
if (item.type === 'unsupportedMessage') {
|
||||
notification = (
|
||||
<UnsupportedMessage {...reducedProps} {...item.data} i18n={i18n} />
|
||||
);
|
||||
} else if (item.type === 'callHistory') {
|
||||
notification = (
|
||||
<CallingNotification
|
||||
conversationId={conversationId}
|
||||
i18n={i18n}
|
||||
isNextItemCallingNotification={isNextItemCallingNotification}
|
||||
returnToActiveCall={returnToActiveCall}
|
||||
startCallingLobby={startCallingLobby}
|
||||
{...item.data}
|
||||
/>
|
||||
);
|
||||
} else if (item.type === 'chatSessionRefreshed') {
|
||||
notification = (
|
||||
<ChatSessionRefreshedNotification {...reducedProps} i18n={i18n} />
|
||||
);
|
||||
} else if (item.type === 'deliveryIssue') {
|
||||
notification = (
|
||||
<DeliveryIssueNotification
|
||||
{...item.data}
|
||||
{...reducedProps}
|
||||
i18n={i18n}
|
||||
/>
|
||||
);
|
||||
} else if (item.type === 'timerNotification') {
|
||||
notification = (
|
||||
<TimerNotification {...reducedProps} {...item.data} i18n={i18n} />
|
||||
);
|
||||
} else if (item.type === 'universalTimerNotification') {
|
||||
notification = renderUniversalTimerNotification();
|
||||
} else if (item.type === 'contactRemovedNotification') {
|
||||
notification = (
|
||||
<SystemMessage
|
||||
icon="info"
|
||||
contents={i18n('icu:ContactRemovedNotification__text')}
|
||||
/>
|
||||
);
|
||||
} else if (item.type === 'changeNumberNotification') {
|
||||
notification = (
|
||||
<ChangeNumberNotification
|
||||
{...reducedProps}
|
||||
{...item.data}
|
||||
isTargeted={isTargeted}
|
||||
targetMessage={targetMessage}
|
||||
shouldCollapseAbove={shouldCollapseAbove}
|
||||
shouldCollapseBelow={shouldCollapseBelow}
|
||||
shouldHideMetadata={shouldHideMetadata}
|
||||
containerElementRef={containerElementRef}
|
||||
getPreferredBadge={getPreferredBadge}
|
||||
platform={platform}
|
||||
i18n={i18n}
|
||||
/>
|
||||
);
|
||||
} else if (item.type === 'safetyNumberNotification') {
|
||||
notification = (
|
||||
<SafetyNumberNotification
|
||||
{...reducedProps}
|
||||
{...item.data}
|
||||
i18n={i18n}
|
||||
/>
|
||||
);
|
||||
} else if (item.type === 'verificationNotification') {
|
||||
notification = (
|
||||
<VerificationNotification
|
||||
{...reducedProps}
|
||||
{...item.data}
|
||||
i18n={i18n}
|
||||
/>
|
||||
);
|
||||
} else if (item.type === 'groupNotification') {
|
||||
notification = (
|
||||
<GroupNotification {...reducedProps} {...item.data} i18n={i18n} />
|
||||
);
|
||||
} else if (item.type === 'groupV2Change') {
|
||||
notification = (
|
||||
<GroupV2Change {...reducedProps} {...item.data} i18n={i18n} />
|
||||
);
|
||||
} else if (item.type === 'groupV1Migration') {
|
||||
notification = (
|
||||
<GroupV1Migration
|
||||
{...reducedProps}
|
||||
{...item.data}
|
||||
i18n={i18n}
|
||||
getPreferredBadge={getPreferredBadge}
|
||||
theme={theme}
|
||||
/>
|
||||
);
|
||||
} else if (item.type === 'conversationMerge') {
|
||||
notification = (
|
||||
<ConversationMergeNotification
|
||||
{...reducedProps}
|
||||
{...item.data}
|
||||
i18n={i18n}
|
||||
/>
|
||||
);
|
||||
} else if (item.type === 'resetSessionNotification') {
|
||||
notification = <ResetSessionNotification {...reducedProps} i18n={i18n} />;
|
||||
} else if (item.type === 'profileChange') {
|
||||
notification = (
|
||||
<ProfileChangeNotification
|
||||
{...reducedProps}
|
||||
{...item.data}
|
||||
i18n={i18n}
|
||||
/>
|
||||
);
|
||||
} else if (item.type === 'paymentEvent') {
|
||||
notification = (
|
||||
<PaymentEventNotification
|
||||
{...reducedProps}
|
||||
{...item.data}
|
||||
i18n={i18n}
|
||||
/>
|
||||
);
|
||||
} else {
|
||||
let notification;
|
||||
|
||||
if (item.type === 'unsupportedMessage') {
|
||||
notification = (
|
||||
<UnsupportedMessage {...reducedProps} {...item.data} i18n={i18n} />
|
||||
);
|
||||
} else if (item.type === 'callHistory') {
|
||||
notification = (
|
||||
<CallingNotification
|
||||
conversationId={conversationId}
|
||||
i18n={i18n}
|
||||
isNextItemCallingNotification={isNextItemCallingNotification}
|
||||
returnToActiveCall={returnToActiveCall}
|
||||
startCallingLobby={startCallingLobby}
|
||||
{...item.data}
|
||||
/>
|
||||
);
|
||||
} else if (item.type === 'chatSessionRefreshed') {
|
||||
notification = (
|
||||
<ChatSessionRefreshedNotification {...reducedProps} i18n={i18n} />
|
||||
);
|
||||
} else if (item.type === 'deliveryIssue') {
|
||||
notification = (
|
||||
<DeliveryIssueNotification
|
||||
{...item.data}
|
||||
{...reducedProps}
|
||||
i18n={i18n}
|
||||
/>
|
||||
);
|
||||
} else if (item.type === 'timerNotification') {
|
||||
notification = (
|
||||
<TimerNotification {...reducedProps} {...item.data} i18n={i18n} />
|
||||
);
|
||||
} else if (item.type === 'universalTimerNotification') {
|
||||
notification = renderUniversalTimerNotification();
|
||||
} else if (item.type === 'contactRemovedNotification') {
|
||||
notification = (
|
||||
<SystemMessage
|
||||
icon="info"
|
||||
contents={i18n('icu:ContactRemovedNotification__text')}
|
||||
/>
|
||||
);
|
||||
} else if (item.type === 'changeNumberNotification') {
|
||||
notification = (
|
||||
<ChangeNumberNotification
|
||||
{...reducedProps}
|
||||
{...item.data}
|
||||
i18n={i18n}
|
||||
/>
|
||||
);
|
||||
} else if (item.type === 'safetyNumberNotification') {
|
||||
notification = (
|
||||
<SafetyNumberNotification
|
||||
{...reducedProps}
|
||||
{...item.data}
|
||||
i18n={i18n}
|
||||
/>
|
||||
);
|
||||
} else if (item.type === 'verificationNotification') {
|
||||
notification = (
|
||||
<VerificationNotification
|
||||
{...reducedProps}
|
||||
{...item.data}
|
||||
i18n={i18n}
|
||||
/>
|
||||
);
|
||||
} else if (item.type === 'groupNotification') {
|
||||
notification = (
|
||||
<GroupNotification {...reducedProps} {...item.data} i18n={i18n} />
|
||||
);
|
||||
} else if (item.type === 'groupV2Change') {
|
||||
notification = (
|
||||
<GroupV2Change {...reducedProps} {...item.data} i18n={i18n} />
|
||||
);
|
||||
} else if (item.type === 'groupV1Migration') {
|
||||
notification = (
|
||||
<GroupV1Migration
|
||||
{...reducedProps}
|
||||
{...item.data}
|
||||
i18n={i18n}
|
||||
getPreferredBadge={getPreferredBadge}
|
||||
theme={theme}
|
||||
/>
|
||||
);
|
||||
} else if (item.type === 'conversationMerge') {
|
||||
notification = (
|
||||
<ConversationMergeNotification
|
||||
{...reducedProps}
|
||||
{...item.data}
|
||||
i18n={i18n}
|
||||
/>
|
||||
);
|
||||
} else if (item.type === 'resetSessionNotification') {
|
||||
notification = (
|
||||
<ResetSessionNotification {...reducedProps} i18n={i18n} />
|
||||
);
|
||||
} else if (item.type === 'profileChange') {
|
||||
notification = (
|
||||
<ProfileChangeNotification
|
||||
{...reducedProps}
|
||||
{...item.data}
|
||||
i18n={i18n}
|
||||
/>
|
||||
);
|
||||
} else if (item.type === 'paymentEvent') {
|
||||
notification = (
|
||||
<PaymentEventNotification
|
||||
{...reducedProps}
|
||||
{...item.data}
|
||||
i18n={i18n}
|
||||
/>
|
||||
);
|
||||
} else {
|
||||
// Weird, yes, but the idea is to get a compile error when we aren't comprehensive
|
||||
// with our if/else checks above, but also log out the type we don't understand
|
||||
// if we encounter it at runtime.
|
||||
const unknownItem: never = item;
|
||||
const asItem = unknownItem as TimelineItemType;
|
||||
throw new Error(`TimelineItem: Unknown type: ${asItem.type}`);
|
||||
}
|
||||
|
||||
itemContents = (
|
||||
<InlineNotificationWrapper
|
||||
id={id}
|
||||
conversationId={conversationId}
|
||||
isTargeted={isTargeted}
|
||||
targetMessage={targetMessage}
|
||||
>
|
||||
{notification}
|
||||
</InlineNotificationWrapper>
|
||||
);
|
||||
// Weird, yes, but the idea is to get a compile error when we aren't comprehensive
|
||||
// with our if/else checks above, but also log out the type we don't understand
|
||||
// if we encounter it at runtime.
|
||||
const unknownItem: never = item;
|
||||
const asItem = unknownItem as TimelineItemType;
|
||||
throw new Error(`TimelineItem: Unknown type: ${asItem.type}`);
|
||||
}
|
||||
|
||||
if (shouldRenderDateHeader) {
|
||||
return (
|
||||
<>
|
||||
<TimelineDateHeader i18n={i18n} timestamp={item.timestamp} />
|
||||
{itemContents}
|
||||
</>
|
||||
);
|
||||
}
|
||||
return itemContents;
|
||||
itemContents = (
|
||||
<InlineNotificationWrapper
|
||||
id={id}
|
||||
conversationId={conversationId}
|
||||
isTargeted={isTargeted}
|
||||
targetMessage={targetMessage}
|
||||
>
|
||||
{notification}
|
||||
</InlineNotificationWrapper>
|
||||
);
|
||||
}
|
||||
|
||||
if (shouldRenderDateHeader) {
|
||||
return (
|
||||
<>
|
||||
<TimelineDateHeader i18n={i18n} timestamp={item.timestamp} />
|
||||
{itemContents}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
return itemContents;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue