From 2f6e675f5ecb9209bb8a04b232ff0c5f804b951c Mon Sep 17 00:00:00 2001
From: Nikita Malinovsky <66699290+nikitamalinov@users.noreply.github.com>
Date: Wed, 4 Oct 2023 16:23:44 -0700
Subject: [PATCH] initial commit

---
 src/ConversationsApp.js  | 17 ++++++---
 src/ConversationsList.js | 74 +++++++++++++++++++++-------------------
 2 files changed, 52 insertions(+), 39 deletions(-)

diff --git a/src/ConversationsApp.js b/src/ConversationsApp.js
index 0fef670..0003546 100644
--- a/src/ConversationsApp.js
+++ b/src/ConversationsApp.js
@@ -68,7 +68,8 @@ class ConversationsApp extends React.Component {
 
   getToken = () => {
     // Paste your unique Chat token function
-    const myToken = "<Your token here>";
+    const myToken =
+      "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCIsImN0eSI6InR3aWxpby1mcGE7dj0xIn0.eyJqdGkiOiJTSzZkNWFkM2Q1ZTgzOGNiZjNlNTc2MWFjYTkyYjM2ZjJmLTE2OTY0MDI2OTMiLCJncmFudHMiOnsiaWRlbnRpdHkiOiJuaWtpdGFAc3R1ZGVudHdpc2UuaW8iLCJjaGF0Ijp7InNlcnZpY2Vfc2lkIjoiSVMyMDM5YmQxMGNiYjU0NWMxYWVhMjkwNjNjYTU0NWI5NCJ9fSwiaWF0IjoxNjk2NDAyNjkzLCJleHAiOjE2OTY0MDYyOTMsImlzcyI6IlNLNmQ1YWQzZDVlODM4Y2JmM2U1NzYxYWNhOTJiMzZmMmYiLCJzdWIiOiJBQ2NhNmZkZmFhMjgzZDNiZTJiMThiMmI0MGYzZmY4NmNmIn0.pUiX3CqGpyhF_5uj3RWbuNrTL-EDMQgWW4orjqR70rs";
     this.setState({ token: myToken }, this.initConversations);
   };
 
@@ -109,11 +110,15 @@ class ConversationsApp extends React.Component {
         });
     });
     this.conversationsClient.on("conversationJoined", (conversation) => {
-      this.setState({ conversations: [...this.state.conversations, conversation] });
+      this.setState({
+        conversations: [...this.state.conversations, conversation]
+      });
     });
     this.conversationsClient.on("conversationLeft", (thisConversation) => {
       this.setState({
-        conversations: [...this.state.conversations.filter((it) => it !== thisConversation)]
+        conversations: [
+          ...this.state.conversations.filter((it) => it !== thisConversation)
+        ]
       });
     });
   };
@@ -124,6 +129,9 @@ class ConversationsApp extends React.Component {
       (it) => it.sid === selectedConversationSid
     );
 
+    console.log(conversations);
+    console.log(selectedConversationSid);
+
     let conversationContent;
     if (selectedConversation) {
       conversationContent = (
@@ -166,7 +174,8 @@ class ConversationsApp extends React.Component {
                 <HeaderItem>
                   <Text strong style={{ color: "white" }}>
                     {selectedConversation &&
-                      (selectedConversation.friendlyName || selectedConversation.sid)}
+                      (selectedConversation.friendlyName ||
+                        selectedConversation.sid)}
                   </Text>
                 </HeaderItem>
                 <HeaderItem style={{ float: "right", marginLeft: "auto" }}>
diff --git a/src/ConversationsList.js b/src/ConversationsList.js
index d2ce427..c03f902 100644
--- a/src/ConversationsList.js
+++ b/src/ConversationsList.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React from "react";
 import { List, Typography } from "antd";
 
 import conversationsListStyles from "./assets/ConversationsList.module.css";
@@ -9,39 +9,43 @@ import { joinClassNames } from "./utils/class-name";
 const { Text } = Typography;
 
 export class ConversationsList extends React.Component {
-    render() {
-        const { conversations, selectedConversationSid, onConversationClick } = this.props;
+  render() {
+    const {
+      conversations,
+      selectedConversationSid,
+      onConversationClick
+    } = this.props;
+    console.log(conversations);
+    return (
+      <List
+        header={"Open Conversations"}
+        className={conversationsListStyles["conversations-list"]}
+        bordered={true}
+        dataSource={conversations}
+        renderItem={(item) => {
+          const activeChannel = item.sid === selectedConversationSid;
+          const conversationItemClassName = joinClassNames([
+            conversationsItemStyles["conversation-item"],
+            activeChannel &&
+              conversationsItemStyles["conversation-item--active"]
+          ]);
 
-        return (
-            <List
-                header={"Open Conversations"}
-                className={conversationsListStyles['conversations-list']}
-                bordered={true}
-                loading={conversations.length === 0}
-                dataSource={conversations}
-                renderItem={item => {
-                    const activeChannel = item.sid === selectedConversationSid;
-                    const conversationItemClassName = joinClassNames([
-                        conversationsItemStyles['conversation-item'],
-                        activeChannel && conversationsItemStyles['conversation-item--active']
-                    ]);
-
-                    return (
-                        <List.Item
-                            key={item.sid}
-                            onClick={() => onConversationClick(item)}
-                            className={conversationItemClassName}
-                        >
-                            <Text
-                                strong
-                                className={conversationsItemStyles['conversation-item-text']}
-                            >
-                                {item.friendlyName || item.sid}
-                            </Text>
-                        </List.Item>
-                    )
-                }}
-            />
-        )
-    }
+          return (
+            <List.Item
+              key={item.sid}
+              onClick={() => onConversationClick(item)}
+              className={conversationItemClassName}
+            >
+              <Text
+                strong
+                className={conversationsItemStyles["conversation-item-text"]}
+              >
+                {item.friendlyName || item.sid}
+              </Text>
+            </List.Item>
+          );
+        }}
+      />
+    );
+  }
 }