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

feat: message reply

Browse Source
This commit is contained in:
zerosoul
2022-03-08 21:46:11 +08:00
parent f35fd765f0
commit 4e77c4ba79
20 changed files with 221 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/config.js
+1
View File
@@ -11,6 +11,7 @@ export const googleClientID =
// "840319286941-6ds7lbvk55eq8mjortf68cb2ll65lprt.apps.googleusercontent.com";
export const tokenHeader = "X-API-Key";
export const KEY_TOKEN = "RUSTCHAT_TOKEN";
export const KEY_EXPIRE = "RUSTCHAT_TOKEN_EXPIRE";
export const KEY_REFRESH_TOKEN = "RUSTCHAT_REFRESH_TOKEN";
export const KEY_UID = "RUSTCHAT_CURR_UID";
src/app/services/base.query.js
+49 -33
View File
@@ -1,5 +1,6 @@
import { fetchBaseQuery } from "@reduxjs/toolkit/query";
import toast from "react-hot-toast";
import dayjs from "dayjs";
import { updateToken, clearAuthData } from "../slices/auth.data";
import BASE_URL, { tokenHeader } from "../config";
const whiteList = ["login", "checkInviteTokenValid", "getServer", "getOpenid"];
@@ -8,18 +9,54 @@ const baseQuery = fetchBaseQuery({
prepareHeaders: (headers, { getState, endpoint }) => {
console.log("req", endpoint);
const { token } = getState().authData;
if (token && !whiteList.includes(endpoint)) {
const noHeaderList = [...whiteList, "renew"];
if (token && !noHeaderList.includes(endpoint)) {
headers.set(tokenHeader, token);
}
// 发送channel msg (临时举措)
// if (endpoint == "sendChannelMsg") {
// headers.set("Content-Type", "text/plain");
// }
return headers;
},
});
const baseQueryWithReauth = async (args, api, extraOptions) => {
let result = await baseQuery(args, api, extraOptions);
let waitingForRenew = null;
const baseQueryWithTokenCheck = async (args, api, extraOptions) => {
if (waitingForRenew) {
await waitingForRenew;
}
// 先检查token是否过期，过期则renew
const {
token,
refreshToken,
expireTime = new Date().getTime(),
} = api.getState().authData;
let result = null;
if (
!whiteList.includes(api.endpoint) &&
dayjs().isAfter(new Date(expireTime - 20 * 1000))
) {
// 快过期了，renew
waitingForRenew = baseQuery(
{
url: "/token/renew",
method: "POST",
body: {
token,
refresh_token: refreshToken,
},
},
api,
extraOptions
);
result = await waitingForRenew;
waitingForRenew = null;
// console.log({ refreshResult });
if (result.data) {
// store the new token
api.dispatch(updateToken(result.data));
// retry the initial query
result = await baseQuery(args, api, extraOptions);
}
} else {
result = await baseQuery(args, api, extraOptions);
}
if (result?.error) {
console.log("api error", result.error.originalStatus, api.endpoint);
switch (result.error.originalStatus || result.error.status) {
@@ -40,35 +77,14 @@ const baseQueryWithReauth = async (args, api, extraOptions) => {
api.dispatch(clearAuthData());
location.href = "/#/login";
return;
}
// try to get a new token with refreshToken
const { token, refreshToken } = api.getState().authData;
const refreshResult = await baseQuery(
{
url: "/token/renew",
method: "POST",
body: {
token,
refresh_token: refreshToken,
},
},
api,
extraOptions
);
console.log({ refreshResult });
if (refreshResult.data) {
// store the new token
api.dispatch(updateToken(refreshResult.data));
// retry the initial query
result = await baseQuery(args, api, extraOptions);
} else {
toast.error("token expired, please login again");
api.dispatch(clearAuthData());
toast.error("Not Authenticated");
}
}
break;
case 403:
toast.error("Request Not Allowed");
break;
default:
break;
}
@@ -76,4 +92,4 @@ const baseQueryWithReauth = async (args, api, extraOptions) => {
return result;
};
export default baseQueryWithReauth;
export default baseQueryWithTokenCheck;
src/app/services/message.js
+5 -2
View File
@@ -31,10 +31,13 @@ export const messageApi = createApi({
}),
}),
replyMessage: builder.mutation({
query: (mid, data) => ({
query: ({ mid, content, type = "text" }) => ({
headers: {
"content-type": ContentTypes[type],
},
url: `/message/${mid}/reply`,
method: "POST",
body: data,
body: content,
}),
}),
}),
src/app/slices/auth.data.js
+18 -3
View File
@@ -1,9 +1,15 @@
import { createSlice } from "@reduxjs/toolkit";
import BASE_URL, { KEY_REFRESH_TOKEN, KEY_TOKEN, KEY_UID } from "../config";
import BASE_URL, {
KEY_REFRESH_TOKEN,
KEY_TOKEN,
KEY_UID,
KEY_EXPIRE,
} from "../config";
import { getNonNullValues } from "../../common/utils";
const initialState = {
user: null,
token: localStorage.getItem(KEY_TOKEN),
expireTime: localStorage.getItem(KEY_EXPIRE) || new Date().getTime(),
refreshToken: localStorage.getItem(KEY_REFRESH_TOKEN),
};
const authDataSlice = createSlice({
@@ -11,11 +17,16 @@ const authDataSlice = createSlice({
initialState,
reducers: {
setAuthData(state, action) {
const { user, token, refresh_token } = action.payload;
const { user, token, refresh_token, expired_in = 0 } = action.payload;
state.user = user;
state.token = token;
state.refreshToken = refresh_token;
// 当前时间往后推expire时长
console.log("expire", expired_in);
const expireTime = new Date().getTime() + Number(expired_in) * 1000;
state.expireTime = expireTime;
// set local data
localStorage.setItem(KEY_EXPIRE, expireTime);
localStorage.setItem(KEY_TOKEN, token);
localStorage.setItem(KEY_REFRESH_TOKEN, refresh_token);
localStorage.setItem(KEY_UID, user.uid);
@@ -51,15 +62,19 @@ const authDataSlice = createSlice({
state.token = null;
state.refreshToken = null;
// remove local data
localStorage.removeItem(KEY_EXPIRE);
localStorage.removeItem(KEY_TOKEN);
localStorage.removeItem(KEY_REFRESH_TOKEN);
localStorage.removeItem(KEY_UID);
},
updateToken(state, action) {
const { token, refresh_token } = action.payload;
const { token, refresh_token, expired_in } = action.payload;
console.log("refresh token");
state.token = token;
const et = new Date().getTime() + Number(expired_in) * 1000;
state.expireTime = et;
state.refreshToken = refresh_token;
localStorage.setItem(KEY_EXPIRE, et);
localStorage.setItem(KEY_TOKEN, token);
localStorage.setItem(KEY_REFRESH_TOKEN, refresh_token);
},
src/app/slices/message.handler.js
+5
View File
@@ -33,11 +33,16 @@ export const msgAdd = (state, payload) => {
content,
created_at,
mid,
reply_mid = null,
from_uid,
content_type,
unread = true,
} = payload;
const newMsg = { content, content_type, created_at, from_uid, unread };
if (reply_mid && state[id][reply_mid]) {
newMsg.reply = { mid: reply_mid, ...state[id][reply_mid] };
}
if (state[id]) {
let replaceMsg = state[id][mid];
// 如果存在，并且新消息和缓存消息不一样，则替换掉，并且改为已读（可能有问题）
src/app/slices/message.pending.js
+14
View File
@@ -1,6 +1,7 @@
import { createSlice } from "@reduxjs/toolkit";
const initialState = {
reply: {},
user: {},
channel: {},
};
@@ -18,6 +19,17 @@ const pendingMessageSlice = createSlice({
curr[mid] = { ...msg, pending: true };
state[type][id] = curr;
},
setReplyMessage(state, action) {
const { id, msg } = action.payload;
console.log("reply to ", id, msg);
state.reply[id] = msg;
},
removeReplyMessage(state, action) {
const id = action.payload;
if (state.reply[id]) {
delete state.reply[id];
}
},
removePendingMessage(state, action) {
const { id, mid, type = "user" } = action.payload;
console.log("remove msg", type, id, mid);
@@ -29,5 +41,7 @@ export const {
clearPendingMsg,
addPendingMessage,
removePendingMessage,
removeReplyMessage,
setReplyMessage,
} = pendingMessageSlice.actions;
export default pendingMessageSlice.reducer;
src/common/component/Message/Commands.js
+9 -3
View File
@@ -3,6 +3,7 @@ import { useDispatch, useSelector } from "react-redux";
import styled from "styled-components";
import toast from "react-hot-toast";
import { useOutsideClick } from "rooks";
import { setReplyMessage } from "../../../app/slices/message.pending";
import StyledMenu from "../StyledMenu";
import DeleteMessageConfirm from "./DeleteMessageConfirm";
import EmojiPicker from "./EmojiPicker";
@@ -39,6 +40,7 @@ const StyledCmds = styled.ul`
}
`;
export default function Commands({
contextId = 0,
message = null,
mid = 0,
uid = 0,
@@ -49,13 +51,17 @@ export default function Commands({
toggleEmojiPopover,
toggleEditMessage,
}) {
const dispatch = useDispatch();
const [deleteModalVisible, setDeleteModalVisible] = useState(false);
const currUid = useSelector((store) => store.authData.user.uid);
const menuRef = useRef(null);
const handleClick = () => {
toast.success("cooming soon");
const handleReply = () => {
if (contextId) {
dispatch(setReplyMessage({ id: contextId, msg: message }));
}
// toast.success("cooming soon");
};
useOutsideClick(menuRef, toggleMenu);
@@ -86,7 +92,7 @@ export default function Commands({
/>
</li>
) : (
<li className="cmd" onClick={handleClick}>
<li className="cmd" onClick={handleReply}>
<img
src="https://static.nicegoodthings.com/project/rustchat/icon.forward.svg"
alt="icon reply"
src/common/component/Message/DeleteMessageConfirm.js
+1 -1
View File
@@ -1,5 +1,5 @@
// import React from "react";
import { useEffect, useState } from "react";
import { useEffect } from "react";
// import { useDispatch } from "react-redux";
// import BASE_URL from "../../app/config";
import { useLazyDeleteMessageQuery } from "../../../app/services/message";
src/common/component/Message/EmojiPicker.js
+4 -1
View File
@@ -16,6 +16,9 @@ const StyledPicker = styled.div`
.emojis {
display: flex;
gap: 4px;
&.reacting {
opacity: 0.6;
}
.emoji {
cursor: pointer;
border-radius: 4px;
@@ -43,7 +46,7 @@ export default function EmojiPicker({ mid, reactions = [], hidePicker }) {
};
return (
<StyledPicker ref={wrapperRef}>
<ul className="emojis">
<ul className={`emojis ${isLoading ? "reacting" : ""}`}>
{Object.entries(emojis).map(([key, emoji]) => {
return (
<li
src/common/component/Message/PreviewMessage.js
+3 -2
View File
@@ -1,11 +1,12 @@
// 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 } = data;
const { avatar, name, time, content_type, content } = data;
return (
<StyledWrapper className={`preview`}>
<div className="avatar">
@@ -16,7 +17,7 @@ export default function PreviewMessage({ data = null }) {
<span className="name">{name}</span>
<i className="time">{dayjs(time).format("YYYY-MM-DD h:mm:ss A")}</i>
</div>
<div className={`down`}>{content}</div>
<div className={`down`}>{renderContent(content_type, content)}</div>
</div>
</StyledWrapper>
);
src/common/component/Message/index.js
+14 -3
View File
@@ -13,6 +13,7 @@ import { emojis } from "./EmojiPicker";
import EditMessage from "./EditMessage";
import renderContent from "./renderContent";
export default function Message({
reply = null,
gid = "",
mid = "",
uid,
@@ -32,7 +33,12 @@ export default function Message({
const [menuVisible, setMenuVisible] = useState(false);
const disptach = useDispatch();
const avatarRef = useRef(null);
const contacts = useSelector((store) => store.contacts);
const { contacts, loginedUser } = useSelector((store) => {
return {
contacts: store.contacts,
loginedUser: store.authData.user,
};
});
const toggleMenu = () => {
setMenuVisible((prev) => !prev);
};
@@ -74,6 +80,7 @@ export default function Message({
</div>
</Tippy>
<div className="details">
{reply && <div className="reply">{reply.content}</div>}
<div className="up">
<span className="name">{currUser.name}</span>
<i className="time">{dayjs(time).format("YYYY-MM-DD h:mm:ss A")}</i>
@@ -109,14 +116,18 @@ export default function Message({
</div>
{!edit && (
<Commands
contextId={gid || uid}
message={{
mid,
from_uid: fromUid,
name: currUser.name,
avatar: currUser.avatar,
time,
content: renderContent(content_type, content),
content,
content_type,
}}
reactions={Object.entries(likes ?? {})
.filter(([reaction, uids = []]) => uids.includes(currUser.uid))
.filter(([, uids = []]) => uids.includes(loginedUser.uid))
.map(([reaction]) => {
return reaction;
})}
src/common/component/Message/styled.js
+6
View File
@@ -30,6 +30,12 @@ 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;
src/common/component/NotificationHub/index.js
+4 -2
View File
@@ -66,13 +66,15 @@ const NotificationHub = ({ usersVersion = 0, afterMid = 0 }) => {
sse.onerror = (err) => {
switch (err.eventPhase) {
case EventSource.CLOSED:
console.log("sse error closed error");
break;
case EventSource.CONNECTING:
console.log("sse error renew");
console.log("sse error connecting error");
renewToken({ token, refreshToken });
break;
default:
console.error("sse error", err);
console.error("sse error error", err);
// renewToken({ token, refreshToken });
break;
}
src/common/component/NotificationHub/useMessageHandler.js
+18
View File
@@ -100,6 +100,24 @@ export default function useMessageHandler(currUser) {
});
}
break;
case "reply":
{
dispatchAddMessage({
to,
id,
self,
common: {
mid,
reply_mid: detailMid,
content,
content_type,
from_uid,
created_at,
expires_in,
},
});
}
break;
case "reaction": {
dispatchReaction({
to,
src/common/component/Send/index.js
+34 -6
View File
@@ -1,11 +1,13 @@
import { useState, useEffect, useRef } from "react";
import { MdAdd } from "react-icons/md";
import { MdAdd, MdClose } from "react-icons/md";
import TextareaAutosize from "react-textarea-autosize";
import { useSelector } from "react-redux";
import { useDispatch, useSelector } from "react-redux";
import { useKey } from "rooks";
import { removeReplyMessage } from "../../../app/slices/message.pending";
import { useSendChannelMsgMutation } from "../../../app/services/channel";
import { useSendMsgMutation } from "../../../app/services/contact";
import { useReplyMessageMutation } from "../../../app/services/message";
import StyledSend from "./styled";
import useFiles from "./useFiles";
import UploadModal from "./UploadModal";
@@ -22,14 +24,21 @@ export default function Send({
id = "",
dragFiles = [],
}) {
const [replyMessage] = useReplyMessageMutation();
const { files, setFiles, resetFiles } = useFiles([]);
const inputRef = useRef();
const [shift, setShift] = useState(false);
const [enter, setEnter] = useState(false);
const [msg, setMsg] = useState("");
// const dispatch = useDispatch();
const dispatch = useDispatch();
// 谁发的
const from_uid = useSelector((store) => store.authData.user.uid);
const { from_uid, reply = null, contacts } = useSelector((store) => {
return {
contacts: store.contacts,
from_uid: store.authData.user.uid,
reply: store.pendingMessage.reply[id],
};
});
useEffect(() => {
if (dragFiles.length) {
setFiles((prev) => [...prev, ...dragFiles]);
@@ -73,12 +82,31 @@ export default function Send({
};
const handleSendMessage = () => {
if (!msg || !id || sendingMessage) return;
sendMessage({ id, content: msg, from_uid });
if (reply) {
replyMessage({ mid: reply.mid, content: msg });
dispatch(removeReplyMessage(id));
} else {
sendMessage({ id, content: msg, from_uid });
}
setMsg("");
};
const removeReply = () => {
dispatch(removeReplyMessage(id));
};
return (
<>
<StyledSend className="send">
<StyledSend className={`send ${reply ? "reply" : ""}`}>
{reply && (
<div className="reply">
<span className="txt">
Replying to
<em>{contacts.find((c) => c.uid == reply.from_uid)?.name}</em>
</span>
<button className="close" onClick={removeReply}>
<MdClose size={20} color="#78787C" />
</button>
</div>
)}
<div className="addon">
<MdAdd size={20} color="#78787C" />
<input
src/common/component/Send/styled.js
+27
View File
@@ -14,6 +14,10 @@ const StyledSend = styled.div`
gap: 18px;
padding: 4px 18px;
/* margin: 0 16px; */
&.reply {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.addon {
cursor: pointer;
position: relative;
@@ -71,6 +75,29 @@ const StyledSend = styled.div`
transform: translateY(-100%);
}
}
.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;
src/routes/chat/ChannelChat/index.js
+2
View File
@@ -113,9 +113,11 @@ export default function ChannelChat({
unread,
removed = false,
edited,
reply,
} = msg;
return (
<Message
reply={reply}
edited={edited}
likes={likes}
removed={removed}
src/routes/chat/DMChat/index.js
+2
View File
@@ -86,9 +86,11 @@ export default function DMChat({ uid = "", dropFiles = [] }) {
pending = false,
removed = false,
edited,
reply,
} = msg;
return (
<Message
reply={reply}
likes={likes}
edited={edited}
removed={removed}
src/routes/home/index.js
+1 -1
View File
@@ -43,7 +43,7 @@ export default function HomePage() {
<div className={`col left ${menuExpand ? "expand" : ""}`}>
<ServerDropList
data={data?.server}
memberCount={data?.metrics?.user_count}
memberCount={data.contacts?.length}
expand={menuExpand}
/>
<nav className="nav">
src/routes/home/usePreload.js
+4 -23
View File
@@ -7,10 +7,7 @@ import { clearAuthData, setUserData } from "../../app/slices/auth.data";
import { setContacts } from "../../app/slices/contacts";
// import { useGetChannelsQuery } from "../../app/services/channel";
import {
useLazyGetServerQuery,
useLazyGetMetricsQuery,
} from "../../app/services/server";
import { useLazyGetServerQuery } from "../../app/services/server";
import { KEY_UID } from "../../app/config";
// pollingInterval: 0,
// const querySetting = {
@@ -39,15 +36,6 @@ export default function usePreload() {
data: server,
},
] = useLazyGetServerQuery();
const [
getMetrics,
{
isLoading: metricsLoading,
isSuccess: metricsSuccess,
isError: metricsError,
data: metrics,
},
] = useLazyGetMetricsQuery();
useEffect(() => {
initCache();
rehydrate();
@@ -55,7 +43,6 @@ export default function usePreload() {
useEffect(() => {
getContacts();
getServer();
getMetrics();
}, []);
useEffect(() => {
@@ -77,18 +64,12 @@ export default function usePreload() {
}
}, [contacts]);
return {
loading:
contactsLoading ||
serverLoading ||
metricsLoading ||
!checked ||
!cacheFirst,
error: contactsError && serverError && metricsError,
success: contactsSuccess && serverSuccess && metricsSuccess,
loading: contactsLoading || serverLoading || !checked || !cacheFirst,
error: contactsError && serverError,
success: contactsSuccess && serverSuccess,
data: {
contacts,
server,
metrics,
},
};
}