123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990 |
- import React, { useEffect, useState } from "react";
- import { connect } from "react-redux";
- import { actionFullChatList, actionChatsCount } from "../actions";
- import { backURL } from "../constants";
- import { Link } from "react-router-dom";
- import { AvatarStub, color } from "../components/AvatarStub";
- const ChatsAside = ({ chats = [], auth, ownerChats }) => {
- const [chatBlock, setChatBlock] = useState(0);
- useEffect(() => {
- const userId = auth.payload?.sub?.id;
- if (userId) {
- ownerChats(userId);
- }
- return function cleanUp() {};
- }, [chatBlock]);
- return (
- <>
- <div className="chatsContainer" key={Math.random}>
- <div>
- {chats.map((chat, _id) => (
- <>
- <Link
- className="chatsList"
- to={`/main/${chat._id}`}
- key={Math.random}
- >
- <div className="chatsCard" key={Math.random()}>
- {chat.avatar?.url ? (
- <img
- key={Math.random()}
- className="smallForChat"
- src={backURL + chat.avatar?.url}
- />
- ) : (
- <AvatarStub
- login={
- chat.title !== null
- ? chat.title
- : "chat without title"
- }
- color={color()}
- key={Math.random()}
- />
- )}
- <div className="chatLi" key={Math.random()}>
- <h5
- className="chatTitle"
- key={Math.random()}
- >
- {chat.title !== null
- ? chat.title
- : "chat without title"}
- </h5>
- <p key={Math.random()}>
- {chat.lastMessage?.text.length >
- parseInt("30")
- ? chat.lastMessage?.text.substr(
- 0,
- 30
- ) + "..."
- : chat.lastMessage?.text.substr(
- 0,
- 30
- )}
- </p>
- </div>
- </div>
- </Link>
- </>
- ))}
- <Link className="newChatButton" to="/newchat" key={Math.random}>
- +
- </Link>
- </div>
- </div>
- </>
- );
- };
- export const CChatsAside = connect(
- (state) => ({
- auth: state.auth,
- chats: Object.values(state.chats).filter((el) => el._id),
- }),
- { ownerChats: actionFullChatList }
- )(ChatsAside);
|