refactor: send and message display
This commit is contained in:
zerosoul
@@ -66,10 +66,13 @@ export default function Commands({
|
||||
const currUid = useSelector((store) => store.authData.uid);
|
||||
const menuRef = useRef(null);
|
||||
|
||||
const handleReply = () => {
|
||||
const handleReply = (fromMenu = false) => {
|
||||
if (contextId) {
|
||||
dispatch(addReplyingMessage({ id: contextId, mid }));
|
||||
}
|
||||
if (fromMenu) {
|
||||
toggleMenu();
|
||||
}
|
||||
// toast.success("cooming soon");
|
||||
};
|
||||
|
||||
@@ -93,7 +96,7 @@ export default function Commands({
|
||||
<img src={editIcon} alt="icon edit" />
|
||||
</li>
|
||||
) : (
|
||||
<li className="cmd" onClick={handleReply}>
|
||||
<li className="cmd" onClick={handleReply.bind(null, false)}>
|
||||
<img src={replyIcon} alt="icon reply" />
|
||||
</li>
|
||||
)}
|
||||
@@ -104,7 +107,9 @@ export default function Commands({
|
||||
<StyledMenu className="menu" ref={menuRef}>
|
||||
{/* <li className="item">Edit Message</li> */}
|
||||
<li className="item underline">Pin Message</li>
|
||||
<li className="item">Reply</li>
|
||||
<li className="item" onClick={handleReply.bind(null, true)}>
|
||||
Reply
|
||||
</li>
|
||||
{currUid == from_uid && (
|
||||
<li className="item danger" onClick={toggleDeleteModal}>
|
||||
Delete Message
|
||||
|
||||
@@ -9,7 +9,7 @@ export default function PreviewMessage({ mid = 0 }) {
|
||||
return { msg: store.message[mid], contactsData: store.contacts.byId };
|
||||
});
|
||||
if (!msg) return null;
|
||||
const { from_uid, created_at, content_type, content } = msg;
|
||||
const { from_uid, created_at, content_type, content, thumbnail } = msg;
|
||||
const { name, avatar } = contactsData[from_uid];
|
||||
return (
|
||||
<StyledWrapper className={`preview`}>
|
||||
@@ -23,7 +23,9 @@ export default function PreviewMessage({ mid = 0 }) {
|
||||
{dayjs(created_at).format("YYYY-MM-DD h:mm:ss A")}
|
||||
</i>
|
||||
</div>
|
||||
<div className={`down`}>{renderContent(content_type, content)}</div>
|
||||
<div className={`down`}>
|
||||
{renderContent({ content_type, content, thumbnail })}
|
||||
</div>
|
||||
</div>
|
||||
</StyledWrapper>
|
||||
);
|
||||
|
||||
@@ -7,7 +7,7 @@ import { useReactMessageMutation } from "../../../app/services/message";
|
||||
// import { Emojis } from "../../../app/config";
|
||||
import addEmojiIcon from "../../../assets/icons/add.emoji.svg?url";
|
||||
const StyledWrapper = styled.span`
|
||||
z-index: 99;
|
||||
/* z-index: 99; */
|
||||
position: relative;
|
||||
margin-top: 8px;
|
||||
margin-bottom: 4px;
|
||||
|
||||
@@ -1,15 +1,79 @@
|
||||
import React from "react";
|
||||
// import React from "react";
|
||||
import styled from "styled-components";
|
||||
import { useSelector } from "react-redux";
|
||||
|
||||
import { ContentTypes } from "../../../app/config";
|
||||
import Avatar from "../Avatar";
|
||||
const Styled = styled.div`
|
||||
color: #aaa;
|
||||
font-size: 12px;
|
||||
margin-bottom: -10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 16px;
|
||||
background: #e5e7eb;
|
||||
border-radius: var(--br);
|
||||
gap: 8px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
margin-bottom: 4px;
|
||||
.user {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
.avatar {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.name {
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
color: #06b6d4;
|
||||
}
|
||||
}
|
||||
.content {
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
color: #616161;
|
||||
.pic {
|
||||
display: inherit;
|
||||
max-width: 34px;
|
||||
}
|
||||
}
|
||||
/* padding-left: 10px; */
|
||||
`;
|
||||
const renderContent = (data) => {
|
||||
const { content_type, content, thumbnail } = data;
|
||||
let res = null;
|
||||
switch (content_type) {
|
||||
case ContentTypes.text:
|
||||
res = content;
|
||||
break;
|
||||
case ContentTypes.image:
|
||||
case ContentTypes.imageJPG:
|
||||
res = <img className="pic" src={thumbnail} />;
|
||||
break;
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
return res;
|
||||
};
|
||||
export default function Reply({ mid }) {
|
||||
const data = useSelector((store) => store.message[mid]);
|
||||
const { data, users } = useSelector((store) => {
|
||||
return { data: store.message[mid], users: store.contacts.byId };
|
||||
});
|
||||
if (!data) return null;
|
||||
return <Styled className="reply">{data.content}</Styled>;
|
||||
const currUser = users[data.from_uid];
|
||||
if (!currUser) return null;
|
||||
return (
|
||||
<Styled className="reply">
|
||||
<div className="user">
|
||||
<Avatar className="avatar" url={currUser.avatar} name={currUser.name} />
|
||||
<span className="name">{currUser.name}</span>
|
||||
</div>
|
||||
<div className="content">{renderContent(data)}</div>
|
||||
</Styled>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -65,8 +65,10 @@ function Message({ contextId = 0, mid = "", read = true, context = "user" }) {
|
||||
created_at: time,
|
||||
sending,
|
||||
content,
|
||||
thumbnail,
|
||||
content_type = "text/plain",
|
||||
edited,
|
||||
properties,
|
||||
} = message;
|
||||
const reactions = reactionMessageData[mid];
|
||||
const currUser = contactsData[fromUid] || {};
|
||||
@@ -89,12 +91,12 @@ function Message({ contextId = 0, mid = "", read = true, context = "user" }) {
|
||||
</div>
|
||||
</Tippy>
|
||||
<div className="details">
|
||||
{reply_mid && <Reply mid={reply_mid} />}
|
||||
<div className="up">
|
||||
<span className="name">{currUser.name}</span>
|
||||
<i className="time">{dayjs(time).format("YYYY-MM-DD h:mm:ss A")}</i>
|
||||
</div>
|
||||
<div className={`down ${sending ? "sending" : ""}`}>
|
||||
{reply_mid && <Reply mid={reply_mid} />}
|
||||
{edit ? (
|
||||
<EditMessage
|
||||
content={content}
|
||||
@@ -102,7 +104,13 @@ function Message({ contextId = 0, mid = "", read = true, context = "user" }) {
|
||||
cancelEdit={toggleEditMessage}
|
||||
/>
|
||||
) : (
|
||||
renderContent(content_type, content, edited)
|
||||
renderContent({
|
||||
content_type,
|
||||
properties,
|
||||
content,
|
||||
thumbnail,
|
||||
edited,
|
||||
})
|
||||
)}
|
||||
{reactions && <Reaction mid={mid} reactions={reactions} />}
|
||||
</div>
|
||||
|
||||
@@ -1,10 +1,16 @@
|
||||
import Linkify from "react-linkify";
|
||||
import dayjs from "dayjs";
|
||||
import BASE_URL from "../../../app/config";
|
||||
import MrakdownRender from "../MrakdownRender";
|
||||
const renderContent = (type, content, edited = false) => {
|
||||
import { getDefaultSize } from "../../utils";
|
||||
const renderContent = ({
|
||||
properties,
|
||||
content_type,
|
||||
content,
|
||||
thumbnail,
|
||||
edited = false,
|
||||
}) => {
|
||||
let ctn = null;
|
||||
switch (type) {
|
||||
switch (content_type) {
|
||||
case "text/plain":
|
||||
ctn = (
|
||||
<>
|
||||
@@ -40,16 +46,17 @@ const renderContent = (type, content, edited = false) => {
|
||||
break;
|
||||
case "image/png":
|
||||
case "image/jpeg":
|
||||
ctn = (
|
||||
<img
|
||||
className="img preview"
|
||||
src={
|
||||
content.startsWith("blob")
|
||||
? content
|
||||
: `${BASE_URL}/resource/image?id=${encodeURIComponent(content)}`
|
||||
}
|
||||
/>
|
||||
);
|
||||
{
|
||||
const { width, height } = getDefaultSize(properties);
|
||||
ctn = (
|
||||
<img
|
||||
className="img preview"
|
||||
style={{ width: `${width}px`, height: `${height}px` }}
|
||||
data-origin={content}
|
||||
src={thumbnail}
|
||||
/>
|
||||
);
|
||||
}
|
||||
break;
|
||||
|
||||
default:
|
||||
|
||||
@@ -1,8 +1,73 @@
|
||||
// import React from 'react'
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import { MdClose } from "react-icons/md";
|
||||
import { ContentTypes } from "../../../app/config";
|
||||
import closeIcon from "../../../assets/icons/close.circle.svg?url";
|
||||
import pictureIcon from "../../../assets/icons/picture.svg?url";
|
||||
import { removeReplyingMessage } from "../../../app/slices/message";
|
||||
import styled from "styled-components";
|
||||
const Styled = styled.div`
|
||||
z-index: 999;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
gap: 16px;
|
||||
border-top-left-radius: 8px;
|
||||
border-top-right-radius: 8px;
|
||||
background-color: #f3f4f6;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
transform: translateY(-100%);
|
||||
width: 100%;
|
||||
padding: 12px 16px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
.prefix {
|
||||
color: #667085;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
em {
|
||||
font-weight: bold;
|
||||
color: #363f53;
|
||||
}
|
||||
}
|
||||
.content {
|
||||
font-weight: 500;
|
||||
color: #616161;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
padding-right: 30px;
|
||||
}
|
||||
.close {
|
||||
background: none;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 16px;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
`;
|
||||
const renderContent = (data) => {
|
||||
const { content_type, content } = data;
|
||||
let res = null;
|
||||
switch (content_type) {
|
||||
case ContentTypes.text:
|
||||
res = content;
|
||||
break;
|
||||
case ContentTypes.image:
|
||||
case ContentTypes.imageJPG:
|
||||
res = <img className="pic" src={pictureIcon} />;
|
||||
break;
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
return res;
|
||||
};
|
||||
export default function Replying({ id, mid }) {
|
||||
const { msg, contactsData } = useSelector((store) => {
|
||||
return { contactsData: store.contacts.byId, msg: store.message[mid] };
|
||||
@@ -15,14 +80,14 @@ export default function Replying({ id, mid }) {
|
||||
const { from_uid } = msg;
|
||||
const user = contactsData[from_uid];
|
||||
return (
|
||||
<div className="reply">
|
||||
<span className="txt">
|
||||
Replying to
|
||||
<em>{user?.name}</em>
|
||||
<Styled className="reply">
|
||||
<span className="prefix">
|
||||
Replying to <em>{user?.name}</em>
|
||||
</span>
|
||||
<span className="content">{renderContent(msg)}</span>
|
||||
<button className="close" onClick={removeReply}>
|
||||
<MdClose size={20} color="#78787C" />
|
||||
<img src={closeIcon} alt="close icon" />
|
||||
</button>
|
||||
</div>
|
||||
</Styled>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,10 +1,11 @@
|
||||
import { useState, useEffect } from "react";
|
||||
// import { useState, useEffect } from "react";
|
||||
import { useSelector } from "react-redux";
|
||||
// import toast from "react-hot-toast";
|
||||
// import { useNavigate } from "react-router-dom";
|
||||
import { useSendChannelMsgMutation } from "../../../../app/services/channel";
|
||||
import { useSendMsgMutation } from "../../../../app/services/contact";
|
||||
import Modal from "../../Modal";
|
||||
import { formatBytes } from "../../../utils";
|
||||
import Button from "../../styled/Button";
|
||||
|
||||
import StyledWrapper from "./styled";
|
||||
@@ -22,27 +23,40 @@ export default function UploadModal({
|
||||
{ isLoading: channelSending },
|
||||
] = useSendChannelMsgMutation();
|
||||
const [sendUserMsg, { isLoading: userSending }] = useSendMsgMutation();
|
||||
const [blobs, setBlobs] = useState([]);
|
||||
useEffect(() => {
|
||||
files.forEach((file) => {
|
||||
var fileReader = new FileReader();
|
||||
fileReader.onloadend = (e) => {
|
||||
const { name, size, type } = file;
|
||||
const obj = { name, size, type };
|
||||
let dataUrl = e.target.result;
|
||||
console.log({ dataUrl }, e.target);
|
||||
// let blob = new Blob([arrayBuffer]);
|
||||
obj.data = dataUrl;
|
||||
setBlobs((prevs) => {
|
||||
return [...prevs, obj];
|
||||
});
|
||||
};
|
||||
fileReader.readAsDataURL(file);
|
||||
});
|
||||
}, [files]);
|
||||
// const [properties, setProperties] = useState([]);
|
||||
// useEffect(() => {
|
||||
// files.forEach((file, idx) => {
|
||||
// const { name, size, type } = file;
|
||||
// setProperties((prevs) => {
|
||||
// prevs[idx] = { name, size, type };
|
||||
// return prevs;
|
||||
// });
|
||||
// var fileReader = new FileReader();
|
||||
// fileReader.onloadend = (e) => {
|
||||
// let dataUrl = e.target.result;
|
||||
// let tmp = new Image();
|
||||
// tmp.src = dataUrl;
|
||||
// tmp.onload = function () {
|
||||
// console.log("image load", this.width, this.height);
|
||||
// setProperties((prevs) => {
|
||||
// prevs[idx].width = this.width;
|
||||
// prevs[idx].height = this.height;
|
||||
// return prevs;
|
||||
// });
|
||||
// };
|
||||
// };
|
||||
// fileReader.readAsDataURL(file);
|
||||
// });
|
||||
// }, [files]);
|
||||
const handleUpload = () => {
|
||||
const uploadFn = type == "user" ? sendUserMsg : sendChannelMsg;
|
||||
uploadFn({ id: sendTo, content: files[0], type: "image", from_uid });
|
||||
uploadFn({
|
||||
id: sendTo,
|
||||
content: files[0],
|
||||
// properties: properties[0],
|
||||
type: "image",
|
||||
from_uid,
|
||||
});
|
||||
closeModal();
|
||||
};
|
||||
if (!sendTo) return null;
|
||||
@@ -68,22 +82,21 @@ export default function UploadModal({
|
||||
className="animate__animated animate__fadeInDown animate__faster"
|
||||
>
|
||||
<ul className="list">
|
||||
{blobs.map((b, idx) => {
|
||||
console.log({ b });
|
||||
{files.map((f, idx) => {
|
||||
console.log({ f });
|
||||
return (
|
||||
<li key={idx} className="item">
|
||||
<img
|
||||
src={b.data}
|
||||
// src={URL.createObjectURL(b.data)}
|
||||
src={URL.createObjectURL(f)}
|
||||
alt="thumb"
|
||||
className="thumb"
|
||||
/>
|
||||
<div className="right">
|
||||
<div className="name">
|
||||
<span className="input">{b.name}</span>
|
||||
<i className="tip">(click title to change name)</i>
|
||||
<span className="input">{f.name}</span>
|
||||
{/* <i className="tip">(click title to change name)</i> */}
|
||||
</div>
|
||||
<i className="size">{`${Math.floor(b.size / 1000)}KB`}</i>
|
||||
<i className="size">{formatBytes(f.size)}</i>
|
||||
</div>
|
||||
</li>
|
||||
);
|
||||
|
||||
@@ -113,7 +113,7 @@ export default function Send({
|
||||
|
||||
return (
|
||||
<>
|
||||
<StyledSend className={`send ${replying_mid ? "reply" : ""}`}>
|
||||
<StyledSend className={`send ${replying_mid ? "reply" : ""} ${type}`}>
|
||||
{replying_mid && <Replying mid={replying_mid} id={id} />}
|
||||
|
||||
<div className="input">
|
||||
|
||||
@@ -2,7 +2,7 @@ import styled from "styled-components";
|
||||
|
||||
const StyledSend = styled.div`
|
||||
position: absolute;
|
||||
bottom: 15px;
|
||||
bottom: -70px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: #e5e7eb;
|
||||
@@ -15,6 +15,9 @@ const StyledSend = styled.div`
|
||||
gap: 5px;
|
||||
padding: 4px 18px;
|
||||
/* margin: 0 16px; */
|
||||
&.user {
|
||||
bottom: 10px;
|
||||
}
|
||||
&.reply {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
@@ -49,30 +52,6 @@ const StyledSend = styled.div`
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
.reply {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-top-left-radius: 8px;
|
||||
border-top-right-radius: 8px;
|
||||
background-color: #f2f2f5;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
transform: translateY(-100%);
|
||||
width: 100%;
|
||||
padding: 6px 18px;
|
||||
.txt {
|
||||
color: #aaa;
|
||||
font-size: 12px;
|
||||
em {
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
padding: 0 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export default StyledSend;
|
||||
|
||||
Reference in New Issue
Block a user