refactor: add member to channel modal
This commit is contained in:
zerosoul
@@ -1,113 +1,15 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import styled from "styled-components";
|
||||
import { useSelector } from "react-redux";
|
||||
import Modal from "../../../common/component/Modal";
|
||||
import Button from "../../../common/component/styled/Button";
|
||||
import Input from "../../../common/component/styled/Input";
|
||||
import Contact from "../../../common/component/Contact";
|
||||
import StyledCheckbox from "../../../common/component/styled/Checkbox";
|
||||
import { useAddMembersMutation } from "../../../app/services/channel";
|
||||
import closeIcon from "../../../assets/icons/close.svg?url";
|
||||
import CloseIcon from "../../../assets/icons/close.svg";
|
||||
import toast from "react-hot-toast";
|
||||
// import useFilteredUsers from "../../../common/hook/useFilteredUsers";
|
||||
const Styled = styled.div`
|
||||
padding: 16px;
|
||||
filter: drop-shadow(0px 25px 50px rgba(31, 41, 55, 0.25));
|
||||
border-radius: 8px;
|
||||
background-color: #fff;
|
||||
min-width: 410px;
|
||||
> .head {
|
||||
font-weight: 600;
|
||||
font-size: 18px;
|
||||
line-height: 28px;
|
||||
color: #374151;
|
||||
margin-bottom: 16px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.close {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
> .filter {
|
||||
width: 376px;
|
||||
height: 40px;
|
||||
background: rgba(0, 0, 0, 0.08);
|
||||
border-radius: 4px;
|
||||
padding: 6px 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
.selects {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
width: 100%;
|
||||
overflow: scroll;
|
||||
|
||||
white-space: nowrap;
|
||||
&::-webkit-scrollbar {
|
||||
width: 0; /* Remove scrollbar space */
|
||||
height: 0; /* Remove scrollbar space */
|
||||
background: transparent; /* Optional: just make scrollbar invisible */
|
||||
}
|
||||
.select {
|
||||
padding: 4px 6px;
|
||||
background: #52edff;
|
||||
border-radius: 4px;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
color: #ffffff;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
.close {
|
||||
cursor: pointer;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
filter: invert(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
/* .input{
|
||||
background: none;
|
||||
padding: ;
|
||||
} */
|
||||
}
|
||||
.users {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
/* height: 260px; */
|
||||
padding-bottom: 20px;
|
||||
max-height: 364px;
|
||||
overflow: scroll;
|
||||
.user {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 4px 8px;
|
||||
/* margin: 0 4px; */
|
||||
width: -webkit-fill-available;
|
||||
border-radius: 8px;
|
||||
&:hover {
|
||||
background: rgba(116, 127, 141, 0.1);
|
||||
}
|
||||
> div {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
> .btn {
|
||||
width: 100%;
|
||||
margin-top: 16px;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
}
|
||||
`;
|
||||
import useFilteredUsers from "../../../common/hook/useFilteredUsers";
|
||||
import Styled from "./add.member.styled";
|
||||
|
||||
export default function AddMemberModal({ uids = [], cid = null, closeModal }) {
|
||||
const [
|
||||
@@ -115,10 +17,10 @@ export default function AddMemberModal({ uids = [], cid = null, closeModal }) {
|
||||
{ isLoading: isAdding, isSuccess },
|
||||
] = useAddMembersMutation();
|
||||
const [selects, setSelects] = useState([]);
|
||||
const { channel, contactIds, contactData } = useSelector((store) => {
|
||||
const { channel, contactData } = useSelector((store) => {
|
||||
return {
|
||||
channel: store.channels.byId[cid],
|
||||
contactIds: store.contacts.ids,
|
||||
// contactIds: store.contacts.ids,
|
||||
contactData: store.contacts.byId,
|
||||
};
|
||||
});
|
||||
@@ -132,7 +34,7 @@ export default function AddMemberModal({ uids = [], cid = null, closeModal }) {
|
||||
const handleAddMembers = () => {
|
||||
addMembers({ id: cid, members: selects });
|
||||
};
|
||||
// const { input, updateInput, contacts } = useFilteredUsers();
|
||||
const { input, updateInput, contacts = [] } = useFilteredUsers();
|
||||
const toggleCheckMember = ({ currentTarget }) => {
|
||||
const { uid } = currentTarget.dataset;
|
||||
if (selects.includes(+uid)) {
|
||||
@@ -143,40 +45,43 @@ export default function AddMemberModal({ uids = [], cid = null, closeModal }) {
|
||||
setSelects([...selects, +uid]);
|
||||
}
|
||||
};
|
||||
// const handleFilterInput = (evt) => {
|
||||
// updateInput(evt.target.value);
|
||||
// };
|
||||
const handleFilterInput = (evt) => {
|
||||
updateInput(evt.target.value);
|
||||
};
|
||||
if (!channel) return null;
|
||||
const contactIds = contacts.map(({ uid }) => uid);
|
||||
console.log("selects", selects);
|
||||
return (
|
||||
<Modal>
|
||||
<Styled>
|
||||
<div className="head">
|
||||
Add friends to #{channel.name}{" "}
|
||||
<img onClick={closeModal} className="close" src={closeIcon} />
|
||||
<CloseIcon onClick={closeModal} className="close" />
|
||||
</div>
|
||||
<div className="filter">
|
||||
{/* {selects && selects.length > 0 && ( */}
|
||||
<ul className="selects">
|
||||
{selects.map((uid) => {
|
||||
return (
|
||||
<li className="select" key={uid}>
|
||||
{contactData[uid].name}
|
||||
<img
|
||||
<CloseIcon
|
||||
data-uid={uid}
|
||||
onClick={toggleCheckMember}
|
||||
className="close"
|
||||
src={closeIcon}
|
||||
/>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
<Input
|
||||
autoFocus
|
||||
type="text"
|
||||
className="input none"
|
||||
value={input}
|
||||
onChange={handleFilterInput}
|
||||
/>
|
||||
</ul>
|
||||
{/* <input
|
||||
type="text"
|
||||
className="input"
|
||||
value={input}
|
||||
onChange={handleFilterInput}
|
||||
/> */}
|
||||
{/* )} */}
|
||||
</div>
|
||||
<ul className="users">
|
||||
{contactIds.map((uid) => {
|
||||
|
||||
@@ -0,0 +1,109 @@
|
||||
import styled from "styled-components";
|
||||
|
||||
const Styled = styled.div`
|
||||
padding: 16px;
|
||||
filter: drop-shadow(0px 25px 50px rgba(31, 41, 55, 0.25));
|
||||
border-radius: 8px;
|
||||
background-color: #fff;
|
||||
min-width: 410px;
|
||||
> .head {
|
||||
font-weight: 600;
|
||||
font-size: 18px;
|
||||
line-height: 28px;
|
||||
color: #374151;
|
||||
margin-bottom: 16px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.close {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
> .filter {
|
||||
width: 376px;
|
||||
min-height: 40px;
|
||||
padding: 6px 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
background: #ffffff;
|
||||
border: 1px solid #e5e7eb;
|
||||
box-shadow: 0px 1px 2px rgba(31, 41, 55, 0.08);
|
||||
border-radius: 4px;
|
||||
.selects {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 5px;
|
||||
width: 100%;
|
||||
overflow: scroll;
|
||||
|
||||
/* white-space: nowrap; */
|
||||
&::-webkit-scrollbar {
|
||||
width: 0; /* Remove scrollbar space */
|
||||
height: 0; /* Remove scrollbar space */
|
||||
background: transparent; /* Optional: just make scrollbar invisible */
|
||||
}
|
||||
.select {
|
||||
padding: 4px 6px;
|
||||
background: #52edff;
|
||||
border-radius: 4px;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
color: #ffffff;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
.close {
|
||||
cursor: pointer;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
path {
|
||||
fill: #fff;
|
||||
fill-opacity: 1;
|
||||
}
|
||||
/* filter: invert(1); */
|
||||
}
|
||||
}
|
||||
.input {
|
||||
width: fit-content;
|
||||
}
|
||||
}
|
||||
}
|
||||
.users {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
/* height: 260px; */
|
||||
padding-bottom: 20px;
|
||||
max-height: 364px;
|
||||
overflow: scroll;
|
||||
.user {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 4px 8px;
|
||||
/* margin: 0 4px; */
|
||||
width: -webkit-fill-available;
|
||||
border-radius: 8px;
|
||||
&:hover {
|
||||
background: rgba(116, 127, 141, 0.1);
|
||||
}
|
||||
> div {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
> .btn {
|
||||
width: 100%;
|
||||
margin-top: 16px;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
}
|
||||
`;
|
||||
|
||||
export default Styled;
|
||||
Reference in New Issue
Block a user