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

refactor: lots updates

Browse Source
This commit is contained in:
zerosoul
2022-03-14 11:32:00 +08:00
parent 5d363b5a5f
commit 46cfda76d0
83 changed files with 2018 additions and 1486 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/common/component/Message/Commands.js
+9 -18
View File
@@ -1,9 +1,9 @@
import { useState, useRef } from "react";
import { useDispatch, useSelector } from "react-redux";
import styled from "styled-components";
import toast from "react-hot-toast";
// import toast from "react-hot-toast";
import { useOutsideClick } from "rooks";
import { setReplyMessage } from "../../../app/slices/message.pending";
import { addReplyingMessage } from "../../../app/slices/message";
import StyledMenu from "../StyledMenu";
import DeleteMessageConfirm from "./DeleteMessageConfirm";
import EmojiPicker from "./EmojiPicker";
@@ -41,10 +41,8 @@ const StyledCmds = styled.ul`
`;
export default function Commands({
contextId = 0,
message = null,
mid = 0,
uid = 0,
reactions = [],
from_uid = 0,
menuVisible,
toggleMenu,
emojiPopVisible,
@@ -54,12 +52,12 @@ export default function Commands({
const dispatch = useDispatch();
const [deleteModalVisible, setDeleteModalVisible] = useState(false);
const currUid = useSelector((store) => store.authData.user.uid);
const currUid = useSelector((store) => store.authData.uid);
const menuRef = useRef(null);
const handleReply = () => {
if (contextId) {
dispatch(setReplyMessage({ id: contextId, msg: message }));
dispatch(addReplyingMessage({ id: contextId, mid }));
}
// toast.success("cooming soon");
};
@@ -78,13 +76,9 @@ export default function Commands({
/>
</li>
{emojiPopVisible && (
<EmojiPicker
reactions={reactions}
mid={mid}
hidePicker={toggleEmojiPopover}
/>
<EmojiPicker mid={mid} hidePicker={toggleEmojiPopover} />
)}
{currUid == uid ? (
{currUid == from_uid ? (
<li className="cmd" onClick={toggleEditMessage}>
<img
src="https://static.nicegoodthings.com/project/rustchat/icon.edit.svg"
@@ -110,7 +104,7 @@ export default function Commands({
{/* <li className="item">Edit Message</li> */}
<li className="item underline">Pin Message</li>
<li className="item">Reply</li>
{currUid == uid && (
{currUid == from_uid && (
<li className="item danger" onClick={toggleDeleteModal}>
Delete Message
</li>
@@ -118,10 +112,7 @@ export default function Commands({
</StyledMenu>
)}
{deleteModalVisible && (
<DeleteMessageConfirm
closeModal={toggleDeleteModal}
message={{ mid, ...message }}
/>
<DeleteMessageConfirm closeModal={toggleDeleteModal} mid={mid} />
)}
</StyledCmds>
);
src/common/component/Message/DeleteMessageConfirm.js
+3 -4
View File
@@ -7,7 +7,7 @@ import StyledModal from "../styled/Modal";
import Button from "../styled/Button";
import Modal from "../Modal";
import PreviewMessage from "./PreviewMessage";
export default function LogoutConfirmModal({ closeModal, message = null }) {
export default function DeleteMessageConfirmModal({ closeModal, mid = 0 }) {
// const dispatch = useDispatch();
const [deleteMessage, { isLoading, isSuccess }] = useLazyDeleteMessageQuery();
const handleDelete = (evt) => {
@@ -21,8 +21,7 @@ export default function LogoutConfirmModal({ closeModal, message = null }) {
}
}, [isSuccess]);
if (!message) return;
const { mid, ...previewContent } = message;
if (!mid) return null;
return (
<Modal>
<StyledModal
@@ -38,7 +37,7 @@ export default function LogoutConfirmModal({ closeModal, message = null }) {
title="Delete Message"
description="Are you sure want to delete this message?"
>
<PreviewMessage data={previewContent} />
<PreviewMessage mid={mid} />
</StyledModal>
</Modal>
);
src/common/component/Message/EmojiPicker.js
+19 -7
View File
@@ -3,7 +3,8 @@
import { useRef } from "react";
import styled from "styled-components";
import { useOutsideClick } from "rooks";
import { useLikeMessageMutation } from "../../../app/services/message";
import { useSelector } from "react-redux";
import { useReactMessageMutation } from "../../../app/services/message";
const StyledPicker = styled.div`
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: 6px;
@@ -32,13 +33,19 @@ const StyledPicker = styled.div`
}
`;
const emojis = {
thumb_up: "👍",
ok: "👌",
like: "❤️",
["U+1F44D"]: "👍",
["U+1F44C"]: "👌",
["U+2764"]: "❤️",
};
export default function EmojiPicker({ mid, reactions = [], hidePicker }) {
export default function EmojiPicker({ mid, hidePicker }) {
const wrapperRef = useRef(null);
const [reactMessage, { isLoading }] = useLikeMessageMutation();
const [reactMessage, { isLoading }] = useReactMessageMutation();
const { reactionData, currUid } = useSelector((store) => {
return {
reactionData: store.reactionMessage[mid],
currUid: store.authData.uid,
};
});
useOutsideClick(wrapperRef, hidePicker);
const handleReact = (action) => {
console.log("react", action);
@@ -48,9 +55,14 @@ export default function EmojiPicker({ mid, reactions = [], hidePicker }) {
<StyledPicker ref={wrapperRef}>
<ul className={`emojis ${isLoading ? "reacting" : ""}`}>
{Object.entries(emojis).map(([key, emoji]) => {
let reacted =
reactionData &&
reactionData[key] &&
reactionData[key].includes(currUid);
return (
<li
className={`emoji ${reactions.includes(key) ? "reacted" : ""}`}
className={`emoji ${reacted ? "reacted" : ""}`}
key={key}
onClick={handleReact.bind(null, key)}
>
src/common/component/Message/PreviewMessage.js
+11 -5
View File
@@ -1,12 +1,16 @@
// import { useEffect, useRef, useState } from "react";
import dayjs from "dayjs";
// import { useSelector } from "react-redux";
import renderContent from "./renderContent";
import Avatar from "../Avatar";
import StyledWrapper from "./styled";
export default function PreviewMessage({ data = null }) {
if (!data) return null;
const { avatar, name, time, content_type, content } = data;
import { useSelector } from "react-redux";
export default function PreviewMessage({ mid = 0 }) {
const { msg, contactsData } = useSelector((store) => {
return { msg: store.message[mid], contactsData: store.contacts.byId };
});
if (!msg) return null;
const { from_uid, created_at, content_type, content } = msg;
const { name, avatar } = contactsData[from_uid];
return (
<StyledWrapper className={`preview`}>
<div className="avatar">
@@ -15,7 +19,9 @@ export default function PreviewMessage({ data = null }) {
<div className="details">
<div className="up">
<span className="name">{name}</span>
<i className="time">{dayjs(time).format("YYYY-MM-DD h:mm:ss A")}</i>
<i className="time">
{dayjs(created_at).format("YYYY-MM-DD h:mm:ss A")}
</i>
</div>
<div className={`down`}>{renderContent(content_type, content)}</div>
</div>
src/common/component/Message/Reaction.js
+54
View File
@@ -0,0 +1,54 @@
import React from "react";
import { useDispatch, useSelector } from "react-redux";
import styled from "styled-components";
import { emojis } from "./EmojiPicker";
const StyledWrapper = styled.span`
display: flex;
gap: 8px;
font-size: 16px;
/* align-items: center; */
.reaction {
position: relative;
display: flex;
align-items: center;
gap: 6px;
em {
font-size: 12px;
color: #999;
}
}
`;
export default function Reaction({ reactions = null }) {
// const {
// messageData,
// reactionMessageData,
// contactsData,
// loginedUser,
// } = useSelector((store) => {
// return {
// reactionMessageData: store.reactionMessage,
// messageData: store.message,
// contactsData: store.contacts.byId,
// loginedUser: store.authData.user,
// };
// });
if (!reactions) return null;
return (
<StyledWrapper className="reactions">
{Object.entries(reactions).map(([reaction, uids]) => {
return uids.length > 0 ? (
<i
className="reaction"
// data-count={count > 1 ? count : ""}
key={reaction}
>
{emojis[reaction]}
{uids.length > 1 ? <em>{`+${uids.length}`} </em> : null}
</i>
) : null;
})}
</StyledWrapper>
);
}
src/common/component/Message/Removed.js
-8
View File
@@ -1,8 +0,0 @@
import React from "react";
import styled from "styled-components";
const Styled = styled.div`
display: flex;
`;
export default function Removed() {
return <Styled>Removed</Styled>;
}
src/common/component/Message/Reply.js
+15
View File
@@ -0,0 +1,15 @@
import React from "react";
import styled from "styled-components";
import { useSelector } from "react-redux";
const Styled = styled.div`
color: #aaa;
font-size: 12px;
margin-bottom: -10px;
/* padding-left: 10px; */
`;
export default function Reply({ mid }) {
const data = useSelector((store) => store.message[mid]);
if (!data) return null;
return <Styled className="reply">{data.content}</Styled>;
}
src/common/component/Message/index.js
+42 -72
View File
@@ -1,44 +1,34 @@
import React, { useEffect, useRef, useState } from "react";
import React, { useRef, useState, useEffect } from "react";
import dayjs from "dayjs";
import { useDispatch, useSelector } from "react-redux";
import { useSelector, useDispatch } from "react-redux";
import { useInViewRef } from "rooks";
import Tippy from "@tippyjs/react";
import Reaction from "./Reaction";
import Reply from "./Reply";
import Profile from "../Profile";
import Avatar from "../Avatar";
import { setChannelMsgRead } from "../../../app/slices/message.channel";
import { setUserMsgRead } from "../../../app/slices/message.user";
import { readMessage } from "../../../app/slices/message";
import StyledWrapper from "./styled";
import Commands from "./Commands";
import { emojis } from "./EmojiPicker";
import EditMessage from "./EditMessage";
import renderContent from "./renderContent";
function Message({
reply = null,
gid = "",
mid = "",
uid,
fromUid,
time,
content,
content_type = "text/plain",
unread = false,
pending,
edited = false,
likes = {},
}) {
function Message({ contextId = 0, mid = "" }) {
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 { contacts, loginedUser } = useSelector((store) => {
return {
contacts: store.contacts,
loginedUser: store.authData.user,
};
});
const { message = {}, reactionMessageData, contactsData } = useSelector(
(store) => {
return {
reactionMessageData: store.reactionMessage,
message: store.message[mid],
contactsData: store.contacts.byId,
};
}
);
const toggleMenu = () => {
setMenuVisible((prev) => !prev);
};
@@ -49,20 +39,30 @@ function Message({
setEmojiPopVisible((prev) => !prev);
};
// useEffect(() => {
// if (!unread) {
// if (!read) {
// avatarRef.current?.scrollIntoView();
// }
// }, [unread]);
// }, [read]);
// console.log("message", mid, messageData[mid]);
useEffect(() => {
if (inView && unread) {
const setMsgRead = gid ? setChannelMsgRead : setUserMsgRead;
disptach(setMsgRead({ id: gid || uid, mid }));
if (inView && !message.read) {
disptach(readMessage(mid));
}
}, [gid, mid, uid, unread, inView]);
if (!contacts) return null;
const currUser = contacts.find((c) => c.uid == fromUid) || {};
}, [mid, message, inView]);
if (!message) return null;
const {
reply_mid,
from_uid: fromUid,
created_at: time,
sending,
content,
content_type = "text/plain",
edited,
} = message;
const reactions = reactionMessageData[mid];
const currUser = contactsData[fromUid] || {};
return (
<StyledWrapper
ref={myRef}
@@ -74,36 +74,20 @@ function Message({
interactive
placement="left"
trigger="click"
content={<Profile data={currUser} type="card" />}
content={<Profile uid={fromUid} type="card" />}
>
<div className="avatar" data-uid={uid} ref={avatarRef}>
<div className="avatar" data-uid={fromUid} ref={avatarRef}>
<Avatar url={currUser.avatar} name={currUser.name} />
</div>
</Tippy>
<div className="details">
{reply && <div className="reply">{reply.content}</div>}
{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>
{likes && (
<span className="likes">
{Object.entries(likes).map(([reaction, uids]) => {
return uids.length > 0 ? (
<i
className="like"
// data-count={count > 1 ? count : ""}
key={reaction}
>
{emojis[reaction]}
{uids.length > 1 ? <em>{`+${uids.length}`} </em> : null}
</i>
) : null;
})}
</span>
)}
{reactions && <Reaction reactions={reactions} />}
</div>
<div className={`down ${pending ? "pending" : ""}`}>
<div className={`down ${sending ? "sending" : ""}`}>
{edit ? (
<EditMessage
content={content}
@@ -117,23 +101,9 @@ function Message({
</div>
{!edit && (
<Commands
contextId={gid || uid}
message={{
mid,
from_uid: fromUid,
name: currUser.name,
avatar: currUser.avatar,
time,
content,
content_type,
}}
reactions={Object.entries(likes ?? {})
.filter(([, uids = []]) => uids.includes(loginedUser.uid))
.map(([reaction]) => {
return reaction;
})}
contextId={contextId}
mid={mid}
uid={fromUid}
from_uid={fromUid}
toggleMenu={toggleMenu}
menuVisible={menuVisible}
emojiPopVisible={emojiPopVisible}
src/common/component/Message/styled.js
+2 -31
View File
@@ -35,12 +35,7 @@ const StyledMsg = styled.div`
display: flex;
flex-direction: column;
gap: 8px;
.reply {
color: #aaa;
font-size: 12px;
margin-bottom: -10px;
/* padding-left: 10px; */
}
.up {
display: flex;
align-items: center;
@@ -57,30 +52,6 @@ const StyledMsg = styled.div`
font-size: 12px;
line-height: 18px;
}
.likes {
display: flex;
gap: 8px;
font-size: 16px;
/* align-items: center; */
.like {
position: relative;
display: flex;
align-items: center;
gap: 6px;
em {
font-size: 12px;
color: #999;
}
/* &:after {
content: attr(data-count);
position: absolute;
top: -4px;
right: -8px;
font-size: 12px;
color: #999;
} */
}
}
}
.down {
user-select: text;
@@ -95,7 +66,7 @@ const StyledMsg = styled.div`
color: #999;
font-size: 10px;
}
&.pending {
&.sending {
opacity: 0.5;
}
.img {