Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 | 3x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 3x 3x | import React, { useEffect, useState } from 'react'; import { useQuery } from '@apollo/client'; import { Tabs } from 'antd'; import { DownOutlined } from '@ant-design/icons'; import PropTypes from 'prop-types'; import styles from './SearchList.module.scss'; import MessageItem from '../MessageItem/MessageItem'; import { LOAD_SEARCH_LIST } from '../../GraphQL/Queries'; import { useNavigate } from 'react-router-dom'; const SearchList = ({ query, setQueryMessagesBody }) => { const navigate = useNavigate(); const { data } = useQuery(LOAD_SEARCH_LIST, { variables: { filter: { body: { anyofterms: query.parameter, }, }, }, }); const [queryMessages, setQueryMessages] = useState([]); const [chosen, setChosen] = useState(null); const { TabPane } = Tabs; const tabStyles = { padding: '20px 0px 0px 20px' }; useEffect(() => { Iif (data) { setQueryMessages(data.queryMessage); } }, [data]); const handleMessageSelect = (user) => { const threadId = user.thread !== null ? user.thread.id : user.thread; navigate(`/chat?profileName=${user.username.toString()}&&threadId=${threadId}&&messageId=${user.id}`); }; return ( <div className={styles.SearchList}> <div className={styles.SearchList__bar__panels}> <Tabs defaultActiveKey="1" tabBarStyle={tabStyles} > <TabPane tab="Messages" key="1"></TabPane> <TabPane tab="Contacts" key="2"></TabPane> <TabPane tab="Files" key="3"></TabPane> </Tabs> </div> <div className={styles.SearchList__bar__settings}> <span className={styles.SearchList__bar__settings__options}> Filter{' '} <DownOutlined className={styles.SearchList__icons__downarrow} /> </span> <span className={styles.SearchList__bar__settings__options}> Sort <DownOutlined className={styles.SearchList__icons__downarrow} /> </span> </div> <div className={styles.SearchList__query_messages_container}> <div className={styles.SearchList__query_messages_container__inner_area} > {queryMessages.length ? ( queryMessages.map((user, index) => { return ( <div key={index} onClick={() => handleMessageSelect(user)}> <MessageItem data-testid="ChatItem" key={user.id} user={user} query={query} active={user.id === chosen} handleActiveMessage={() => setChosen(user.id)} /> </div> ); }) ) : ( <div className={styles.SearchList__not_found_msg}>No matches</div> )} </div> </div> </div> ); }; SearchList.propTypes = { query: PropTypes.shape({ parameter: PropTypes.string, }), }; SearchList.defaultProps = { query: { parameter: '' }, }; export default SearchList; |