All files / components/SearchList SearchList.js

60% Statements 12/20
25% Branches 2/8
40% Functions 2/5
63.15% Lines 12/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                                                                                         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;