import React , { useState , useEffect } from 'react' ; import useReactRouter from 'use-react-router' ; import { useSelector , useStore } from 'react-redux' ; import { loadSessionList , readSession } from '@app/redux/actions/session' ; import { getSessionListById } from '@app/redux/reducers/session' ; import Shell from '@app/components/shell' ; import Meta from '@app/components/meta' ; import MessageList from './components/message-list' ; import Editor from '@app/components/editor-message' ; import SingleColumns from '@app/layout/single-columns' ; import './styles/index.scss' ; export default Shell ( function ( { setNotFound } ) { const { match } = useReactRouter ( ) ; const { id } = match . params || { } ; const [ session , setSession ] = useState ( null ) ; const [ loading , setLoading ] = useState ( true ) ; const list = useSelector ( ( state ) => getSessionListById ( state , id ) ) ; const store = useStore ( ) ; const _loadList = ( args ) => loadSessionList ( args ) ( store . dispatch , store . getState ) ; const _readSession = ( args ) => readSession ( args ) ( store . dispatch , store . getState ) ; let run = function ( _session ) { if ( _session . unread_count > 0 ) { setTimeout ( ( ) => { _readSession ( { _id : id } ) ; } , 1000 ) ; } setSession ( _session ) ; setLoading ( false ) ; setTimeout ( ( ) => { var scrollHeight = $ ( '#content' ) . prop ( "scrollHeight" ) ; $ ( '#content' ) . scrollTop ( scrollHeight , 200 ) ; } , 500 ) ; } ; useEffect ( ( ) => { if ( list && list . data && list . data [ 0 ] ) { let _session = list && list . data ? list . data [ 0 ] : null ; if ( run ) run ( _session ) ; } else { _loadList ( { id , args : { _id : id } } ) . then ( ( [ err , res ] ) => { if ( res && res . data && res . data [ 0 ] ) { if ( run ) run ( res . data [ 0 ] ) ; } } ) ; } return ( ) => { run = null ; } ; } , [ list ] ) ; return ( < SingleColumns > < Meta title = { session ? session . user_id . nickname : 'loading...' } / > { loading ? < div > loading ... < /div> : null} { session ? < div className = "card" > < div className = "card-header" > < div className = "card-title" > { session . user_id . nickname } < /div> < /div> < div > < div id = "content" styleName = "message-container" > < MessageList id = { id } query = { { user_id : session . user_id . _id + ',' + session . addressee_id . _id , addressee_id : session . user_id . _id + ',' + session . addressee_id . _id , sort_by : 'create_at:-1' } } /> < /div> { ! loading && session . user_id . _id ? < div className = "border-top" > < Editor addressee_id = { session . user_id . _id } /> < /div> : null } < /div> < /div> : null } < /SingleColumns>); } ) ;