refactor: lots updates
This commit is contained in:
zerosoul
+104
-52
@@ -1,70 +1,122 @@
|
||||
import { useState } from "react";
|
||||
import localforage from "localforage";
|
||||
import { useDispatch } from "react-redux";
|
||||
import { initChannelMsg } from "./slices/message.channel";
|
||||
import { initUserMsg } from "./slices/message.user";
|
||||
import { setChannels } from "./slices/channels";
|
||||
import { setMark } from "./slices/visit.mark";
|
||||
import { useDispatch, batch } from "react-redux";
|
||||
import { fullfillReactionMessage } from "./slices/message.reaction";
|
||||
import { fullfillMessage } from "./slices/message";
|
||||
import { fullfillChannelMsg } from "./slices/message.channel";
|
||||
import { fullfillUserMsg } from "./slices/message.user";
|
||||
import { fullfillChannels } from "./slices/channels";
|
||||
import { fullfillContacts } from "./slices/contacts";
|
||||
import { fullfillFootprint } from "./slices/footprint";
|
||||
import { KEY_UID } from "./config";
|
||||
const tables = [
|
||||
{
|
||||
storeName: "channels",
|
||||
description: "store channel list",
|
||||
},
|
||||
{
|
||||
storeName: "contacts",
|
||||
description: "store contact list",
|
||||
},
|
||||
{
|
||||
storeName: "messageDM",
|
||||
description: "store DM message with IDs",
|
||||
},
|
||||
{
|
||||
storeName: "messageChannel",
|
||||
description: "store channel message with IDs",
|
||||
},
|
||||
{
|
||||
storeName: "message",
|
||||
description: "store message with key-val full data",
|
||||
},
|
||||
{
|
||||
storeName: "messageReaction",
|
||||
description: "store message reaction with key-val full data",
|
||||
},
|
||||
{
|
||||
storeName: "footprint",
|
||||
description: "store user visit data",
|
||||
},
|
||||
// {
|
||||
// storeName: "message",
|
||||
// description: "store message with key-val full data",
|
||||
// },
|
||||
];
|
||||
const initCache = () => {
|
||||
const uid = localStorage.getItem(KEY_UID) || "";
|
||||
const name = `cache_db_${uid}`;
|
||||
// const channels = localforage.createInstance({
|
||||
// name,
|
||||
// storeName: "channels",
|
||||
// description: "channel list",
|
||||
// });
|
||||
// const contacts = localforage.createInstance({
|
||||
// name,
|
||||
// storeName: "contacts",
|
||||
// description: "contact list",
|
||||
// });
|
||||
// const msgs_user = localforage.createInstance({
|
||||
// name,
|
||||
// storeName: "msgs_dm",
|
||||
// description: "DM message list",
|
||||
// });
|
||||
// const msgs_channel = localforage.createInstance({
|
||||
// name,
|
||||
// storeName: "msgs_channel",
|
||||
// description: "channel message list",
|
||||
// });
|
||||
window.CACHE = localforage.createInstance({
|
||||
name,
|
||||
storeName: "data",
|
||||
description: "rustchat cache data by uid",
|
||||
const name = `local_db_${uid}`;
|
||||
window.CACHE = {};
|
||||
tables.forEach(({ storeName, description }) => {
|
||||
window.CACHE[storeName] = localforage.createInstance({
|
||||
name,
|
||||
storeName,
|
||||
description,
|
||||
});
|
||||
});
|
||||
};
|
||||
export const useRehydrate = () => {
|
||||
const [iterated, setIterated] = useState(false);
|
||||
const dispatch = useDispatch();
|
||||
const rehydrate = async () => {
|
||||
const res = await window.CACHE.iterate((data, key) => {
|
||||
switch (key) {
|
||||
case "visitMark":
|
||||
dispatch(setMark(data));
|
||||
break;
|
||||
case "channels":
|
||||
dispatch(setChannels(data));
|
||||
break;
|
||||
// case "contacts":
|
||||
// dispatch(initChannelMsg(data));
|
||||
// break;
|
||||
case "channelMessage":
|
||||
dispatch(initChannelMsg(data));
|
||||
break;
|
||||
case "userMessage":
|
||||
dispatch(initUserMsg(data));
|
||||
break;
|
||||
const rehydrateData = {
|
||||
channels: [],
|
||||
contacts: [],
|
||||
channelMessage: {},
|
||||
userMessage: {},
|
||||
reactionMessage: {},
|
||||
message: { replying: {} },
|
||||
footprint: {},
|
||||
};
|
||||
const tables = Object.keys(window.CACHE);
|
||||
const results = await Promise.all(
|
||||
tables.map((_key) => {
|
||||
return window.CACHE[_key].iterate((data, key) => {
|
||||
// console.log("iterated", key);
|
||||
switch (_key) {
|
||||
case "channels":
|
||||
rehydrateData.channels.push(data);
|
||||
break;
|
||||
case "contacts":
|
||||
rehydrateData.contacts.push(data);
|
||||
break;
|
||||
case "footprint":
|
||||
rehydrateData.footprint[key] = data;
|
||||
break;
|
||||
case "messageChannel":
|
||||
rehydrateData.channelMessage[key] = data;
|
||||
break;
|
||||
case "messageDM":
|
||||
rehydrateData.userMessage[key] = data;
|
||||
break;
|
||||
case "messageReaction":
|
||||
rehydrateData.reactionMessage[key] = data;
|
||||
break;
|
||||
case "message":
|
||||
rehydrateData.message[key] = data;
|
||||
break;
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
default:
|
||||
break;
|
||||
}
|
||||
});
|
||||
})
|
||||
);
|
||||
batch(() => {
|
||||
dispatch(fullfillContacts(rehydrateData.contacts));
|
||||
console.log("fullfill channels from indexedDB");
|
||||
dispatch(fullfillChannels(rehydrateData.channels));
|
||||
dispatch(fullfillChannelMsg(rehydrateData.channelMessage));
|
||||
dispatch(fullfillUserMsg(rehydrateData.userMessage));
|
||||
dispatch(fullfillMessage(rehydrateData.message));
|
||||
dispatch(fullfillFootprint(rehydrateData.footprint));
|
||||
dispatch(fullfillReactionMessage(rehydrateData.reactionMessage));
|
||||
});
|
||||
|
||||
setIterated(true);
|
||||
console.log("iterate", res);
|
||||
// console.log("iterate results", rehydrateData, results);
|
||||
};
|
||||
return { rehydrate, cacheFirst: iterated };
|
||||
return { rehydrate, rehydrated: iterated };
|
||||
};
|
||||
|
||||
export default initCache;
|
||||
|
||||
@@ -3,6 +3,7 @@ const BASE_URL = `https://dev.rustchat.com/api`;
|
||||
// const BASE_URL = `https://rustchat.net/api`;
|
||||
export const ContentTypes = {
|
||||
text: "text/plain",
|
||||
markdown: "text/markdown",
|
||||
image: "image/png",
|
||||
json: "application/json",
|
||||
};
|
||||
|
||||
@@ -1,39 +0,0 @@
|
||||
import { createListenerMiddleware } from "@reduxjs/toolkit";
|
||||
const getCacheKey = (action = "") => {
|
||||
const [type] = action.split("/");
|
||||
const keys = [
|
||||
"visitMark",
|
||||
"channels",
|
||||
"contacts",
|
||||
"userMessage",
|
||||
"channelMessage",
|
||||
// "pendingMessage",
|
||||
];
|
||||
const [tmp = ""] = keys.filter((k) => k == type);
|
||||
return tmp;
|
||||
};
|
||||
|
||||
// Create the middleware instance and methods
|
||||
const listenerMiddleware = createListenerMiddleware();
|
||||
|
||||
// Add one or more listener entries that look for specific actions.
|
||||
// They may contain any sync or async logic, similar to thunks.
|
||||
listenerMiddleware.startListening({
|
||||
predicate: (action, currentState, previousState) => {
|
||||
const { type = "" } = action;
|
||||
|
||||
return !!getCacheKey(type);
|
||||
// console.log("listener predicate", action, currentState, previousState);
|
||||
// return true;
|
||||
},
|
||||
effect: async (action, listenerApi) => {
|
||||
const { type = "" } = action;
|
||||
const key = getCacheKey(type);
|
||||
// console.log("listener effect", key, listenerApi.getState(), window.CACHE);
|
||||
if (key && window.CACHE) {
|
||||
await window.CACHE.setItem(key, listenerApi.getState()[key]);
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
export default listenerMiddleware;
|
||||
@@ -0,0 +1,9 @@
|
||||
const clearTable = async (table) => {
|
||||
const t = window.CACHE[table];
|
||||
if (!t) return;
|
||||
|
||||
await t.iterate((data, key) => {
|
||||
t.removeItem(key);
|
||||
});
|
||||
};
|
||||
export default clearTable;
|
||||
@@ -0,0 +1,29 @@
|
||||
import clearTable from "./clear.handler";
|
||||
export default async function handler({ operation, data = {}, payload }) {
|
||||
const table = window.CACHE["messageChannel"];
|
||||
if (operation.startsWith("reset")) {
|
||||
clearTable("messageChannel");
|
||||
return;
|
||||
}
|
||||
switch (operation) {
|
||||
// case "fullfillChannelMsgs":
|
||||
// {
|
||||
// await Promise.all(
|
||||
// Object.entries(data).map(async ([cid, arr]) => {
|
||||
// await table.setItem(cid + "", arr);
|
||||
// })
|
||||
// );
|
||||
// }
|
||||
// break;
|
||||
case "addChannelMsg":
|
||||
case "removeChannelMsg":
|
||||
{
|
||||
const { id } = payload;
|
||||
|
||||
await table.setItem(id + "", data[id]);
|
||||
}
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,40 @@
|
||||
import clearTable from "./clear.handler";
|
||||
export default async function handler({ operation, data, payload }) {
|
||||
const table = window.CACHE["channels"];
|
||||
if (operation.startsWith("reset")) {
|
||||
clearTable("channels");
|
||||
return;
|
||||
}
|
||||
switch (operation) {
|
||||
// case "fullfillChannels":
|
||||
// {
|
||||
// await Promise.all(
|
||||
// data.ids.map(async (cid) => {
|
||||
// await table.setItem(cid + "", data.byId[cid]);
|
||||
// })
|
||||
// );
|
||||
// }
|
||||
// break;
|
||||
case "addChannel":
|
||||
{
|
||||
const { gid } = payload;
|
||||
await table.setItem(gid + "", payload);
|
||||
}
|
||||
break;
|
||||
case "removeChannel":
|
||||
{
|
||||
const id = payload;
|
||||
await table.removeItem(id + "");
|
||||
}
|
||||
break;
|
||||
case "updateChannel":
|
||||
{
|
||||
const { id } = payload;
|
||||
await table.setItem(id + "", data.byId[id]);
|
||||
}
|
||||
break;
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,55 @@
|
||||
import clearTable from "./clear.handler";
|
||||
export default async function handler({ operation, data, payload }) {
|
||||
const table = window.CACHE["contacts"];
|
||||
if (operation.startsWith("reset")) {
|
||||
clearTable("contacts");
|
||||
return;
|
||||
}
|
||||
switch (operation) {
|
||||
// case "fullfillContacts":
|
||||
// {
|
||||
// await Promise.all(
|
||||
// data.ids.map(async (uid) => {
|
||||
// await table.setItem(uid + "", data.byId[uid]);
|
||||
// })
|
||||
// );
|
||||
// }
|
||||
// break;
|
||||
case "updateUsersByLogs":
|
||||
{
|
||||
const changeLogs = payload;
|
||||
await Promise.all(
|
||||
changeLogs.map(async ({ action, uid }) => {
|
||||
switch (action) {
|
||||
case "update":
|
||||
case "create":
|
||||
await table.setItem(uid + "", data.byId[uid]);
|
||||
break;
|
||||
case "delete":
|
||||
await table.removeItem(uid + "");
|
||||
break;
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
})
|
||||
);
|
||||
}
|
||||
break;
|
||||
case "addContact":
|
||||
{
|
||||
const { uid } = payload;
|
||||
await table.setItem(uid + "", payload);
|
||||
}
|
||||
break;
|
||||
case "removeContact":
|
||||
{
|
||||
const id = payload;
|
||||
await table.removeItem(id + "");
|
||||
}
|
||||
break;
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
import clearTable from "./clear.handler";
|
||||
export default async function handler({ operation, data = {}, payload }) {
|
||||
const table = window.CACHE["messageDM"];
|
||||
if (operation.startsWith("reset")) {
|
||||
clearTable("messageDM");
|
||||
return;
|
||||
}
|
||||
switch (operation) {
|
||||
// case "fullfillUserMsgs":
|
||||
// {
|
||||
// await Promise.all(
|
||||
// Object.entries(data).map(async ([uid, arr]) => {
|
||||
// await table.setItem(uid + "", arr);
|
||||
// })
|
||||
// );
|
||||
// }
|
||||
// break;
|
||||
case "addUserMsg":
|
||||
case "removeUserMsg":
|
||||
{
|
||||
const { id } = payload;
|
||||
await table.setItem(id + "", data.byId[id]);
|
||||
}
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
import clearTable from "./clear.handler";
|
||||
export default async function handler({ operation, data = {}, payload }) {
|
||||
const table = window.CACHE["footprint"];
|
||||
if (operation.startsWith("reset")) {
|
||||
clearTable("footprint");
|
||||
return;
|
||||
}
|
||||
switch (operation) {
|
||||
// case "fullfillFootprint":
|
||||
// {
|
||||
// await Promise.all(
|
||||
// Object.entries(data).map(async ([key, value]) => {
|
||||
// await table.setItem(key, value);
|
||||
// })
|
||||
// );
|
||||
// }
|
||||
// break;
|
||||
case "updateUsersVersion":
|
||||
{
|
||||
const usersVersion = payload;
|
||||
await table.setItem("usersVersion", usersVersion);
|
||||
}
|
||||
break;
|
||||
case "updateAfterMid":
|
||||
{
|
||||
const afterMid = payload;
|
||||
await table.setItem("afterMid", afterMid);
|
||||
}
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,44 @@
|
||||
import clearTable from "./clear.handler";
|
||||
export default async function handler({ operation, data = {}, payload }) {
|
||||
const table = window.CACHE["message"];
|
||||
if (operation.startsWith("reset")) {
|
||||
clearTable("message");
|
||||
return;
|
||||
}
|
||||
switch (operation) {
|
||||
// case "fullfillChannelMsgs":
|
||||
// {
|
||||
// await Promise.all(
|
||||
// Object.entries(data).map(async ([mid, obj]) => {
|
||||
// await table.setItem(mid + "", obj);
|
||||
// })
|
||||
// );
|
||||
// }
|
||||
// break;
|
||||
case "addMessage":
|
||||
case "updateMessage":
|
||||
{
|
||||
const { mid } = payload;
|
||||
await table.setItem(mid + "", data[mid]);
|
||||
}
|
||||
break;
|
||||
case "removeMessage":
|
||||
{
|
||||
const mid = payload;
|
||||
await table.removeItem(mid + "");
|
||||
}
|
||||
break;
|
||||
case "readMessage":
|
||||
{
|
||||
const mids = Array.isArray(payload) ? payload : [payload];
|
||||
await Promise.all(
|
||||
mids.map(async (mid) => {
|
||||
await table.setItem(mid + "", data[mid]);
|
||||
})
|
||||
);
|
||||
}
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
import clearTable from "./clear.handler";
|
||||
export default async function handler({ operation, data = {}, payload }) {
|
||||
const table = window.CACHE["messageReaction"];
|
||||
if (operation.startsWith("reset")) {
|
||||
clearTable("messageReaction");
|
||||
return;
|
||||
}
|
||||
switch (operation) {
|
||||
// case "fullfillReactionMessage":
|
||||
// {
|
||||
// await Promise.all(
|
||||
// Object.entries(data).map(async ([mid, data]) => {
|
||||
// await table.setItem(mid + "", data);
|
||||
// })
|
||||
// );
|
||||
// }
|
||||
// break;
|
||||
case "toggleReactionMessage":
|
||||
{
|
||||
const { mid } = payload;
|
||||
await table.setItem(mid + "", data[mid]);
|
||||
}
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,114 @@
|
||||
import { createListenerMiddleware } from "@reduxjs/toolkit";
|
||||
import channelsHandler from "./handler.channels";
|
||||
import contactsHandler from "./handler.contacts";
|
||||
import channelMsgHandler from "./handler.channel.msg";
|
||||
import dmMsgHandler from "./handler.dm.msg";
|
||||
import messageHandler from "./handler.message";
|
||||
import reactionHandler from "./handler.reaction";
|
||||
import footprintHandler from "./handler.footprint";
|
||||
const operations = [
|
||||
"channels",
|
||||
"channelMessage",
|
||||
"contacts",
|
||||
"userMessage",
|
||||
"reactionMessage",
|
||||
"message",
|
||||
"footprint",
|
||||
];
|
||||
|
||||
// Create the middleware instance and methods
|
||||
const listenerMiddleware = createListenerMiddleware();
|
||||
|
||||
// Add one or more listener entries that look for specific actions.
|
||||
// They may contain any sync or async logic, similar to thunks.
|
||||
listenerMiddleware.startListening({
|
||||
predicate: (action, currentState, previousState) => {
|
||||
const { type = "" } = action;
|
||||
console.log("operation", type);
|
||||
const [prefix] = type.split("/");
|
||||
return operations.includes(prefix);
|
||||
// console.log("listener predicate", action, currentState, previousState);
|
||||
// return true;
|
||||
},
|
||||
effect: async (action, listenerApi) => {
|
||||
if (!window.CACHE) return;
|
||||
const { type = "", payload } = action;
|
||||
// const key = getCacheKey(type);
|
||||
// // console.log("listener effect", key, listenerApi.getState(), window.CACHE);
|
||||
// if (key && window.CACHE) {
|
||||
// await window.CACHE.setItem(key, listenerApi.getState()[key]);
|
||||
// }
|
||||
const [prefix, operation] = type.split("/");
|
||||
const state = listenerApi.getState()[prefix];
|
||||
switch (prefix) {
|
||||
case "channels":
|
||||
{
|
||||
await channelsHandler({
|
||||
operation,
|
||||
payload,
|
||||
data: state,
|
||||
});
|
||||
}
|
||||
break;
|
||||
case "contacts":
|
||||
{
|
||||
await contactsHandler({
|
||||
operation,
|
||||
payload,
|
||||
data: state,
|
||||
});
|
||||
}
|
||||
break;
|
||||
case "channelMessage":
|
||||
{
|
||||
await channelMsgHandler({
|
||||
operation,
|
||||
payload,
|
||||
data: state,
|
||||
});
|
||||
}
|
||||
break;
|
||||
case "userMessage":
|
||||
{
|
||||
await dmMsgHandler({
|
||||
operation,
|
||||
payload,
|
||||
data: state,
|
||||
});
|
||||
}
|
||||
break;
|
||||
case "message":
|
||||
{
|
||||
await messageHandler({
|
||||
operation,
|
||||
payload,
|
||||
data: state,
|
||||
});
|
||||
}
|
||||
break;
|
||||
case "reactionMessage":
|
||||
{
|
||||
await reactionHandler({
|
||||
operation,
|
||||
payload,
|
||||
data: state,
|
||||
});
|
||||
}
|
||||
break;
|
||||
case "footprint":
|
||||
{
|
||||
await footprintHandler({
|
||||
operation,
|
||||
payload,
|
||||
data: state,
|
||||
});
|
||||
}
|
||||
break;
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
export default listenerMiddleware;
|
||||
@@ -2,7 +2,7 @@ import { createApi } from "@reduxjs/toolkit/query/react";
|
||||
import baseQuery from "./base.query";
|
||||
import BASE_URL from "../config";
|
||||
export const authApi = createApi({
|
||||
reducerPath: "auth",
|
||||
reducerPath: "authApi",
|
||||
baseQuery,
|
||||
endpoints: (builder) => ({
|
||||
login: builder.mutation({
|
||||
|
||||
@@ -1,9 +1,15 @@
|
||||
import { fetchBaseQuery } from "@reduxjs/toolkit/query";
|
||||
import toast from "react-hot-toast";
|
||||
import dayjs from "dayjs";
|
||||
import { updateToken, clearAuthData } from "../slices/auth.data";
|
||||
import { updateToken, resetAuthData } from "../slices/auth.data";
|
||||
import BASE_URL, { tokenHeader } from "../config";
|
||||
const whiteList = ["login", "checkInviteTokenValid", "getServer", "getOpenid"];
|
||||
const whiteList = [
|
||||
"login",
|
||||
"checkInviteTokenValid",
|
||||
"getServer",
|
||||
"getOpenid",
|
||||
"getMetamaskNonce",
|
||||
];
|
||||
const baseQuery = fetchBaseQuery({
|
||||
baseUrl: BASE_URL,
|
||||
prepareHeaders: (headers, { getState, endpoint }) => {
|
||||
@@ -72,14 +78,14 @@ const baseQueryWithTokenCheck = async (args, api, extraOptions) => {
|
||||
break;
|
||||
case 401:
|
||||
{
|
||||
if (api.endpoint === "renew") {
|
||||
// toast.error("token expired, please login again");
|
||||
api.dispatch(clearAuthData());
|
||||
location.href = "/#/login";
|
||||
return;
|
||||
} else {
|
||||
toast.error("Not Authenticated");
|
||||
}
|
||||
// if (api.endpoint === "renew") {
|
||||
// toast.error("token expired, please login again");
|
||||
api.dispatch(resetAuthData());
|
||||
location.href = "/#/login";
|
||||
// } else {
|
||||
toast.error("API Not Authenticated");
|
||||
return;
|
||||
// }
|
||||
}
|
||||
break;
|
||||
case 403:
|
||||
|
||||
@@ -5,7 +5,7 @@ import { ContentTypes } from "../config";
|
||||
import { updateChannel } from "../slices/channels";
|
||||
import { onMessageSendStarted } from "./handlers";
|
||||
export const channelApi = createApi({
|
||||
reducerPath: "channel",
|
||||
reducerPath: "channelApi",
|
||||
baseQuery,
|
||||
refetchOnFocus: true,
|
||||
endpoints: (builder) => ({
|
||||
|
||||
@@ -2,10 +2,9 @@ import { createApi } from "@reduxjs/toolkit/query/react";
|
||||
// import toast from "react-hot-toast";
|
||||
import baseQuery from "./base.query";
|
||||
import BASE_URL, { ContentTypes } from "../config";
|
||||
import { removeContact } from "../slices/contacts";
|
||||
import { onMessageSendStarted } from "./handlers";
|
||||
export const contactApi = createApi({
|
||||
reducerPath: "contact",
|
||||
reducerPath: "contactApi",
|
||||
baseQuery,
|
||||
endpoints: (builder) => ({
|
||||
getContacts: builder.query({
|
||||
@@ -23,16 +22,6 @@ export const contactApi = createApi({
|
||||
}),
|
||||
deleteContact: builder.query({
|
||||
query: (uid) => ({ url: `/admin/user/${uid}`, method: "DELETE" }),
|
||||
async onQueryStarted(uid, { dispatch, queryFulfilled }) {
|
||||
// id: who send to ,from_uid: who sent
|
||||
const patchResult = dispatch(removeContact(uid));
|
||||
try {
|
||||
await queryFulfilled;
|
||||
} catch {
|
||||
console.log("channel update failed");
|
||||
patchResult.undo();
|
||||
}
|
||||
},
|
||||
}),
|
||||
updateAvatar: builder.mutation({
|
||||
query: (data) => ({
|
||||
|
||||
@@ -1,56 +1,49 @@
|
||||
import toast from "react-hot-toast";
|
||||
import { batch } from "react-redux";
|
||||
import { ContentTypes } from "../config";
|
||||
import {
|
||||
// addChannelMsg,
|
||||
addChannelPendingMsg,
|
||||
removeChannelPendingMsg,
|
||||
replaceChannelPendingMsg,
|
||||
} from "../slices/message.channel";
|
||||
import {
|
||||
addUserPendingMsg,
|
||||
removeUserPendingMsg,
|
||||
replaceUserPendingMsg,
|
||||
} from "../slices/message.user";
|
||||
|
||||
// import {
|
||||
// addPendingMessage,
|
||||
// removePendingMessage,
|
||||
// } from "../slices/message.pending";
|
||||
import { addChannelMsg, removeChannelMsg } from "../slices/message.channel";
|
||||
import { addUserMsg, removeUserMsg } from "../slices/message.user";
|
||||
import { addMessage, removeMessage } from "../slices/message";
|
||||
export const onMessageSendStarted = async (
|
||||
{ id, content, type, from_uid },
|
||||
{ id, content, type = "text", from_uid, reply_mid = null },
|
||||
{ dispatch, queryFulfilled },
|
||||
from = "channel"
|
||||
) => {
|
||||
// id: who send to ,from_uid: who sent
|
||||
const ts = new Date().getTime();
|
||||
const tmpMsg = {
|
||||
id,
|
||||
content: type == "image" ? URL.createObjectURL(content) : content,
|
||||
content_type: ContentTypes[type],
|
||||
created_at: ts,
|
||||
local_mid: ts,
|
||||
from_uid,
|
||||
// unread: false,
|
||||
reply_mid,
|
||||
// 已读
|
||||
read: true,
|
||||
sending: true,
|
||||
};
|
||||
const addPendingMessage =
|
||||
from == "channel" ? addChannelPendingMsg : addUserPendingMsg;
|
||||
const replacePendingMessage =
|
||||
from == "channel" ? replaceChannelPendingMsg : replaceUserPendingMsg;
|
||||
const removePendingMessage =
|
||||
from == "channel" ? removeChannelPendingMsg : removeUserPendingMsg;
|
||||
// dispatch(addPendingMessage({ type: from, msg: tmpMsg }));
|
||||
dispatch(addPendingMessage({ ...tmpMsg }));
|
||||
const addContextMessage = from == "channel" ? addChannelMsg : addUserMsg;
|
||||
const removeContextMessage =
|
||||
from == "channel" ? removeChannelMsg : removeUserMsg;
|
||||
batch(() => {
|
||||
dispatch(addMessage({ mid: ts, ...tmpMsg }));
|
||||
dispatch(addContextMessage({ id, mid: ts }));
|
||||
});
|
||||
|
||||
try {
|
||||
const { data: server_mid } = await queryFulfilled;
|
||||
console.log("message server mid", server_mid);
|
||||
// 此处的id，是指给谁发的
|
||||
// const addMessage = from == "channel" ? addChannelMsg : addUserMsg;
|
||||
dispatch(replacePendingMessage({ id, local_mid: ts, server_mid }));
|
||||
batch(() => {
|
||||
dispatch(removeContextMessage({ id, mid: ts }));
|
||||
dispatch(removeMessage(ts));
|
||||
dispatch(addMessage({ mid: server_mid, ...tmpMsg }));
|
||||
dispatch(addContextMessage({ id, mid: server_mid }));
|
||||
});
|
||||
// dispatch(removePendingMessage({ id, mid:ts, type: from }));
|
||||
} catch {
|
||||
console.log("message send failed");
|
||||
toast.error("Send Message Failed");
|
||||
dispatch(removePendingMessage({ id, mid: ts, type: from }));
|
||||
dispatch(removeContextMessage({ id, mid: ts }));
|
||||
dispatch(removeMessage(ts));
|
||||
// patchResult.undo();
|
||||
}
|
||||
};
|
||||
|
||||
@@ -1,10 +1,12 @@
|
||||
import { createApi } from "@reduxjs/toolkit/query/react";
|
||||
import { ContentTypes } from "../config";
|
||||
import { onMessageSendStarted } from "./handlers";
|
||||
|
||||
// import { updateMessage } from "../slices/message";
|
||||
import baseQuery from "./base.query";
|
||||
|
||||
export const messageApi = createApi({
|
||||
reducerPath: "message",
|
||||
reducerPath: "messageApi",
|
||||
baseQuery,
|
||||
endpoints: (builder) => ({
|
||||
editMessage: builder.mutation({
|
||||
@@ -16,8 +18,11 @@ export const messageApi = createApi({
|
||||
method: "PUT",
|
||||
body: content,
|
||||
}),
|
||||
// async onQueryStarted({mid,content},{dispatch}){
|
||||
// dispatch()
|
||||
// }
|
||||
}),
|
||||
likeMessage: builder.mutation({
|
||||
reactMessage: builder.mutation({
|
||||
query: ({ mid, action }) => ({
|
||||
url: `/message/${mid}/like`,
|
||||
method: "PUT",
|
||||
@@ -31,21 +36,24 @@ export const messageApi = createApi({
|
||||
}),
|
||||
}),
|
||||
replyMessage: builder.mutation({
|
||||
query: ({ mid, content, type = "text" }) => ({
|
||||
query: ({ reply_mid, content, type = "text" }) => ({
|
||||
headers: {
|
||||
"content-type": ContentTypes[type],
|
||||
},
|
||||
url: `/message/${mid}/reply`,
|
||||
url: `/message/${reply_mid}/reply`,
|
||||
method: "POST",
|
||||
body: content,
|
||||
}),
|
||||
async onQueryStarted(param1, param2) {
|
||||
await onMessageSendStarted.call(this, param1, param2, param1.context);
|
||||
},
|
||||
}),
|
||||
}),
|
||||
});
|
||||
|
||||
export const {
|
||||
useEditMessageMutation,
|
||||
useLikeMessageMutation,
|
||||
useReactMessageMutation,
|
||||
useReplyMessageMutation,
|
||||
useLazyDeleteMessageQuery,
|
||||
} = messageApi;
|
||||
|
||||
@@ -4,7 +4,7 @@ import BASE_URL from "../config";
|
||||
import baseQuery from "./base.query";
|
||||
|
||||
export const serverApi = createApi({
|
||||
reducerPath: "server",
|
||||
reducerPath: "serverApi",
|
||||
baseQuery,
|
||||
endpoints: (builder) => ({
|
||||
getServer: builder.query({
|
||||
|
||||
@@ -0,0 +1,130 @@
|
||||
import { batch } from "react-redux";
|
||||
import { addChannelMsg, removeChannelMsg } from "../../slices/message.channel";
|
||||
import { addMessage, removeMessage, updateMessage } from "../../slices/message";
|
||||
import { toggleReactionMessage } from "../../slices/message.reaction";
|
||||
import { addUserMsg, removeUserMsg } from "../../slices/message.user";
|
||||
import { updateAfterMid } from "../../slices/footprint";
|
||||
const handler = (data, dispatch, currState) => {
|
||||
const {
|
||||
mid,
|
||||
from_uid,
|
||||
created_at,
|
||||
target,
|
||||
detail: {
|
||||
mid: detailMid,
|
||||
content,
|
||||
content_type,
|
||||
type,
|
||||
properties,
|
||||
expires_in,
|
||||
detail: innerDetail,
|
||||
},
|
||||
} = data;
|
||||
const common = {
|
||||
from_uid,
|
||||
created_at,
|
||||
content,
|
||||
content_type,
|
||||
properties,
|
||||
expires_in,
|
||||
};
|
||||
switch (type) {
|
||||
case "normal":
|
||||
case "reply":
|
||||
// 更新after_mid
|
||||
dispatch(updateAfterMid(mid));
|
||||
break;
|
||||
}
|
||||
const { ready, loginUid } = currState;
|
||||
const to = typeof target.gid !== "undefined" ? "channel" : "user";
|
||||
const appendMessage = to == "user" ? addUserMsg : addChannelMsg;
|
||||
const self = from_uid == loginUid;
|
||||
// 此处有点绕
|
||||
const id = to == "user" ? (self ? target.uid : from_uid) : target.gid;
|
||||
|
||||
switch (type) {
|
||||
case "normal":
|
||||
{
|
||||
batch(() => {
|
||||
dispatch(
|
||||
addMessage({
|
||||
mid,
|
||||
// 如果是自己发的消息，就是已读
|
||||
read: self,
|
||||
...common,
|
||||
})
|
||||
);
|
||||
// 未推送完 or 不是自己发的消息
|
||||
console.log("curr state", ready, loginUid, common.from_uid);
|
||||
if (!ready || loginUid != common.from_uid) {
|
||||
dispatch(appendMessage({ id, mid }));
|
||||
}
|
||||
});
|
||||
}
|
||||
break;
|
||||
case "reply":
|
||||
{
|
||||
batch(() => {
|
||||
dispatch(
|
||||
addMessage({
|
||||
mid,
|
||||
reply_mid: detailMid,
|
||||
// 如果是自己发的消息，就是已读
|
||||
read: self,
|
||||
...common,
|
||||
})
|
||||
);
|
||||
// 未推送完 or 不是自己发的消息
|
||||
if (!ready || loginUid != common.from_uid) {
|
||||
dispatch(appendMessage({ id, mid }));
|
||||
}
|
||||
});
|
||||
}
|
||||
break;
|
||||
case "reaction":
|
||||
{
|
||||
const removeContextMessage =
|
||||
to == "user" ? removeUserMsg : removeChannelMsg;
|
||||
const { type, action, content, content_type, properties } = innerDetail;
|
||||
switch (type) {
|
||||
case "like":
|
||||
{
|
||||
dispatch(
|
||||
toggleReactionMessage({ from_uid, mid: detailMid, action })
|
||||
);
|
||||
}
|
||||
|
||||
break;
|
||||
case "delete":
|
||||
{
|
||||
batch(() => {
|
||||
dispatch(removeContextMessage({ id, mid: detailMid }));
|
||||
dispatch(removeMessage(detailMid));
|
||||
});
|
||||
}
|
||||
break;
|
||||
case "edit":
|
||||
{
|
||||
dispatch(
|
||||
updateMessage({
|
||||
mid: detailMid,
|
||||
content,
|
||||
content_type,
|
||||
properties,
|
||||
edited: true,
|
||||
})
|
||||
);
|
||||
}
|
||||
break;
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
break;
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
};
|
||||
export default handler;
|
||||
@@ -0,0 +1,173 @@
|
||||
// for SSE
|
||||
|
||||
import { createApi } from "@reduxjs/toolkit/query/react";
|
||||
import toast from "react-hot-toast";
|
||||
import BASE_URL from "../../config";
|
||||
import { setReady } from "../../slices/ui";
|
||||
import {
|
||||
fullfillChannels,
|
||||
addChannel,
|
||||
removeChannel,
|
||||
} from "../../slices/channels";
|
||||
import { updateUsersVersion } from "../../slices/footprint";
|
||||
import { updateUsersByLogs, updateUsersStatus } from "../../slices/contacts";
|
||||
import { resetAuthData } from "../../slices/auth.data";
|
||||
import baseQuery from "../base.query";
|
||||
import chatMessageHandler from "./chat.handler";
|
||||
const getQueryString = (params = {}) => {
|
||||
const sp = new URLSearchParams();
|
||||
Object.entries(params).forEach(([key, val]) => {
|
||||
if (val) {
|
||||
sp.append(key, val);
|
||||
}
|
||||
});
|
||||
return sp.toString();
|
||||
};
|
||||
export const streamingApi = createApi({
|
||||
reducerPath: "streamingApi",
|
||||
baseQuery,
|
||||
refetchOnMountOrArgChange: true,
|
||||
tagTypes: ["streaming"],
|
||||
endpoints: (builder) => ({
|
||||
initStreaming: builder.query({
|
||||
query: () => ({ url: `user/me?ts=${new Date().getTime()}` }),
|
||||
async onCacheEntryAdded(
|
||||
arg,
|
||||
{ dispatch, getState, cacheDataLoaded, cacheEntryRemoved }
|
||||
) {
|
||||
// todo
|
||||
const {
|
||||
authData: { token },
|
||||
footprint: { usersVersion, afterMid },
|
||||
} = getState();
|
||||
// create a websocket connection when the cache subscription starts
|
||||
const streaming = new EventSource(
|
||||
`${BASE_URL}/user/events?${getQueryString({
|
||||
"api-key": token,
|
||||
users_version: usersVersion,
|
||||
after_mid: afterMid,
|
||||
})}`
|
||||
);
|
||||
console.log("cache loaded 1");
|
||||
try {
|
||||
// wait for the initial query to resolve before proceeding
|
||||
await cacheDataLoaded;
|
||||
console.log("cache loaded 2");
|
||||
|
||||
streaming.onmessage = (evt) => {
|
||||
const {
|
||||
ui: { ready },
|
||||
authData: { uid: loginUid },
|
||||
} = getState();
|
||||
const data = JSON.parse(evt.data);
|
||||
const { type } = data;
|
||||
switch (type) {
|
||||
case "heartbeat":
|
||||
console.log("heartbeat");
|
||||
break;
|
||||
case "ready":
|
||||
console.log("streaming ready");
|
||||
dispatch(setReady());
|
||||
break;
|
||||
case "users_snapshot":
|
||||
{
|
||||
console.log("users snapshot");
|
||||
const { version } = data;
|
||||
dispatch(updateUsersVersion(version));
|
||||
}
|
||||
break;
|
||||
case "users_log":
|
||||
{
|
||||
console.log("users change logs");
|
||||
const { logs } = data;
|
||||
dispatch(updateUsersByLogs(logs));
|
||||
}
|
||||
break;
|
||||
case "users_state":
|
||||
case "users_state_changed":
|
||||
{
|
||||
let { type, ...rest } = data;
|
||||
const onlines =
|
||||
type == "users_state_changed" ? [rest] : rest.users;
|
||||
dispatch(updateUsersStatus(onlines));
|
||||
}
|
||||
break;
|
||||
case "kick":
|
||||
{
|
||||
console.log("kicked");
|
||||
switch (data.reason) {
|
||||
case "login_from_other_device":
|
||||
dispatch(resetAuthData());
|
||||
toast("kicked from the other device");
|
||||
break;
|
||||
case "delete_user":
|
||||
dispatch(resetAuthData());
|
||||
toast("sorry, your account has been deleted");
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
break;
|
||||
case "related_groups":
|
||||
console.log("fullfill channels from streaming", data);
|
||||
dispatch(fullfillChannels(data.groups));
|
||||
break;
|
||||
case "joined_group":
|
||||
console.log("joined group", data.group);
|
||||
dispatch(addChannel(data.group));
|
||||
break;
|
||||
case "kick_from_group":
|
||||
console.log("kicked from group", data.gid);
|
||||
dispatch(removeChannel(data.gid));
|
||||
break;
|
||||
case "chat":
|
||||
{
|
||||
chatMessageHandler(data, dispatch, { ready, loginUid });
|
||||
}
|
||||
break;
|
||||
|
||||
default:
|
||||
console.log("sse event data", data);
|
||||
break;
|
||||
}
|
||||
};
|
||||
streaming.onopen = () => {
|
||||
console.info("sse opened");
|
||||
};
|
||||
streaming.onerror = (err) => {
|
||||
switch (err.eventPhase) {
|
||||
case EventSource.CLOSED:
|
||||
console.log("sse error closed error");
|
||||
break;
|
||||
case EventSource.CONNECTING:
|
||||
console.log("sse error connecting error");
|
||||
// streamingApi.util.resetApiState({ type: "initStreaming" });
|
||||
streamingApi.util.invalidateTags("streaming");
|
||||
streamingApi.util.updateQueryData("initStreaming");
|
||||
break;
|
||||
|
||||
default:
|
||||
console.error("sse error error", err);
|
||||
// renewToken({ token, refreshToken });
|
||||
break;
|
||||
}
|
||||
};
|
||||
} catch {
|
||||
// no-op in case `cacheEntryRemoved` resolves before `cacheDataLoaded`,
|
||||
// in which case `cacheDataLoaded` will throw
|
||||
}
|
||||
// cacheEntryRemoved will resolve when the cache subscription is no longer active
|
||||
await cacheEntryRemoved;
|
||||
// perform cleanup steps once the `cacheEntryRemoved` promise resolves
|
||||
console.log("close streaming");
|
||||
streaming.close();
|
||||
},
|
||||
}),
|
||||
}),
|
||||
});
|
||||
|
||||
export const {
|
||||
useInitStreamingQuery,
|
||||
useLazyInitStreamingQuery,
|
||||
} = streamingApi;
|
||||
+19
-44
@@ -1,13 +1,7 @@
|
||||
import { createSlice } from "@reduxjs/toolkit";
|
||||
import BASE_URL, {
|
||||
KEY_REFRESH_TOKEN,
|
||||
KEY_TOKEN,
|
||||
KEY_UID,
|
||||
KEY_EXPIRE,
|
||||
} from "../config";
|
||||
import { getNonNullValues } from "../../common/utils";
|
||||
import { KEY_REFRESH_TOKEN, KEY_TOKEN, KEY_UID, KEY_EXPIRE } from "../config";
|
||||
const initialState = {
|
||||
user: null,
|
||||
uid: null,
|
||||
token: localStorage.getItem(KEY_TOKEN),
|
||||
expireTime: localStorage.getItem(KEY_EXPIRE) || new Date().getTime(),
|
||||
refreshToken: localStorage.getItem(KEY_REFRESH_TOKEN),
|
||||
@@ -17,8 +11,13 @@ const authDataSlice = createSlice({
|
||||
initialState,
|
||||
reducers: {
|
||||
setAuthData(state, action) {
|
||||
const { user, token, refresh_token, expired_in = 0 } = action.payload;
|
||||
state.user = user;
|
||||
const {
|
||||
user: { uid },
|
||||
token,
|
||||
refresh_token,
|
||||
expired_in = 0,
|
||||
} = action.payload;
|
||||
state.uid = uid;
|
||||
state.token = token;
|
||||
state.refreshToken = refresh_token;
|
||||
// 当前时间往后推expire时长
|
||||
@@ -29,43 +28,20 @@ const authDataSlice = createSlice({
|
||||
localStorage.setItem(KEY_EXPIRE, expireTime);
|
||||
localStorage.setItem(KEY_TOKEN, token);
|
||||
localStorage.setItem(KEY_REFRESH_TOKEN, refresh_token);
|
||||
localStorage.setItem(KEY_UID, user.uid);
|
||||
localStorage.setItem(KEY_UID, uid);
|
||||
},
|
||||
setUserData(state, action) {
|
||||
const user = action.payload;
|
||||
state.user = user;
|
||||
},
|
||||
updateLoginedUserByLogs(state, action) {
|
||||
const logs = action.payload;
|
||||
logs.forEach(({ action, uid, ...rest }) => {
|
||||
switch (action) {
|
||||
case "update":
|
||||
{
|
||||
const vals = getNonNullValues(rest);
|
||||
console.log("update vals", vals);
|
||||
if (Object.keys(vals).includes("avatar_updated_at")) {
|
||||
vals.avatar = `${BASE_URL}/resource/avatar?uid=${uid}&t=${vals.avatar_updated_at}`;
|
||||
}
|
||||
state.user = { ...state.user, ...vals };
|
||||
}
|
||||
|
||||
break;
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
});
|
||||
},
|
||||
clearAuthData(state) {
|
||||
resetAuthData() {
|
||||
console.log("clear auth data");
|
||||
state.user = null;
|
||||
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);
|
||||
return initialState;
|
||||
},
|
||||
setUid(state, action) {
|
||||
const uid = action.payload;
|
||||
state.uid = uid;
|
||||
},
|
||||
updateToken(state, action) {
|
||||
const { token, refresh_token, expired_in } = action.payload;
|
||||
@@ -81,10 +57,9 @@ const authDataSlice = createSlice({
|
||||
},
|
||||
});
|
||||
export const {
|
||||
updateToken,
|
||||
setAuthData,
|
||||
setUserData,
|
||||
clearAuthData,
|
||||
updateLoginedUserByLogs,
|
||||
resetAuthData,
|
||||
setUid,
|
||||
updateToken,
|
||||
} = authDataSlice.actions;
|
||||
export default authDataSlice.reducer;
|
||||
|
||||
+29
-31
@@ -1,55 +1,53 @@
|
||||
import { createSlice } from "@reduxjs/toolkit";
|
||||
const initialState = {};
|
||||
const initialState = {
|
||||
ids: [],
|
||||
byId: {},
|
||||
};
|
||||
const channelsSlice = createSlice({
|
||||
name: `channels`,
|
||||
initialState,
|
||||
reducers: {
|
||||
clearChannels() {
|
||||
resetChannels() {
|
||||
return initialState;
|
||||
},
|
||||
setChannels(state, action) {
|
||||
fullfillChannels(state, action) {
|
||||
console.log("set channels store", state);
|
||||
const chs = action.payload || [];
|
||||
return Array.isArray(chs)
|
||||
? Object.fromEntries(
|
||||
chs.map((c) => {
|
||||
const { gid, ...rest } = c;
|
||||
return [gid, rest];
|
||||
})
|
||||
)
|
||||
: chs;
|
||||
},
|
||||
|
||||
updateChannel(state, action) {
|
||||
// console.log("set channels store", action);
|
||||
const { id, name, description } = action.payload;
|
||||
const oObj = state[id];
|
||||
const newObj = { ...oObj, name, description };
|
||||
state[id] = newObj;
|
||||
state.ids = chs.map(({ gid }) => gid);
|
||||
state.byId = Object.fromEntries(
|
||||
chs.map((c) => {
|
||||
const { gid } = c;
|
||||
return [gid, c];
|
||||
})
|
||||
);
|
||||
},
|
||||
addChannel(state, action) {
|
||||
// console.log("set channels store", action);
|
||||
const ch = action.payload;
|
||||
const { gid, ...rest } = ch;
|
||||
state[gid] = rest;
|
||||
state.ids.push(gid);
|
||||
state.byId[gid] = rest;
|
||||
},
|
||||
deleteChannel(state, action) {
|
||||
updateChannel(state, action) {
|
||||
// console.log("set channels store", action);
|
||||
const { id, ...rest } = action.payload;
|
||||
state.byId[id] = { ...state.byId[id], ...rest };
|
||||
},
|
||||
removeChannel(state, action) {
|
||||
const gid = action.payload;
|
||||
delete state[gid];
|
||||
const idx = state.ids.findIndex((i) => i == gid);
|
||||
if (idx > -1) {
|
||||
state.ids.splice(idx, 1);
|
||||
delete state.byId[gid];
|
||||
}
|
||||
},
|
||||
// clearAuthData(state) {
|
||||
// console.log("clear auth data");
|
||||
// state.user = null;
|
||||
// state.token = null;
|
||||
// state.refreshToken = null;
|
||||
// },
|
||||
},
|
||||
});
|
||||
export const {
|
||||
clearChannels,
|
||||
setChannels,
|
||||
resetChannels,
|
||||
fullfillChannels,
|
||||
addChannel,
|
||||
deleteChannel,
|
||||
updateChannel,
|
||||
removeChannel,
|
||||
} = channelsSlice.actions;
|
||||
export default channelsSlice.reducer;
|
||||
|
||||
+29
-30
@@ -1,21 +1,31 @@
|
||||
import { createSlice } from "@reduxjs/toolkit";
|
||||
import { getNonNullValues } from "../../common/utils";
|
||||
const initialState = [];
|
||||
const initialState = {
|
||||
ids: [],
|
||||
byId: {},
|
||||
};
|
||||
const contactsSlice = createSlice({
|
||||
name: `contacts`,
|
||||
initialState,
|
||||
reducers: {
|
||||
clearContacts() {
|
||||
resetContacts() {
|
||||
return initialState;
|
||||
},
|
||||
setContacts(state, action) {
|
||||
console.log("set Contacts store", state);
|
||||
fullfillContacts(state, action) {
|
||||
console.log("set Contacts store", action);
|
||||
const contacts = action.payload || [];
|
||||
return contacts;
|
||||
state.ids = contacts.map(({ uid }) => uid);
|
||||
state.byId = Object.fromEntries(
|
||||
contacts.map((c) => {
|
||||
const { uid } = c;
|
||||
return [uid, c];
|
||||
})
|
||||
);
|
||||
},
|
||||
removeContact(state, action) {
|
||||
const uid = action.payload;
|
||||
return state.filter((c) => c.uid != uid);
|
||||
state.ids = state.ids.filter((i) => i != uid);
|
||||
delete state.byId[uid];
|
||||
},
|
||||
updateUsersByLogs(state, action) {
|
||||
const changeLogs = action.payload;
|
||||
@@ -24,34 +34,25 @@ const contactsSlice = createSlice({
|
||||
case "update":
|
||||
{
|
||||
const vals = getNonNullValues(rest);
|
||||
const curr = state.find(({ uid: id }) => id == uid);
|
||||
console.log("update vals", vals, curr);
|
||||
if (curr) {
|
||||
if (state.byId[uid]) {
|
||||
Object.keys(vals).forEach((k) => {
|
||||
curr[k] = vals[k];
|
||||
state.byId[uid][k] = vals[k];
|
||||
});
|
||||
}
|
||||
}
|
||||
break;
|
||||
case "create":
|
||||
{
|
||||
const idx = state.findIndex((o) => {
|
||||
return o.uid == uid;
|
||||
});
|
||||
if (idx > -1) {
|
||||
state.splice(idx, 1, { uid, ...rest });
|
||||
} else {
|
||||
state.push({ uid, ...rest });
|
||||
}
|
||||
state.byId[uid] = { uid, ...rest };
|
||||
state.ids.push(uid);
|
||||
}
|
||||
break;
|
||||
case "delete":
|
||||
{
|
||||
const idx = state.findIndex((o) => {
|
||||
return o.uid == uid;
|
||||
});
|
||||
const idx = state.ids.findIndex((i) => i == uid);
|
||||
if (idx > -1) {
|
||||
state.splice(idx, 1);
|
||||
state.ids.splice(idx, 1);
|
||||
delete state.byId[uid];
|
||||
}
|
||||
}
|
||||
break;
|
||||
@@ -63,21 +64,19 @@ const contactsSlice = createSlice({
|
||||
},
|
||||
updateUsersStatus(state, action) {
|
||||
const onlines = action.payload;
|
||||
onlines.forEach((item) => {
|
||||
const { uid, online = false } = item;
|
||||
const curr = state.find(({ uid: id }) => id == uid);
|
||||
onlines.forEach((data) => {
|
||||
const { uid, online = false } = data;
|
||||
// console.log("update user status", curr, online);
|
||||
if (curr) {
|
||||
curr.online = online;
|
||||
if (state.byId[uid]) {
|
||||
state.byId[uid].online = online;
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
});
|
||||
export const {
|
||||
clearContacts,
|
||||
setContacts,
|
||||
removeContact,
|
||||
resetContacts,
|
||||
fullfillContacts,
|
||||
updateUsersByLogs,
|
||||
updateUsersStatus,
|
||||
} = contactsSlice.actions;
|
||||
|
||||
@@ -0,0 +1,32 @@
|
||||
import { createSlice } from "@reduxjs/toolkit";
|
||||
const initialState = {
|
||||
usersVersion: 0,
|
||||
afterMid: 0,
|
||||
};
|
||||
const footprintSlice = createSlice({
|
||||
name: "footprint",
|
||||
initialState,
|
||||
reducers: {
|
||||
resetFootprint() {
|
||||
return initialState;
|
||||
},
|
||||
fullfillFootprint(state, action) {
|
||||
return action.payload;
|
||||
},
|
||||
updateUsersVersion(state, action) {
|
||||
const usersVersion = action.payload;
|
||||
state.usersVersion = usersVersion;
|
||||
},
|
||||
updateAfterMid(state, action) {
|
||||
const afterMid = action.payload;
|
||||
state.afterMid = afterMid;
|
||||
},
|
||||
},
|
||||
});
|
||||
export const {
|
||||
resetFootprint,
|
||||
fullfillFootprint,
|
||||
updateAfterMid,
|
||||
updateUsersVersion,
|
||||
} = footprintSlice.actions;
|
||||
export default footprintSlice.reducer;
|
||||
@@ -1,67 +1,38 @@
|
||||
import { createSlice } from "@reduxjs/toolkit";
|
||||
import {
|
||||
msgReaction,
|
||||
msgAdd,
|
||||
msgSetRead,
|
||||
msgClearUnread,
|
||||
msgUpdate,
|
||||
msgDelete,
|
||||
msgAddPending,
|
||||
msgRemovePending,
|
||||
msgReplacePending,
|
||||
} from "./message.handler";
|
||||
const initialState = {};
|
||||
|
||||
const channelMsgSlice = createSlice({
|
||||
name: "channelMessage",
|
||||
initialState,
|
||||
reducers: {
|
||||
clearChannelMsg() {
|
||||
resetChannelMsg() {
|
||||
return initialState;
|
||||
},
|
||||
initChannelMsg(state, action) {
|
||||
fullfillChannelMsg(state, action) {
|
||||
return action.payload;
|
||||
},
|
||||
addChannelMsg(state, action) {
|
||||
msgAdd(state, action.payload);
|
||||
const { id, mid } = action.payload;
|
||||
if (state[id]) {
|
||||
if (state[id].findIndex((id) => id == mid) > -1) return;
|
||||
state[id].push(mid);
|
||||
} else {
|
||||
state[id] = [mid];
|
||||
}
|
||||
},
|
||||
deleteChannelMsg(state, action) {
|
||||
msgDelete(state, action.payload);
|
||||
},
|
||||
updateChannelMsg(state, action) {
|
||||
msgUpdate(state, action.payload);
|
||||
},
|
||||
likeChannelMsg(state, action) {
|
||||
msgReaction(state, action.payload);
|
||||
},
|
||||
setChannelMsgRead(state, action) {
|
||||
msgSetRead(state, action.payload);
|
||||
},
|
||||
clearChannelMsgUnread(state, action) {
|
||||
msgClearUnread(state, action.payload);
|
||||
},
|
||||
addChannelPendingMsg(state, action) {
|
||||
msgAddPending(state, action.payload);
|
||||
},
|
||||
replaceChannelPendingMsg(state, action) {
|
||||
msgReplacePending(state, action.payload);
|
||||
},
|
||||
removeChannelPendingMsg(state, action) {
|
||||
msgRemovePending(state, action.payload);
|
||||
removeChannelMsg(state, action) {
|
||||
const { id, mid } = action.payload;
|
||||
if (state[id]) {
|
||||
const idx = state[id].findIndex((i) => i == mid);
|
||||
state[id].splice(idx, 1);
|
||||
}
|
||||
},
|
||||
},
|
||||
});
|
||||
export const {
|
||||
updateChannelMsg,
|
||||
deleteChannelMsg,
|
||||
likeChannelMsg,
|
||||
clearChannelMsg,
|
||||
initChannelMsg,
|
||||
clearChannelMsgUnread,
|
||||
setChannelMsgRead,
|
||||
resetChannelMsg,
|
||||
fullfillChannelMsg,
|
||||
addChannelMsg,
|
||||
addChannelPendingMsg,
|
||||
replaceChannelPendingMsg,
|
||||
removeChannelPendingMsg,
|
||||
removeChannelMsg,
|
||||
} = channelMsgSlice.actions;
|
||||
export default channelMsgSlice.reducer;
|
||||
|
||||
@@ -1,130 +0,0 @@
|
||||
import { isObjectEqual } from "../../common/utils";
|
||||
|
||||
export const msgReaction = (state, payload) => {
|
||||
const { id, from_uid, mid, action: reaction } = payload;
|
||||
console.log("msg reaction: likes", id, mid, from_uid, reaction);
|
||||
if (state[id] && state[id][mid]) {
|
||||
if (!state[id][mid].likes) {
|
||||
console.log("msg reaction: initial ");
|
||||
state[id][mid].likes = {};
|
||||
}
|
||||
const currLikes = state[id][mid].likes;
|
||||
// state[id][mid].likes = currLikes ? [...currLikes, reaction] : [reaction];
|
||||
if (currLikes[reaction]) {
|
||||
if (currLikes[reaction].includes(from_uid)) {
|
||||
const idx = currLikes[reaction].findIndex((id) => {
|
||||
return id == from_uid;
|
||||
});
|
||||
console.log("remove reaction", currLikes[reaction], idx, from_uid);
|
||||
currLikes[reaction].splice(idx, 1);
|
||||
} else {
|
||||
currLikes[reaction].push(from_uid);
|
||||
}
|
||||
} else {
|
||||
currLikes[reaction] = [from_uid];
|
||||
}
|
||||
// state[id][mid].likes = currLikes;
|
||||
}
|
||||
};
|
||||
|
||||
export const msgAdd = (state, payload) => {
|
||||
const {
|
||||
id,
|
||||
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];
|
||||
// 如果存在，并且新消息和缓存消息不一样，则替换掉，并且改为已读（可能有问题）
|
||||
if (replaceMsg) {
|
||||
const copyMsg = { ...replaceMsg };
|
||||
if (!isObjectEqual(copyMsg, newMsg)) {
|
||||
state[id][mid] = { ...newMsg, unread: false };
|
||||
}
|
||||
} else {
|
||||
state[id][mid] = newMsg;
|
||||
}
|
||||
} else {
|
||||
state[id] = { [mid]: newMsg };
|
||||
}
|
||||
};
|
||||
export const msgAddPending = (state, payload) => {
|
||||
const {
|
||||
id,
|
||||
content,
|
||||
created_at,
|
||||
local_mid,
|
||||
reply_mid = null,
|
||||
from_uid,
|
||||
content_type,
|
||||
unread = false,
|
||||
} = 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]) {
|
||||
state[id][local_mid] = newMsg;
|
||||
} else {
|
||||
state[id] = { [local_mid]: newMsg };
|
||||
}
|
||||
};
|
||||
export const msgReplacePending = (state, payload) => {
|
||||
const { id, local_mid, server_mid } = payload;
|
||||
if (state[id] && state[id][local_mid]) {
|
||||
// 先赋值，再去delete
|
||||
state[id] = Object.fromEntries(
|
||||
Object.entries(state[id]).map(([key, obj]) => {
|
||||
return key == local_mid ? [server_mid, obj] : [key, obj];
|
||||
})
|
||||
);
|
||||
// state[id][server_mid] = { ...state[id][local_mid] };
|
||||
// delete state[id][local_mid];
|
||||
}
|
||||
};
|
||||
export const msgRemovePending = (state, payload) => {
|
||||
const { id, local_mid } = payload;
|
||||
if (state[id] && state[id][local_mid]) {
|
||||
delete state[id][local_mid];
|
||||
}
|
||||
};
|
||||
export const msgSetRead = (state, payload) => {
|
||||
const { id, mid } = payload;
|
||||
console.log("set read", id, mid);
|
||||
if (state[id] && state[id][mid]) {
|
||||
state[id][mid].unread = false;
|
||||
}
|
||||
};
|
||||
export const msgDelete = (state, payload) => {
|
||||
const { id, mid } = payload;
|
||||
console.log("delete message", id, mid);
|
||||
if (state[id][mid]) {
|
||||
// state[id][mid].removed = true;
|
||||
delete state[id][mid];
|
||||
}
|
||||
};
|
||||
export const msgClearUnread = (state, id) => {
|
||||
console.log("set all unread", id);
|
||||
Object.entries(state[id]).forEach(([, obj]) => {
|
||||
obj.unread = false;
|
||||
});
|
||||
};
|
||||
export const msgUpdate = (state, payload) => {
|
||||
const { id, mid, content, time } = payload;
|
||||
console.log("update channel message", id, mid);
|
||||
if (state[id][mid]) {
|
||||
state[id][mid].content = content;
|
||||
state[id][mid].edited = time;
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,64 @@
|
||||
import { createSlice } from "@reduxjs/toolkit";
|
||||
|
||||
const initialState = {
|
||||
replying: {},
|
||||
};
|
||||
const messageSlice = createSlice({
|
||||
name: "message",
|
||||
initialState,
|
||||
reducers: {
|
||||
resetMessage() {
|
||||
return initialState;
|
||||
},
|
||||
fullfillMessage(state, action) {
|
||||
return action.payload;
|
||||
},
|
||||
updateMessage(state, action) {
|
||||
const { mid, ...rest } = action.payload;
|
||||
state[mid] = { ...state[mid], ...rest };
|
||||
},
|
||||
readMessage(state, action) {
|
||||
const mids = Array.isArray(action.payload)
|
||||
? action.payload
|
||||
: [action.payload];
|
||||
mids.forEach((id) => {
|
||||
if (state[id]) {
|
||||
state[id].read = true;
|
||||
}
|
||||
});
|
||||
},
|
||||
addMessage(state, action) {
|
||||
const { mid, sending } = action.payload;
|
||||
// 如果是正发送，并且已存在，则不覆盖
|
||||
if (sending && state[mid]) return;
|
||||
state[mid] = action.payload;
|
||||
},
|
||||
removeMessage(state, action) {
|
||||
const mid = action.payload;
|
||||
delete state[mid];
|
||||
},
|
||||
addReplyingMessage(state, action) {
|
||||
const { id, mid } = action.payload;
|
||||
console.log("to ", id, mid);
|
||||
state.replying[id] = mid;
|
||||
},
|
||||
removeReplyingMessage(state, action) {
|
||||
const id = action.payload;
|
||||
if (state.replying[id]) {
|
||||
delete state.replying[id];
|
||||
}
|
||||
},
|
||||
},
|
||||
});
|
||||
export const {
|
||||
resetMessage,
|
||||
fullfillMessage,
|
||||
setMessage,
|
||||
updateMessage,
|
||||
readMessage,
|
||||
addMessage,
|
||||
removeMessage,
|
||||
addReplyingMessage,
|
||||
removeReplyingMessage,
|
||||
} = messageSlice.actions;
|
||||
export default messageSlice.reducer;
|
||||
@@ -1,47 +0,0 @@
|
||||
import { createSlice } from "@reduxjs/toolkit";
|
||||
|
||||
const initialState = {
|
||||
reply: {},
|
||||
user: {},
|
||||
channel: {},
|
||||
};
|
||||
const pendingMessageSlice = createSlice({
|
||||
name: "pendingMessage",
|
||||
initialState,
|
||||
reducers: {
|
||||
clearPendingMsg() {
|
||||
return initialState;
|
||||
},
|
||||
addPendingMessage(state, action) {
|
||||
const { type = "user", msg } = action.payload;
|
||||
const { id, mid } = msg;
|
||||
const curr = state[type][id] || {};
|
||||
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);
|
||||
delete state[type][id][mid];
|
||||
},
|
||||
},
|
||||
});
|
||||
export const {
|
||||
clearPendingMsg,
|
||||
addPendingMessage,
|
||||
removePendingMessage,
|
||||
removeReplyMessage,
|
||||
setReplyMessage,
|
||||
} = pendingMessageSlice.actions;
|
||||
export default pendingMessageSlice.reducer;
|
||||
@@ -0,0 +1,39 @@
|
||||
import { createSlice } from "@reduxjs/toolkit";
|
||||
|
||||
const initialState = {};
|
||||
const reactionMessageSlice = createSlice({
|
||||
name: "reactionMessage",
|
||||
initialState,
|
||||
reducers: {
|
||||
resetReactionMessage() {
|
||||
return initialState;
|
||||
},
|
||||
fullfillReactionMessage(state, action) {
|
||||
return action.payload;
|
||||
},
|
||||
toggleReactionMessage(state, action) {
|
||||
const { from_uid, mid, action: reaction } = action.payload;
|
||||
console.log("msg reaction", mid, from_uid, reaction);
|
||||
if (!state[mid]) {
|
||||
state[mid] = {};
|
||||
}
|
||||
if (state[mid][reaction]) {
|
||||
const reactionUids = state[mid][reaction];
|
||||
const idx = reactionUids.findIndex((id) => id == from_uid);
|
||||
if (idx > -1) {
|
||||
reactionUids.splice(idx, 1);
|
||||
} else {
|
||||
reactionUids.push(from_uid);
|
||||
}
|
||||
} else {
|
||||
state[mid][reaction] = [from_uid];
|
||||
}
|
||||
},
|
||||
},
|
||||
});
|
||||
export const {
|
||||
resetReactionMessage,
|
||||
fullfillReactionMessage,
|
||||
toggleReactionMessage,
|
||||
} = reactionMessageSlice.actions;
|
||||
export default reactionMessageSlice.reducer;
|
||||
@@ -1,61 +1,42 @@
|
||||
import { createSlice } from "@reduxjs/toolkit";
|
||||
import {
|
||||
msgReaction,
|
||||
msgAdd,
|
||||
msgSetRead,
|
||||
msgUpdate,
|
||||
msgDelete,
|
||||
msgAddPending,
|
||||
msgRemovePending,
|
||||
msgReplacePending,
|
||||
} from "./message.handler";
|
||||
const initialState = {};
|
||||
const initialState = {
|
||||
ids: [],
|
||||
byId: {},
|
||||
};
|
||||
const userMsgSlice = createSlice({
|
||||
name: "userMessage",
|
||||
initialState,
|
||||
reducers: {
|
||||
clearUserMsg() {
|
||||
resetUserMsg() {
|
||||
return initialState;
|
||||
},
|
||||
initUserMsg(state, action) {
|
||||
return action.payload;
|
||||
fullfillUserMsg(state, action) {
|
||||
state.ids = Object.keys(action.payload);
|
||||
state.byId = action.payload;
|
||||
},
|
||||
addUserMsg(state, action) {
|
||||
msgAdd(state, action.payload);
|
||||
const { id, mid } = action.payload;
|
||||
if (state.byId[id]) {
|
||||
if (state.byId[id].findIndex((id) => id == mid) > -1) return;
|
||||
state.byId[id].push(mid);
|
||||
} else {
|
||||
state.byId[id] = [mid];
|
||||
state.ids.push(id);
|
||||
}
|
||||
},
|
||||
likeUserMsg(state, action) {
|
||||
msgReaction(state, action.payload);
|
||||
},
|
||||
updateUserMsg(state, action) {
|
||||
msgUpdate(state, action.payload);
|
||||
},
|
||||
deleteUserMsg(state, action) {
|
||||
msgDelete(state, action.payload);
|
||||
},
|
||||
setUserMsgRead(state, action) {
|
||||
msgSetRead(state, action.payload);
|
||||
},
|
||||
addUserPendingMsg(state, action) {
|
||||
msgAddPending(state, action.payload);
|
||||
},
|
||||
replaceUserPendingMsg(state, action) {
|
||||
msgReplacePending(state, action.payload);
|
||||
},
|
||||
removeUserPendingMsg(state, action) {
|
||||
msgRemovePending(state, action.payload);
|
||||
removeUserMsg(state, action) {
|
||||
const { id, mid } = action.payload;
|
||||
if (state.byId[id]) {
|
||||
const idx = state.byId[id].findIndex((i) => i == mid);
|
||||
state.byId[id].splice(idx, 1);
|
||||
}
|
||||
},
|
||||
},
|
||||
});
|
||||
export const {
|
||||
updateUserMsg,
|
||||
likeUserMsg,
|
||||
deleteUserMsg,
|
||||
clearUserMsg,
|
||||
initUserMsg,
|
||||
resetUserMsg,
|
||||
fullfillUserMsg,
|
||||
addUserMsg,
|
||||
setUserMsgRead,
|
||||
addUserPendingMsg,
|
||||
replaceUserPendingMsg,
|
||||
removeUserPendingMsg,
|
||||
removeUserMsg,
|
||||
} = userMsgSlice.actions;
|
||||
export default userMsgSlice.reducer;
|
||||
|
||||
@@ -0,0 +1,7 @@
|
||||
reset
|
||||
fullfill
|
||||
set
|
||||
add
|
||||
update
|
||||
remove
|
||||
toggle
|
||||
@@ -1,38 +0,0 @@
|
||||
import { createSlice } from "@reduxjs/toolkit";
|
||||
import { KEY_AFTER_MID, KEY_USERS_VERSION, KEY_UID } from "../config";
|
||||
const initialState = {
|
||||
usersVersion: null,
|
||||
afterMid: null,
|
||||
};
|
||||
const visitMarkSlice = createSlice({
|
||||
name: "visitMark",
|
||||
initialState,
|
||||
reducers: {
|
||||
clearMark() {
|
||||
return initialState;
|
||||
},
|
||||
setMark(state, action) {
|
||||
const mark = action.payload;
|
||||
return mark;
|
||||
},
|
||||
setUsersVersion(state, action) {
|
||||
const { version } = action.payload;
|
||||
state.usersVersion = version;
|
||||
let currUid = localStorage.getItem(KEY_UID);
|
||||
localStorage.setItem(`${KEY_USERS_VERSION}_${currUid}`, version);
|
||||
},
|
||||
setAfterMid(state, action) {
|
||||
const { mid } = action.payload;
|
||||
state.afterMid = mid;
|
||||
let currUid = localStorage.getItem(KEY_UID);
|
||||
localStorage.setItem(`${KEY_AFTER_MID}_${currUid}`, mid);
|
||||
},
|
||||
},
|
||||
});
|
||||
export const {
|
||||
setMark,
|
||||
setUsersVersion,
|
||||
setAfterMid,
|
||||
clearMark,
|
||||
} = visitMarkSlice.actions;
|
||||
export default visitMarkSlice.reducer;
|
||||
+11
-6
@@ -2,33 +2,37 @@ import { configureStore, combineReducers } from "@reduxjs/toolkit";
|
||||
import { setupListeners } from "@reduxjs/toolkit/query";
|
||||
import listenerMiddleware from "./listener.middleware";
|
||||
import authDataReducer from "./slices/auth.data";
|
||||
import visitMarkReducer from "./slices/visit.mark";
|
||||
import footprintReducer from "./slices/footprint";
|
||||
import uiReducer from "./slices/ui";
|
||||
import channelsReducer from "./slices/channels";
|
||||
import contactsReducer from "./slices/contacts";
|
||||
import pendingMsgReducer from "./slices/message.pending";
|
||||
import reactionMsgReducer from "./slices/message.reaction";
|
||||
import channelMsgReducer from "./slices/message.channel";
|
||||
import userMsgReducer from "./slices/message.user";
|
||||
import messageReducer from "./slices/message";
|
||||
import { authApi } from "./services/auth";
|
||||
import { contactApi } from "./services/contact";
|
||||
import { channelApi } from "./services/channel";
|
||||
import { messageApi } from "./services/message";
|
||||
import { serverApi } from "./services/server";
|
||||
import { streamingApi } from "./services/streaming";
|
||||
|
||||
const reducer = combineReducers({
|
||||
authData: authDataReducer,
|
||||
ui: uiReducer,
|
||||
visitMark: visitMarkReducer,
|
||||
footprint: footprintReducer,
|
||||
contacts: contactsReducer,
|
||||
channels: channelsReducer,
|
||||
pendingMessage: pendingMsgReducer,
|
||||
reactionMessage: reactionMsgReducer,
|
||||
userMessage: userMsgReducer,
|
||||
channelMessage: channelMsgReducer,
|
||||
authData: authDataReducer,
|
||||
message: messageReducer,
|
||||
[authApi.reducerPath]: authApi.reducer,
|
||||
[messageApi.reducerPath]: messageApi.reducer,
|
||||
[contactApi.reducerPath]: contactApi.reducer,
|
||||
[channelApi.reducerPath]: channelApi.reducer,
|
||||
[serverApi.reducerPath]: serverApi.reducer,
|
||||
[streamingApi.reducerPath]: streamingApi.reducer,
|
||||
});
|
||||
|
||||
const store = configureStore({
|
||||
@@ -40,7 +44,8 @@ const store = configureStore({
|
||||
contactApi.middleware,
|
||||
channelApi.middleware,
|
||||
serverApi.middleware,
|
||||
messageApi.middleware
|
||||
messageApi.middleware,
|
||||
streamingApi.middleware
|
||||
)
|
||||
.prepend(listenerMiddleware.middleware),
|
||||
});
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import { getInitials, getInitialsAvatar } from "../utils";
|
||||
export default function Avatar({ url, name = "unkonw name", ...rest }) {
|
||||
const [src, setSrc] = useState(url);
|
||||
// console.log("avatar url", url);
|
||||
const [src, setSrc] = useState("");
|
||||
const handleError = () => {
|
||||
const tmp = getInitialsAvatar({
|
||||
initials: getInitials(name),
|
||||
@@ -14,6 +15,8 @@ export default function Avatar({ url, name = "unkonw name", ...rest }) {
|
||||
initials: getInitials(name),
|
||||
});
|
||||
setSrc(tmp);
|
||||
} else {
|
||||
setSrc(url);
|
||||
}
|
||||
}, [url, name]);
|
||||
|
||||
|
||||
@@ -15,6 +15,9 @@ import { addChannel } from "../../../app/slices/channels";
|
||||
import { useCreateChannelMutation } from "../../../app/services/channel";
|
||||
|
||||
export default function ChannelModal({ personal = false, closeModal }) {
|
||||
const { conactsData, loginUid } = useSelector((store) => {
|
||||
return { conactsData: store.contacts.byId, loginUid: store.authData.uid };
|
||||
});
|
||||
const navigateTo = useNavigate();
|
||||
const dispatch = useDispatch();
|
||||
const [data, setData] = useState({
|
||||
@@ -28,9 +31,7 @@ export default function ChannelModal({ personal = false, closeModal }) {
|
||||
createChannel,
|
||||
{ isSuccess, isError, isLoading, data: newChannel },
|
||||
] = useCreateChannelMutation();
|
||||
const currentUser = useSelector((state) => {
|
||||
return state.authData.user;
|
||||
});
|
||||
|
||||
const handleToggle = () => {
|
||||
const { is_public } = data;
|
||||
setData((prev) => {
|
||||
@@ -48,6 +49,7 @@ export default function ChannelModal({ personal = false, closeModal }) {
|
||||
}
|
||||
createChannel(data);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (isError) {
|
||||
toast.error("create new channel failed");
|
||||
@@ -83,7 +85,8 @@ export default function ChannelModal({ personal = false, closeModal }) {
|
||||
console.log({ data });
|
||||
};
|
||||
console.log("contacts", contacts);
|
||||
if (!currentUser) return null;
|
||||
const loginUser = conactsData[loginUid];
|
||||
if (!loginUser) return null;
|
||||
const { name, members, is_public } = data;
|
||||
return (
|
||||
<Modal>
|
||||
@@ -142,17 +145,14 @@ export default function ChannelModal({ personal = false, closeModal }) {
|
||||
<ChannelIcon personal={!is_public} className="icon" />
|
||||
</div>
|
||||
</div>
|
||||
{/* admin or */}
|
||||
{
|
||||
<div className="private">
|
||||
<span className="txt normal">Private Channel</span>
|
||||
<StyledToggle
|
||||
data-checked={!is_public}
|
||||
data-disabled={!currentUser?.is_admin}
|
||||
onClick={handleToggle}
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
<div className="private">
|
||||
<span className="txt normal">Private Channel</span>
|
||||
<StyledToggle
|
||||
data-checked={!is_public}
|
||||
data-disabled={!loginUser?.is_admin}
|
||||
onClick={handleToggle}
|
||||
/>
|
||||
</div>
|
||||
<div className="btns">
|
||||
<Button onClick={closeModal} className="normal cancel">
|
||||
Cancel
|
||||
|
||||
@@ -4,7 +4,7 @@ import toast from "react-hot-toast";
|
||||
import { useNavigate, useMatch } from "react-router-dom";
|
||||
import { useDispatch } from "react-redux";
|
||||
import { toggleChannelSetting } from "../../../app/slices/ui";
|
||||
import { deleteChannel } from "../../../app/slices/channels";
|
||||
import { removeChannel } from "../../../app/slices/channels";
|
||||
import Modal from "../Modal";
|
||||
// import BASE_URL from "../../app/config";
|
||||
import { useLazyRemoveChannelQuery } from "../../../app/services/channel";
|
||||
@@ -15,14 +15,14 @@ export default function DeleteConfirmModal({ id, closeModal }) {
|
||||
const navigateTo = useNavigate();
|
||||
const dispatch = useDispatch();
|
||||
const pathMatched = useMatch(`/chat/channel/${id}`);
|
||||
const [removeChannel, { isLoading, isSuccess }] = useLazyRemoveChannelQuery();
|
||||
const [deleteChannel, { isLoading, isSuccess }] = useLazyRemoveChannelQuery();
|
||||
const handleDelete = () => {
|
||||
removeChannel(id);
|
||||
deleteChannel(id);
|
||||
};
|
||||
useEffect(() => {
|
||||
if (isSuccess) {
|
||||
toast.success("delete channel successfully!");
|
||||
dispatch(deleteChannel(id));
|
||||
dispatch(removeChannel(id));
|
||||
dispatch(toggleChannelSetting());
|
||||
if (pathMatched) {
|
||||
navigateTo("/chat");
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import styled from "styled-components";
|
||||
import toast from "react-hot-toast";
|
||||
// import { useSelector } from "react-redux";
|
||||
import {
|
||||
useGetChannelQuery,
|
||||
useUpdateChannelMutation,
|
||||
|
||||
@@ -2,13 +2,14 @@ import Overview from "./Overview";
|
||||
import ManageMembers from "../ManageMembers";
|
||||
import { useSelector } from "react-redux";
|
||||
const useNavs = (channelId) => {
|
||||
const { channels, contacts } = useSelector((store) => {
|
||||
const { channels, contactIds } = useSelector((store) => {
|
||||
return {
|
||||
channels: store.channels,
|
||||
contacts: store.contacts,
|
||||
channels: store.channels.byId,
|
||||
contactIds: store.contacts.ids,
|
||||
};
|
||||
});
|
||||
const ids = channels[channelId]?.members || [];
|
||||
let ids = channels[channelId]?.members ?? [];
|
||||
ids = ids.length == 0 ? contactIds : ids;
|
||||
const navs = [
|
||||
{
|
||||
title: "General",
|
||||
@@ -38,15 +39,7 @@ const useNavs = (channelId) => {
|
||||
{
|
||||
name: "members",
|
||||
title: "Members",
|
||||
component: (
|
||||
<ManageMembers
|
||||
members={
|
||||
ids.length == 0
|
||||
? contacts
|
||||
: contacts.filter((c) => ids.includes(c.uid))
|
||||
}
|
||||
/>
|
||||
),
|
||||
component: <ManageMembers members={ids} />,
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
@@ -65,9 +65,8 @@ export default function Contact({
|
||||
popover = false,
|
||||
compact = false,
|
||||
}) {
|
||||
const contacts = useSelector((store) => store.contacts);
|
||||
if (!contacts) return null;
|
||||
const currUser = contacts.find((c) => c.uid == uid);
|
||||
const curr = useSelector((store) => store.contacts.byId[uid]);
|
||||
if (!curr) return null;
|
||||
return (
|
||||
<StyledWrapper
|
||||
className={`${interactive ? "interactive" : ""} ${
|
||||
@@ -81,16 +80,16 @@ export default function Contact({
|
||||
disabled={!popover}
|
||||
placement="left"
|
||||
trigger="click"
|
||||
content={<Profile data={currUser} type="card" />}
|
||||
content={<Profile uid={uid} type="card" />}
|
||||
>
|
||||
<div className="avatar">
|
||||
<Avatar url={currUser?.avatar} name={currUser?.name} alt="avatar" />
|
||||
<Avatar url={curr?.avatar} name={curr?.name} alt="avatar" />
|
||||
<div
|
||||
className={`status ${currUser?.online ? "online" : "offline"}`}
|
||||
className={`status ${curr?.online ? "online" : "offline"}`}
|
||||
></div>
|
||||
</div>
|
||||
</Tippy>
|
||||
{!compact && <span className="name">{currUser?.name}</span>}
|
||||
{!compact && <span className="name">{curr?.name}</span>}
|
||||
</StyledWrapper>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
import { useRef } from "react";
|
||||
import styled from "styled-components";
|
||||
import { useSelector } from "react-redux";
|
||||
import { NavLink } from "react-router-dom";
|
||||
import { useOutsideClick } from "rooks";
|
||||
import useFilteredUsers from "../hook/useFilteredUsers";
|
||||
@@ -55,15 +54,12 @@ const StyledWrapper = styled.div`
|
||||
export default function ContactsModal({ closeModal }) {
|
||||
const wrapperRef = useRef();
|
||||
const { contacts, updateInput, input } = useFilteredUsers();
|
||||
const currentUser = useSelector((state) => {
|
||||
return state.authData.user;
|
||||
});
|
||||
useOutsideClick(wrapperRef, closeModal);
|
||||
const handleSearch = (evt) => {
|
||||
updateInput(evt.target.value);
|
||||
console.log("www");
|
||||
// updateInput(evt.target.value);
|
||||
};
|
||||
|
||||
if (!currentUser) return null;
|
||||
return (
|
||||
<Modal>
|
||||
<StyledWrapper ref={wrapperRef}>
|
||||
|
||||
@@ -57,11 +57,13 @@ const StyledWrapper = styled.div`
|
||||
}
|
||||
}
|
||||
`;
|
||||
export default function CurrentUser({ expand = true }) {
|
||||
const { user } = useSelector((store) => store.authData);
|
||||
export default function CurrentUser() {
|
||||
const currUser = useSelector((store) => {
|
||||
return store.contacts.byId[store.authData.uid];
|
||||
});
|
||||
|
||||
if (!user) return null;
|
||||
const { uid, name, avatar } = user;
|
||||
if (!currUser) return null;
|
||||
const { uid, name, avatar } = currUser;
|
||||
return (
|
||||
<StyledWrapper>
|
||||
<div className="profile">
|
||||
@@ -71,20 +73,20 @@ export default function CurrentUser({ expand = true }) {
|
||||
<span className="id">#{uid}</span>
|
||||
</div>
|
||||
</div>
|
||||
{expand && (
|
||||
<div className="settings">
|
||||
<img
|
||||
src="https://static.nicegoodthings.com/project/rustchat/icon.speaker.svg"
|
||||
className="icon"
|
||||
alt="mic icon"
|
||||
/>
|
||||
<img
|
||||
src="https://static.nicegoodthings.com/project/rustchat/icon.mic.svg"
|
||||
className="icon"
|
||||
alt="sound icon"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{/* {expand && ( */}
|
||||
<div className="settings">
|
||||
<img
|
||||
src="https://static.nicegoodthings.com/project/rustchat/icon.speaker.svg"
|
||||
className="icon"
|
||||
alt="mic icon"
|
||||
/>
|
||||
<img
|
||||
src="https://static.nicegoodthings.com/project/rustchat/icon.mic.svg"
|
||||
className="icon"
|
||||
alt="sound icon"
|
||||
/>
|
||||
</div>
|
||||
{/* )} */}
|
||||
</StyledWrapper>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import { useState, useRef, useEffect } from "react";
|
||||
import styled from "styled-components";
|
||||
import { useOutsideClick } from "rooks";
|
||||
import { useSelector } from "react-redux";
|
||||
import toast from "react-hot-toast";
|
||||
import useCopy from "../hook/useCopy";
|
||||
import { useLazyDeleteContactQuery } from "../../app/services/contact";
|
||||
@@ -85,6 +86,7 @@ const StyledWrapper = styled.section`
|
||||
}
|
||||
`;
|
||||
export default function ManageMembers({ members = [] }) {
|
||||
const contacts = useSelector((store) => store.contacts);
|
||||
const [copied, copy] = useCopy();
|
||||
const [remove, { isSuccess: removeSuccess }] = useLazyDeleteContactQuery();
|
||||
const wrapperRef = useRef(null);
|
||||
@@ -111,6 +113,7 @@ export default function ManageMembers({ members = [] }) {
|
||||
const handleCopy = (str) => {
|
||||
copy(str);
|
||||
};
|
||||
const uids = !members || members.length == 0 ? contacts.ids : members;
|
||||
return (
|
||||
<StyledWrapper>
|
||||
<div className="intro">
|
||||
@@ -121,12 +124,12 @@ export default function ManageMembers({ members = [] }) {
|
||||
</p>
|
||||
</div>
|
||||
<ul className="members">
|
||||
{members.map((m) => {
|
||||
const { name, email, uid, is_admin } = m;
|
||||
{uids.map((uid) => {
|
||||
const { name, email, is_admin } = contacts.byId[uid];
|
||||
return (
|
||||
<li key={uid} className="member">
|
||||
<div className="left">
|
||||
<Contact compact uid={uid} name={name} interactive={false} />
|
||||
<Contact compact uid={uid} interactive={false} />
|
||||
<div className="info">
|
||||
<span className="name">{name}</span>
|
||||
<span className="email">{email}</span>
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
|
||||
@@ -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)}
|
||||
>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>;
|
||||
}
|
||||
@@ -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>;
|
||||
}
|
||||
@@ -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}
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -22,7 +22,10 @@ import {
|
||||
clearAuthData,
|
||||
updateLoginedUserByLogs,
|
||||
} from "../../../app/slices/auth.data";
|
||||
import { setUsersVersion, setAfterMid } from "../../../app/slices/visit.mark";
|
||||
import {
|
||||
updateUsersVersion,
|
||||
updateAfterMid,
|
||||
} from "../../../app/slices/visit.mark";
|
||||
|
||||
import { setReady } from "../../../app/slices/ui";
|
||||
import useMessageHandler from "./useMessageHandler";
|
||||
@@ -117,7 +120,7 @@ const NotificationHub = () => {
|
||||
{
|
||||
console.log("users snapshot");
|
||||
const { version } = data;
|
||||
dispatch(setUsersVersion({ version }));
|
||||
dispatch(updateUsersVersion({ version }));
|
||||
}
|
||||
break;
|
||||
case "users_log":
|
||||
@@ -179,7 +182,7 @@ const NotificationHub = () => {
|
||||
|
||||
// 更新after_mid
|
||||
if (data.detail.type == "normal") {
|
||||
dispatch(setAfterMid({ mid: data.mid }));
|
||||
dispatch(updateAfterMid({ mid: data.mid }));
|
||||
}
|
||||
}
|
||||
break;
|
||||
|
||||
@@ -51,7 +51,7 @@ export default function useMessageHandler(currUser) {
|
||||
dispatch(
|
||||
addMessage({
|
||||
id, // 自己发的 就不用标记未读
|
||||
unread: !self,
|
||||
read: !self,
|
||||
...common,
|
||||
})
|
||||
);
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
// import React from "react";
|
||||
// import toast from "react-hot-toast";
|
||||
// import { useState, useEffect } from "react";
|
||||
|
||||
import { useSelector } from "react-redux";
|
||||
import { NavLink } from "react-router-dom";
|
||||
import { BsChatText } from "react-icons/bs";
|
||||
import { RiUserAddLine } from "react-icons/ri";
|
||||
@@ -62,9 +62,11 @@ const StyledWrapper = styled.div`
|
||||
}
|
||||
}
|
||||
`;
|
||||
export default function Profile({ data = null, type = "embed" }) {
|
||||
export default function Profile({ uid = null, type = "embed" }) {
|
||||
const data = useSelector((store) => store.contacts.byId[uid]);
|
||||
if (!data) return null;
|
||||
const { uid, name, email, avatar } = data;
|
||||
// console.log("profile", data);
|
||||
const { name, email, avatar } = data;
|
||||
return (
|
||||
<StyledWrapper className={type}>
|
||||
<Avatar className="avatar" url={avatar} name={name} />
|
||||
|
||||
@@ -34,6 +34,7 @@ const StyledWrapper = styled.div`
|
||||
cursor: pointer;
|
||||
}
|
||||
.popup {
|
||||
z-index: 999;
|
||||
user-select: none;
|
||||
box-shadow: 0px 20px 25px rgba(31, 41, 55, 0.1),
|
||||
0px 10px 10px rgba(31, 41, 55, 0.04);
|
||||
@@ -63,7 +64,9 @@ const StyledWrapper = styled.div`
|
||||
}
|
||||
`;
|
||||
export default function Search() {
|
||||
const currentUser = useSelector((store) => store.authData.user);
|
||||
const currentUser = useSelector(
|
||||
(store) => store.contacts.byId[store.authData.uid]
|
||||
);
|
||||
const [popupVisible, setPopupVisible] = useState(false);
|
||||
const [channelModalVisible, setChannelModalVisible] = useState(false);
|
||||
const [contactsModalVisible, setContactsModalVisible] = useState(false);
|
||||
@@ -85,6 +88,7 @@ export default function Search() {
|
||||
const handleCloseModal = () => {
|
||||
setChannelModalVisible(false);
|
||||
};
|
||||
console.log("searching");
|
||||
return (
|
||||
<StyledWrapper>
|
||||
{channelModalVisible && (
|
||||
|
||||
@@ -0,0 +1,28 @@
|
||||
// import React from 'react'
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import { MdClose } from "react-icons/md";
|
||||
import { removeReplyingMessage } from "../../../app/slices/message";
|
||||
|
||||
export default function Replying({ id, mid }) {
|
||||
const { msg, contactsData } = useSelector((store) => {
|
||||
return { contactsData: store.contacts.byId, msg: store.message[mid] };
|
||||
});
|
||||
const dispatch = useDispatch();
|
||||
const removeReply = () => {
|
||||
dispatch(removeReplyingMessage(id));
|
||||
};
|
||||
if (!msg) return null;
|
||||
const { from_uid } = msg;
|
||||
const user = contactsData[from_uid];
|
||||
return (
|
||||
<div className="reply">
|
||||
<span className="txt">
|
||||
Replying to
|
||||
<em>{user?.name}</em>
|
||||
</span>
|
||||
<button className="close" onClick={removeReply}>
|
||||
<MdClose size={20} color="#78787C" />
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -2,11 +2,8 @@ import { useState, useEffect } from "react";
|
||||
import { useSelector } from "react-redux";
|
||||
// import toast from "react-hot-toast";
|
||||
// import { useNavigate } from "react-router-dom";
|
||||
// import { useSelector, useDispatch } from "react-redux";
|
||||
import { useSendChannelMsgMutation } from "../../../../app/services/channel";
|
||||
import { useSendMsgMutation } from "../../../../app/services/contact";
|
||||
// import { addChannelMsg } from "../../../../app/slices/message.channel";
|
||||
// import { addUserMsg } from "../../../../app/slices/message.user";
|
||||
import Modal from "../../Modal";
|
||||
import Button from "../../styled/Button";
|
||||
|
||||
@@ -19,7 +16,7 @@ export default function UploadModal({
|
||||
closeModal,
|
||||
}) {
|
||||
// const dispatch = useDispatch();
|
||||
const from_uid = useSelector((store) => store.authData.user.uid);
|
||||
const from_uid = useSelector((store) => store.authData.uid);
|
||||
const [
|
||||
sendChannelMsg,
|
||||
{ isLoading: channelSending },
|
||||
|
||||
+140
-132
@@ -1,140 +1,148 @@
|
||||
import { useState, useEffect, useRef } from 'react';
|
||||
import { MdAdd, MdClose } from 'react-icons/md';
|
||||
import TextareaAutosize from 'react-textarea-autosize';
|
||||
import { useDispatch, useSelector } from 'react-redux';
|
||||
import { useKey } from 'rooks';
|
||||
import { useState, useEffect, useRef } from "react";
|
||||
import { MdAdd } from "react-icons/md";
|
||||
import TextareaAutosize from "react-textarea-autosize";
|
||||
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';
|
||||
import EmojiPicker from './EmojiPicker';
|
||||
import { removeReplyingMessage } from "../../../app/slices/message";
|
||||
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";
|
||||
import EmojiPicker from "./EmojiPicker";
|
||||
import Replying from "./Replying";
|
||||
|
||||
const Types = {
|
||||
channel: '#',
|
||||
user: '@'
|
||||
channel: "#",
|
||||
user: "@",
|
||||
};
|
||||
export default function Send({
|
||||
name,
|
||||
type = 'channel',
|
||||
// 发给谁，或者是channel，或者是user
|
||||
id = '',
|
||||
dragFiles = []
|
||||
name,
|
||||
type = "channel",
|
||||
// 发给谁，或者是channel，或者是user
|
||||
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 {
|
||||
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]);
|
||||
}
|
||||
}, [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 { from_uid, replying_mid = null } = useSelector((store) => {
|
||||
return {
|
||||
from_uid: store.authData.uid,
|
||||
replying_mid: store.message.replying[id],
|
||||
};
|
||||
});
|
||||
useEffect(() => {
|
||||
if (dragFiles.length) {
|
||||
setFiles((prev) => [...prev, ...dragFiles]);
|
||||
}
|
||||
}, [dragFiles]);
|
||||
|
||||
const [sendMsg, { isLoading: userSending }] = useSendMsgMutation();
|
||||
const [sendChannelMsg, { isLoading: channelSending }] = useSendChannelMsgMutation();
|
||||
const sendMessage = type == 'channel' ? sendChannelMsg : sendMsg;
|
||||
const sendingMessage = userSending || channelSending;
|
||||
useKey(
|
||||
'Shift',
|
||||
(e) => {
|
||||
console.log('shift', e.type);
|
||||
setShift(e.type == 'keydown');
|
||||
},
|
||||
{ eventTypes: ['keydown', 'keyup'], target: inputRef }
|
||||
);
|
||||
const handleMsgChange = (evt) => {
|
||||
if (enter && !shift) {
|
||||
handleSendMessage();
|
||||
} else {
|
||||
setMsg(evt.target.value);
|
||||
}
|
||||
};
|
||||
const handleInputKeydown = (e) => {
|
||||
console.log('keydown event', e);
|
||||
setEnter(e.key === 'Enter');
|
||||
};
|
||||
const selectEmoji = (emoji) => {
|
||||
setMsg((prev) => `${prev}${emoji}`);
|
||||
};
|
||||
useEffect(() => {
|
||||
inputRef.current.focus();
|
||||
}, [msg, reply]);
|
||||
const handleUpload = (evt) => {
|
||||
setFiles([...evt.target.files]);
|
||||
};
|
||||
const handleSendMessage = () => {
|
||||
if (!msg || !id || sendingMessage) return;
|
||||
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 ${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 multiple={true} onChange={handleUpload} type="file" name="file" id="file" />
|
||||
</div>
|
||||
<div className="input">
|
||||
<TextareaAutosize
|
||||
autoFocus
|
||||
onFocus={(e) =>
|
||||
e.currentTarget.setSelectionRange(e.currentTarget.value.length, e.currentTarget.value.length)
|
||||
}
|
||||
ref={inputRef}
|
||||
className="content"
|
||||
maxRows={8}
|
||||
minRows={1}
|
||||
onKeyDown={handleInputKeydown}
|
||||
onChange={handleMsgChange}
|
||||
value={msg}
|
||||
placeholder={`给 ${Types[type]}${name} 发消息`}
|
||||
/>
|
||||
</div>
|
||||
<div className="emoji">
|
||||
<EmojiPicker selectEmoji={selectEmoji} />
|
||||
</div>
|
||||
</StyledSend>
|
||||
{files.length !== 0 && (
|
||||
<UploadModal type={type} files={files} sendTo={id} closeModal={resetFiles} />
|
||||
)}
|
||||
</>
|
||||
);
|
||||
const [sendMsg, { isLoading: userSending }] = useSendMsgMutation();
|
||||
const [
|
||||
sendChannelMsg,
|
||||
{ isLoading: channelSending },
|
||||
] = useSendChannelMsgMutation();
|
||||
const sendMessage = type == "channel" ? sendChannelMsg : sendMsg;
|
||||
const sendingMessage = userSending || channelSending;
|
||||
useKey(
|
||||
"Shift",
|
||||
(e) => {
|
||||
console.log("shift", e.type);
|
||||
setShift(e.type == "keydown");
|
||||
},
|
||||
{ eventTypes: ["keydown", "keyup"], target: inputRef }
|
||||
);
|
||||
const handleMsgChange = (evt) => {
|
||||
if (enter && !shift) {
|
||||
handleSendMessage();
|
||||
} else {
|
||||
setMsg(evt.target.value);
|
||||
}
|
||||
};
|
||||
const handleInputKeydown = (e) => {
|
||||
console.log("keydown event", e);
|
||||
setEnter(e.key === "Enter");
|
||||
};
|
||||
const selectEmoji = (emoji) => {
|
||||
setMsg((prev) => `${prev}${emoji}`);
|
||||
};
|
||||
useEffect(() => {
|
||||
inputRef.current.focus();
|
||||
}, [msg, replying_mid]);
|
||||
const handleUpload = (evt) => {
|
||||
setFiles([...evt.target.files]);
|
||||
};
|
||||
const handleSendMessage = () => {
|
||||
if (!msg || !id || sendingMessage) return;
|
||||
if (replying_mid) {
|
||||
console.log("replying", replying_mid);
|
||||
replyMessage({
|
||||
id,
|
||||
reply_mid: replying_mid,
|
||||
content: msg,
|
||||
context: type,
|
||||
from_uid,
|
||||
});
|
||||
dispatch(removeReplyingMessage(id));
|
||||
} else {
|
||||
sendMessage({ id, content: msg, from_uid });
|
||||
}
|
||||
setMsg("");
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<StyledSend className={`send ${replying_mid ? "reply" : ""}`}>
|
||||
{replying_mid && <Replying mid={replying_mid} id={id} />}
|
||||
<div className="addon">
|
||||
<MdAdd size={20} color="#78787C" />
|
||||
<input
|
||||
multiple={true}
|
||||
onChange={handleUpload}
|
||||
type="file"
|
||||
name="file"
|
||||
id="file"
|
||||
/>
|
||||
</div>
|
||||
<div className="input">
|
||||
<TextareaAutosize
|
||||
autoFocus
|
||||
onFocus={(e) =>
|
||||
e.currentTarget.setSelectionRange(
|
||||
e.currentTarget.value.length,
|
||||
e.currentTarget.value.length
|
||||
)
|
||||
}
|
||||
ref={inputRef}
|
||||
className="content"
|
||||
maxRows={8}
|
||||
minRows={1}
|
||||
onKeyDown={handleInputKeydown}
|
||||
onChange={handleMsgChange}
|
||||
value={msg}
|
||||
placeholder={`给 ${Types[type]}${name} 发消息`}
|
||||
/>
|
||||
</div>
|
||||
<div className="emoji">
|
||||
<EmojiPicker selectEmoji={selectEmoji} />
|
||||
</div>
|
||||
</StyledSend>
|
||||
{files.length !== 0 && (
|
||||
<UploadModal
|
||||
type={type}
|
||||
files={files}
|
||||
sendTo={id}
|
||||
closeModal={resetFiles}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -114,7 +114,9 @@ export default function MyAccount() {
|
||||
uploadAvatar,
|
||||
{ isSuccess: uploadSuccess },
|
||||
] = useUpdateAvatarMutation();
|
||||
const { user } = useSelector((store) => store.authData);
|
||||
const loginUser = useSelector((store) => {
|
||||
return store.contacts.byId[store.authData.uid];
|
||||
});
|
||||
useEffect(() => {
|
||||
if (uploadSuccess) {
|
||||
toast.success("update avatar successfully!");
|
||||
@@ -127,8 +129,8 @@ export default function MyAccount() {
|
||||
const closeBasicEditModal = () => {
|
||||
setEditModal(null);
|
||||
};
|
||||
if (!user) return null;
|
||||
const { uid, avatar, name, email } = user;
|
||||
if (!loginUser) return null;
|
||||
const { uid, avatar, name, email } = loginUser;
|
||||
return (
|
||||
<>
|
||||
<StyledWrapper>
|
||||
|
||||
@@ -66,7 +66,9 @@ const StyledWrapper = styled.div`
|
||||
}
|
||||
`;
|
||||
export default function Overview() {
|
||||
const currUser = useSelector((store) => store.authData.user);
|
||||
const loginUser = useSelector((store) => {
|
||||
return store.contacts.byId[store.authData.uid];
|
||||
});
|
||||
const [changed, setChanged] = useState(false);
|
||||
const [values, setValues] = useState(null);
|
||||
const { data, refetch } = useGetServerQuery();
|
||||
@@ -119,7 +121,7 @@ export default function Overview() {
|
||||
|
||||
if (!values) return null;
|
||||
const { name, description, logo } = values;
|
||||
const isAdmin = currUser?.is_admin;
|
||||
const isAdmin = loginUser?.is_admin;
|
||||
return (
|
||||
<StyledWrapper>
|
||||
<div className="logo">
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
// import { useState, useEffect } from "react";
|
||||
import StyledContainer from "./StyledContainer";
|
||||
// import { useSelector } from "react-redux";
|
||||
import Input from "../../styled/Input";
|
||||
import Textarea from "../../styled/Textarea";
|
||||
import Label from "../../styled/Label";
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
// import { useState, useEffect } from "react";
|
||||
import StyledContainer from "./StyledContainer";
|
||||
// import { useSelector } from "react-redux";
|
||||
import Input from "../../styled/Input";
|
||||
import Textarea from "../../styled/Textarea";
|
||||
import Toggle from "../../styled/Toggle";
|
||||
|
||||
@@ -4,16 +4,8 @@ import ConfigFirebase from "./config/Firebase";
|
||||
import ConfigSMTP from "./config/SMTP";
|
||||
import Notifications from "./Notifications";
|
||||
import ManageMembers from "../ManageMembers";
|
||||
import { useSelector } from "react-redux";
|
||||
import ConfigAgora from "./config/Agora";
|
||||
const useNavs = () => {
|
||||
const { contacts } = useSelector((store) => {
|
||||
return {
|
||||
currUser: store.authData.user,
|
||||
channels: store.channels,
|
||||
contacts: store.contacts,
|
||||
};
|
||||
});
|
||||
const navs = [
|
||||
{
|
||||
title: "General",
|
||||
@@ -54,7 +46,7 @@ const useNavs = () => {
|
||||
{
|
||||
name: "members",
|
||||
title: "Members",
|
||||
component: <ManageMembers members={contacts} />,
|
||||
component: <ManageMembers />,
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
@@ -0,0 +1,32 @@
|
||||
import { useRef, useEffect } from "react";
|
||||
// import { useDebounce } from "rooks";
|
||||
function useChatScroll(dep) {
|
||||
const ref = useRef();
|
||||
// const updateScrollTop = useDebounce(() => {
|
||||
// console.log("chat scroll", ref);
|
||||
// if (ref.current) {
|
||||
// setTimeout(() => {
|
||||
// ref.current.scrollTop = ref.current.scrollHeight;
|
||||
// }, 50);
|
||||
// }
|
||||
// }, 100);
|
||||
// const updateScrollTop = () => {
|
||||
// console.log("chat scroll", ref);
|
||||
// if (ref.current) {
|
||||
// setTimeout(() => {
|
||||
// ref.current.scrollTop = ref.current.scrollHeight;
|
||||
// }, 100);
|
||||
// }
|
||||
// };
|
||||
useEffect(() => {
|
||||
console.log("chat scroll", ref);
|
||||
if (ref.current) {
|
||||
setTimeout(() => {
|
||||
ref.current.scrollTop = ref.current.scrollHeight;
|
||||
}, 20);
|
||||
}
|
||||
}, [dep]);
|
||||
return ref;
|
||||
}
|
||||
|
||||
export default useChatScroll;
|
||||
@@ -2,8 +2,8 @@ import { useState, useEffect } from "react";
|
||||
import { useSelector } from "react-redux";
|
||||
export default function useFilteredUsers() {
|
||||
const [input, setInput] = useState("");
|
||||
const contacts = useSelector((store) => store.contacts);
|
||||
const [filteredUsers, setFilteredUsers] = useState(contacts);
|
||||
const contacts = useSelector((store) => Object.values(store.contacts.byId));
|
||||
const [filteredUsers, setFilteredUsers] = useState([]);
|
||||
useEffect(() => {
|
||||
if (!input) {
|
||||
setFilteredUsers(contacts);
|
||||
@@ -16,7 +16,7 @@ export default function useFilteredUsers() {
|
||||
})
|
||||
);
|
||||
}
|
||||
}, [input, contacts]);
|
||||
}, [input]);
|
||||
const updateInput = (val) => {
|
||||
setInput(val);
|
||||
};
|
||||
|
||||
@@ -1,30 +1,34 @@
|
||||
import { useEffect } from "react";
|
||||
import { useDispatch } from "react-redux";
|
||||
import { useDispatch, batch } from "react-redux";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { clearAuthData } from "../../app/slices/auth.data";
|
||||
import { clearMark } from "../../app/slices/visit.mark";
|
||||
import { clearChannels } from "../../app/slices/channels";
|
||||
import { clearContacts } from "../../app/slices/contacts";
|
||||
import { clearChannelMsg } from "../../app/slices/message.channel";
|
||||
import { clearUserMsg } from "../../app/slices/message.user";
|
||||
import { clearPendingMsg } from "../../app/slices/message.pending";
|
||||
import { resetAuthData } from "../../app/slices/auth.data";
|
||||
import { resetFootprint } from "../../app/slices/footprint";
|
||||
import { resetChannels } from "../../app/slices/channels";
|
||||
import { resetContacts } from "../../app/slices/contacts";
|
||||
import { resetChannelMsg } from "../../app/slices/message.channel";
|
||||
import { resetUserMsg } from "../../app/slices/message.user";
|
||||
import { resetReactionMessage } from "../../app/slices/message.reaction";
|
||||
import { resetMessage } from "../../app/slices/message";
|
||||
import { useLazyLogoutQuery } from "../../app/services/auth";
|
||||
export default function useLogout() {
|
||||
const dispatch = useDispatch();
|
||||
const navigate = useNavigate();
|
||||
const [logout, { isLoading, isSuccess }] = useLazyLogoutQuery();
|
||||
const clearLocalData = () => {
|
||||
dispatch(clearMark());
|
||||
dispatch(clearChannelMsg());
|
||||
dispatch(clearUserMsg());
|
||||
dispatch(clearChannels());
|
||||
dispatch(clearContacts());
|
||||
dispatch(clearPendingMsg());
|
||||
batch(() => {
|
||||
dispatch(resetFootprint());
|
||||
dispatch(resetChannelMsg());
|
||||
dispatch(resetUserMsg());
|
||||
dispatch(resetChannels());
|
||||
dispatch(resetContacts());
|
||||
dispatch(resetMessage());
|
||||
dispatch(resetReactionMessage());
|
||||
});
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (isSuccess) {
|
||||
dispatch(clearAuthData());
|
||||
dispatch(resetAuthData());
|
||||
navigate("/login");
|
||||
}
|
||||
}, [isSuccess]);
|
||||
|
||||
@@ -1,12 +1,13 @@
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
import { useSelector, useDispatch } from "react-redux";
|
||||
import dayjs from "dayjs";
|
||||
// import dayjs from "dayjs";
|
||||
import useChatScroll from "../../../common/hook/useChatScroll";
|
||||
|
||||
import Message from "../../../common/component/Message";
|
||||
import ChannelIcon from "../../../common/component/ChannelIcon";
|
||||
import Send from "../../../common/component/Send";
|
||||
import { clearChannelMsgUnread } from "../../../app/slices/message.channel";
|
||||
// import { readMessage } from "../../../app/slices/message";
|
||||
import Contact from "../../../common/component/Contact";
|
||||
import Layout from "../Layout";
|
||||
import {
|
||||
@@ -16,37 +17,29 @@ import {
|
||||
StyledHeader,
|
||||
} from "./styled";
|
||||
|
||||
export default function ChannelChat({
|
||||
cid = "",
|
||||
unreads = 0,
|
||||
data = {},
|
||||
dropFiles = [],
|
||||
}) {
|
||||
export default function ChannelChat({ cid = "", dropFiles = [] }) {
|
||||
// const containerRef = useRef(null);
|
||||
const [dragFiles, setDragFiles] = useState([]);
|
||||
const dispatch = useDispatch();
|
||||
const { msgs, users } = useSelector((store) => {
|
||||
// const dispatch = useDispatch();
|
||||
const { msgIds, userIds, data } = useSelector((store) => {
|
||||
return {
|
||||
msgs: store.channelMessage[cid] || {},
|
||||
users: store.contacts,
|
||||
msgIds: store.channelMessage[cid] || [],
|
||||
userIds: store.contacts.ids,
|
||||
data: store.channels.byId[cid],
|
||||
};
|
||||
});
|
||||
const handleClearUnreads = () => {
|
||||
dispatch(clearChannelMsgUnread(cid));
|
||||
};
|
||||
const ref = useChatScroll(msgIds);
|
||||
// const handleClearUnreads = () => {
|
||||
// dispatch(readMessage(msgIds));
|
||||
// };
|
||||
useEffect(() => {
|
||||
if (dropFiles.length) {
|
||||
setDragFiles(dropFiles);
|
||||
}
|
||||
}, [dropFiles]);
|
||||
const { name, description, is_public, members = [] } = data;
|
||||
const filteredUsers =
|
||||
members.length == 0
|
||||
? users
|
||||
: users.filter((u) => {
|
||||
return members.includes(u.uid);
|
||||
});
|
||||
console.log("channel message list", msgs);
|
||||
const memberIds = members.length == 0 ? userIds : members;
|
||||
console.log("channel message list", msgIds);
|
||||
return (
|
||||
<Layout
|
||||
setDragFiles={setDragFiles}
|
||||
@@ -82,61 +75,31 @@ export default function ChannelChat({
|
||||
}
|
||||
contacts={
|
||||
<StyledContacts>
|
||||
{filteredUsers.map(({ name, uid }) => {
|
||||
return <Contact key={name} uid={uid} popover />;
|
||||
{memberIds.map((uid) => {
|
||||
return <Contact key={uid} uid={uid} popover />;
|
||||
})}
|
||||
</StyledContacts>
|
||||
}
|
||||
>
|
||||
<StyledChannelChat>
|
||||
<div className="wrapper">
|
||||
<div className="wrapper" ref={ref}>
|
||||
<div className="info">
|
||||
<h2 className="title">Welcome to #{name} !</h2>
|
||||
<p className="desc">This is the start of the #{name} channel. </p>
|
||||
{/* <button className="edit">Edit Channel</button> */}
|
||||
</div>
|
||||
<div className="chat">
|
||||
{Object.entries(msgs)
|
||||
.sort(([, msg1], [, msg2]) => {
|
||||
return msg1.created_at - msg2.created_at;
|
||||
})
|
||||
.map(([mid, msg], idx) => {
|
||||
if (!msg) return null;
|
||||
const {
|
||||
likes = {},
|
||||
pending = false,
|
||||
from_uid,
|
||||
content,
|
||||
content_type,
|
||||
created_at,
|
||||
unread,
|
||||
edited,
|
||||
reply,
|
||||
} = msg;
|
||||
return (
|
||||
<Message
|
||||
reply={reply}
|
||||
edited={edited}
|
||||
likes={likes}
|
||||
pending={pending}
|
||||
content_type={content_type}
|
||||
unread={unread}
|
||||
gid={cid}
|
||||
mid={mid}
|
||||
key={idx}
|
||||
time={created_at}
|
||||
fromUid={from_uid}
|
||||
content={content}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
{msgIds.map((mid, idx) => {
|
||||
// if (!msg) return null;
|
||||
return <Message contextId={cid} mid={mid} key={idx} />;
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Send dragFiles={dragFiles} id={cid} type="channel" name={name} />
|
||||
<div className="placeholder"></div>
|
||||
</StyledChannelChat>
|
||||
{unreads != 0 && (
|
||||
{/* {unreads != 0 && (
|
||||
<StyledNotification>
|
||||
<div className="content">
|
||||
{unreads} new messages
|
||||
@@ -148,7 +111,7 @@ export default function ChannelChat({
|
||||
Mark As Read
|
||||
</button>
|
||||
</StyledNotification>
|
||||
)}
|
||||
)} */}
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -2,19 +2,26 @@
|
||||
import { NavLink, useNavigate } from "react-router-dom";
|
||||
import { useDrop } from "react-dnd";
|
||||
import { NativeTypes } from "react-dnd-html5-backend";
|
||||
import { useDispatch } from "react-redux";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import useContextMenu from "../../common/hook/useContextMenu";
|
||||
import ContextMenu from "../../common/component/ContextMenu";
|
||||
import { toggleChannelSetting } from "../../app/slices/ui";
|
||||
import ChannelIcon from "../../common/component/ChannelIcon";
|
||||
const NavItem = ({ data, setFiles, contextMenuEventHandler }) => {
|
||||
import getUnreadCount from "./getUnreadCount";
|
||||
const NavItem = ({ id, setFiles, contextMenuEventHandler }) => {
|
||||
const dispatch = useDispatch();
|
||||
const navigate = useNavigate();
|
||||
|
||||
const { channel, mids, messageData } = useSelector((store) => {
|
||||
return {
|
||||
channel: store.channels.byId[id],
|
||||
mids: store.channelMessage[id],
|
||||
messageData: store.message,
|
||||
};
|
||||
});
|
||||
const handleChannelSetting = (evt) => {
|
||||
evt.preventDefault();
|
||||
evt.stopPropagation();
|
||||
dispatch(toggleChannelSetting(data.id));
|
||||
dispatch(toggleChannelSetting(id));
|
||||
};
|
||||
const [{ isActive }, drop] = useDrop(() => ({
|
||||
accept: [NativeTypes.FILE],
|
||||
@@ -22,7 +29,7 @@ const NavItem = ({ data, setFiles, contextMenuEventHandler }) => {
|
||||
if (dataTransfer.files.length) {
|
||||
// console.log(files, rest);
|
||||
setFiles([...dataTransfer.files]);
|
||||
navigate(`/chat/channel/${data.id}`);
|
||||
navigate(`/chat/channel/${id}`);
|
||||
// 重置
|
||||
setTimeout(() => {
|
||||
setFiles([]);
|
||||
@@ -33,7 +40,8 @@ const NavItem = ({ data, setFiles, contextMenuEventHandler }) => {
|
||||
isActive: monitor.canDrop() && monitor.isOver(),
|
||||
}),
|
||||
}));
|
||||
const { id, is_public, name, unreads } = data;
|
||||
const { is_public, name } = channel;
|
||||
const unreads = getUnreadCount(mids, messageData);
|
||||
return (
|
||||
<NavLink
|
||||
onContextMenu={contextMenuEventHandler}
|
||||
@@ -57,7 +65,8 @@ const NavItem = ({ data, setFiles, contextMenuEventHandler }) => {
|
||||
</NavLink>
|
||||
);
|
||||
};
|
||||
export default function ChannelList({ channels, setDropFiles }) {
|
||||
export default function ChannelList({ setDropFiles }) {
|
||||
const channelIds = useSelector((store) => store.channels.ids);
|
||||
const {
|
||||
visible: contextMenuVisible,
|
||||
posX,
|
||||
@@ -67,12 +76,12 @@ export default function ChannelList({ channels, setDropFiles }) {
|
||||
} = useContextMenu();
|
||||
return (
|
||||
<>
|
||||
{channels.map(({ id, is_public, name, description, unreads }) => {
|
||||
{channelIds.map((cid) => {
|
||||
return (
|
||||
<NavItem
|
||||
contextMenuEventHandler={handleContextMenuEvent}
|
||||
key={id}
|
||||
data={{ id, is_public, name, description, unreads }}
|
||||
key={cid}
|
||||
id={cid}
|
||||
setFiles={setDropFiles}
|
||||
/>
|
||||
);
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import { useSelector } from "react-redux";
|
||||
import useChatScroll from "../../../common/hook/useChatScroll";
|
||||
import Message from "../../../common/component/Message";
|
||||
import Send from "../../../common/component/Send";
|
||||
import Contact from "../../../common/component/Contact";
|
||||
@@ -10,19 +11,17 @@ import { StyledHeader, StyledDMChat } from "./styled";
|
||||
export default function DMChat({ uid = "", dropFiles = [] }) {
|
||||
console.log("dm files", dropFiles);
|
||||
const [dragFiles, setDragFiles] = useState([]);
|
||||
const contacts = useSelector((store) => store.contacts);
|
||||
const { msgs } = useSelector((store) => {
|
||||
// const [mids, setMids] = useState([]);
|
||||
const { msgIds, currUser } = useSelector((store) => {
|
||||
return {
|
||||
msgs: store.userMessage[uid] || {},
|
||||
currUser: store.contacts.byId[uid],
|
||||
msgIds: store.userMessage.byId[uid] || [],
|
||||
};
|
||||
});
|
||||
const [currUser, setCurrUser] = useState(null);
|
||||
useEffect(() => {
|
||||
console.log({ uid });
|
||||
if (uid && contacts) {
|
||||
setCurrUser(contacts.find((c) => c.uid == uid));
|
||||
}
|
||||
}, [uid, contacts]);
|
||||
const ref = useChatScroll(msgIds);
|
||||
// useEffect(() => {
|
||||
// setMids(msgIds);
|
||||
// }, [msgIds]);
|
||||
useEffect(() => {
|
||||
if (dropFiles.length) {
|
||||
setDragFiles(dropFiles);
|
||||
@@ -67,42 +66,12 @@ export default function DMChat({ uid = "", dropFiles = [] }) {
|
||||
}
|
||||
>
|
||||
<StyledDMChat>
|
||||
<div className="chat">
|
||||
{Object.entries(msgs)
|
||||
.sort(([, msg1], [, msg2]) => {
|
||||
return msg1.created_at - msg2.created_at;
|
||||
})
|
||||
.map(([mid, msg], idx) => {
|
||||
if (!msg) return null;
|
||||
// console.log("user msg", msg);
|
||||
const {
|
||||
likes = {},
|
||||
from_uid,
|
||||
content,
|
||||
content_type,
|
||||
created_at,
|
||||
unread,
|
||||
pending = false,
|
||||
edited,
|
||||
reply,
|
||||
} = msg;
|
||||
return (
|
||||
<Message
|
||||
reply={reply}
|
||||
likes={likes}
|
||||
edited={edited}
|
||||
pending={pending}
|
||||
content_type={content_type}
|
||||
unread={unread}
|
||||
fromUid={from_uid}
|
||||
mid={mid}
|
||||
key={idx}
|
||||
time={created_at}
|
||||
uid={uid}
|
||||
content={content}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
<div className="chat" ref={ref}>
|
||||
{msgIds.map((mid) => {
|
||||
// if (!msg) return null;
|
||||
// console.log("user msg", msg);
|
||||
return <Message mid={mid} key={mid} contextId={uid} />;
|
||||
})}
|
||||
</div>
|
||||
</StyledDMChat>
|
||||
<div className="placeholder"></div>
|
||||
|
||||
@@ -45,13 +45,12 @@ export const StyledHeader = styled.header`
|
||||
export const StyledDMChat = styled.article`
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding-top: 25px;
|
||||
/* margin-bottom: 120px; */
|
||||
padding-top: 20px;
|
||||
> .chat {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0 16px;
|
||||
padding-top: 10px;
|
||||
padding-top: 15px;
|
||||
padding-bottom: 25px;
|
||||
height: calc(100vh - 56px - 80px);
|
||||
overflow-y: scroll;
|
||||
|
||||
+19
-10
@@ -4,9 +4,16 @@ import dayjs from "dayjs";
|
||||
import relativeTime from "dayjs/plugin/relativeTime";
|
||||
import { useDrop } from "react-dnd";
|
||||
import { NativeTypes } from "react-dnd-html5-backend";
|
||||
import { useSelector } from "react-redux";
|
||||
import Contact from "../../common/component/Contact";
|
||||
dayjs.extend(relativeTime);
|
||||
const NavItem = ({ data, setFiles }) => {
|
||||
const NavItem = ({ uid, mid, unreads, setFiles }) => {
|
||||
const { currMsg, currUser } = useSelector((store) => {
|
||||
return {
|
||||
currUser: store.contacts.byId[uid],
|
||||
currMsg: store.message[mid],
|
||||
};
|
||||
});
|
||||
const navigate = useNavigate();
|
||||
const [{ isActive }, drop] = useDrop(() => ({
|
||||
accept: [NativeTypes.FILE],
|
||||
@@ -14,7 +21,7 @@ const NavItem = ({ data, setFiles }) => {
|
||||
if (dataTransfer.files.length) {
|
||||
// console.log(files, rest);
|
||||
setFiles([...dataTransfer.files]);
|
||||
navigate(`/chat/dm/${data.uid}`);
|
||||
navigate(`/chat/dm/${uid}`);
|
||||
// 重置
|
||||
setTimeout(() => {
|
||||
setFiles([]);
|
||||
@@ -25,7 +32,7 @@ const NavItem = ({ data, setFiles }) => {
|
||||
isActive: monitor.canDrop() && monitor.isOver(),
|
||||
}),
|
||||
}));
|
||||
const { uid, user, lastMsg, unreads } = data;
|
||||
if (!currUser || !currMsg) return null;
|
||||
return (
|
||||
<NavLink
|
||||
ref={drop}
|
||||
@@ -33,15 +40,15 @@ const NavItem = ({ data, setFiles }) => {
|
||||
className={`session ${isActive ? "drop_over" : ""}`}
|
||||
to={`/chat/dm/${uid}`}
|
||||
>
|
||||
<Contact compact interactive={false} className="avatar" uid={user.uid} />
|
||||
<Contact compact interactive={false} className="avatar" uid={uid} />
|
||||
<div className="details">
|
||||
<div className="up">
|
||||
<span className="name">{user.name}</span>
|
||||
<time>{dayjs(lastMsg.created_at).fromNow()}</time>
|
||||
<span className="name">{currUser.name}</span>
|
||||
{currMsg && <time>{dayjs(currMsg.created_at).fromNow()}</time>}
|
||||
</div>
|
||||
|
||||
<div className="down">
|
||||
<div className="msg">{lastMsg.content}</div>
|
||||
{currMsg && <div className="msg">{currMsg.content}</div>}
|
||||
{unreads > 0 && <i className="badge">{unreads}</i>}
|
||||
</div>
|
||||
</div>
|
||||
@@ -49,12 +56,14 @@ const NavItem = ({ data, setFiles }) => {
|
||||
);
|
||||
};
|
||||
export default function DMList({ sessions, setDropFiles }) {
|
||||
return sessions.map(({ uid, user, lastMsg, unreads } = {}) => {
|
||||
if (!user) return null;
|
||||
return sessions.map(({ uid, lastMid, unreads } = {}) => {
|
||||
if (!uid) return null;
|
||||
return (
|
||||
<NavItem
|
||||
key={uid}
|
||||
data={{ uid, user, lastMsg, unreads }}
|
||||
uid={uid}
|
||||
mid={lastMid}
|
||||
unreads={unreads}
|
||||
setFiles={setDropFiles}
|
||||
/>
|
||||
);
|
||||
|
||||
@@ -0,0 +1,12 @@
|
||||
const getUnreadCount = (mids, messageData) => {
|
||||
if (!mids || !messageData) return 0;
|
||||
let unreads = 0;
|
||||
mids.forEach((id) => {
|
||||
if (!messageData[id].read) {
|
||||
unreads++;
|
||||
}
|
||||
});
|
||||
return unreads;
|
||||
};
|
||||
|
||||
export default getUnreadCount;
|
||||
+18
-36
@@ -16,20 +16,18 @@ import ChannelList from "./ChannelList";
|
||||
import ContactsModal from "../../common/component/ContactsModal";
|
||||
import ChannelModal from "../../common/component/ChannelModal";
|
||||
import DMList from "./DMList";
|
||||
import getUnreadCount from "./getUnreadCount";
|
||||
|
||||
export default function ChatPage() {
|
||||
const [channelDropFiles, setChannelDropFiles] = useState([]);
|
||||
const [userDropFiles, setUserDropFiles] = useState([]);
|
||||
const { contacts, channels, UserMsgData, ChannelMsgData } = useSelector(
|
||||
(store) => {
|
||||
return {
|
||||
contacts: store.contacts,
|
||||
channels: store.channels,
|
||||
UserMsgData: store.userMessage,
|
||||
ChannelMsgData: store.channelMessage,
|
||||
};
|
||||
}
|
||||
);
|
||||
const { contactsData, UserMsgData, messageData } = useSelector((store) => {
|
||||
return {
|
||||
contactsData: store.contacts.byId,
|
||||
UserMsgData: store.userMessage,
|
||||
messageData: store.message,
|
||||
};
|
||||
});
|
||||
const [channelModalVisible, setChannelModalVisible] = useState(false);
|
||||
const [contactsModalVisible, setContactsModalVisible] = useState(false);
|
||||
const { channel_id, user_id } = useParams();
|
||||
@@ -39,31 +37,19 @@ export default function ChatPage() {
|
||||
const toggleChannelModalVisible = () => {
|
||||
setChannelModalVisible((prev) => !prev);
|
||||
};
|
||||
const getUnreadCount = (gid) => {
|
||||
return Object.values(ChannelMsgData[gid] || {}).filter((m) => m.unread)
|
||||
.length;
|
||||
};
|
||||
// const getUnreadCount = (gid) => {
|
||||
// return Object.values(ChannelMsgData[gid] || {}).filter((m) => m.read)
|
||||
// .length;
|
||||
// };
|
||||
const handleToggleExpand = (evt) => {
|
||||
const { currentTarget } = evt;
|
||||
const listEle = currentTarget.parentElement.parentElement;
|
||||
listEle.classList.toggle("collapse");
|
||||
};
|
||||
if (!contacts) return null;
|
||||
const tmpSessionUser = contacts.find((c) => c.uid == user_id);
|
||||
const transformedChannels = Object.entries(channels).map(([key, obj]) => {
|
||||
const unreads = Object.values(ChannelMsgData[key] || {}).filter(
|
||||
(m) => m.unread
|
||||
).length;
|
||||
return { id: key, ...obj, unreads };
|
||||
});
|
||||
const sessions = Object.keys(UserMsgData).map((uid) => {
|
||||
let currUser = contacts.find((c) => c.uid == uid);
|
||||
if (!currUser) return undefined;
|
||||
let lastMid = Object.keys(UserMsgData[uid]).sort().pop();
|
||||
let unreads = Object.values(UserMsgData[uid] || {}).filter((m) => m.unread)
|
||||
.length;
|
||||
let lastMsg = UserMsgData[uid][lastMid];
|
||||
return { user: currUser, unreads, uid, lastMsg };
|
||||
const tmpSessionUser = contactsData[user_id];
|
||||
const sessions = UserMsgData.ids.map((uid) => {
|
||||
const unreads = getUnreadCount(UserMsgData.byId[uid], messageData);
|
||||
return { uid, unreads, lastMid: [...UserMsgData.byId[uid]].pop() };
|
||||
});
|
||||
return (
|
||||
<>
|
||||
@@ -93,10 +79,7 @@ export default function ChatPage() {
|
||||
/>
|
||||
</h3>
|
||||
<nav className="nav">
|
||||
<ChannelList
|
||||
channels={transformedChannels}
|
||||
setDropFiles={setChannelDropFiles}
|
||||
/>
|
||||
<ChannelList setDropFiles={setChannelDropFiles} />
|
||||
</nav>
|
||||
</div>
|
||||
<div className="list dms">
|
||||
@@ -117,7 +100,7 @@ export default function ChatPage() {
|
||||
</h3>
|
||||
<nav className="nav">
|
||||
<DMList sessions={sessions} setDropFiles={setUserDropFiles} />
|
||||
{user_id && !Object.keys(UserMsgData).includes(user_id) && (
|
||||
{user_id && UserMsgData.ids.findIndex((i) => i == user_id) == -1 && (
|
||||
<NavLink className="session" to={`/chat/dm/${user_id}`}>
|
||||
<Contact
|
||||
compact
|
||||
@@ -147,7 +130,6 @@ export default function ChatPage() {
|
||||
<ChannelChat
|
||||
unreads={getUnreadCount(channel_id)}
|
||||
cid={channel_id}
|
||||
data={channels[channel_id]}
|
||||
dropFiles={channelDropFiles}
|
||||
/>
|
||||
)}
|
||||
|
||||
@@ -1,91 +0,0 @@
|
||||
// import React from "react";
|
||||
// import toast from "react-hot-toast";
|
||||
import { useState, useEffect } from "react";
|
||||
import { useSelector } from "react-redux";
|
||||
import { NavLink } from "react-router-dom";
|
||||
import { BsChatText } from "react-icons/bs";
|
||||
import { RiUserAddLine } from "react-icons/ri";
|
||||
import { IoShareOutline } from "react-icons/io5";
|
||||
import styled from "styled-components";
|
||||
|
||||
import Avatar from "../../common/component/Avatar";
|
||||
|
||||
const StyledWrapper = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
margin-top: 80px;
|
||||
width: 432px;
|
||||
gap: 4px;
|
||||
.avatar {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.name {
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
line-height: 100%;
|
||||
color: #1c1c1e;
|
||||
}
|
||||
.email {
|
||||
font-weight: normal;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
color: #78787c;
|
||||
}
|
||||
.icons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 26px 0;
|
||||
gap: 28px;
|
||||
.icon {
|
||||
}
|
||||
}
|
||||
.line {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
border: none;
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
`;
|
||||
export default function Profile({ uid = null }) {
|
||||
const contacts = useSelector((store) => store.contacts);
|
||||
const [profile, setProfile] = useState(null);
|
||||
useEffect(() => {
|
||||
if (contacts && contacts) {
|
||||
setProfile(contacts.find((c) => c.uid == uid));
|
||||
} else {
|
||||
setProfile(null);
|
||||
}
|
||||
}, [uid, contacts]);
|
||||
if (!profile) return null;
|
||||
console.log({ profile });
|
||||
const { name, email, avatar } = profile;
|
||||
return (
|
||||
<StyledWrapper>
|
||||
<Avatar className="avatar" url={avatar} name={name} />
|
||||
<h2 className="name">{name}</h2>
|
||||
<span className="email">{email}</span>
|
||||
<ul className="icons">
|
||||
<li className="icon chat">
|
||||
<NavLink to={`/chat/dm/${uid}`}>
|
||||
<BsChatText size={20} color="#616161" />
|
||||
</NavLink>
|
||||
</li>
|
||||
<li className="icon add">
|
||||
{/* <NavLink to={`/chat/dm/${uid}`}> */}
|
||||
<RiUserAddLine size={20} color="#616161" />
|
||||
{/* </NavLink> */}
|
||||
</li>
|
||||
<li className="icon share">
|
||||
{/* <NavLink to={`/chat/dm/${uid}`}> */}
|
||||
<IoShareOutline size={20} color="#616161" />
|
||||
{/* </NavLink> */}
|
||||
</li>
|
||||
</ul>
|
||||
<hr className="line" />
|
||||
</StyledWrapper>
|
||||
);
|
||||
}
|
||||
@@ -10,20 +10,20 @@ import StyledWrapper from "./styled";
|
||||
|
||||
export default function ContactsPage() {
|
||||
const { user_id } = useParams();
|
||||
const contacts = useSelector((store) => store.contacts);
|
||||
const contactIds = useSelector((store) => store.contacts.ids);
|
||||
|
||||
console.log({ contacts, user_id });
|
||||
if (!contacts) return null;
|
||||
console.log({ contactIds, user_id });
|
||||
if (!contactIds) return null;
|
||||
return (
|
||||
<StyledWrapper>
|
||||
<div className="left">
|
||||
<Search />
|
||||
<div className="list">
|
||||
<nav className="nav">
|
||||
{contacts.map(({ uid, status }) => {
|
||||
{contactIds.map((uid) => {
|
||||
return (
|
||||
<NavLink key={uid} className="session" to={`/contacts/${uid}`}>
|
||||
<Contact uid={uid} status={status} />
|
||||
<Contact uid={uid} />
|
||||
</NavLink>
|
||||
);
|
||||
})}
|
||||
@@ -33,7 +33,7 @@ export default function ContactsPage() {
|
||||
</div>
|
||||
{user_id && (
|
||||
<div className="right">
|
||||
<Profile data={contacts.find((c) => c.uid == user_id)} />
|
||||
<Profile uid={user_id} />
|
||||
</div>
|
||||
)}
|
||||
</StyledWrapper>
|
||||
|
||||
@@ -40,7 +40,7 @@ export default function Loading() {
|
||||
useEffect(() => {
|
||||
const inter = setTimeout(() => {
|
||||
setReloadVisible(true);
|
||||
}, 10000);
|
||||
}, 15000);
|
||||
|
||||
return () => {
|
||||
clearTimeout(inter);
|
||||
|
||||
+36
-42
@@ -14,7 +14,7 @@ import ChannelSettingModal from "../../common/component/ChannelSetting";
|
||||
|
||||
import ChatIcon from "../../assets/icons/chat.svg";
|
||||
import ContactIcon from "../../assets/icons/contact.svg";
|
||||
import NotificationHub from "../../common/component/NotificationHub";
|
||||
// import NotificationHub from "../../common/component/NotificationHub";
|
||||
|
||||
export default function HomePage() {
|
||||
const dispatch = useDispatch();
|
||||
@@ -29,51 +29,45 @@ export default function HomePage() {
|
||||
const toggleExpand = () => {
|
||||
dispatch(toggleMenuExpand());
|
||||
};
|
||||
console.log({ data, error, success });
|
||||
if (loading) {
|
||||
console.log("index loading", loading, ready);
|
||||
if (loading || !ready) {
|
||||
return <Loading />;
|
||||
}
|
||||
return (
|
||||
<>
|
||||
<NotificationHub />
|
||||
{ready ? (
|
||||
<StyledWrapper>
|
||||
<div className={`col left ${menuExpand ? "expand" : ""}`}>
|
||||
<ServerDropList
|
||||
data={data?.server}
|
||||
memberCount={data.contacts?.length}
|
||||
expand={menuExpand}
|
||||
/>
|
||||
<nav className="nav">
|
||||
<NavLink className="link" to={"/chat"}>
|
||||
<img src={ChatIcon} alt="chat icon" />{" "}
|
||||
{menuExpand && (
|
||||
<span className="animate__animated animate__fadeIn">
|
||||
Chat
|
||||
</span>
|
||||
)}
|
||||
</NavLink>
|
||||
<NavLink className="link" to={"/contacts"}>
|
||||
<img src={ContactIcon} alt="contact icon" />{" "}
|
||||
{menuExpand && (
|
||||
<span className="animate__animated animate__fadeIn">
|
||||
Contacts
|
||||
</span>
|
||||
)}
|
||||
</NavLink>
|
||||
</nav>
|
||||
<div className="divider"></div>
|
||||
<Tools expand={menuExpand} />
|
||||
<Menu toggle={toggleExpand} expand={menuExpand} />
|
||||
{/* <CurrentUser expand={menuExpand} /> */}
|
||||
</div>
|
||||
<div className="col right">
|
||||
<Outlet />
|
||||
</div>
|
||||
</StyledWrapper>
|
||||
) : (
|
||||
<Loading />
|
||||
)}
|
||||
{/* <NotificationHub /> */}
|
||||
<StyledWrapper>
|
||||
<div className={`col left ${menuExpand ? "expand" : ""}`}>
|
||||
<ServerDropList
|
||||
data={data?.server}
|
||||
memberCount={data.contacts?.length}
|
||||
expand={menuExpand}
|
||||
/>
|
||||
<nav className="nav">
|
||||
<NavLink className="link" to={"/chat"}>
|
||||
<img src={ChatIcon} alt="chat icon" />{" "}
|
||||
{menuExpand && (
|
||||
<span className="animate__animated animate__fadeIn">Chat</span>
|
||||
)}
|
||||
</NavLink>
|
||||
<NavLink className="link" to={"/contacts"}>
|
||||
<img src={ContactIcon} alt="contact icon" />{" "}
|
||||
{menuExpand && (
|
||||
<span className="animate__animated animate__fadeIn">
|
||||
Contacts
|
||||
</span>
|
||||
)}
|
||||
</NavLink>
|
||||
</nav>
|
||||
<div className="divider"></div>
|
||||
<Tools expand={menuExpand} />
|
||||
<Menu toggle={toggleExpand} expand={menuExpand} />
|
||||
{/* <CurrentUser expand={menuExpand} /> */}
|
||||
</div>
|
||||
<div className="col right">
|
||||
<Outlet />
|
||||
</div>
|
||||
</StyledWrapper>
|
||||
{setting && <SettingModal />}
|
||||
{channelSetting && <ChannelSettingModal id={channelSetting} />}
|
||||
</>
|
||||
|
||||
@@ -3,8 +3,9 @@ import { useDispatch } from "react-redux";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import initCache, { useRehydrate } from "../../app/cache";
|
||||
import { useLazyGetContactsQuery } from "../../app/services/contact";
|
||||
import { clearAuthData, setUserData } from "../../app/slices/auth.data";
|
||||
import { setContacts } from "../../app/slices/contacts";
|
||||
import { useLazyInitStreamingQuery } from "../../app/services/streaming";
|
||||
import { resetAuthData, setUid } from "../../app/slices/auth.data";
|
||||
import { fullfillContacts } from "../../app/slices/contacts";
|
||||
|
||||
// import { useGetChannelsQuery } from "../../app/services/channel";
|
||||
import { useLazyGetServerQuery } from "../../app/services/server";
|
||||
@@ -14,7 +15,8 @@ import { KEY_UID } from "../../app/config";
|
||||
// refetchOnMountOrArgChange: true,
|
||||
// };
|
||||
export default function usePreload() {
|
||||
const { rehydrate, cacheFirst } = useRehydrate();
|
||||
const { rehydrate, rehydrated } = useRehydrate();
|
||||
const [initStreaming, { isLoading: streaming }] = useLazyInitStreamingQuery();
|
||||
const [checked, setChecked] = useState(false);
|
||||
const dispatch = useDispatch();
|
||||
const navigate = useNavigate();
|
||||
@@ -40,31 +42,44 @@ export default function usePreload() {
|
||||
initCache();
|
||||
rehydrate();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
getContacts();
|
||||
getServer();
|
||||
}, []);
|
||||
// rehydrate();
|
||||
if (rehydrated) {
|
||||
getContacts();
|
||||
getServer();
|
||||
}
|
||||
}, [rehydrated]);
|
||||
useEffect(() => {
|
||||
if (checked && rehydrated) {
|
||||
initStreaming({}, false);
|
||||
}
|
||||
}, [checked, rehydrated]);
|
||||
|
||||
useEffect(() => {
|
||||
const local_uid = localStorage.getItem(KEY_UID);
|
||||
if (contacts) {
|
||||
const matchedUser = contacts.find((c) => c.uid == local_uid);
|
||||
console.log("wtf", contacts, matchedUser);
|
||||
if (!matchedUser) {
|
||||
// 用户已注销或被禁用
|
||||
console.log("no matched user, redirect to login");
|
||||
dispatch(clearAuthData());
|
||||
dispatch(resetAuthData());
|
||||
navigate("/login");
|
||||
} else {
|
||||
const markedContacts = contacts.map((u) => {
|
||||
return u.uid == matchedUser.uid ? { ...u, online: true } : u;
|
||||
});
|
||||
dispatch(setUserData(matchedUser));
|
||||
dispatch(setContacts(markedContacts));
|
||||
dispatch(setUid(matchedUser.uid));
|
||||
dispatch(fullfillContacts(markedContacts));
|
||||
setChecked(true);
|
||||
}
|
||||
}
|
||||
}, [contacts]);
|
||||
console.log("loading", contactsLoading, serverLoading, !checked, streaming);
|
||||
return {
|
||||
loading: contactsLoading || serverLoading || !checked || !cacheFirst,
|
||||
loading:
|
||||
contactsLoading || serverLoading || !checked || !rehydrated || streaming,
|
||||
error: contactsError && serverError,
|
||||
success: contactsSuccess && serverSuccess,
|
||||
data: {
|
||||
|
||||
@@ -57,6 +57,7 @@ export default function LoginPage() {
|
||||
useEffect(() => {
|
||||
if (isSuccess && data) {
|
||||
// 更新本地认证信息
|
||||
console.log("login data", data);
|
||||
toast.success("login success");
|
||||
dispatch(setAuthData(data));
|
||||
navigateTo("/");
|
||||
|
||||
Reference in New Issue
Block a user