From 07c384aa0dcbabc8ebb54251cd669a9942ccf80e Mon Sep 17 00:00:00 2001
From: Audric Ackermann <audric@loki.network>
Date: Fri, 30 Oct 2020 10:24:53 +1100
Subject: [PATCH] render GroupNotification messages

---
 stylesheets/_modules.scss                     |  4 +++
 stylesheets/_session.scss                     |  2 --
 .../conversation/GroupNotification.tsx        |  3 +-
 .../SessionConversationMessagesList.tsx       | 33 ++++++++++---------
 ts/state/ducks/conversations.ts               |  6 ++--
 5 files changed, 26 insertions(+), 22 deletions(-)

diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss
index 862fb984e..b988588f1 100644
--- a/stylesheets/_modules.scss
+++ b/stylesheets/_modules.scss
@@ -937,6 +937,10 @@
   .module-contact-name__profile-name {
     text-align: center;
   }
+
+  .module-message__author__profile-name {
+    margin-inline-end: $session-margin-xs;
+  }
 }
 
 .module-notification--with-click-handler {
diff --git a/stylesheets/_session.scss b/stylesheets/_session.scss
index 85d522e5c..06fec34e8 100644
--- a/stylesheets/_session.scss
+++ b/stylesheets/_session.scss
@@ -766,8 +766,6 @@ label {
     }
   }
 
-
-
   .react-contexify__item:not(.react-contexify__item--disabled):hover
     > .react-contexify__item__content {
     @include themify($themes) {
diff --git a/ts/components/conversation/GroupNotification.tsx b/ts/components/conversation/GroupNotification.tsx
index c01d774a2..2a7e7b4a8 100644
--- a/ts/components/conversation/GroupNotification.tsx
+++ b/ts/components/conversation/GroupNotification.tsx
@@ -21,7 +21,6 @@ interface Change {
 
 interface Props {
   changes: Array<Change>;
-  i18n: LocalizerType;
 }
 
 // This class is used to display group updates in the conversation view.
@@ -29,7 +28,7 @@ interface Props {
 export class GroupNotification extends React.Component<Props> {
   public renderChange(change: Change) {
     const { isMe, contacts, type, newName } = change;
-    const { i18n } = this.props;
+    const { i18n } = window;
 
     const people = compact(
       flatten(
diff --git a/ts/components/session/conversation/SessionConversationMessagesList.tsx b/ts/components/session/conversation/SessionConversationMessagesList.tsx
index 6a8df11a2..61be6bea3 100644
--- a/ts/components/session/conversation/SessionConversationMessagesList.tsx
+++ b/ts/components/session/conversation/SessionConversationMessagesList.tsx
@@ -10,6 +10,7 @@ import _ from 'lodash';
 import { ConversationModel } from '../../../../js/models/conversations';
 import { contextMenu } from 'react-contexify';
 import { AttachmentType } from '../../../types/Attachment';
+import { GroupNotification } from '../../conversation/GroupNotification';
 
 interface State {
   isScrolledToBottom: boolean;
@@ -119,25 +120,25 @@ export class SessionConversationMessagesList extends React.Component<
           const attachmentProps = message.propsForAttachment;
           const groupNotificationProps = message.propsForGroupNotification;
 
-          let item;
+          if (groupNotificationProps) {
+            return <GroupNotification {...groupNotificationProps} />;
+          }
+
+          if (resetSessionProps) {
+            return <ResetSessionNotification {...resetSessionProps} />;
+          }
+
+          if (timerProps) {
+            return <TimerNotification {...timerProps} />;
+          }
+
           // firstMessageOfSeries tells us to render the avatar only for the first message
           // in a series of messages from the same user
-          item = messageProps
-            ? this.renderMessage(
-                messageProps,
-                message.firstMessageOfSeries,
-                multiSelectMode
-              )
-            : item;
-
-          item = timerProps ? <TimerNotification {...timerProps} /> : item;
-          item = resetSessionProps ? (
-            <ResetSessionNotification {...resetSessionProps} />
-          ) : (
-            item
+          return this.renderMessage(
+            messageProps,
+            message.firstMessageOfSeries,
+            multiSelectMode
           );
-
-          return item;
         })}
       </>
     );
diff --git a/ts/state/ducks/conversations.ts b/ts/state/ducks/conversations.ts
index d96652de1..6925f1a9c 100644
--- a/ts/state/ducks/conversations.ts
+++ b/ts/state/ducks/conversations.ts
@@ -177,7 +177,10 @@ function removeAllConversations(): RemoveAllConversationsActionType {
   };
 }
 
-function loadMoreMessages(id: string, currentMessageCount: number): LoadMoreMessagesActionType {
+function loadMoreMessages(
+  id: string,
+  currentMessageCount: number
+): LoadMoreMessagesActionType {
   return {
     type: 'LOAD_MORE_MESSAGES_ACTION_TYPE',
     payload: {
@@ -227,7 +230,6 @@ function openConversationExternal(
   };
 }
 
-
 // Reducer
 
 function getEmptyState(): ConversationsStateType {