Twemojified all text

Signed-off-by: Ajay Bura <ajbura@gmail.com>

src/app/organisms/navigation/DrawerBreadcrumb.jsx

@@ -2,6 +2,8 @@ import React, { useState, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 import './DrawerBreadcrumb.scss';
 
+import { twemojify } from '../../../util/twemojify';
+
 import initMatrix from '../../../client/initMatrix';
 import cons from '../../../client/state/cons';
 import { selectSpace } from '../../../client/action/navigation';
@@ -101,7 +103,7 @@ function DrawerBreadcrumb({ spaceId }) {
                     className={index === spacePath.length - 1 ? 'breadcrumb__btn--selected' : ''}
                     onClick={() => selectSpace(id)}
                   >
-                    <Text variant="b2">{id === cons.tabs.HOME ? 'Home' : mx.getRoom(id).name}</Text>
+                    <Text variant="b2">{id === cons.tabs.HOME ? 'Home' : twemojify(mx.getRoom(id).name)}</Text>
                     { noti !== null && (
                       <NotificationBadge
                         alert={noti.highlight !== 0}

src/app/organisms/navigation/DrawerHeader.jsx

@@ -1,6 +1,8 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 
+import { twemojify } from '../../../util/twemojify';
+
 import initMatrix from '../../../client/initMatrix';
 import cons from '../../../client/state/cons';
 import {
@@ -30,7 +32,7 @@ function DrawerHeader({ selectedTab, spaceId }) {
   return (
     <Header>
       <TitleWrapper>
-        <Text variant="s1">{spaceName || tabName}</Text>
+        <Text variant="s1">{twemojify(spaceName) || tabName}</Text>
       </TitleWrapper>
       {spaceName && (
         <IconButton

src/app/organisms/profile-viewer/ProfileViewer.jsx

@@ -2,6 +2,8 @@ import React, { useState, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 import './ProfileViewer.scss';
 
+import { twemojify } from '../../../util/twemojify';
+
 import initMatrix from '../../../client/initMatrix';
 import cons from '../../../client/state/cons';
 import navigation from '../../../client/state/navigation';
@@ -262,8 +264,8 @@ function ProfileViewer() {
             size="large"
           />
           <div className="profile-viewer__user__info">
-            <Text variant="s1">{username}</Text>
-            <Text variant="b2">{userId}</Text>
+            <Text variant="s1">{twemojify(username)}</Text>
+            <Text variant="b2">{twemojify(userId)}</Text>
           </div>
           <div className="profile-viewer__user__role">
             <Text variant="b3">Role</Text>

src/app/organisms/room/RoomViewHeader.jsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+import { twemojify } from '../../../util/twemojify';
+
 import initMatrix from '../../../client/initMatrix';
 import { openRoomOptions } from '../../../client/action/navigation';
 import { togglePeopleDrawer } from '../../../client/action/settings';
@@ -27,8 +29,8 @@ function RoomViewHeader({ roomId }) {
     <Header>
       <Avatar imageSrc={avatarSrc} text={roomName} bgColor={colorMXID(roomId)} size="small" />
       <TitleWrapper>
-        <Text variant="h2">{roomName}</Text>
-        { typeof roomTopic !== 'undefined' && <p title={roomTopic} className="text text-b3">{roomTopic}</p>}
+        <Text variant="h2">{twemojify(roomName)}</Text>
+        { typeof roomTopic !== 'undefined' && <p title={roomTopic} className="text text-b3">{twemojify(roomTopic)}</p>}
       </TitleWrapper>
       <IconButton onClick={togglePeopleDrawer} tooltip="People" src={UserIC} />
       <IconButton

src/app/organisms/room/common.jsx

@@ -1,14 +1,20 @@
 import React from 'react';
 
+import parse from 'html-react-parser';
+import twemoji from 'twemoji';
+import { sanitizeText } from '../../../util/sanitize';
+
 import initMatrix from '../../../client/initMatrix';
 import { getUsername, getUsernameOfRoomMember } from '../../../util/matrixUtil';
 
+const getEmojifiedJsx = (username) => parse(twemoji.parse(sanitizeText(username)));
+
 function getTimelineJSXMessages() {
   return {
     join(user) {
       return (
         <>
-          <b>{user}</b>
+          <b>{getEmojifiedJsx(user)}</b>
           {' joined the room'}
         </>
       );
@@ -17,27 +23,27 @@ function getTimelineJSXMessages() {
       const reasonMsg = (typeof reason === 'string') ? `: ${reason}` : '';
       return (
         <>
-          <b>{user}</b>
+          <b>{getEmojifiedJsx(user)}</b>
           {' left the room'}
-          {reasonMsg}
+          {getEmojifiedJsx(reasonMsg)}
         </>
       );
     },
     invite(inviter, user) {
       return (
         <>
-          <b>{inviter}</b>
+          <b>{getEmojifiedJsx(inviter)}</b>
           {' invited '}
-          <b>{user}</b>
+          <b>{getEmojifiedJsx(user)}</b>
         </>
       );
     },
     cancelInvite(inviter, user) {
       return (
         <>
-          <b>{inviter}</b>
+          <b>{getEmojifiedJsx(inviter)}</b>
           {' canceled '}
-          <b>{user}</b>
+          <b>{getEmojifiedJsx(user)}</b>
           {'\'s invite'}
         </>
       );
@@ -45,7 +51,7 @@ function getTimelineJSXMessages() {
     rejectInvite(user) {
       return (
         <>
-          <b>{user}</b>
+          <b>{getEmojifiedJsx(user)}</b>
           {' rejected the invitation'}
         </>
       );
@@ -54,10 +60,10 @@ function getTimelineJSXMessages() {
       const reasonMsg = (typeof reason === 'string') ? `: ${reason}` : '';
       return (
         <>
-          <b>{actor}</b>
+          <b>{getEmojifiedJsx(actor)}</b>
           {' kicked '}
-          <b>{user}</b>
-          {reasonMsg}
+          <b>{getEmojifiedJsx(user)}</b>
+          {getEmojifiedJsx(reasonMsg)}
         </>
       );
     },
@@ -65,26 +71,26 @@ function getTimelineJSXMessages() {
       const reasonMsg = (typeof reason === 'string') ? `: ${reason}` : '';
       return (
         <>
-          <b>{actor}</b>
+          <b>{getEmojifiedJsx(actor)}</b>
           {' banned '}
-          <b>{user}</b>
-          {reasonMsg}
+          <b>{getEmojifiedJsx(user)}</b>
+          {getEmojifiedJsx(reasonMsg)}
         </>
       );
     },
     unban(actor, user) {
       return (
         <>
-          <b>{actor}</b>
+          <b>{getEmojifiedJsx(actor)}</b>
           {' unbanned '}
-          <b>{user}</b>
+          <b>{getEmojifiedJsx(user)}</b>
         </>
       );
     },
     avatarSets(user) {
       return (
         <>
-          <b>{user}</b>
+          <b>{getEmojifiedJsx(user)}</b>
           {' set the avatar'}
         </>
       );
@@ -92,7 +98,7 @@ function getTimelineJSXMessages() {
     avatarChanged(user) {
       return (
         <>
-          <b>{user}</b>
+          <b>{getEmojifiedJsx(user)}</b>
           {' changed the avatar'}
         </>
       );
@@ -100,7 +106,7 @@ function getTimelineJSXMessages() {
     avatarRemoved(user) {
       return (
         <>
-          <b>{user}</b>
+          <b>{getEmojifiedJsx(user)}</b>
           {' removed the avatar'}
         </>
       );
@@ -108,27 +114,27 @@ function getTimelineJSXMessages() {
     nameSets(user, newName) {
       return (
         <>
-          <b>{user}</b>
+          <b>{getEmojifiedJsx(user)}</b>
           {' set the display name to '}
-          <b>{newName}</b>
+          <b>{getEmojifiedJsx(newName)}</b>
         </>
       );
     },
     nameChanged(user, newName) {
       return (
         <>
-          <b>{user}</b>
+          <b>{getEmojifiedJsx(user)}</b>
           {' changed the display name to '}
-          <b>{newName}</b>
+          <b>{getEmojifiedJsx(newName)}</b>
         </>
       );
     },
     nameRemoved(user, lastName) {
       return (
         <>
-          <b>{user}</b>
+          <b>{getEmojifiedJsx(user)}</b>
           {' removed the display name '}
-          <b>{lastName}</b>
+          <b>{getEmojifiedJsx(lastName)}</b>
         </>
       );
     },
@@ -141,7 +147,7 @@ function getUsersActionJsx(roomId, userIds, actionStr) {
     if (room?.getMember(userId)) return getUsernameOfRoomMember(room.getMember(userId));
     return getUsername(userId);
   };
-  const getUserJSX = (userId) => <b>{getUserDisplayName(userId)}</b>;
+  const getUserJSX = (userId) => <b>{getEmojifiedJsx(getUserDisplayName(userId))}</b>;
   if (!Array.isArray(userIds)) return 'Idle';
   if (userIds.length === 0) return 'Idle';
   const MAX_VISIBLE_COUNT = 3;