From 23d25cbbb07ace8a142ddea287eecfaccbd03b1a Mon Sep 17 00:00:00 2001 From: lukas Date: Mon, 18 Dec 2023 11:58:51 +0100 Subject: [PATCH] Translate components --- public/locales/de.json | 81 +++++++- public/locales/en.json | 81 +++++++- src/app/components/room-intro/RoomIntro.tsx | 18 +- .../components/upload-board/UploadBoard.tsx | 8 +- src/app/hooks/useMemberEventParser.tsx | 16 +- src/app/organisms/invite-user/InviteUser.jsx | 39 ++-- src/app/organisms/room/MembersDrawer.tsx | 36 ++-- src/app/organisms/room/RoomTimeline.tsx | 7 +- src/app/organisms/room/common.jsx | 184 +++++++++++------- src/util/twemojify.jsx | 18 ++ 10 files changed, 361 insertions(+), 127 deletions(-) diff --git a/public/locales/de.json b/public/locales/de.json index 426c9bca6f..2f51680038 100644 --- a/public/locales/de.json +++ b/public/locales/de.json @@ -1,7 +1,14 @@ { "common": { + "close": "Schließen", "options": "Optionen", - "or": "oder" + "or": "oder", + "search": "Suche", + "invite": "Einladen", + "message_prompt": "Nachricht" + }, + "errors": { + "generic": "Etwas ist schiefgegangen!" }, "Components": { "PDF": { @@ -11,6 +18,24 @@ "previous": "Vorherige", "jump_to_page": "Spring zu Seite", "next": "Nächste" + }, + "UploadBoard": { + "files": "Dateien", + "send": "Senden", + "upload_failed": "Hochladen fehlgeschlagen" + }, + "MemberEvent": { + "invited": " hat eingeladen", + "reject_invite": " hat die Einladung abgelehnt ", + "requested_join": " hat angefragt dem Raum bei zu tretten ", + "joined": " ist dem Raum beigetreten" + }, + "RoomIntro": { + "created_by_on": "Erstellt von am {{time}}", + "beginning": "Das ist der Start der Unterhaltung.", + "invite_member": "Nutzer einladen", + "open_old_room": "Alten Raum öffnen", + "join_old_room": "Altem Raum beitreten" } }, "Organisms": { @@ -24,6 +49,25 @@ "pin_sidebar": "An Seitenleiste anheften", "unpin_sidebar": "Von Seitenleiste lösen" }, + "MembersDrawer": { + "members": "Nutzer", + "invite_member": "Nutzer einladen", + "type_name": "Schreibe Name...", + "Filter": { + "no_members": "Keine \"{{membershipFilter}}\" Nutzer", + "joined": "Beigetreten", + "invited": "Eingeladen", + "left": "Verlassen", + "kicked": "Entfernt", + "banned": "Verbant" + }, + "Sort": { + "aToZ": "A bis Z", + "tToA": "Z bis A", + "newest": "Neueste", + "oldest": "Älteste" + } + }, "Settings": { "theme": { "follow_system": { @@ -56,6 +100,26 @@ "about": "Über" } }, + "RoomCommon": { + "user_joined": " ist dem Raum beigetreten", + "user_left": " hat den Raum verlassen", + "user_left_reason": " hat den Raum verlassen: ", + "user_invited": " hat eingeladen", + "invite_cancelled": " hat 's Einladung widerrufen", + "invite_rejected": " hat die Einladung abgelehnt", + "user_kicked": " hat entfernt", + "user_kicked_reason": " hat entfernt: ", + "user_banned": " hat gebannt", + "user_banned_reason": " banned : ", + "user_unbanned": " hat entbannt", + "avatar_set": " hat einen Avatar festgelegt", + "avatar_changed": " hat den Avatar geändert", + "avatar_removed": " hat den Avatar entfernt", + "name_set": " hat den Anzeigenamen gewählt", + "name_changed": " hat den Anzeigenamen in geändert", + "name_removed": " hat den Anzeigenamen entfernt", + "changed_room_name": " hat den Raum Name geändert" + }, "DrawerBreadcrumb": { "home": "Home" }, @@ -81,6 +145,21 @@ "pin_spaces_tooltip": "Spaces anheften", "search_tooltip": "Suche", "invites_tooltip": "Einladungen" + }, + "InviteUser": { + "user_not_found": "{{user_name}} nicht gefunden!", + "no_matches_found": "Keine Treffer für {{user_name}} gefunden", + "invite_result": { + "invited": "Eingeladen", + "already_joined": "Bereits beigetreten", + "already_invited": "Bereits eingeladen", + "banned": "Gebannt" + }, + "search_label": "Name oder Benutzer-ID", + "search_result_title": "Suchergebnis für Benutzer {{user_name}}", + "searching_for_user": "Suche nach Benutzer {{user_name}}...", + "invite_to_room": "In {{room}} einladen", + "invite_to_dm": "Direktnachricht" } }, "Molecules": { diff --git a/public/locales/en.json b/public/locales/en.json index a04a1c0d97..274dfa698a 100644 --- a/public/locales/en.json +++ b/public/locales/en.json @@ -1,7 +1,14 @@ { "common": { + "close": "Close", "options": "Options", - "or": "Or" + "or": "Or", + "search": "Search", + "invite": "Invite", + "message_prompt": "Message" + }, + "errors": { + "generic": "Something went wrong!" }, "Components": { "PDF": { @@ -11,6 +18,24 @@ "previous": "Previous", "jump_to_page": "Jump To Page", "next": "Next" + }, + "UploadBoard": { + "files": "Files", + "send": "Send", + "upload_failed": "Upload Failed" + }, + "MemberEvent": { + "invited": " invited ", + "reject_invite": " rejected the invitation ", + "requested_join": " request to join room ", + "joined": " joined the room" + }, + "RoomIntro": { + "created_by_on": "Created by on {{time}}", + "beginning": "This is the beginning of conversation.", + "invite_member": "Invite Member", + "open_old_room": "Open Old Room", + "join_old_room": "Join Old Room" } }, "Organisms": { @@ -24,6 +49,25 @@ "pin_sidebar": "Pin to sidebar", "unpin_sidebar": "Unpin from sidebar" }, + "MembersDrawer": { + "members": "Members", + "invite_member": "Invite Member", + "type_name": "Type name...", + "Filter": { + "no_members": "No \"{{membershipFilter}}\" Members", + "joined": "Joined", + "invited": "Invited", + "left": "Left", + "kicked": "Kicked", + "banned": "Banned" + }, + "Sort": { + "aToZ": "A to Z", + "tToA": "Z to A", + "newest": "Newest", + "oldest": "Oldest" + } + }, "Settings": { "theme": { "follow_system": { @@ -56,6 +100,26 @@ "about": "About" } }, + "RoomCommon": { + "user_joined": " joined the room", + "user_left": " left the room", + "user_left_reason": " left the room: ", + "user_invited": " invited ", + "invite_cancelled": " cancelled 's invite", + "invite_rejected": " rejected the invitation", + "user_kicked": " kicked ", + "user_kicked_reason": " kicked : ", + "user_banned": " banned ", + "user_banned_reason": " banned : ", + "user_unbanned": " unbanned ", + "avatar_set": " set an avatar", + "avatar_changed": " changed their avatar", + "avatar_removed": " removed their avatar", + "name_set": " set their display name to ", + "name_changed": " changed their display name to ", + "name_removed": " removed their display name ", + "changed_room_name": " changed room name" + }, "DrawerBreadcrumb": { "home": "Home" }, @@ -81,6 +145,21 @@ "pin_spaces_tooltip": "Pin spaces", "search_tooltip": "Search", "invites_tooltip": "Invites" + }, + "InviteUser": { + "user_not_found": "{{user_name}} not found!", + "no_matches_found": "No matches found for {{user_name}}", + "invite_result": { + "invited": "Invited", + "already_joined": "Already joined", + "already_invited": "Already invited", + "banned": "Banned" + }, + "search_label": "Name or User ID", + "search_result_title": "Search result for user {{user_name}}", + "searching_for_user": "Searching for user {{user_name}}...", + "invite_to_room": "Invite to {{room}}", + "invite_to_dm": "Direct Message" } }, "Molecules": { diff --git a/src/app/components/room-intro/RoomIntro.tsx b/src/app/components/room-intro/RoomIntro.tsx index 863c7cf018..a54af19653 100644 --- a/src/app/components/room-intro/RoomIntro.tsx +++ b/src/app/components/room-intro/RoomIntro.tsx @@ -1,6 +1,7 @@ import React, { useCallback } from 'react'; import { Avatar, AvatarFallback, AvatarImage, Box, Button, Spinner, Text, as, color } from 'folds'; import { Room } from 'matrix-js-sdk'; +import { useTranslation, Trans } from 'react-i18next'; import { openInviteUser, selectRoom } from '../../../client/action/navigation'; import { useStateEvent } from '../../hooks/useStateEvent'; import { IRoomCreateContent, Membership, StateEvent } from '../../../types/matrix/room'; @@ -35,6 +36,7 @@ export const RoomIntro = as<'div', RoomIntroProps>(({ room, ...props }, ref) => const [prevRoomState, joinPrevRoom] = useAsyncCallback( useCallback(async (roomId: string) => mx.joinRoom(roomId), [mx]) ); + const { t } = useTranslation(); return ( @@ -60,13 +62,15 @@ export const RoomIntro = as<'div', RoomIntroProps>(({ room, ...props }, ref) => {name} - {typeof topic === 'string' ? topic : 'This is the beginning of conversation.'} + {typeof topic === 'string' ? topic : t('Components.RoomIntro.beginning')} {creatorName && ts && ( - {'Created by '} - @{creatorName} - {` on ${timeDayMonthYear(ts)} ${timeHourMinute(ts)}`} + @{creatorName} }} + values={{ time: `${timeDayMonthYear(ts)} ${timeHourMinute(ts)}` }} + /> )} @@ -77,7 +81,7 @@ export const RoomIntro = as<'div', RoomIntroProps>(({ room, ...props }, ref) => size="300" radii="300" > - Invite Member + {t('Components.RoomIntro.invite_member')} {typeof prevRoomId === 'string' && (mx.getRoom(prevRoomId)?.getMyMembership() === Membership.Join ? ( @@ -88,7 +92,7 @@ export const RoomIntro = as<'div', RoomIntroProps>(({ room, ...props }, ref) => fill="Soft" radii="300" > - Open Old Room + {t('Components.RoomIntro.open_old_room')} ) : ( ))} diff --git a/src/app/components/upload-board/UploadBoard.tsx b/src/app/components/upload-board/UploadBoard.tsx index 42f3899f2c..ace7381bb6 100644 --- a/src/app/components/upload-board/UploadBoard.tsx +++ b/src/app/components/upload-board/UploadBoard.tsx @@ -2,6 +2,7 @@ import React, { MutableRefObject, ReactNode, useImperativeHandle, useRef } from import { Badge, Box, Chip, Header, Icon, Icons, Spinner, Text, as, percent } from 'folds'; import classNames from 'classnames'; import { useAtomValue } from 'jotai'; +import { useTranslation } from 'react-i18next'; import * as css from './UploadBoard.css'; import { TUploadFamilyObserverAtom, Upload, UploadStatus, UploadSuccess } from '../../state/upload'; @@ -75,6 +76,7 @@ export function UploadBoardHeader({ handleSend, })); const handleCancel = () => onCancel(uploads); + const { t } = useTranslation(); return (
@@ -88,7 +90,7 @@ export function UploadBoardHeader({ gap="100" > - Files + {t('Components.UploadBoard.files')} {isSuccess && ( @@ -100,12 +102,12 @@ export function UploadBoardHeader({ outlined after={} > - Send + {t('Components.UploadBoard.send')} )} {isError && !open && ( - Upload Failed + {t('Components.UploadBoard.upload_failed')} )} {!isSuccess && !isError && !open && ( diff --git a/src/app/hooks/useMemberEventParser.tsx b/src/app/hooks/useMemberEventParser.tsx index 6ceca1b1d7..fc2c5318de 100644 --- a/src/app/hooks/useMemberEventParser.tsx +++ b/src/app/hooks/useMemberEventParser.tsx @@ -1,6 +1,7 @@ import React, { ReactNode } from 'react'; import { IconSrc, Icons } from 'folds'; import { MatrixEvent } from 'matrix-js-sdk'; +import { useTranslation, Trans } from 'react-i18next'; import { IMemberContent, Membership } from '../../types/matrix/room'; import { getMxIdLocalPart } from '../utils/matrix'; import { isMembershipChanged } from '../utils/room'; @@ -13,6 +14,8 @@ export type ParsedResult = { export type MemberEventParser = (mEvent: MatrixEvent) => ParsedResult; export const useMemberEventParser = (): MemberEventParser => { + const { t } = useTranslation(); + const parseMemberEvent: MemberEventParser = (mEvent) => { const content = mEvent.getContent(); const prevContent = mEvent.getPrevContent() as IMemberContent; @@ -50,8 +53,11 @@ export const useMemberEventParser = (): MemberEventParser => { body: ( <> {senderName} - {' invited '} - {userName} {content.reason} + {userName} }} + /> + {content.reason} ), }; @@ -63,7 +69,7 @@ export const useMemberEventParser = (): MemberEventParser => { body: ( <> {userName} - {' request to join room '} + {t('Components.MemberEvent.requested_join')} {content.reason} ), @@ -76,7 +82,7 @@ export const useMemberEventParser = (): MemberEventParser => { body: ( <> {userName} - {' joined the room'} + {t('Components.MemberEvent.joined')} ), }; @@ -90,7 +96,7 @@ export const useMemberEventParser = (): MemberEventParser => { senderId === userId ? ( <> {userName} - {' rejected the invitation '} + {t('Components.MemberEvent.reject_invite')} {content.reason} ) : ( diff --git a/src/app/organisms/invite-user/InviteUser.jsx b/src/app/organisms/invite-user/InviteUser.jsx index 7519510245..a8ad03234c 100644 --- a/src/app/organisms/invite-user/InviteUser.jsx +++ b/src/app/organisms/invite-user/InviteUser.jsx @@ -2,6 +2,7 @@ import React, { useState, useEffect, useRef } from 'react'; import PropTypes from 'prop-types'; import './InviteUser.scss'; +import { useTranslation } from 'react-i18next'; import initMatrix from '../../../client/initMatrix'; import cons from '../../../client/state/cons'; import * as roomActions from '../../../client/action/room'; @@ -36,6 +37,8 @@ function InviteUser({ const usernameRef = useRef(null); + const { t } = useTranslation(); + const mx = initMatrix.matrixClient; function getMapCopy(myMap) { @@ -82,7 +85,7 @@ function InviteUser({ avatar_url: result.avatar_url, }]); } catch (e) { - updateSearchQuery({ error: `${inputUsername} not found!` }); + updateSearchQuery({ error: t('Organisms.InviteUser.user_not_found', { user_name: inputUsername }) }); } } else { try { @@ -91,13 +94,13 @@ function InviteUser({ limit: 20, }); if (result.results.length === 0) { - updateSearchQuery({ error: `No matches found for "${inputUsername}"!` }); + updateSearchQuery({ error: t('Organisms.InviteUser.no_matches_found', { user_name: inputUsername }) }); updateIsSearching(false); return; } updateUsers(result.results); } catch (e) { - updateSearchQuery({ error: 'Something went wrong!' }); + updateSearchQuery({ error: t('errors.generic') }); } } updateIsSearching(false); @@ -123,7 +126,7 @@ function InviteUser({ } catch (e) { deleteUserFromProc(userId); if (typeof e.message === 'string') procUserError.set(userId, e.message); - else procUserError.set(userId, 'Something went wrong!'); + else procUserError.set(userId, t('errors.generic')); updateUserProcError(getMapCopy(procUserError)); } } @@ -143,7 +146,7 @@ function InviteUser({ } catch (e) { deleteUserFromProc(userId); if (typeof e.message === 'string') procUserError.set(userId, e.message); - else procUserError.set(userId, 'Something went wrong!'); + else procUserError.set(userId, t('errors.generic')); updateUserProcError(getMapCopy(procUserError)); } } @@ -161,7 +164,7 @@ function InviteUser({ return ; } if (invitedUserIds.has(userId)) { - return messageJSX('Invited', true); + return messageJSX(t('Organisms.InviteUser.invite_result.invited'), true); } if (typeof roomId === 'string') { const member = mx.getRoom(roomId).getMember(userId); @@ -169,18 +172,18 @@ function InviteUser({ const userMembership = member.membership; switch (userMembership) { case 'join': - return messageJSX('Already joined', true); + return messageJSX(t('Organisms.InviteUser.invite_result.already_joined'), true); case 'invite': - return messageJSX('Already Invited', true); + return messageJSX(t('Organisms.InviteUser.invite_result.already_invited'), true); case 'ban': - return messageJSX('Banned', false); + return messageJSX(t('Organisms.InviteUser.invite_result.banned'), false); default: } } } return (typeof roomId === 'string') - ? - : ; + ? + : ; }; const renderError = (userId) => { if (!procUserError.has(userId)) return null; @@ -227,27 +230,27 @@ function InviteUser({ return ( } + title={(typeof roomId === 'string' ? t('Organisms.InviteUser.invite_to_room', { room: mx.getRoom(roomId).name }) : t('Organisms.InviteUser.invite_to_dm'))} + contentOptions={} onRequestClose={onRequestClose} >
{ e.preventDefault(); searchUser(usernameRef.current.value); }}> - - + +
{ typeof searchQuery.username !== 'undefined' && isSearching && (
- {`Searching for user "${searchQuery.username}"...`} + {t('Organisms.InviteUser.searching_for_user', { user_name: searchQuery.username })}
) } { typeof searchQuery.username !== 'undefined' && !isSearching && ( - {`Search result for user "${searchQuery.username}"`} + {t('Organisms.InviteUser.search_result_title', { user_name: searchQuery.username })} ) } { @@ -276,4 +279,4 @@ InviteUser.propTypes = { onRequestClose: PropTypes.func.isRequired, }; -export default InviteUser; +export default InviteUser; \ No newline at end of file diff --git a/src/app/organisms/room/MembersDrawer.tsx b/src/app/organisms/room/MembersDrawer.tsx index b4ba6b7996..ccf8d1937f 100644 --- a/src/app/organisms/room/MembersDrawer.tsx +++ b/src/app/organisms/room/MembersDrawer.tsx @@ -29,6 +29,7 @@ import { TooltipProvider, config, } from 'folds'; +import { useTranslation } from 'react-i18next'; import { Room, RoomMember } from 'matrix-js-sdk'; import { useVirtualizer } from '@tanstack/react-virtual'; import FocusTrap from 'focus-trap-react'; @@ -85,27 +86,27 @@ const useMembershipFilterMenu = (): MembershipFilter[] => useMemo( () => [ { - name: 'Joined', + name: 'Organisms.MembersDrawer.Filter.joined', filterFn: MembershipFilters.filterJoined, color: 'Background', }, { - name: 'Invited', + name: 'Organisms.MembersDrawer.Filter.invited', filterFn: MembershipFilters.filterInvited, color: 'Success', }, { - name: 'Left', + name: 'Organisms.MembersDrawer.Filter.left', filterFn: MembershipFilters.filterLeaved, color: 'Secondary', }, { - name: 'Kicked', + name: 'Organisms.MembersDrawer.Filter.kicked', filterFn: MembershipFilters.filterKicked, color: 'Warning', }, { - name: 'Banned', + name: 'Organisms.MembersDrawer.Filter.banned', filterFn: MembershipFilters.filterBanned, color: 'Critical', }, @@ -135,19 +136,19 @@ const useSortFilterMenu = (): SortFilter[] => useMemo( () => [ { - name: 'A to Z', + name: 'Organisms.MembersDrawer.Sort.aToZ', filterFn: SortFilters.filterAscending, }, { - name: 'Z to A', + name: 'Organisms.MembersDrawer.Sort.tToA', filterFn: SortFilters.filterDescending, }, { - name: 'Newest', + name: 'Organisms.MembersDrawer.Sort.newest', filterFn: SortFilters.filterNewestFirst, }, { - name: 'Oldest', + name: 'Organisms.MembersDrawer.Sort.oldest', filterFn: SortFilters.filterOldest, }, ], @@ -264,6 +265,7 @@ export function MembersDrawer({ room }: MembersDrawerProps) { const userId = btn.getAttribute('data-user-id'); openProfileViewer(userId, room.roomId); }; + const { t } = useTranslation(); return ( @@ -271,7 +273,7 @@ export function MembersDrawer({ room }: MembersDrawerProps) { - {`${millify(room.getJoinedMemberCount(), { precision: 1, locales: [] })} Members`} + {`${millify(room.getJoinedMemberCount(), { precision: 1, locales: [] })} ${t('Organisms.MembersDrawer.members')}`} @@ -281,7 +283,7 @@ export function MembersDrawer({ room }: MembersDrawerProps) { offset={4} tooltip={ - Invite Member + {t('Organisms.MembersDrawer.invite_member')} } > @@ -336,7 +338,7 @@ export function MembersDrawer({ room }: MembersDrawerProps) { setOpen(false); }} > - {menuItem.name} + {t(menuItem.name)} ))} @@ -352,7 +354,7 @@ export function MembersDrawer({ room }: MembersDrawerProps) { radii="300" before={} > - {membershipFilter.name} + {t(membershipFilter.name)} )} @@ -387,7 +389,7 @@ export function MembersDrawer({ room }: MembersDrawerProps) { setOpen(false); }} > - {menuItem.name} + {t(menuItem.name)} ))} @@ -403,7 +405,7 @@ export function MembersDrawer({ room }: MembersDrawerProps) { radii="300" after={} > - {sortFilter.name} + {t(sortFilter.name)} )} @@ -415,7 +417,7 @@ export function MembersDrawer({ room }: MembersDrawerProps) { ref={searchInputRef} onChange={handleSearchChange} style={{ paddingRight: config.space.S200 }} - placeholder="Type name..." + placeholder={t('Organisms.MembersDrawer.type_name')} variant="Surface" size="400" radii="400" @@ -463,7 +465,7 @@ export function MembersDrawer({ room }: MembersDrawerProps) { {!fetchingMembers && !result && processMembers.length === 0 && ( - {`No "${membershipFilter.name}" Members`} + {t('Organisms.MembersDrawer.Filter.no_members', {membershipFilter: t(membershipFilter.name)})} )} diff --git a/src/app/organisms/room/RoomTimeline.tsx b/src/app/organisms/room/RoomTimeline.tsx index 0c74de520a..989d504400 100644 --- a/src/app/organisms/room/RoomTimeline.tsx +++ b/src/app/organisms/room/RoomTimeline.tsx @@ -44,6 +44,7 @@ import { toRem, } from 'folds'; import { isKeyHotkey } from 'is-hotkey'; +import { useTranslation } from 'react-i18next'; import { decryptFile, eventWithShortcode, @@ -1254,6 +1255,8 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli }, }); + const { t } = useTranslation(); + const renderMatrixEvent = useMatrixEventRenderer<[number, EventTimelineSet, boolean]>({ renderRoomMessage: (mEventId, mEvent, item, timelineSet, collapse) => { const reactionRelations = getEventReactions(timelineSet, mEventId); @@ -1474,7 +1477,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli const senderName = getMemberDisplayName(room, senderId) || getMxIdLocalPart(senderId); const timeJSX = } diff --git a/src/app/organisms/room/common.jsx b/src/app/organisms/room/common.jsx index 28974a85d4..1eb1a52023 100644 --- a/src/app/organisms/room/common.jsx +++ b/src/app/organisms/room/common.jsx @@ -1,6 +1,7 @@ import React from 'react'; -import { twemojify } from '../../../util/twemojify'; +import { Trans } from 'react-i18next'; +import { twemojify, Twemojify } from '../../../util/twemojify'; import initMatrix from '../../../client/initMatrix'; import { getUsername, getUsernameOfRoomMember } from '../../../util/matrixUtil'; @@ -9,129 +10,167 @@ function getTimelineJSXMessages() { return { join(user) { return ( - <> - {twemojify(user)} - {' joined the room'} - + , user: }} + /> ); }, leave(user, reason) { - const reasonMsg = (typeof reason === 'string') ? `: ${reason}` : ''; return ( - <> - {twemojify(user)} - {' left the room'} - {twemojify(reasonMsg)} - + , + user: , + reason: , + }} + /> ); }, invite(inviter, user) { return ( - <> - {twemojify(inviter)} - {' invited '} - {twemojify(user)} - + , + user: , + inviter: , + }} + /> ); }, cancelInvite(inviter, user) { return ( - <> - {twemojify(inviter)} - {' canceled '} - {twemojify(user)} - {'\'s invite'} - + , + user: , + inviter: , + }} + /> ); }, rejectInvite(user) { return ( - <> - {twemojify(user)} - {' rejected the invitation'} - + , + user: , + }} + /> ); }, kick(actor, user, reason) { - const reasonMsg = (typeof reason === 'string') ? `: ${reason}` : ''; return ( - <> - {twemojify(actor)} - {' kicked '} - {twemojify(user)} - {twemojify(reasonMsg)} - + , + user: , + actor: , + reason: , + }} + /> ); }, ban(actor, user, reason) { - const reasonMsg = (typeof reason === 'string') ? `: ${reason}` : ''; return ( - <> - {twemojify(actor)} - {' banned '} - {twemojify(user)} - {twemojify(reasonMsg)} - + , + user: , + actor: , + reason: , + }} + /> ); }, unban(actor, user) { return ( - <> - {twemojify(actor)} - {' unbanned '} - {twemojify(user)} - + , + user: , + actor: , + }} + /> ); }, avatarSets(user) { return ( - <> - {twemojify(user)} - {' set a avatar'} - + , + user: , + }} + /> ); }, avatarChanged(user) { return ( - <> - {twemojify(user)} - {' changed their avatar'} - + , + user: , + }} + /> ); }, avatarRemoved(user) { return ( - <> - {twemojify(user)} - {' removed their avatar'} - + , + user: , + }} + /> ); }, nameSets(user, newName) { return ( - <> - {twemojify(user)} - {' set display name to '} - {twemojify(newName)} - + , + user: , + new_name: , + }} + /> ); }, nameChanged(user, newName) { return ( - <> - {twemojify(user)} - {' changed their display name to '} - {twemojify(newName)} - + , + user: , + new_name: , + }} + /> ); }, nameRemoved(user, lastName) { return ( - <> - {twemojify(user)} - {' removed their display name '} - {twemojify(lastName)} - + , + user: , + last_name: , + }} + /> ); }, }; @@ -216,7 +255,6 @@ function parseTimelineChange(mEvent) { } export { - getTimelineJSXMessages, getUsersActionJsx, parseTimelineChange, }; diff --git a/src/util/twemojify.jsx b/src/util/twemojify.jsx index ad203a916e..e46e7bc09e 100644 --- a/src/util/twemojify.jsx +++ b/src/util/twemojify.jsx @@ -1,6 +1,8 @@ /* eslint-disable import/prefer-default-export */ +import React from 'react'; import linkifyHtml from 'linkify-html'; import parse from 'html-react-parser'; +import PropTypes from 'prop-types'; import { sanitizeText } from './sanitize'; export const TWEMOJI_BASE_URL = 'https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/'; @@ -29,3 +31,19 @@ export function twemojify(text, opts, linkify = false, sanitize = true) { } return parse(content); } + +export function Twemojify({ text }) { + return ( + <> + {twemojify(text)} + + ); +} + +Twemojify.defaultProps = { + text: null, +}; + +Twemojify.propTypes = { + text: PropTypes.string, +}; \ No newline at end of file