import s from "./DialogMessage.module.css"
import React from "react"
import { NavLink } from "react-router-dom"
import {addNewMessageActionCreator, updateNewMessageBodyCreator} from "../../../redux/store"
const DialogMessage = (props) => {
let newMessageBody = props.dialogsPage.state.newMessageBody;
let onNewMessagechange = (event) => {
let body = event.target.value;
props.updateNewMessageBodyCreator(body)
}
let addMessage = () => {
props.sendMessage()
}
{props.dialogsPage.state.message.map((item, index) => (
<>
<div className={s.profile}>
<img key={`message-${index}`} src={ item.url} alt="img" />
<div className={s.text}>
<span><NavLink className={s.navlink} href="/profile">{ item.name}</NavLink > <a>{ item.time}</a></span>
<p key={`message-${index}`} > { item.message}</p>
</div>
</div>
<input onChange={onNewMessagechange} type="text" />
<button onClick={() => {addMessage()}} >add</button>
</>
))}
}
export default DialogMessage