123456789101112131415161718192021222324252627282930313233343536373839404142434445 |
- import TimeAgo from 'javascript-time-ago'
- import ru from 'javascript-time-ago/locale/ru.json'
- import React, { useState } from 'react';
- import { connect } from "react-redux";
- import { ChatItem } from "./chatItem";
- import { Box, List, Fab, ListItem } from '@mui/material'
- import history from '../components/history';
- import AddIcon from '@mui/icons-material/Add';
- TimeAgo.addLocale(ru)
- const ChatsList = ({ chats }) => {
- const [selected, setSelected] = useState(false)
- const handleListItemClick = (event, id) => {
- setSelected(id)
- }
- return (
- <Box sx={{ width: '100%', bgcolor: 'background.paper' }}>
- <List component="nav" aria-label="main mailbox folders" sx={{
- width: '100%',
- bgcolor: 'background.paper',
- position: 'relative',
- overflow: 'auto',
- maxHeight: '93vh',
- }}>
- {Object.entries(chats).map(([id, chat]) => <ChatItem key={id} id={id} chat={chat} selected={selected} handle={handleListItemClick} />)}
- <ListItem sx={{
- position: 'fixed',
- bottom: '10px',
- left: '18%',
- }}>
- <Fab color="primary" aria-label="add" onClick={() => history.push("/chat")}>
- <AddIcon />
- </Fab>
- </ListItem>
- </List>
- </Box >
- )
- }
- const ConnectChatsList = connect(state => ({ chats: state.chat }))(ChatsList)
- export default ConnectChatsList
|