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 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"; const SearchList = ({ query, setQueryMessagesBody }) => { 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) => { if (user.id === chosen) return; const threadId = user.thread !== null ? user.thread.id : user.thread; setChosen(user.id); setQueryMessagesBody({ threadId, messageId: user.id, user, }); }; 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} /> </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; |