ColdBreeze/ColdBreeze-chat-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: read index

Browse Source
This commit is contained in:
zerosoul
2022-03-20 17:41:09 +08:00
parent 8366be7182
commit b60160cd50
16 changed files with 179 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/common/component/Contact.js
+2 -4
View File
@@ -83,10 +83,8 @@ export default function Contact({
content={<Profile uid={uid} type="card" />}
>
<div className="avatar">
<Avatar url={curr?.avatar} name={curr?.name} alt="avatar" />
<div
className={`status ${curr?.online ? "online" : "offline"}`}
></div>
<Avatar url={curr.avatar} name={curr.name} alt="avatar" />
<div className={`status ${curr.online ? "online" : "offline"}`}></div>
</div>
</Tippy>
{!compact && <span className="name">{curr?.name}</span>}
src/common/component/Message/index.js
+35 -33
View File
@@ -1,36 +1,41 @@
import React, { useRef, useState, useEffect } from "react";
import dayjs from "dayjs";
import { useSelector, useDispatch } from "react-redux";
import { useInViewRef } from "rooks";
import { useSelector } from "react-redux";
import { useInViewRef, useDebounce } from "rooks";
import Tippy from "@tippyjs/react";
import Reaction from "./Reaction";
import Reply from "./Reply";
import Profile from "../Profile";
import Avatar from "../Avatar";
import { readMessage } from "../../../app/slices/message";
import { useReadMessageMutation } from "../../../app/services/message";
import StyledWrapper from "./styled";
import Commands from "./Commands";
import EditMessage from "./EditMessage";
import renderContent from "./renderContent";
function Message({ contextId = 0, mid = "", read = true, context = "user" }) {
function Message({ contextId = 0, mid = "", context = "user" }) {
const [updateReadIndex] = useReadMessageMutation();
const updateReadDebounced = useDebounce(updateReadIndex, 300);
const [myRef, inView] = useInViewRef();
const [edit, setEdit] = useState(false);
const [emojiPopVisible, setEmojiPopVisible] = useState(false);
const [menuVisible, setMenuVisible] = useState(false);
const disptach = useDispatch();
const avatarRef = useRef(null);
const { message = {}, reactionMessageData, contactsData } = useSelector(
(store) => {
return {
reactionMessageData: store.reactionMessage,
message: store.message[mid],
contactsData: store.contacts.byId,
};
}
);
const {
footprint,
message = {},
reactionMessageData,
contactsData,
loginUid,
} = useSelector((store) => {
return {
footprint: store.footprint,
loginUid: store.authData.uid,
reactionMessageData: store.reactionMessage,
message: store.message[mid] || {},
contactsData: store.contacts.byId,
};
});
const toggleMenu = () => {
setMenuVisible((prev) => !prev);
};
@@ -40,38 +45,35 @@ function Message({ contextId = 0, mid = "", read = true, context = "user" }) {
const toggleEmojiPopover = () => {
setEmojiPopVisible((prev) => !prev);
};
// useEffect(() => {
// if (!read) {
// avatarRef.current?.scrollIntoView();
// }
// }, [read]);
// console.log("message", mid, messageData[mid]);
useEffect(() => {
if (inView && !read) {
disptach(readMessage(mid));
const data =
context == "user"
? { users: [{ uid: +contextId, mid }] }
: { groups: [{ gid: +contextId, mid }] };
updateReadIndex(data);
}
}, [mid, read, inView]);
if (!message) return null;
const {
reply_mid,
from_uid: fromUid,
created_at: time,
sending,
sending = false,
content,
thumbnail,
content_type = "text/plain",
edited,
properties,
} = message;
const readIndex =
context == "user"
? footprint.readUsers[contextId]
: footprint.readChannels[contextId];
useEffect(() => {
const read = fromUid == loginUid || mid <= readIndex;
if (inView && !read) {
const data =
context == "user"
? { users: [{ uid: +contextId, mid }] }
: { groups: [{ gid: +contextId, mid }] };
updateReadDebounced(data);
}
}, [mid, readIndex, inView, fromUid, loginUid]);
const reactions = reactionMessageData[mid];
const currUser = contactsData[fromUid] || {};
// if (!message) return null;
return (
<StyledWrapper
data-mid={mid}
src/common/component/Send/UploadModal/index.js
+27 -27
View File
@@ -1,4 +1,4 @@
// 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";
@@ -23,37 +23,37 @@ export default function UploadModal({
{ isLoading: channelSending },
] = useSendChannelMsgMutation();
const [sendUserMsg, { isLoading: userSending }] = useSendMsgMutation();
// 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 [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],
// properties: properties[0],
properties: btoa(JSON.stringify(properties[0])),
type: "image",
from_uid,
});