From 6cc184ea6f5e74275fc057d2474adfd524203484 Mon Sep 17 00:00:00 2001
From: Gabe Kangas <gabek@real-ity.com>
Date: Sun, 21 Aug 2022 15:50:22 -0700
Subject: [PATCH] Add standalone join message with user badge

---
 .../chat/ChatContainer/ChatContainer.tsx      | 11 +++--
 .../ChatJoinMessage.module.scss               |  4 ++
 .../chat/ChatJoinMessage/ChatJoinMessage.tsx  | 27 ++++++++++++
 .../ChatUserBadge.module.scss                 |  0
 .../ChatUserBadge.tsx                         |  0
 .../chat/ChatUserMessage/ChatUserMessage.tsx  |  2 +-
 web/stories/ChatJoinMessage.stories.tsx       | 42 +++++++++++++++++++
 web/stories/ChatUserBadge.stories.tsx         |  2 +-
 8 files changed, 82 insertions(+), 6 deletions(-)
 create mode 100644 web/components/chat/ChatJoinMessage/ChatJoinMessage.module.scss
 create mode 100644 web/components/chat/ChatJoinMessage/ChatJoinMessage.tsx
 rename web/components/chat/{ChatUserMessage => ChatUserBadge}/ChatUserBadge.module.scss (100%)
 rename web/components/chat/{ChatUserMessage => ChatUserBadge}/ChatUserBadge.tsx (100%)
 create mode 100644 web/stories/ChatJoinMessage.stories.tsx

diff --git a/web/components/chat/ChatContainer/ChatContainer.tsx b/web/components/chat/ChatContainer/ChatContainer.tsx
index 1326825de..99e865026 100644
--- a/web/components/chat/ChatContainer/ChatContainer.tsx
+++ b/web/components/chat/ChatContainer/ChatContainer.tsx
@@ -11,8 +11,9 @@ import s from './ChatContainer.module.scss';
 import { ChatMessage } from '../../../interfaces/chat-message.model';
 import { ChatTextField, ChatUserMessage } from '..';
 import ChatModeratorNotification from '../ChatModeratorNotification/ChatModeratorNotification';
-import ChatActionMessage from '../ChatAction/ChatActionMessage';
+// import ChatActionMessage from '../ChatAction/ChatActionMessage';
 import ChatSystemMessage from '../ChatSystemMessage/ChatSystemMessage';
