1import React, { useState, useRef,useEffect,useContext } from "react";
2import {AiOutlineSend } from 'react-icons/ai';
3import { IconContext } from "react-icons";
4import { makeTimeStamp } from './../utils/utils';
5import { Toolbar } from './Toolbar';
6import { Chat, Message } from './../utils/types';
7import UserContext from "../utils/context";
8import useChats from "../utils/useChats";
9import { Loading } from './Loading';
10
11
12
13interface ChatsProps {
14
15}
16
17
18export const Chats: React.FC<ChatsProps> = ({}) => {
19
20
21const user = useContext(UserContext);
22
23
24const {room,messages,sendMessage} = useChats(user.user)
25
26
27const room_loaded = room.users>0 && user.user.username !== ""
28
29console.log("Text.tsx room ==== ",room)
30
31const [input, setInput] = useState({ message: "", time:makeTimeStamp() });
32const [error, setError] = useState({ name:"", message:"" });
33
34 const [size, setSize] = useState({x: window.innerWidth,y: window.innerHeight});
35 const updateSize = () =>setSize({x: window.innerWidth,y: window.innerHeight });
36
37 useEffect(() => {
38 window.onresize = updateSize
39 })
40
41 const handleChange = async (e: any) => {
42 const { value } = e.target;
43 setInput({
44 ...input,
45 [e.target.id]: value,
46 });
47 };
48
49 const handleSubmit = async (e: any) => {
50 e.preventDefault();
51
52 if (input.message !== "" && user.user.username !=="") {
53 const message = { message: input.message, time:input.time,user:user.user.username };
54
55 sendMessage(message)
56 setError({name:"",message:""})
57 }else{
58
59 setError({name:"username",message:"type something"})
60 }
61 };
62
63 const isError=()=>{
64 if(error.name === "") return false
65 return true}
66
67 if(!room_loaded){
68 return <Loading/>
69 }
70 return (
71 <div
72 style={{maxHeight:size.y}}
73 className="h-full overflow-x-hidden overflow-y-hiddenflex flex-col justify-between ">
74
75 <div className="fixed top-[0px] w-[100%] z-60">
76 <Toolbar room={room} updateUser={user.updateUser}/>
77 </div>
78 {}
79
80 <div
81 className="mt-10 w-full h-[55vh] md:h-[80vh] flex flex-col-reverse items-center overflow-y-scroll p-2 scroll-bar"
82 >
83 {messages &&
84 messages.map((chat: Chat, index: number) => {
85 return <Chatcard key={index} chat={chat} user={user.user}/>;
86 })}
87 </div>
88
89 <form
90 onSubmit={handleSubmit}
91 className="w-full p-1 fixed bottom-1 ">
92 <div className="flex-center">
93 <input
94 style={{borderColor:isError()?"red":""}}
95 className="w-[80%] md:w-[50%] p-2 m-1 border-black border-2 rounded-sm "
96 id="message"
97 placeholder="type.."
98 onChange={handleChange}
99 value={input.message}
100
101 autoComplete={"off"}
102 />
103 <button type="submit">
104 <IconContext.Provider value={{
105 size: "30px",
106 className: "mx-1",
107
108 }}>
109 <AiOutlineSend /></IconContext.Provider>
110 </button>
111 </div>
112
113 </form>
114 </div>
115 );
116};
117
118interface ChatCardProps {
119 chat: Chat;
120 user: { username: string; room: string;}
121
122}
123
124export const Chatcard: React.FC<ChatCardProps> = ({ chat,user }) => {
125
126const isMe = chat.newMessage.user === user.username
127
128 return (
129 <div className="flex-center w-full m-2">
130
131 <div
132 style={{backgroundColor:isMe?"purple":"white",color:isMe?"white":""}}
133 className="capitalize p-5 h-6 w-6 text-xl font-bold mr-1 border-2 border-slate-400
134 rounded-[50%] flex-center"> {chat?.newMessage.user[0]}</div>
135
136 <div className="w-[80%] h-full border border-slate-800 rounded-md
137 m-1 p-2 flex justify-between items-center">
138
139 <div className="max-w-[80%] h-fit break-words whitespace-normal text-mdfont-normal">
140 {chat?.newMessage.message}
141 </div>
142
143 <div className="w-fit font-medium h-full flex flex-col justify-end items-stretch text-sm ">
144 <div className="w-full ">{chat?.newMessage.user}</div>
145 <div className="w-full ">{chat?.newMessage.time}</div>
146 </div>
147 </div>
148
149 </div>
150 );
151};
