12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394 |
- import { makeStyles } from '@material-ui/core'
- import { useState,useMemo } from 'react'
- import { useSelector,useDispatch } from 'react-redux'
- import ForwardSearch from './ForwardSearch'
- import ForwardList from './ForwardList'
- import { asyncGetChatById } from '../../../../../redux/chat/operations'
- import { actionRightIsOpen,actionScrollChat,actionOpenPinned } from '../../../../../redux/control/action'
- import { getStateMemo } from '../../../../../redux/chats/selector'
- import { getSort } from '../../../../../redux/authorization/selector'
- import { TMessage } from '../../../../../typescript/redux/messages/types'
- import { sortByRecent,timeStampFilter } from '../../../../../helpers'
- const useStyles = makeStyles({
- overlay: {
- position: 'fixed',
- top: 0,
- left: 0,
- width: '100vw',
- height: '100vh',
- zIndex: 100,
- backgroundColor: 'rgba(104, 105, 104, 0.6)',
- overflowY: 'hidden',
- },
- container: {
- backgroundColor: 'white',
- width: '22vw',
- position: 'absolute',
- top: '15vh',
- height:'70vh',
- left: '39vw',
- display: 'flex',
- flexWrap: 'wrap',
- alignItems: 'start',
- alignContent:'start',
- borderRadius:10,
- }
- })
- interface IForwardSearchList {
- setModalForward: React.Dispatch<React.SetStateAction<boolean>>,
- setIsForward: React.Dispatch<React.SetStateAction<TMessage | undefined>>,
- companionId: string,
- }
- const ForwardSearchList = ({setModalForward,setIsForward,companionId}:IForwardSearchList) => {
- const classes = useStyles()
- const dispatch = useDispatch()
- const sort = useSelector(getSort)
- const { total,chats } = useSelector(getStateMemo)
- const [value, setValue] = useState<string>('')
- const [date, setDate] = useState<any>('');
- const handleSearch = (e: React.ChangeEvent<HTMLInputElement>): void => setValue(e.target.value)
- const handleCloseForwardModal = (e: any) => {
- const id = e.target.id
- if (id === 'overlay' || id === 'cancel') {
- setModalForward(false)
- setIsForward(undefined)
- }
- }
- const handleForwardTo = (newCompanionId: string) => {
- setModalForward(false)
- dispatch(actionRightIsOpen(''))
- dispatch(actionOpenPinned(false))
- dispatch(asyncGetChatById(newCompanionId))
- setIsForward((prevState) =>
- prevState ? { ...prevState, companionIdForwardToAndFrom: newCompanionId } : prevState)
- if (companionId !== newCompanionId) setTimeout(() => dispatch(actionScrollChat(true)), 500)
- }
- const filteredAndSorted = useMemo(() => {
- return sortByRecent(chats,sort).filter((el) => {
- const credentials = el.name + ' ' + el.lastName
- if (!date) {
- return credentials.toLowerCase().includes(value.toLowerCase())
- } else if (credentials.toLowerCase().includes(value.toLowerCase())
- &&timeStampFilter(date) === timeStampFilter(el.lastMessageCreatedAt ?
- el.lastMessageCreatedAt : el.createdAt)) {
- return el
- } else return undefined
- })
- }, [chats, date, value, sort])
- return (
- <div onClick={handleCloseForwardModal} className={classes.overlay} id='overlay'>
- <div className={classes.container}>
- <ForwardSearch handleSearch={handleSearch} value={value} total={total}
- sort={sort} date={date} setDate={setDate}/>
- <ForwardList value={value} date={date} filteredAndSorted={filteredAndSorted} handleForwardTo={handleForwardTo}/>
- </div>
- </div>
- )
- }
- export default ForwardSearchList
|