+import ChatJoinMessage from '../ChatJoinMessage/ChatJoinMessage';
 
 interface Props {
   messages: ChatMessage[];
@@ -53,10 +54,12 @@ export default function ChatContainer(props: Props) {
   const getUserJoinedMessage = (message: ChatMessage) => {
     const { user } = message;
     const { displayName, displayColor } = user;
-    const color = `var(--theme-user-colors-${displayColor})`;
+    const isAuthorModerator = checkIsModerator(message);
     return (
-      <ChatActionMessage
-        body={`<span style="color: ${color}">${displayName}</span> joined the chat.`}
+      <ChatJoinMessage
+        displayName={displayName}
+        userColor={displayColor}
+        isAuthorModerator={isAuthorModerator}
       />
     );
   };
diff --git a/web/components/chat/ChatJoinMessage/ChatJoinMessage.module.scss b/web/components/chat/ChatJoinMessage/ChatJoinMessage.module.scss
new file mode 100644
index 000000000..2024207fd
--- /dev/null
+++ b/web/components/chat/ChatJoinMessage/ChatJoinMessage.module.scss
@@ -0,0 +1,4 @@
+.join {
+  margin: 5px;
+  text-align: center;
+}
diff --git a/web/components/chat/ChatJoinMessage/ChatJoinMessage.tsx b/web/components/chat/ChatJoinMessage/ChatJoinMessage.tsx
new file mode 100644
index 000000000..894024b50
--- /dev/null
+++ b/web/components/chat/ChatJoinMessage/ChatJoinMessage.tsx
@@ -0,0 +1,27 @@
+import s from './ChatJoinMessage.module.scss';
+import ChatUserBadge from '../ChatUserBadge/ChatUserBadge';
+
+interface Props {
+  isAuthorModerator: boolean;
+  userColor: number;
+  displayName: string;
+}
+
+export default function ChatJoinMessage(props: Props) {
+  const { isAuthorModerator, userColor, displayName } = props;
+  const color = `var(--theme-user-colors-${userColor})`;
+
+  return (
+    <div className={s.join}>
+      <span style={{ color }}>
+        {displayName}
+        {isAuthorModerator && (
+          <span>
+            <ChatUserBadge badge="mod" userColor={userColor} />
+          </span>
+        )}
+      </span>{' '}
+      joined the chat.
+    </div>
+  );
+}
diff --git a/web/components/chat/ChatUserMessage/ChatUserBadge.module.scss b/web/components/chat/ChatUserBadge/ChatUserBadge.module.scss
similarity index 100%
rename from web/components/chat/ChatUserMessage/ChatUserBadge.module.scss
rename to web/components/chat/ChatUserBadge/ChatUserBadge.module.scss
diff --git a/web/components/chat/ChatUserMessage/ChatUserBadge.tsx b/web/components/chat/ChatUserBadge/ChatUserBadge.tsx
similarity index 100%
rename from web/components/chat/ChatUserMessage/ChatUserBadge.tsx
rename to web/components/chat/ChatUserBadge/ChatUserBadge.tsx
diff --git a/web/components/chat/ChatUserMessage/ChatUserMessage.tsx b/web/components/chat/ChatUserMessage/ChatUserMessage.tsx
index 0eff9c717..a1438f078 100644
--- a/web/components/chat/ChatUserMessage/ChatUserMessage.tsx
+++ b/web/components/chat/ChatUserMessage/ChatUserMessage.tsx
@@ -7,7 +7,7 @@ import s from './ChatUserMessage.module.scss';
 import { formatTimestamp } from './messageFmt';
 import { ChatMessage } from '../../../interfaces/chat-message.model';
 import ChatModerationActionMenu from '../ChatModerationActionMenu/ChatModerationActionMenu';
-import ChatUserBadge from './ChatUserBadge';
+import ChatUserBadge from '../ChatUserBadge/ChatUserBadge';
 
 interface Props {
   message: ChatMessage;
diff --git a/web/stories/ChatJoinMessage.stories.tsx b/web/stories/ChatJoinMessage.stories.tsx
new file mode 100644
index 000000000..bdf8772fa
--- /dev/null
+++ b/web/stories/ChatJoinMessage.stories.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import ChatJoinMessage from '../components/chat/ChatJoinMessage/ChatJoinMessage';
+import Mock from './assets/mocks/chatmessage-action.png';
+
+export default {
+  title: 'owncast/Chat/Messages/Chat Join',
+  component: ChatJoinMessage,
+  argTypes: {
+    userColor: {
+      options: ['0', '1', '2', '3', '4', '5', '6', '7'],
+      control: { type: 'select' },
+    },
+  },
+  parameters: {
+    design: {
+      type: 'image',
+      url: Mock,
+    },
+    docs: {
+      description: {
+        component: `This is the message design an action takes place, such as a join or a name change.`,
+      },
+    },
+  },
+} as ComponentMeta<typeof ChatJoinMessage>;
+
+const Template: ComponentStory<typeof ChatJoinMessage> = args => <ChatJoinMessage {...args} />;
+
+export const Regular = Template.bind({});
+Regular.args = {
+  displayName: 'RandomChatter',
+  isAuthorModerator: false,
+  userColor: 3,
+};
+
+export const Moderator = Template.bind({});
+Moderator.args = {
+  displayName: 'RandomChatter',
+  isAuthorModerator: true,
+  userColor: 2,
+};
diff --git a/web/stories/ChatUserBadge.stories.tsx b/web/stories/ChatUserBadge.stories.tsx
index 8dc17b218..0774542f5 100644
--- a/web/stories/ChatUserBadge.stories.tsx
+++ b/web/stories/ChatUserBadge.stories.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
-import ChatUserBadge from '../components/chat/ChatUserMessage/ChatUserBadge';
+import ChatUserBadge from '../components/chat/ChatUserBadge/ChatUserBadge';
 
 export default {
   title: 'owncast/Chat/Messages/User Flag',