reactify group updates text bubble from redux store (#2083)
Audric Ackermann
3 years ago
committed by
GitHub
parent
5fb3237d1a
commit
58dc3e26ca
@ -1,91 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
import {
|
||||
PropsForGroupUpdate,
|
||||
PropsForGroupUpdateAdd,
|
||||
PropsForGroupUpdateKicked,
|
||||
PropsForGroupUpdateRemove,
|
||||
PropsForGroupUpdateType,
|
||||
} from '../../state/ducks/conversations';
|
||||
import _ from 'underscore';
|
||||
import { NotificationBubble } from './message/message-item/notification-bubble/NotificationBubble';
|
||||
import { ReadableMessage } from './message/message-item/ReadableMessage';
|
||||
|
||||
// This component is used to display group updates in the conversation view.
|
||||
// This is a not a "notification" as the name suggests, but a message inside the conversation
|
||||
|
||||
type TypeWithContacts =
|
||||
| PropsForGroupUpdateAdd
|
||||
| PropsForGroupUpdateKicked
|
||||
| PropsForGroupUpdateRemove;
|
||||
|
||||
function isTypeWithContact(change: PropsForGroupUpdateType): change is TypeWithContacts {
|
||||
return (change as TypeWithContacts).contacts !== undefined;
|
||||
}
|
||||
|
||||
function getPeople(change: TypeWithContacts) {
|
||||
return change.contacts?.map(c => c.profileName || c.pubkey).join(', ');
|
||||
}
|
||||
|
||||
// tslint:disable-next-line: cyclomatic-complexity
|
||||
const ChangeItem = (change: PropsForGroupUpdateType): string => {
|
||||
const people = isTypeWithContact(change) ? getPeople(change) : undefined;
|
||||
|
||||
switch (change.type) {
|
||||
case 'name':
|
||||
return window.i18n('titleIsNow', [change.newName || '']);
|
||||
case 'add':
|
||||
if (!change.contacts || !change.contacts.length || !people) {
|
||||
throw new Error('Group update add is missing contacts');
|
||||
}
|
||||
|
||||
const joinKey = change.contacts.length > 1 ? 'multipleJoinedTheGroup' : 'joinedTheGroup';
|
||||
return window.i18n(joinKey, [people]);
|
||||
case 'remove':
|
||||
if (change.isMe) {
|
||||
return window.i18n('youLeftTheGroup');
|
||||
}
|
||||
|
||||
if (!change.contacts || !change.contacts.length || !people) {
|
||||
throw new Error('Group update remove is missing contacts');
|
||||
}
|
||||
|
||||
const leftKey = change.contacts.length > 1 ? 'multipleLeftTheGroup' : 'leftTheGroup';
|
||||
return window.i18n(leftKey, [people]);
|
||||
|
||||
case 'kicked':
|
||||
if (change.isMe) {
|
||||
return window.i18n('youGotKickedFromGroup');
|
||||
}
|
||||
|
||||
if (!change.contacts || !change.contacts.length || !people) {
|
||||
throw new Error('Group update kicked is missing contacts');
|
||||
}
|
||||
|
||||
const kickedKey =
|
||||
change.contacts.length > 1 ? 'multipleKickedFromTheGroup' : 'kickedFromTheGroup';
|
||||
return window.i18n(kickedKey, [people]);
|
||||
|
||||
case 'general':
|
||||
return window.i18n('updatedTheGroup');
|
||||
default:
|
||||
throw new Error('Missing case error');
|
||||
}
|
||||
};
|
||||
|
||||
export const GroupNotification = (props: PropsForGroupUpdate) => {
|
||||
const { changes, messageId, receivedAt, isUnread } = props;
|
||||
|
||||
const textChange = changes.map(ChangeItem)[0];
|
||||
|
||||
return (
|
||||
<ReadableMessage
|
||||
messageId={messageId}
|
||||
receivedAt={receivedAt}
|
||||
isUnread={isUnread}
|
||||
key={`readable-message-${messageId}`}
|
||||
>
|
||||
<NotificationBubble notificationText={textChange} iconType="users" />
|
||||
</ReadableMessage>
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,89 @@
|
||||
import React from 'react';
|
||||
|
||||
import {
|
||||
PropsForGroupUpdate,
|
||||
PropsForGroupUpdateType,
|
||||
} from '../../../../state/ducks/conversations';
|
||||
import _ from 'underscore';
|
||||
import { NotificationBubble } from './notification-bubble/NotificationBubble';
|
||||
import { ReadableMessage } from './ReadableMessage';
|
||||
import { arrayContainsUsOnly } from '../../../../models/message';
|
||||
import { useConversationsUsernameOrFull } from '../../../../hooks/useParamSelector';
|
||||
|
||||
// This component is used to display group updates in the conversation view.
|
||||
|
||||
const ChangeItemJoined = (added: Array<string>): string => {
|
||||
if (!added.length) {
|
||||
throw new Error('Group update add is missing contacts');
|
||||
}
|
||||
const names = useConversationsUsernameOrFull(added);
|
||||
const joinKey = added.length > 1 ? 'multipleJoinedTheGroup' : 'joinedTheGroup';
|
||||
return window.i18n(joinKey, [names.join(', ')]);
|
||||
};
|
||||
|
||||
const ChangeItemKicked = (kicked: Array<string>): string => {
|
||||
if (!kicked.length) {
|
||||
throw new Error('Group update kicked is missing contacts');
|
||||
}
|
||||
const names = useConversationsUsernameOrFull(kicked);
|
||||
|
||||
if (arrayContainsUsOnly(kicked)) {
|
||||
return window.i18n('youGotKickedFromGroup');
|
||||
}
|
||||
|
||||
const kickedKey = kicked.length > 1 ? 'multipleKickedFromTheGroup' : 'kickedFromTheGroup';
|
||||
return window.i18n(kickedKey, [names.join(', ')]);
|
||||
};
|
||||
|
||||
const ChangeItemLeft = (left: Array<string>): string => {
|
||||
if (!left.length) {
|
||||
throw new Error('Group update remove is missing contacts');
|
||||
}
|
||||
|
||||
const names = useConversationsUsernameOrFull(left);
|
||||
|
||||
if (arrayContainsUsOnly(left)) {
|
||||
return window.i18n('youLeftTheGroup');
|
||||
}
|
||||
|
||||
const leftKey = left.length > 1 ? 'multipleLeftTheGroup' : 'leftTheGroup';
|
||||
return window.i18n(leftKey, [names.join(', ')]);
|
||||
};
|
||||
|
||||
// tslint:disable-next-line: cyclomatic-complexity
|
||||
const ChangeItem = (change: PropsForGroupUpdateType): string => {
|
||||
switch (change.type) {
|
||||
case 'name':
|
||||
console.warn('name: ', change.newName);
|
||||
|
||||
return window.i18n('titleIsNow', [change.newName || '']);
|
||||
case 'add':
|
||||
return ChangeItemJoined(change.added);
|
||||
|
||||
case 'left':
|
||||
return ChangeItemLeft(change.left);
|
||||
|
||||
case 'kicked':
|
||||
return ChangeItemKicked(change.kicked);
|
||||
|
||||
case 'general':
|
||||
return window.i18n('updatedTheGroup');
|
||||
default:
|
||||
throw new Error('Missing case error');
|
||||
}
|
||||
};
|
||||
|
||||
export const GroupUpdateMessage = (props: PropsForGroupUpdate) => {
|
||||
const { change, messageId, receivedAt, isUnread } = props;
|
||||
|
||||
return (
|
||||
<ReadableMessage
|
||||
messageId={messageId}
|
||||
receivedAt={receivedAt}
|
||||
isUnread={isUnread}
|
||||
key={`readable-message-${messageId}`}
|
||||
>
|
||||
<NotificationBubble notificationText={ChangeItem(change)} iconType="users" />
|
||||
</ReadableMessage>
|
||||
);
|
||||
};
|
||||
Loading…
Reference in New Issue