zerosoul
91 lines
2.2 KiB
JavaScript
91 lines
2.2 KiB
JavaScript
import { useRef } from "react";
|
|
import styled from "styled-components";
|
|
import { NavLink } from "react-router-dom";
|
|
import { useOutsideClick } from "rooks";
|
|
import useFilteredUsers from "../hook/useFilteredUsers";
|
|
|
|
import Contact from "./Contact";
|
|
import Modal from "./Modal";
|
|
|
|
const StyledWrapper = styled.div`
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 440px;
|
|
max-height: 402px;
|
|
background: #fff;
|
|
box-shadow: 0px 25px 50px rgba(31, 41, 55, 0.25);
|
|
border-radius: 8px;
|
|
transition: all 0.5s ease;
|
|
overflow-y: scroll;
|
|
.search {
|
|
box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1);
|
|
padding: 8px;
|
|
width: -webkit-fill-available;
|
|
input {
|
|
outline: none;
|
|
width: -webkit-fill-available;
|
|
padding: 8px;
|
|
font-size: 14px;
|
|
line-height: 20px;
|
|
border: none;
|
|
}
|
|
}
|
|
.users {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 260px;
|
|
padding: 16px 0;
|
|
overflow-y: scroll;
|
|
.user {
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 8px;
|
|
width: -webkit-fill-available;
|
|
&:hover {
|
|
background: rgba(116, 127, 141, 0.1);
|
|
}
|
|
> a {
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
`;
|
|
export default function ContactsModal({ closeModal }) {
|
|
const wrapperRef = useRef();
|
|
const { contacts, updateInput, input } = useFilteredUsers();
|
|
useOutsideClick(wrapperRef, closeModal);
|
|
const handleSearch = (evt) => {
|
|
console.log("www");
|
|
updateInput(evt.target.value);
|
|
};
|
|
|
|
return (
|
|
<Modal>
|
|
<StyledWrapper ref={wrapperRef}>
|
|
<div className="search">
|
|
<input
|
|
value={input}
|
|
onChange={handleSearch}
|
|
placeholder="Type username to search"
|
|
/>
|
|
</div>
|
|
{contacts && (
|
|
<ul className="users">
|
|
{contacts.map((u) => {
|
|
const { uid } = u;
|
|
return (
|
|
<li key={uid} className="user">
|
|
<NavLink onClick={closeModal} to={`/chat/dm/${uid}`}>
|
|
<Contact uid={uid} interactive={false} />
|
|
</NavLink>
|
|
</li>
|
|
);
|
|
})}
|
|
</ul>
|
|
)}
|
|
</StyledWrapper>
|
|
</Modal>
|
|
);
|
|
}
|