create user literal Object

AlbertProfe · May 24, 2024 · 59ffde9 · 59ffde9
1 parent 29390c7
commit 59ffde9
Show file tree

Hide file tree

Showing 7 changed files with 114 additions and 25 deletions.
diff --git a/src/chat/ChatConversation/ChatConversation.jsx b/src/chat/ChatConversation/ChatConversation.jsx
@@ -3,15 +3,17 @@ import ChatInfo from "./ChatInfo";
 import ConversationFeed from "./ConversationFeed";
 //import WriteMessage from "./WriteMessage"
 
-export default function ChatConversation(user) {
+export default function ChatConversation({user}) {
+
+  //console.log("ChatConversation: ", user);
   return (
     <>
       <Segment clearing>
-        <ChatInfo userId={user.userId} />
+        <ChatInfo user={user} />
       </Segment>
 
       <Container>
-        <ConversationFeed userId={user.userId} />
+        <ConversationFeed user={user} />
       </Container>
 
       {/*  <Container>

diff --git a/src/chat/ChatConversation/ChatInfo.jsx b/src/chat/ChatConversation/ChatInfo.jsx
@@ -5,12 +5,12 @@ import {
 
 } from "semantic-ui-react";
 
-export default function ChatInfo(user) {
+export default function ChatInfo({user}) {
 
   return (
     <>
       <Header as="h3" floated="left">
-        {user.userId}
+        {user.name} {", "} {user.chatSelected}
       </Header>
       <Header as="h5" floated="right">
         <Label circular color={"green"} key={"green"}>

diff --git a/src/chat/ChatConversation/ConversationFeed.jsx b/src/chat/ChatConversation/ConversationFeed.jsx
@@ -4,7 +4,7 @@ import { Feed } from "semantic-ui-react";
 import DetailConversationFeed from "./DetailConversationFeed";
 import WriteMessage from "./WriteMessage";
 
-export default function ConversationFeed(user) {
+export default function ConversationFeed({user}) {
   //console.log(user.userId);
   //const [text, setText] = useState("");
   const [isConnected, message, send] = useContext(WebSocketContext);
@@ -15,7 +15,7 @@ export default function ConversationFeed(user) {
       case "send": {
         let data = {
           action: "conversation",
-          chatId: "party",
+          chatId: user.chatId,
           userId: user.userId,
           text: action.payload,
         };
@@ -26,7 +26,7 @@ export default function ConversationFeed(user) {
           {
             id: Date.now(),
             time: Date.now(),
-            chatId: "party",
+            chatId: user.chatId,
             userId: user.userId,
             text: action.payload,
           },

diff --git a/src/chat/ChatMenu/ChatMenu.jsx b/src/chat/ChatMenu/ChatMenu.jsx
@@ -2,8 +2,13 @@
 import {Container} from "semantic-ui-react"
 import ChatMenuHeader from "./ChatMenuHeader";
 import ContactsList from "./ContactsList";
+//import { WebSocketContext } from "../APICommunication/SocketProvider";
+//import { useContext } from "react";
 
 export default function ChatMenu() {
+    //const [isConnected, message] = useContext(WebSocketContext);
+
+
   return (
     <>
 

diff --git a/src/chat/ChatMenu/ChatMenuHeader.jsx b/src/chat/ChatMenu/ChatMenuHeader.jsx
@@ -3,6 +3,8 @@ import {Header,Container,Button} from "semantic-ui-react";
 
 
 export default function ChatMenuHeader() {
+
+
   return (
     <>
         <Header as="h3">Chats</Header>

diff --git a/src/chat/ChatMenu/ContactsList.jsx b/src/chat/ChatMenu/ContactsList.jsx
@@ -5,11 +5,16 @@ import {
 } from "semantic-ui-react"
 
 export default function ContactsList() {
+
+  const id1 = 1;
+  const id2 = 2;
+   const id3 = 33333;
+
   return (
     <>
       <List divided relaxed>
         {/* Dummy list of chats */}
-        <List.Item>
+        <List.Item id={id1} onClick={(e) => console.log(e, "id: ", id1)}>
           <Grid>
             <Grid.Column width={5}>
               <Image
@@ -24,6 +29,36 @@ export default function ContactsList() {
           </Grid>
         </List.Item>
 
+        <List.Item id={id2} onClick={(e) => console.log(e, "id: ", id2)}>
+          <Grid>
+            <Grid.Column width={5}>
+              <Image
+                src="https://react.semantic-ui.com/images/avatar/small/joe.jpg"
+                circular
+              />
+            </Grid.Column>
+            <Grid.Column width={8}>
+              <List.Header>Joe</List.Header>
+              <List.Description>Last seen...</List.Description>
+            </Grid.Column>
+          </Grid>
+        </List.Item>
+
+        <List.Item id={id3} onClick={(e) => console.log(e, "id: ", id3)}>
+          <Grid>
+            <Grid.Column width={5}>
+              <Image
+                src="https://react.semantic-ui.com/images/avatar/small/diana.jpg"
+                circular
+              />
+            </Grid.Column>
+            <Grid.Column width={8}>
+              <List.Header>Diana</List.Header>
+              <List.Description>Last seen...</List.Description>
+            </Grid.Column>
+          </Grid>
+        </List.Item>
+
         {/* Add more chat items here */}
       </List>
     </>

diff --git a/src/chat/ChatRoom.jsx b/src/chat/ChatRoom.jsx
@@ -1,4 +1,4 @@
-import { useContext, useState } from "react";
+import { useContext, useState, useEffect } from "react";
 import {
   GridRow,
   GridColumn,
@@ -11,37 +11,82 @@ import ChatConversation from "./ChatConversation/ChatConversation";
 import { WebSocketContext } from "../APICommunication/SocketProvider";
 
 export default function ChatRoom() {
-  const [isConnected, , send] = useContext(WebSocketContext);
-  const [isLogin, setIsLogin] = useState(false);
+  const [isConnected, message, send] = useContext(WebSocketContext);
+
+  const initUser = {
+    "name": "",
+    "chatId": "",
+    "userId": "",
+    "isLogin" : false,
+    "isConnected": false,
+    "chatSelected": "home",
+    "chats": [],
+    "connectionId": "" 
+  };
+
+  const [user, setUser] = useState(initUser);
+  //const [isLogin, setIsLogin] = useState(false);
   //const [chatId, setChatId] = useState("");
-  const [userId, setUserId] = useState("");
+  //const [userId, setUserId] = useState("");
+  console.log(user);
+  //console.log(message);
+
 
   const sendFakeLogin = (chatId, userId) => {
+
+    const loginOwnerUser = "owner#" & userId;
+
     const fakeDataLogin = {
       action: "login",
       chatId,
-      userId,
+      loginOwnerUser,
     };
 
-    if (isConnected) send(JSON.stringify(fakeDataLogin));
-    setIsLogin(true);
-    setUserId(userId); // Set userId state when logging in
+    if (isConnected) { 
+
+      send(JSON.stringify(fakeDataLogin));
+
+      setUser({
+        ...user,
+        userId: userId,
+        chatId: chatId,
+        isConnected: isConnected,
+
+      });
+   }
+
   };
 
   const fakeLogins = [
-    { chatId: "party", userId: "elliot" },
-    { chatId: "party", userId: "jenny" },
-    { chatId: "party", userId: "matthew" },
-    { chatId: "party", userId: "daniel" },
-    { chatId: "party", userId: "laura" },
-    { chatId: "party", userId: "helen" },
+    { chatId: "elliot", userId: "elliot" },
+    { chatId: "helen", userId: "helen" },
+    { chatId: "matthew", userId: "matthew" },
+    { chatId: "daniel", userId: "daniel" },
+    { chatId: "laura", userId: "laura" }
   ];
 
+  useEffect(() => {
+    if (message) {
+      var isLogged = false;
+      isLogged = JSON.parse(message).action === "logged in";
+      if (isLogged) {
+         setUser({
+           ...user,
+           connectionId: JSON.parse(message).connectionId,
+           chats: JSON.parse(message).dataOwner.chats,
+           name: JSON.parse(message).dataOwner.fullName,
+           avatar: JSON.parse(message).dataOwner.avatar,
+           isLogin: true,
+         });
+      }
+    }
+  }, [message]);
+
   return (
     <>
       {!isConnected ? (
         "Connecting ...."
-      ) : !isLogin ? (
+      ) : !user.isLogin ? (
         <Container textAlign="center" style={{ marginTop: "100px" }}>
           {fakeLogins.map((login, index) => (
             <Button
@@ -73,7 +118,7 @@ export default function ChatRoom() {
                 <ChatMenu />
               </GridColumn>
               <GridColumn width={12}>
-                <ChatConversation userId={userId} />
+                <ChatConversation user={user} />
               </GridColumn>
             </GridRow>
           </Grid>