feat: forward message UX
This commit is contained in:
zerosoul
@@ -0,0 +1,112 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import toast from "react-hot-toast";
|
||||
// import { useNavigate } from "react-router-dom";
|
||||
// import { useSelector, useDispatch } from "react-redux";
|
||||
import Modal from "../Modal";
|
||||
import Button from "../styled/Button";
|
||||
import Input from "../styled/Input";
|
||||
import Contact from "../Contact";
|
||||
import Reply from "../Message/Reply";
|
||||
import StyledWrapper from "./styled";
|
||||
import CloseIcon from "../../../assets/icons/close.circle.svg";
|
||||
import StyledCheckbox from "../../component/styled/Checkbox";
|
||||
import useFilteredUsers from "../../hook/useFilteredUsers";
|
||||
// import { addChannel } from "../../../app/slices/channels";
|
||||
|
||||
// import { useCreateChannelMutation } from "../../../app/services/channel";
|
||||
|
||||
export default function ForwardModal({ mid, closeModal }) {
|
||||
const [members, setMembers] = useState([]);
|
||||
const { contacts, input, updateInput } = useFilteredUsers();
|
||||
// const { conactsData, loginUid } = useSelector((store) => {
|
||||
// return { conactsData: store.contacts.byId, loginUid: store.authData.uid };
|
||||
// });
|
||||
const handleInputChange = (evt) => {
|
||||
updateInput(evt.target.value);
|
||||
};
|
||||
const toggleCheckMember = ({ currentTarget }) => {
|
||||
const { uid } = currentTarget.dataset;
|
||||
let tmp = members.includes(+uid)
|
||||
? members.filter((m) => m != uid)
|
||||
: [...members, +uid];
|
||||
console.log(uid, currentTarget);
|
||||
setMembers(tmp);
|
||||
};
|
||||
const removeSelected = (uid) => {
|
||||
setMembers(members.filter((m) => m != uid));
|
||||
};
|
||||
const selectedCount = members.length ? `(${members.length})` : null;
|
||||
return (
|
||||
<Modal>
|
||||
<StyledWrapper>
|
||||
<div className="left">
|
||||
<div className="search">
|
||||
<input
|
||||
value={input}
|
||||
onChange={handleInputChange}
|
||||
placeholder="Search user or channel"
|
||||
/>
|
||||
</div>
|
||||
{contacts && (
|
||||
<ul className="users">
|
||||
{contacts.map((u) => {
|
||||
const { uid } = u;
|
||||
const checked = members.includes(uid);
|
||||
console.log({ checked });
|
||||
return (
|
||||
<li
|
||||
key={uid}
|
||||
data-uid={uid}
|
||||
className="user"
|
||||
onClick={toggleCheckMember}
|
||||
>
|
||||
<StyledCheckbox
|
||||
readOnly
|
||||
checked={checked}
|
||||
name="cb"
|
||||
id="cb"
|
||||
/>
|
||||
<Contact uid={uid} interactive={false} />
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
<div className={`right`}>
|
||||
<h3 className="title">Send To {selectedCount}</h3>
|
||||
<ul className="selected">
|
||||
{members.map((uid) => {
|
||||
return (
|
||||
<li key={uid} className="item">
|
||||
<Contact
|
||||
key={uid}
|
||||
uid={uid}
|
||||
interactive={false}
|
||||
avatarSize={40}
|
||||
/>
|
||||
<CloseIcon
|
||||
className="remove"
|
||||
onClick={removeSelected.bind(null, uid)}
|
||||
/>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
<div className="reply">
|
||||
<Reply mid={mid} interactive={false} />
|
||||
</div>
|
||||
<Input className="input" placeholder="Leave a message"></Input>
|
||||
<div className="btns">
|
||||
<Button onClick={closeModal} className="normal cancel">
|
||||
Cancel
|
||||
</Button>
|
||||
<Button className="normal" disabled={members.length == 0}>
|
||||
Send To {selectedCount}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</StyledWrapper>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,106 @@
|
||||
import styled from "styled-components";
|
||||
|
||||
const StyledWrapper = styled.div`
|
||||
display: flex;
|
||||
/* max-width: 604px; */
|
||||
max-height: 514px;
|
||||
min-height: 400px;
|
||||
background: #fff;
|
||||
box-shadow: 0px 25px 50px rgba(31, 41, 55, 0.25);
|
||||
border-radius: var(--br);
|
||||
transition: all 0.5s ease;
|
||||
overflow: hidden;
|
||||
.left {
|
||||
width: 260px;
|
||||
/* height: 100%; */
|
||||
box-shadow: inset -1px 0px 0px rgba(0, 0, 0, 0.1);
|
||||
overflow-y: scroll;
|
||||
.search {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 99;
|
||||
background: #fff;
|
||||
box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1);
|
||||
padding: 16px;
|
||||
width: calc(100% - 1px);
|
||||
input {
|
||||
outline: none;
|
||||
width: -webkit-fill-available;
|
||||
padding: 10px 8px;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
background: rgba(0, 0, 0, 0.08);
|
||||
border-radius: var(--br);
|
||||
}
|
||||
}
|
||||
.users {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
/* height: 260px; */
|
||||
padding-bottom: 20px;
|
||||
/* overflow-y: scroll; */
|
||||
.user {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 16px;
|
||||
/* margin: 0 4px; */
|
||||
width: -webkit-fill-available;
|
||||
border-radius: 4px;
|
||||
&:hover {
|
||||
background: rgba(116, 127, 141, 0.1);
|
||||
}
|
||||
> div {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
/* height: 100%; */
|
||||
/* justify-content: space-between; */
|
||||
padding: 16px 32px 32px 32px;
|
||||
box-sizing: border-box;
|
||||
.title {
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
color: #344054;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.selected {
|
||||
width: 100%;
|
||||
height: 260px;
|
||||
padding: 10px 0;
|
||||
overflow: scroll;
|
||||
.item {
|
||||
position: relative;
|
||||
.remove {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
.reply {
|
||||
width: 280px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.input {
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
.btns {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 16px;
|
||||
}
|
||||
}
|
||||
`;
|
||||
export default StyledWrapper;
|
||||
Reference in New Issue
Block a user