Chat/src/components/ChatList/ChatList.jsx

import { List } from "@mui/material"
import { useEffect, useState } from "react"
import { connect } from "react-redux"
import { history } from "../../App"
import ChatListItem from '../ChatListItem/ChatListItem';
import { ChatListWrapper } from "./ChatList.style"

import SimpleBar from 'simplebar-react';
import 'simplebar/dist/simplebar.min.css';

const ChatList = ({chats}) => {
	const [, route, histId] = history.location.pathname.split('/');
	const [stateId, setStateId] = useState(histId);
	
	useEffect(() => {
		setStateId(histId)
	},[histId])

	return (
		
		<ChatListWrapper>
			<SimpleBar  style={{ maxHeight: '100%'}}>
				<List sx={{p: '0'}}>
					{Object.values(chats).map((item, index) => <ChatListItem key={item._id} isActive={stateId === item._id} chat={item} handleSetId={setStateId} />)}
				</List>
			</SimpleBar>
		</ChatListWrapper>
		
	)
}

export default connect(state => ({chats: state.chats || []}))(ChatList);