All files / SearchList SearchList.js

68.42% Statements 13/19
33.33% Branches 2/6
33.33% Functions 2/6
68.42% Lines 13/19

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;