From 6e9394ec7ae548f805c4f8f5a6499090ea0c3d0e Mon Sep 17 00:00:00 2001
From: Samuel Dionne-Riel <samuel@dionne-riel.com>
Date: Wed, 10 Nov 2021 03:00:25 -0500
Subject: [PATCH] Use Unicode aware character-wise slicing (#159)

---
 src/app/atoms/avatar/Avatar.jsx                      | 2 +-
 src/app/molecules/image-upload/ImageUpload.jsx       | 2 +-
 src/app/molecules/people-selector/PeopleSelector.jsx | 2 +-
 src/app/molecules/room-intro/RoomIntro.jsx           | 2 +-
 src/app/molecules/room-selector/RoomSelector.jsx     | 2 +-
 src/app/molecules/room-tile/RoomTile.jsx             | 2 +-
 src/app/organisms/navigation/SideBar.jsx             | 4 ++--
 src/app/organisms/profile-viewer/ProfileViewer.jsx   | 2 +-
 src/app/organisms/room/RoomViewContent.jsx           | 2 +-
 src/app/organisms/room/RoomViewHeader.jsx            | 2 +-
 10 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/app/atoms/avatar/Avatar.jsx b/src/app/atoms/avatar/Avatar.jsx
index 616cea6..950c9ba 100644
--- a/src/app/atoms/avatar/Avatar.jsx
+++ b/src/app/atoms/avatar/Avatar.jsx
@@ -29,7 +29,7 @@ function Avatar({
               {
                 iconSrc !== null
                   ? <RawIcon size={size} src={iconSrc} />
-                  : text !== null && <Text variant={textSize}>{text}</Text>
+                  : text !== null && <Text variant={textSize}>{[...text][0]}</Text>
               }
             </span>
           )
diff --git a/src/app/molecules/image-upload/ImageUpload.jsx b/src/app/molecules/image-upload/ImageUpload.jsx
index da79489..5beed72 100644
--- a/src/app/molecules/image-upload/ImageUpload.jsx
+++ b/src/app/molecules/image-upload/ImageUpload.jsx
@@ -48,7 +48,7 @@ function ImageUpload({
       >
         <Avatar
           imageSrc={imageSrc}
-          text={text.slice(0, 1)}
+          text={text}
           bgColor={bgColor}
           size="large"
         />
diff --git a/src/app/molecules/people-selector/PeopleSelector.jsx b/src/app/molecules/people-selector/PeopleSelector.jsx
index 5fff5c0..23c71f9 100644
--- a/src/app/molecules/people-selector/PeopleSelector.jsx
+++ b/src/app/molecules/people-selector/PeopleSelector.jsx
@@ -18,7 +18,7 @@ function PeopleSelector({
         onClick={onClick}
         type="button"
       >
-        <Avatar imageSrc={avatarSrc} text={name.slice(0, 1)} bgColor={color} size="extra-small" />
+        <Avatar imageSrc={avatarSrc} text={name} bgColor={color} size="extra-small" />
         <Text className="people-selector__name" variant="b1">{name}</Text>
         {peopleRole !== null && <Text className="people-selector__role" variant="b3">{peopleRole}</Text>}
       </button>
diff --git a/src/app/molecules/room-intro/RoomIntro.jsx b/src/app/molecules/room-intro/RoomIntro.jsx
index e9ae6f5..315d561 100644
--- a/src/app/molecules/room-intro/RoomIntro.jsx
+++ b/src/app/molecules/room-intro/RoomIntro.jsx
@@ -17,7 +17,7 @@ function RoomIntro({
 }) {
   return (
     <div className="room-intro">
-      <Avatar imageSrc={avatarSrc} text={name.slice(0, 1)} bgColor={colorMXID(roomId)} size="large" />
+      <Avatar imageSrc={avatarSrc} text={name} bgColor={colorMXID(roomId)} size="large" />
       <div className="room-intro__content">
         <Text className="room-intro__name" variant="h1">{heading}</Text>
         <Text className="room-intro__desc" variant="b1">{linkifyContent(desc)}</Text>
diff --git a/src/app/molecules/room-selector/RoomSelector.jsx b/src/app/molecules/room-selector/RoomSelector.jsx
index 47201a6..3367746 100644
--- a/src/app/molecules/room-selector/RoomSelector.jsx
+++ b/src/app/molecules/room-selector/RoomSelector.jsx
@@ -51,7 +51,7 @@ function RoomSelector({
       content={(
         <>
           <Avatar
-            text={name.slice(0, 1)}
+            text={name}
             bgColor={colorMXID(roomId)}
             imageSrc={imageSrc}
             iconSrc={iconSrc}
diff --git a/src/app/molecules/room-tile/RoomTile.jsx b/src/app/molecules/room-tile/RoomTile.jsx
index 7a5e20b..059d6d3 100644
--- a/src/app/molecules/room-tile/RoomTile.jsx
+++ b/src/app/molecules/room-tile/RoomTile.jsx
@@ -22,7 +22,7 @@ function RoomTile({
         <Avatar
           imageSrc={avatarSrc}
           bgColor={colorMXID(id)}
-          text={name.slice(0, 1)}
+          text={name}
         />
       </div>
       <div className="room-tile__content">
diff --git a/src/app/organisms/navigation/SideBar.jsx b/src/app/organisms/navigation/SideBar.jsx
index 35fe8f2..b93a6b5 100644
--- a/src/app/organisms/navigation/SideBar.jsx
+++ b/src/app/organisms/navigation/SideBar.jsx
@@ -70,7 +70,7 @@ function ProfileAvatarMenu() {
           tooltip={profile.displayName}
           imageSrc={profile.avatarUrl !== null ? mx.mxcUrlToHttp(profile.avatarUrl, 42, 42, 'crop') : null}
           bgColor={colorMXID(mx.getUserId())}
-          text={profile.displayName.slice(0, 1)}
+          text={profile.displayName}
         />
       )}
     />
@@ -190,7 +190,7 @@ function SideBar() {
                       tooltip={room.name}
                       bgColor={colorMXID(room.roomId)}
                       imageSrc={room.getAvatarUrl(initMatrix.matrixClient.baseUrl, 42, 42, 'crop') || null}
-                      text={room.name.slice(0, 1)}
+                      text={room.name}
                       isUnread={notifications.hasNoti(sRoomId)}
                       notificationCount={abbreviateNumber(notifications.getTotalNoti(sRoomId))}
                       isAlert={notifications.getHighlightNoti(sRoomId) !== 0}
diff --git a/src/app/organisms/profile-viewer/ProfileViewer.jsx b/src/app/organisms/profile-viewer/ProfileViewer.jsx
index 191678a..590c6da 100644
--- a/src/app/organisms/profile-viewer/ProfileViewer.jsx
+++ b/src/app/organisms/profile-viewer/ProfileViewer.jsx
@@ -257,7 +257,7 @@ function ProfileViewer() {
         <div className="profile-viewer__user">
           <Avatar
             imageSrc={!avatarMxc ? null : mx.mxcUrlToHttp(avatarMxc, 80, 80, 'crop')}
-            text={username.slice(0, 1)}
+            text={username}
             bgColor={colorMXID(userId)}
             size="large"
           />
diff --git a/src/app/organisms/room/RoomViewContent.jsx b/src/app/organisms/room/RoomViewContent.jsx
index 170d25d..60bbca3 100644
--- a/src/app/organisms/room/RoomViewContent.jsx
+++ b/src/app/organisms/room/RoomViewContent.jsx
@@ -356,7 +356,7 @@ function RoomViewContent({
       <button type="button" onClick={() => openProfileViewer(mEvent.sender.userId, roomId)}>
         <Avatar
           imageSrc={mEvent.sender.getAvatarUrl(initMatrix.matrixClient.baseUrl, 36, 36, 'crop')}
-          text={getUsernameOfRoomMember(mEvent.sender).slice(0, 1)}
+          text={getUsernameOfRoomMember(mEvent.sender)}
           bgColor={senderMXIDColor}
           size="small"
         />
diff --git a/src/app/organisms/room/RoomViewHeader.jsx b/src/app/organisms/room/RoomViewHeader.jsx
index e51cbd3..30072f6 100644
--- a/src/app/organisms/room/RoomViewHeader.jsx
+++ b/src/app/organisms/room/RoomViewHeader.jsx
@@ -24,7 +24,7 @@ function RoomViewHeader({ roomId }) {
 
   return (
     <Header>
-      <Avatar imageSrc={avatarSrc} text={roomName.slice(0, 1)} bgColor={colorMXID(roomId)} size="small" />
+      <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>}