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

refactor: lots updates

Browse Source
This commit is contained in:
zerosoul
2022-03-14 11:32:00 +08:00
parent 5d363b5a5f
commit 46cfda76d0
83 changed files with 2018 additions and 1486 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package.json
+14 -14
View File
@@ -12,15 +12,15 @@
"@svgr/webpack": "^6.2.1",
"@tippyjs/react": "^4.2.6",
"animate.css": "^4.1.1",
"axios": "^0.26.0",
"axios": "^0.26.1",
"babel-loader": "^8.2.3",
"babel-plugin-named-asset-import": "^0.3.8",
"babel-preset-react-app": "^10.0.1",
"bfj": "^7.0.2",
"browserslist": "^4.19.3",
"browserslist": "^4.20.0",
"camelcase": "^6.3.0",
"case-sensitive-paths-webpack-plugin": "^2.4.0",
"css-loader": "^6.6.0",
"css-loader": "^6.7.1",
"css-minimizer-webpack-plugin": "^3.4.1",
"dayjs": "^1.10.8",
"dotenv": "^16.0.0",
@@ -29,12 +29,12 @@
"eslint": "^8.10.0",
"event-source-polyfill": "^1.0.25",
"file-loader": "^6.2.0",
"firebase": "^9.6.7",
"firebase": "^9.6.8",
"fs-extra": "^10.0.1",
"html-webpack-plugin": "^5.5.0",
"linkify-it": "^3.0.3",
"localforage": "^1.10.0",
"mini-css-extract-plugin": "^2.5.3",
"mini-css-extract-plugin": "^2.6.0",
"react": "^17.0.2",
"react-dev-utils": "^12.0.0",
"react-dnd": "^15.1.1",
@@ -52,7 +52,7 @@
"react-window": "^1.8.6",
"redux-persist": "^6.0.0",
"resolve": "^1.22.0",
"rooks": "^5.10.0",
"rooks": "^5.10.2",
"semver": "^7.3.5",
"source-map-loader": "^3.0.1",
"style-loader": "^3.3.1",
@@ -60,10 +60,10 @@
"styled-reset": "^4.3.4",
"terser-webpack-plugin": "^5.3.1",
"tippy.js": "^6.3.7",
"webpack": "^5.69.1",
"webpack": "^5.70.0",
"webpack-dev-server": "^4.7.4",
"webpack-manifest-plugin": "^4.1.1",
"workbox-webpack-plugin": "^6.5.0"
"webpack-manifest-plugin": "^5.0.0",
"workbox-webpack-plugin": "^6.5.1"
},
"scripts": {
"start": "node scripts/start.js",
@@ -93,18 +93,18 @@
"@commitlint/cli": "^16.2.1",
"@commitlint/config-conventional": "^16.2.1",
"autoprefixer": "^10.4.2",
"eslint-config-prettier": "^8.4.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-import": "^2.25.4",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-react": "^7.29.2",
"eslint-plugin-react": "^7.29.3",
"eslint-plugin-react-hooks": "^4.3.0",
"gh-pages": "^3.2.3",
"husky": "^7.0.4",
"lint-staged": "^12.3.4",
"postcss": "^8.4.7",
"lint-staged": "^12.3.5",
"postcss": "^8.4.8",
"postcss-flexbugs-fixes": "^5.0.2",
"postcss-loader": "^6.2.1",
"postcss-preset-env": "^7.4.1",
"postcss-preset-env": "^7.4.2",
"prettier": "^2.5.1"
}
}
src/app/cache.js
+96 -44
View File
@@ -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({
const name = `local_db_${uid}`;
window.CACHE = {};
tables.forEach(({ storeName, description }) => {
window.CACHE[storeName] = localforage.createInstance({
name,
storeName: "data",
description: "rustchat cache data by uid",
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;
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":
dispatch(setChannels(data));
rehydrateData.channels.push(data);
break;
// case "contacts":
// dispatch(initChannelMsg(data));
// break;
case "channelMessage":
dispatch(initChannelMsg(data));
case "contacts":
rehydrateData.contacts.push(data);
break;
case "userMessage":
dispatch(initUserMsg(data));
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;
}
});
})
);
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;
src/app/config.js
+1
View File
@@ -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",
};
src/app/listener.middleware.js
-39
View File
@@ -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;
src/app/listener.middleware/clear.handler.js
+9
View File
@@ -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;
src/app/listener.middleware/handler.channel.msg.js
+29
View File
@@ -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;
}
}
src/app/listener.middleware/handler.channels.js
+40
View File
@@ -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;
}
}
src/app/listener.middleware/handler.contacts.js
+55
View File
@@ -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;
}
}
src/app/listener.middleware/handler.dm.msg.js
+28
View File
@@ -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;
}
}
src/app/listener.middleware/handler.footprint.js
+33
View File
@@ -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;
}
}
src/app/listener.middleware/handler.message.js
+44
View File
@@ -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;
}
}
src/app/listener.middleware/handler.reaction.js
+27
View File
@@ -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;
}
}
src/app/listener.middleware/index.js
+114
View File
@@ -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;
src/app/services/auth.js
+1 -1
View File
@@ -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({
src/app/services/base.query.js
+13 -7
View File
@@ -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") {
// if (api.endpoint === "renew") {
// toast.error("token expired, please login again");
api.dispatch(clearAuthData());
api.dispatch(resetAuthData());
location.href = "/#/login";
// } else {
toast.error("API Not Authenticated");
return;
} else {
toast.error("Not Authenticated");
}
// }
}
break;
case 403:
src/app/services/channel.js
+1 -1
View File
@@ -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) => ({
src/app/services/contact.js
+1 -12
View File
@@ -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) => ({
src/app/services/handlers.js
+25 -32
View File
@@ -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();
}
};
src/app/services/message.js
+13 -5
View File
@@ -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;
src/app/services/server.js
+1 -1
View File
@@ -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({
src/app/services/streaming/chat.handler.js
+130
View File
@@ -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;
src/app/services/streaming/index.js
+173
View File
@@ -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;
src/app/slices/auth.data.js
+19 -44
View File
@@ -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;
src/app/slices/channels.js
+27 -29
View File
@@ -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(
state.ids = chs.map(({ gid }) => gid);
state.byId = Object.fromEntries(
chs.map((c) => {
const { gid, ...rest } = c;
return [gid, rest];
const { gid } = c;
return [gid, c];
})
)
: 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;
);
},
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;
src/app/slices/contacts.js
+29 -30
View File
@@ -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;
src/app/slices/footprint.js
+32
View File
@@ -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;
src/app/slices/message.channel.js
+18 -47
View File
@@ -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;
src/app/slices/message.handler.js
-130
View File
@@ -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;
}
};
src/app/slices/message.js
+64
View File
@@ -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;
src/app/slices/message.pending.js
-47
View File
@@ -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;
src/app/slices/message.reaction.js
+39
View File
@@ -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;
src/app/slices/message.user.js
+25 -44
View File
@@ -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;
src/app/slices/readme.md
+7
View File
@@ -0,0 +1,7 @@
reset
fullfill
set
add
update
remove
toggle
src/app/slices/visit.mark.js
-38
View File
@@ -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;
src/app/store.js
+11 -6
View File
@@ -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),
});
src/common/component/Avatar.js
+4 -1
View File
@@ -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]);
src/common/component/ChannelModal/index.js
+8 -8
View File
@@ -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}
data-disabled={!loginUser?.is_admin}
onClick={handleToggle}
/>
</div>
}
<div className="btns">
<Button onClick={closeModal} className="normal cancel">
Cancel
src/common/component/ChannelSetting/DeleteConfirmModal.js
+4 -4
View File
@@ -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");
src/common/component/ChannelSetting/Overview.js
-1
View File
@@ -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,
src/common/component/ChannelSetting/navs.js
+6 -13
View File
@@ -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} />,
},
],
},
src/common/component/Contact.js
+6 -7
View File
@@ -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>
);
}
src/common/component/ContactsModal.js
+2 -6
View File
@@ -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}>
src/common/component/CurrentUser.js
+8 -6
View File
@@ -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,7 +73,7 @@ export default function CurrentUser({ expand = true }) {
<span className="id">#{uid}</span>
</div>
</div>
{expand && (
{/* {expand && ( */}
<div className="settings">
<img
src="https://static.nicegoodthings.com/project/rustchat/icon.speaker.svg"
@@ -84,7 +86,7 @@ export default function CurrentUser({ expand = true }) {
alt="sound icon"
/>
</div>
)}
{/* )} */}
</StyledWrapper>
);
}
src/common/component/ManageMembers.js
+6 -3
View File
@@ -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>
src/common/component/Message/Commands.js
+9 -18
View File
@@ -1,9 +1,9 @@
import { useState, useRef } from "react";
import { useDispatch, useSelector } from "react-redux";
import styled from "styled-components";
import toast from "react-hot-toast";
// import toast from "react-hot-toast";
import { useOutsideClick } from "rooks";
import { setReplyMessage } from "../../../app/slices/message.pending";
import { addReplyingMessage } from "../../../app/slices/message";
import StyledMenu from "../StyledMenu";
import DeleteMessageConfirm from "./DeleteMessageConfirm";
import EmojiPicker from "./EmojiPicker";
@@ -41,10 +41,8 @@ const StyledCmds = styled.ul`
`;
export default function Commands({
contextId = 0,
message = null,
mid = 0,
uid = 0,
reactions = [],
from_uid = 0,
menuVisible,
toggleMenu,
emojiPopVisible,
@@ -54,12 +52,12 @@ export default function Commands({
const dispatch = useDispatch();
const [deleteModalVisible, setDeleteModalVisible] = useState(false);
const currUid = useSelector((store) => store.authData.user.uid);
const currUid = useSelector((store) => store.authData.uid);
const menuRef = useRef(null);
const handleReply = () => {
if (contextId) {
dispatch(setReplyMessage({ id: contextId, msg: message }));
dispatch(addReplyingMessage({ id: contextId, mid }));
}
// toast.success("cooming soon");
};
@@ -78,13 +76,9 @@ export default function Commands({
/>
</li>
{emojiPopVisible && (
<EmojiPicker
reactions={reactions}
mid={mid}
hidePicker={toggleEmojiPopover}
/>
<EmojiPicker mid={mid} hidePicker={toggleEmojiPopover} />
)}
{currUid == uid ? (
{currUid == from_uid ? (
<li className="cmd" onClick={toggleEditMessage}>
<img
src="https://static.nicegoodthings.com/project/rustchat/icon.edit.svg"
@@ -110,7 +104,7 @@ export default function Commands({
{/* <li className="item">Edit Message</li> */}
<li className="item underline">Pin Message</li>
<li className="item">Reply</li>
{currUid == uid && (
{currUid == from_uid && (
<li className="item danger" onClick={toggleDeleteModal}>
Delete Message
</li>
@@ -118,10 +112,7 @@ export default function Commands({
</StyledMenu>
)}
{deleteModalVisible && (
<DeleteMessageConfirm
closeModal={toggleDeleteModal}
message={{ mid, ...message }}
/>
<DeleteMessageConfirm closeModal={toggleDeleteModal} mid={mid} />
)}
</StyledCmds>
);
src/common/component/Message/DeleteMessageConfirm.js
+3 -4
View File
@@ -7,7 +7,7 @@ import StyledModal from "../styled/Modal";
import Button from "../styled/Button";
import Modal from "../Modal";
import PreviewMessage from "./PreviewMessage";
export default function LogoutConfirmModal({ closeModal, message = null }) {
export default function DeleteMessageConfirmModal({ closeModal, mid = 0 }) {
// const dispatch = useDispatch();
const [deleteMessage, { isLoading, isSuccess }] = useLazyDeleteMessageQuery();
const handleDelete = (evt) => {
@@ -21,8 +21,7 @@ export default function LogoutConfirmModal({ closeModal, message = null }) {
}
}, [isSuccess]);
if (!message) return;
const { mid, ...previewContent } = message;
if (!mid) return null;
return (
<Modal>
<StyledModal
@@ -38,7 +37,7 @@ export default function LogoutConfirmModal({ closeModal, message = null }) {
title="Delete Message"
description="Are you sure want to delete this message?"
>
<PreviewMessage data={previewContent} />
<PreviewMessage mid={mid} />
</StyledModal>
</Modal>
);
src/common/component/Message/EmojiPicker.js
+19 -7
View File
@@ -3,7 +3,8 @@
import { useRef } from "react";
import styled from "styled-components";
import { useOutsideClick } from "rooks";
import { useLikeMessageMutation } from "../../../app/services/message";
import { useSelector } from "react-redux";
import { useReactMessageMutation } from "../../../app/services/message";
const StyledPicker = styled.div`
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: 6px;
@@ -32,13 +33,19 @@ const StyledPicker = styled.div`
}
`;
const emojis = {
thumb_up: "👍",
ok: "👌",
like: "❤️",
["U+1F44D"]: "👍",
["U+1F44C"]: "👌",
["U+2764"]: "❤️",
};
export default function EmojiPicker({ mid, reactions = [], hidePicker }) {
export default function EmojiPicker({ mid, hidePicker }) {
const wrapperRef = useRef(null);
const [reactMessage, { isLoading }] = useLikeMessageMutation();
const [reactMessage, { isLoading }] = useReactMessageMutation();
const { reactionData, currUid } = useSelector((store) => {
return {
reactionData: store.reactionMessage[mid],
currUid: store.authData.uid,
};
});
useOutsideClick(wrapperRef, hidePicker);
const handleReact = (action) => {
console.log("react", action);
@@ -48,9 +55,14 @@ export default function EmojiPicker({ mid, reactions = [], hidePicker }) {
<StyledPicker ref={wrapperRef}>
<ul className={`emojis ${isLoading ? "reacting" : ""}`}>
{Object.entries(emojis).map(([key, emoji]) => {
let reacted =
reactionData &&
reactionData[key] &&
reactionData[key].includes(currUid);
return (
<li
className={`emoji ${reactions.includes(key) ? "reacted" : ""}`}
className={`emoji ${reacted ? "reacted" : ""}`}
key={key}
onClick={handleReact.bind(null, key)}
>
src/common/component/Message/PreviewMessage.js
+11 -5
View File
@@ -1,12 +1,16 @@
// import { useEffect, useRef, useState } from "react";
import dayjs from "dayjs";
// import { useSelector } from "react-redux";
import renderContent from "./renderContent";
import Avatar from "../Avatar";
import StyledWrapper from "./styled";
export default function PreviewMessage({ data = null }) {
if (!data) return null;
const { avatar, name, time, content_type, content } = data;
import { useSelector } from "react-redux";
export default function PreviewMessage({ mid = 0 }) {
const { msg, contactsData } = useSelector((store) => {
return { msg: store.message[mid], contactsData: store.contacts.byId };
});
if (!msg) return null;
const { from_uid, created_at, content_type, content } = msg;
const { name, avatar } = contactsData[from_uid];
return (
<StyledWrapper className={`preview`}>
<div className="avatar">
@@ -15,7 +19,9 @@ export default function PreviewMessage({ data = null }) {
<div className="details">
<div className="up">
<span className="name">{name}</span>
<i className="time">{dayjs(time).format("YYYY-MM-DD h:mm:ss A")}</i>
<i className="time">
{dayjs(created_at).format("YYYY-MM-DD h:mm:ss A")}
</i>
</div>
<div className={`down`}>{renderContent(content_type, content)}</div>
</div>
src/common/component/Message/Reaction.js
+54
View File
@@ -0,0 +1,54 @@
import React from "react";
import { useDispatch, useSelector } from "react-redux";
import styled from "styled-components";
import { emojis } from "./EmojiPicker";
const StyledWrapper = styled.span`
display: flex;
gap: 8px;
font-size: 16px;
/* align-items: center; */
.reaction {
position: relative;
display: flex;
align-items: center;
gap: 6px;
em {
font-size: 12px;
color: #999;
}
}
`;
export default function Reaction({ reactions = null }) {
// const {
// messageData,
// reactionMessageData,
// contactsData,
// loginedUser,
// } = useSelector((store) => {
// return {
// reactionMessageData: store.reactionMessage,
// messageData: store.message,
// contactsData: store.contacts.byId,
// loginedUser: store.authData.user,
// };
// });
if (!reactions) return null;
return (
<StyledWrapper className="reactions">
{Object.entries(reactions).map(([reaction, uids]) => {
return uids.length > 0 ? (
<i
className="reaction"
// data-count={count > 1 ? count : ""}
key={reaction}
>
{emojis[reaction]}
{uids.length > 1 ? <em>{`+${uids.length}`} </em> : null}
</i>
) : null;
})}
</StyledWrapper>
);
}
src/common/component/Message/Removed.js
-8
View File
@@ -1,8 +0,0 @@
import React from "react";
import styled from "styled-components";
const Styled = styled.div`
display: flex;
`;
export default function Removed() {
return <Styled>Removed</Styled>;
}
src/common/component/Message/Reply.js
+15
View File
@@ -0,0 +1,15 @@
import React from "react";
import styled from "styled-components";
import { useSelector } from "react-redux";
const Styled = styled.div`
color: #aaa;
font-size: 12px;
margin-bottom: -10px;
/* padding-left: 10px; */
`;
export default function Reply({ mid }) {
const data = useSelector((store) => store.message[mid]);
if (!data) return null;
return <Styled className="reply">{data.content}</Styled>;
}
src/common/component/Message/index.js
+40 -70
View File
@@ -1,44 +1,34 @@
import React, { useEffect, useRef, useState } from "react";
import React, { useRef, useState, useEffect } from "react";
import dayjs from "dayjs";
import { useDispatch, useSelector } from "react-redux";
import { useSelector, useDispatch } from "react-redux";
import { useInViewRef } from "rooks";
import Tippy from "@tippyjs/react";
import Reaction from "./Reaction";
import Reply from "./Reply";
import Profile from "../Profile";
import Avatar from "../Avatar";
import { setChannelMsgRead } from "../../../app/slices/message.channel";
import { setUserMsgRead } from "../../../app/slices/message.user";
import { readMessage } from "../../../app/slices/message";
import StyledWrapper from "./styled";
import Commands from "./Commands";
import { emojis } from "./EmojiPicker";
import EditMessage from "./EditMessage";
import renderContent from "./renderContent";
function Message({
reply = null,
gid = "",
mid = "",
uid,
fromUid,
time,
content,
content_type = "text/plain",
unread = false,
pending,
edited = false,
likes = {},
}) {
function Message({ contextId = 0, mid = "" }) {
const [myRef, inView] = useInViewRef();
const [edit, setEdit] = useState(false);
const [emojiPopVisible, setEmojiPopVisible] = useState(false);
const [menuVisible, setMenuVisible] = useState(false);
const disptach = useDispatch();
const avatarRef = useRef(null);
const { contacts, loginedUser } = useSelector((store) => {
const { message = {}, reactionMessageData, contactsData } = useSelector(
(store) => {
return {
contacts: store.contacts,
loginedUser: store.authData.user,
reactionMessageData: store.reactionMessage,
message: store.message[mid],
contactsData: store.contacts.byId,
};
});
}
);
const toggleMenu = () => {
setMenuVisible((prev) => !prev);
};
@@ -49,20 +39,30 @@ function Message({
setEmojiPopVisible((prev) => !prev);
};
// useEffect(() => {
// if (!unread) {
// if (!read) {
// avatarRef.current?.scrollIntoView();
// }
// }, [unread]);
// }, [read]);
// console.log("message", mid, messageData[mid]);
useEffect(() => {
if (inView && unread) {
const setMsgRead = gid ? setChannelMsgRead : setUserMsgRead;
disptach(setMsgRead({ id: gid || uid, mid }));
if (inView && !message.read) {
disptach(readMessage(mid));
}
}, [gid, mid, uid, unread, inView]);
if (!contacts) return null;
const currUser = contacts.find((c) => c.uid == fromUid) || {};
}, [mid, message, inView]);
if (!message) return null;
const {
reply_mid,
from_uid: fromUid,
created_at: time,
sending,
content,
content_type = "text/plain",
edited,
} = message;
const reactions = reactionMessageData[mid];
const currUser = contactsData[fromUid] || {};
return (
<StyledWrapper
ref={myRef}
@@ -74,36 +74,20 @@ function Message({
interactive
placement="left"
trigger="click"
content={<Profile data={currUser} type="card" />}
content={<Profile uid={fromUid} type="card" />}
>
<div className="avatar" data-uid={uid} ref={avatarRef}>
<div className="avatar" data-uid={fromUid} ref={avatarRef}>
<Avatar url={currUser.avatar} name={currUser.name} />
</div>
</Tippy>
<div className="details">
{reply && <div className="reply">{reply.content}</div>}
{reply_mid && <Reply mid={reply_mid} />}
<div className="up">
<span className="name">{currUser.name}</span>
<i className="time">{dayjs(time).format("YYYY-MM-DD h:mm:ss A")}</i>
{likes && (
<span className="likes">
{Object.entries(likes).map(([reaction, uids]) => {
return uids.length > 0 ? (
<i
className="like"
// data-count={count > 1 ? count : ""}
key={reaction}
>
{emojis[reaction]}
{uids.length > 1 ? <em>{`+${uids.length}`} </em> : null}
</i>
) : null;
})}
</span>
)}
{reactions && <Reaction reactions={reactions} />}
</div>
<div className={`down ${pending ? "pending" : ""}`}>
<div className={`down ${sending ? "sending" : ""}`}>
{edit ? (
<EditMessage
content={content}
@@ -117,23 +101,9 @@ function Message({
</div>
{!edit && (
<Commands
contextId={gid || uid}
message={{
mid,
from_uid: fromUid,
name: currUser.name,
avatar: currUser.avatar,
time,
content,
content_type,
}}
reactions={Object.entries(likes ?? {})
.filter(([, uids = []]) => uids.includes(loginedUser.uid))
.map(([reaction]) => {
return reaction;
})}
contextId={contextId}
mid={mid}
uid={fromUid}
from_uid={fromUid}
toggleMenu={toggleMenu}
menuVisible={menuVisible}
emojiPopVisible={emojiPopVisible}
src/common/component/Message/styled.js
+2 -31
View File
@@ -35,12 +35,7 @@ const StyledMsg = styled.div`
display: flex;
flex-direction: column;
gap: 8px;
.reply {
color: #aaa;
font-size: 12px;
margin-bottom: -10px;
/* padding-left: 10px; */
}
.up {
display: flex;
align-items: center;
@@ -57,30 +52,6 @@ const StyledMsg = styled.div`
font-size: 12px;
line-height: 18px;
}
.likes {
display: flex;
gap: 8px;
font-size: 16px;
/* align-items: center; */
.like {
position: relative;
display: flex;
align-items: center;
gap: 6px;
em {
font-size: 12px;
color: #999;
}
/* &:after {
content: attr(data-count);
position: absolute;
top: -4px;
right: -8px;
font-size: 12px;
color: #999;
} */
}
}
}
.down {
user-select: text;
@@ -95,7 +66,7 @@ const StyledMsg = styled.div`
color: #999;
font-size: 10px;
}
&.pending {
&.sending {
opacity: 0.5;
}
.img {
src/common/component/NotificationHub/index.js
+6 -3
View File
@@ -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;
src/common/component/NotificationHub/useMessageHandler.js
+1 -1
View File
@@ -51,7 +51,7 @@ export default function useMessageHandler(currUser) {
dispatch(
addMessage({
id, // 自己发的 就不用标记未读
unread: !self,
read: !self,
...common,
})
);
src/common/component/Profile.js
+5 -3
View File
@@ -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} />
src/common/component/Search.js
+5 -1
View File
@@ -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 && (
src/common/component/Send/Replying.js
+28
View File
@@ -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>
);
}
src/common/component/Send/UploadModal/index.js
+1 -4
View File
@@ -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 },
src/common/component/Send/index.js
+66 -58
View File
@@ -1,46 +1,42 @@
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',
type = "channel",
// 发给谁，或者是channel，或者是user
id = '',
dragFiles = []
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 [msg, setMsg] = useState("");
const dispatch = useDispatch();
// 谁发的
const {
from_uid,
reply = null,
contacts
} = useSelector((store) => {
const { from_uid, replying_mid = null } = useSelector((store) => {
return {
contacts: store.contacts,
from_uid: store.authData.user.uid,
reply: store.pendingMessage.reply[id]
from_uid: store.authData.uid,
replying_mid: store.message.replying[id],
};
});
useEffect(() => {
@@ -50,16 +46,19 @@ export default function Send({
}, [dragFiles]);
const [sendMsg, { isLoading: userSending }] = useSendMsgMutation();
const [sendChannelMsg, { isLoading: channelSending }] = useSendChannelMsgMutation();
const sendMessage = type == 'channel' ? sendChannelMsg : sendMsg;
const [
sendChannelMsg,
{ isLoading: channelSending },
] = useSendChannelMsgMutation();
const sendMessage = type == "channel" ? sendChannelMsg : sendMsg;
const sendingMessage = userSending || channelSending;
useKey(
'Shift',
"Shift",
(e) => {
console.log('shift', e.type);
setShift(e.type == 'keydown');
console.log("shift", e.type);
setShift(e.type == "keydown");
},
{ eventTypes: ['keydown', 'keyup'], target: inputRef }
{ eventTypes: ["keydown", "keyup"], target: inputRef }
);
const handleMsgChange = (evt) => {
if (enter && !shift) {
@@ -69,54 +68,58 @@ export default function Send({
}
};
const handleInputKeydown = (e) => {
console.log('keydown event', e);
setEnter(e.key === 'Enter');
console.log("keydown event", e);
setEnter(e.key === "Enter");
};
const selectEmoji = (emoji) => {
setMsg((prev) => `${prev}${emoji}`);
};
useEffect(() => {
inputRef.current.focus();
}, [msg, reply]);
}, [msg, replying_mid]);
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));
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('');
};
const removeReply = () => {
dispatch(removeReplyMessage(id));
setMsg("");
};
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>
)}
<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" />
<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)
e.currentTarget.setSelectionRange(
e.currentTarget.value.length,
e.currentTarget.value.length
)
}
ref={inputRef}
className="content"
@@ -133,7 +136,12 @@ export default function Send({
</div>
</StyledSend>
{files.length !== 0 && (
<UploadModal type={type} files={files} sendTo={id} closeModal={resetFiles} />
<UploadModal
type={type}
files={files}
sendTo={id}
closeModal={resetFiles}
/>
)}
</>
);
src/common/component/Setting/MyAccount.js
+5 -3
View File
@@ -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>
src/common/component/Setting/Overview.js
+4 -2
View File
@@ -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">
src/common/component/Setting/config/Agora.js
-1
View File
@@ -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";
src/common/component/Setting/config/Firebase.js
-1
View File
@@ -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";
src/common/component/Setting/navs.js
+1 -9
View File
@@ -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 />,
},
],
},
src/common/hook/useChatScroll.js
+32
View File
@@ -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;
src/common/hook/useFilteredUsers.js
+3 -3
View File
@@ -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);
};
src/common/hook/useLogout.js
+19 -15
View File
@@ -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]);
src/routes/chat/ChannelChat/index.js
+23 -60
View File
@@ -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,53 +75,23 @@ 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>
@@ -136,7 +99,7 @@ export default function ChannelChat({
<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>
);
}
src/routes/chat/ChannelList.js
+19 -10
View File
@@ -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}
/>
);
src/routes/chat/DMChat/index.js
+13 -44
View File
@@ -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,41 +66,11 @@ 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;
<div className="chat" ref={ref}>
{msgIds.map((mid) => {
// 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}
/>
);
return <Message mid={mid} key={mid} contextId={uid} />;
})}
</div>
</StyledDMChat>
src/routes/chat/DMChat/styled.js
+2 -3
View File
@@ -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;
src/routes/chat/DMList.js
+19 -10
View File
@@ -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}
/>
);
src/routes/chat/getUnreadCount.js
+12
View File
@@ -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;
src/routes/chat/index.js
+15 -33
View File
@@ -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) => {
const { contactsData, UserMsgData, messageData } = useSelector((store) => {
return {
contacts: store.contacts,
channels: store.channels,
contactsData: store.contacts.byId,
UserMsgData: store.userMessage,
ChannelMsgData: store.channelMessage,
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}
/>
)}
src/routes/contacts/Profile.js
-91
View File
@@ -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>
);
}
src/routes/contacts/index.js
+6 -6
View File
@@ -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>
src/routes/home/Loading.js
+1 -1
View File
@@ -40,7 +40,7 @@ export default function Loading() {
useEffect(() => {
const inter = setTimeout(() => {
setReloadVisible(true);
}, 10000);
}, 15000);
return () => {
clearTimeout(inter);
src/routes/home/index.js
+5 -11
View File
@@ -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,14 +29,13 @@ 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 ? (
{/* <NotificationHub /> */}
<StyledWrapper>
<div className={`col left ${menuExpand ? "expand" : ""}`}>
<ServerDropList
@@ -48,9 +47,7 @@ export default function HomePage() {
<NavLink className="link" to={"/chat"}>
<img src={ChatIcon} alt="chat icon" />{" "}
{menuExpand && (
<span className="animate__animated animate__fadeIn">
Chat
</span>
<span className="animate__animated animate__fadeIn">Chat</span>
)}
</NavLink>
<NavLink className="link" to={"/contacts"}>
@@ -71,9 +68,6 @@ export default function HomePage() {
<Outlet />
</div>
</StyledWrapper>
) : (
<Loading />
)}
{setting && <SettingModal />}
{channelSetting && <ChannelSettingModal id={channelSetting} />}
</>
src/routes/home/usePreload.js
+23 -8
View File
@@ -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(() => {
// 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: {
src/routes/login/index.js
+1
View File
@@ -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("/");
tmp.json
+21
View File
@@ -0,0 +1,21 @@
{
"groups": [
{
"description": null,
"gid": 1,
"is_public": true,
"members": [],
"name": "hello",
"owner": null
},
{
"description": null,
"gid": 11,
"is_public": false,
"members": [1, 2, 8],
"name": "23ssss",
"owner": 2
}
],
"type": "related_groups"
}
yarn.lock
+219 -195
View File
@@ -1479,12 +1479,12 @@
"@firebase/util" "1.4.3"
tslib "^2.1.0"
"@firebase/app-compat@0.1.18":
version "0.1.18"
resolved "https://registry.yarnpkg.com/@firebase/app-compat/-/app-compat-0.1.18.tgz#7d86c711c73231aaa408d04a331b468cb74ec7cb"
integrity sha512-YXmMLQro2g2xlNnzB6zVxYoFx9sJS/JDEQy6vsj3FpMUuARaImipL6W8KuGfH+tJ3M+q38qRaFROk5gK6PoCrQ==
"@firebase/app-compat@0.1.19":
version "0.1.19"
resolved "https://registry.yarnpkg.com/@firebase/app-compat/-/app-compat-0.1.19.tgz#8a842b0a684899ec7213a26c8be08bcd5bfd7a07"
integrity sha512-a0TgAXcjF3htSdi10mRwAks1+73nwbmSMXzjlOQDYJ8t3HE7FvHxfB4hjuwHKfgr3MWZjcarsGKVr7LWhUAE8w==
dependencies:
"@firebase/app" "0.7.17"
"@firebase/app" "0.7.18"
"@firebase/component" "0.5.10"
"@firebase/logger" "0.3.2"
"@firebase/util" "1.4.3"
@@ -1495,14 +1495,15 @@
resolved "https://registry.yarnpkg.com/@firebase/app-types/-/app-types-0.7.0.tgz#c9e16d1b8bed1a991840b8d2a725fb58d0b5899f"
integrity sha512-6fbHQwDv2jp/v6bXhBw2eSRbNBpxHcd1NBF864UksSMVIqIyri9qpJB1Mn6sGZE+bnDsSQBC5j2TbMxYsJQkQg==
"@firebase/app@0.7.17":
version "0.7.17"
resolved "https://registry.yarnpkg.com/@firebase/app/-/app-0.7.17.tgz#b6a75c03bc1236bf852e56ff7876e431835e18f1"
integrity sha512-OnZab790eMwRxkUs7o/kgniAzSBxecDTGEk1PVhiG0HQhKrIf+R7lgqOZHDb/2GJsX12jby1p/Z5+WJCBxVbJQ==
"@firebase/app@0.7.18":
version "0.7.18"
resolved "https://registry.yarnpkg.com/@firebase/app/-/app-0.7.18.tgz#69660cbf02da80a1e1a1ab38b76b96231f9bb81d"
integrity sha512-jomDaPaEQEWfFUqvxQw4TYSs2gCT2BN0Ec1//3CdMsc1NcppduS31bxsjhn3KdPbtx4opkaZ2FcA+buHtdw9dw==
dependencies:
"@firebase/component" "0.5.10"
"@firebase/logger" "0.3.2"
"@firebase/util" "1.4.3"
idb "3.0.2"
tslib "^2.1.0"
"@firebase/auth-compat@0.2.9":
@@ -1656,13 +1657,13 @@
dependencies:
tslib "^2.1.0"
"@firebase/messaging-compat@0.1.8":
version "0.1.8"
resolved "https://registry.yarnpkg.com/@firebase/messaging-compat/-/messaging-compat-0.1.8.tgz#3d8ae0302bfbd26e4e9b5cf05c832bffeb215e3d"
integrity sha512-1q0Bp/auG6XUSEBzmExrn6uU6JUtB5JxIHwTj8wmUf+JcdNqPMWou040Mem421Sxgd4GLn+vHHlVIRxv1yLYUA==
"@firebase/messaging-compat@0.1.9":
version "0.1.9"
resolved "https://registry.yarnpkg.com/@firebase/messaging-compat/-/messaging-compat-0.1.9.tgz#05e905bc5a26a3034635cdb2b1e7a1f257c2b08d"
integrity sha512-smcBhvTLfgE2KDtvDj1Pm9zQ7GeyR5BLarYLxtvmhhbV6tpa8g+UUE3pCdqN+y1kx6mIYqNOmEEXv+1YnSiYwQ==
dependencies:
"@firebase/component" "0.5.10"
"@firebase/messaging" "0.9.8"
"@firebase/messaging" "0.9.9"
"@firebase/util" "1.4.3"
tslib "^2.1.0"
@@ -1671,10 +1672,10 @@
resolved "https://registry.yarnpkg.com/@firebase/messaging-interop-types/-/messaging-interop-types-0.1.0.tgz#bdac02dd31edd5cb9eec37b1db698ea5e2c1a631"
integrity sha512-DbvUl/rXAZpQeKBnwz0NYY5OCqr2nFA0Bj28Fmr3NXGqR4PAkfTOHuQlVtLO1Nudo3q0HxAYLa68ZDAcuv2uKQ==
"@firebase/messaging@0.9.8":
version "0.9.8"
resolved "https://registry.yarnpkg.com/@firebase/messaging/-/messaging-0.9.8.tgz#a7f38c268801513e7b02be10e951a1b2e825a082"
integrity sha512-X588ZFA/plaO4de7MyZs2gukrkdp+ounwqZ7JerHHVa6eKl1WNi9AuAfoXOJUMq+nX2DsOWYjohciCkC6qLrWw==
"@firebase/messaging@0.9.9":
version "0.9.9"
resolved "https://registry.yarnpkg.com/@firebase/messaging/-/messaging-0.9.9.tgz#28ed74e82b849dcedebe2b41693d24fe6e99e8ad"
integrity sha512-Fe6+VqFgVuvFOiVerQkPzdmHXnB7urujcKAxK3lRKxgafH89CRvXO1sPnPMvox5/JOCBZrAPok5KA7rOCxBguw==
dependencies:
"@firebase/component" "0.5.10"
"@firebase/installations" "0.5.5"
@@ -2782,10 +2783,10 @@ autoprefixer@^10.4.2:
picocolors "^1.0.0"
postcss-value-parser "^4.2.0"
axios@^0.26.0:
version "0.26.0"
resolved "https://registry.yarnpkg.com/axios/-/axios-0.26.0.tgz#9a318f1c69ec108f8cd5f3c3d390366635e13928"
integrity sha512-lKoGLMYtHvFrPVt3r+RBMp9nh34N0M8zEfCWqdWZx6phynIEhQqAdydpyBAAG211zlhX9Rgu08cOamy6XjE5Og==
axios@^0.26.1:
version "0.26.1"
resolved "https://registry.yarnpkg.com/axios/-/axios-0.26.1.tgz#1ede41c51fcf51bbbd6fd43669caaa4f0495aaa9"
integrity sha512-fPwcX4EvnSHuInCMItEhAGnaSEXRBjtzh9fOtsE6E1G6p7vl7edEeZe11QHf18+6+9gR5PbKV/sGKNaD8YaMeA==
dependencies:
follow-redirects "^1.14.8"
@@ -2996,6 +2997,17 @@ browserslist@^4.19.3:
node-releases "^2.0.2"
picocolors "^1.0.0"
browserslist@^4.20.0:
version "4.20.0"
resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.20.0.tgz#35951e3541078c125d36df76056e94738a52ebe9"
integrity sha512-bnpOoa+DownbciXj0jVGENf8VYQnE2LNWomhYuCsMmmx9Jd9lwq0WXODuwpSsp8AVdKM2/HorrzxAfbKvWTByQ==
dependencies:
caniuse-lite "^1.0.30001313"
electron-to-chromium "^1.4.76"
escalade "^3.1.1"
node-releases "^2.0.2"
picocolors "^1.0.0"
buffer-from@^1.0.0:
version "1.1.2"
resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.1.2.tgz#2b146a6fd72e80b4f55d255f35ed59a3a9a41bd5"
@@ -3091,6 +3103,11 @@ caniuse-lite@^1.0.30001312:
resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001312.tgz#e11eba4b87e24d22697dae05455d5aea28550d5f"
integrity sha512-Wiz1Psk2MEK0pX3rUzWaunLTZzqS2JYZFzNKqAiJGiuxIjRPLgV6+VDPOg6lQOUxmDwhTlh198JsTTi8Hzw6aQ==
caniuse-lite@^1.0.30001313:
version "1.0.30001314"
resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001314.tgz#65c7f9fb7e4594fca0a333bec1d8939662377596"
integrity sha512-0zaSO+TnCHtHJIbpLroX7nsD+vYuOVjl3uzFbJO1wMVbuveJA0RK2WcQA9ZUIOiO0/ArMiMgHJLxfEZhQiC0kw==
case-sensitive-paths-webpack-plugin@^2.4.0:
version "2.4.0"
resolved "https://registry.yarnpkg.com/case-sensitive-paths-webpack-plugin/-/case-sensitive-paths-webpack-plugin-2.4.0.tgz#db64066c6422eed2e08cc14b986ca43796dbc6d4"
@@ -3445,13 +3462,13 @@ css-has-pseudo@^3.0.4:
dependencies:
postcss-selector-parser "^6.0.9"
css-loader@^6.6.0:
version "6.6.0"
resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-6.6.0.tgz#c792ad5510bd1712618b49381bd0310574fafbd3"
integrity sha512-FK7H2lisOixPT406s5gZM1S3l8GrfhEBT3ZiL2UX1Ng1XWs0y2GPllz/OTyvbaHe12VgQrIXIzuEGVlbUhodqg==
css-loader@^6.7.1:
version "6.7.1"
resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-6.7.1.tgz#e98106f154f6e1baf3fc3bc455cb9981c1d5fd2e"
integrity sha512-yB5CNFa14MbPJcomwNh3wLThtkZgcNyI2bNMRt8iE5Z8Vwl7f8vQXFAzn2HDOJvtDq2NTZBUGMSUNNyrv3/+cw==
dependencies:
icss-utils "^5.1.0"
postcss "^8.4.5"
postcss "^8.4.7"
postcss-modules-extract-imports "^3.0.0"
postcss-modules-local-by-default "^4.0.0"
postcss-modules-scope "^3.0.0"
@@ -3509,10 +3526,10 @@ css-what@^5.1.0:
resolved "https://registry.yarnpkg.com/css-what/-/css-what-5.1.0.tgz#3f7b707aadf633baf62c2ceb8579b545bb40f7fe"
integrity sha512-arSMRWIIFY0hV8pIxZMEfmMI47Wj3R/aWpZDDxWYCPEiOMv6tfOrnpDtgxBYPEQD4V0Y/958+1TdC3iWTFcUPw==
cssdb@^6.3.1:
version "6.4.0"
resolved "https://registry.yarnpkg.com/cssdb/-/cssdb-6.4.0.tgz#54899b9042e302be3090b8510ea71fefd08c9e6b"
integrity sha512-8NMWrur/ewSNrRNZndbtOTXc2Xb2b+NCTPHj8VErFYvJUlgsMAiBGaFaxG6hjy9zbCjj2ZLwSQrMM+tormO8qA==
cssdb@^6.4.0:
version "6.4.1"
resolved "https://registry.yarnpkg.com/cssdb/-/cssdb-6.4.1.tgz#a2b5955e3283d8df6b6bb86e4107fedaeec1521b"
integrity sha512-R70R/Q1fPlM1D6Y+Kpat0QjiY+aMsY2/8lekdVoYcJ7ZQs9kw71W78FdOMf8DFq975KHQf1089PNg1dLsbAhoA==
cssesc@^3.0.0:
version "3.0.0"
@@ -3851,6 +3868,11 @@ electron-to-chromium@^1.4.71:
resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.75.tgz#d1ad9bb46f2f1bf432118c2be21d27ffeae82fdd"
integrity sha512-LxgUNeu3BVU7sXaKjUDD9xivocQLxFtq6wgERrutdY/yIOps3ODOZExK1jg8DTEg4U8TUCb5MLGeWFOYuxjF3Q==
electron-to-chromium@^1.4.76:
version "1.4.81"
resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.81.tgz#a9ce8997232fb9fb0ec53de8931a85b18c0a7383"
integrity sha512-Gs7xVpIZ7tYYSDA+WgpzwpPvfGwUk3KSIjJ0akuj5XQHFdyQnsUoM76EA4CIHXNLPiVwTwOFay9RMb0ChG3OBw==
email-addresses@^3.0.1:
version "3.1.0"
resolved "https://registry.yarnpkg.com/email-addresses/-/email-addresses-3.1.0.tgz#cabf7e085cbdb63008a70319a74e6136188812fb"
@@ -3884,10 +3906,10 @@ encodeurl@~1.0.2:
resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59"
integrity sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=
enhanced-resolve@^5.8.3:
version "5.8.3"
resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-5.8.3.tgz#6d552d465cce0423f5b3d718511ea53826a7b2f0"
integrity sha512-EGAbGvH7j7Xt2nc0E7D99La1OiEs8LnyimkRgwExpUMScN6O+3x9tIWs7PLQZVNx4YD+00skHXPXi1yQHpAmZA==
enhanced-resolve@^5.9.2:
version "5.9.2"
resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-5.9.2.tgz#0224dcd6a43389ebfb2d55efee517e5466772dd9"
integrity sha512-GIm3fQfwLJ8YZx2smuHpBKkXC1yOk+OBEmKckVyL0i/ea8mqDEykK3ld5dgH1QYPNyT/lIllxV2LULnxCHaHkA==
dependencies:
graceful-fs "^4.2.4"
tapable "^2.2.0"
@@ -3981,10 +4003,10 @@ escape-string-regexp@^4.0.0:
resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz#14ba83a5d373e3d311e5afca29cf5bfad965bf34"
integrity sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==
eslint-config-prettier@^8.4.0:
version "8.4.0"
resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-8.4.0.tgz#8e6d17c7436649e98c4c2189868562921ef563de"
integrity sha512-CFotdUcMY18nGRo5KGsnNxpznzhkopOcOo0InID+sgQssPrzjvsyKZPvOgymTFeHrFuC3Tzdf2YndhXtULK9Iw==
eslint-config-prettier@^8.5.0:
version "8.5.0"
resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-8.5.0.tgz#5a81680ec934beca02c7b1a61cf8ca34b66feab1"
integrity sha512-obmWKLUNCnhtQRKc+tmnYuQl0pFU1ibYJQ5BGhTVB08bHe9wC8qUeG7c08dj9XX+AuPj1YSGSQIHl1pnDHZR0Q==
eslint-import-resolver-node@^0.3.6:
version "0.3.6"
@@ -4033,10 +4055,10 @@ eslint-plugin-react-hooks@^4.3.0:
resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.3.0.tgz#318dbf312e06fab1c835a4abef00121751ac1172"
integrity sha512-XslZy0LnMn+84NEG9jSGR6eGqaZB3133L8xewQo3fQagbQuGt7a63gf+P1NGKZavEYEC3UXaWEAA/AqDkuN6xA==
eslint-plugin-react@^7.29.2:
version "7.29.2"
resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.29.2.tgz#2d4da69d30d0a736efd30890dc6826f3e91f3f7c"
integrity sha512-ypEBTKOy5liFQXZWMchJ3LN0JX1uPI6n7MN7OPHKacqXAxq5gYC30TdO7wqGYQyxD1OrzpobdHC3hDmlRWDg9w==
eslint-plugin-react@^7.29.3:
version "7.29.3"
resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.29.3.tgz#f4eab757f2756d25d6d4c2a58a9e20b004791f05"
integrity sha512-MzW6TuCnDOcta67CkpDyRfRsEVx9FNMDV8wZsDqe1luHPdGTrQIUaUXD27Ja3gHsdOIs/cXzNchWGlqm+qRVRg==
dependencies:
array-includes "^3.1.4"
array.prototype.flatmap "^1.2.5"
@@ -4391,17 +4413,17 @@ find-up@^5.0.0:
locate-path "^6.0.0"
path-exists "^4.0.0"
firebase@^9.6.7:
version "9.6.7"
resolved "https://registry.yarnpkg.com/firebase/-/firebase-9.6.7.tgz#fad619416c9c16f569cbfd2ba63a937bdc081e33"
integrity sha512-WiqGC26cepwVy0CZ4n3ZrLSNpVj1RCPJTB6j1tZU4SadPOrGmuPAt71qcWwaLyqKtRzNTyOA9F5J4ygGDplchw==
firebase@^9.6.8:
version "9.6.8"
resolved "https://registry.yarnpkg.com/firebase/-/firebase-9.6.8.tgz#9a2da35ff97f89813306bdc504b0d302b40d1558"
integrity sha512-a/RcgiqK9L5d/ZKpHZ21c3x/KKIo2XwXp2droukbBTuaX0Md8ppHQWYlSqLmWIDR0y2zwN17lrfNVsE6f+4ncA==
dependencies:
"@firebase/analytics" "0.7.5"
"@firebase/analytics-compat" "0.1.6"
"@firebase/app" "0.7.17"
"@firebase/app" "0.7.18"
"@firebase/app-check" "0.5.3"
"@firebase/app-check-compat" "0.2.3"
"@firebase/app-compat" "0.1.18"
"@firebase/app-compat" "0.1.19"
"@firebase/app-types" "0.7.0"
"@firebase/auth" "0.19.9"
"@firebase/auth-compat" "0.2.9"
@@ -4412,8 +4434,8 @@ firebase@^9.6.7:
"@firebase/functions" "0.7.8"
"@firebase/functions-compat" "0.1.9"
"@firebase/installations" "0.5.5"
"@firebase/messaging" "0.9.8"
"@firebase/messaging-compat" "0.1.8"
"@firebase/messaging" "0.9.9"
"@firebase/messaging-compat" "0.1.9"
"@firebase/performance" "0.5.5"
"@firebase/performance-compat" "0.1.5"
"@firebase/polyfill" "0.3.36"
@@ -5437,10 +5459,10 @@ linkify-it@^3.0.3:
dependencies:
uc.micro "^1.0.1"
lint-staged@^12.3.4:
version "12.3.4"
resolved "https://registry.yarnpkg.com/lint-staged/-/lint-staged-12.3.4.tgz#4b1ff8c394c3e6da436aaec5afd4db18b5dac360"
integrity sha512-yv/iK4WwZ7/v0GtVkNb3R82pdL9M+ScpIbJLJNyCXkJ1FGaXvRCOg/SeL59SZtPpqZhE7BD6kPKFLIDUhDx2/w==
lint-staged@^12.3.5:
version "12.3.5"
resolved "https://registry.yarnpkg.com/lint-staged/-/lint-staged-12.3.5.tgz#8048ce048c3cac12f57200a06344a54dc91c8fa9"
integrity sha512-oOH36RUs1It7b9U/C7Nl/a0sLfoIBcMB8ramiB3nuJ6brBqzsWiUAFSR5DQ3yyP/OR7XKMpijtgKl2DV1lQ3lA==
dependencies:
cli-truncate "^3.1.0"
colorette "^2.0.16"
@@ -5739,10 +5761,10 @@ min-indent@^1.0.0:
resolved "https://registry.yarnpkg.com/min-indent/-/min-indent-1.0.1.tgz#a63f681673b30571fbe8bc25686ae746eefa9869"
integrity sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==
mini-css-extract-plugin@^2.5.3:
version "2.5.3"
resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-2.5.3.tgz#c5c79f9b22ce9b4f164e9492267358dbe35376d9"
integrity sha512-YseMB8cs8U/KCaAGQoqYmfUuhhGW0a9p9XvWXrxVOkE3/IiISTLw4ALNt7JR5B2eYauFM+PQGSbXMDmVbR7Tfw==
mini-css-extract-plugin@^2.6.0:
version "2.6.0"
resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-2.6.0.tgz#578aebc7fc14d32c0ad304c2c34f08af44673f5e"
integrity sha512-ndG8nxCEnAemsg4FSgS+yNyHKgkTB4nPKqCOgh65j3/30qqC5RaSQQXMm++Y6sb6E1zRSxPkztj9fqxhS1Eo6w==
dependencies:
schema-utils "^4.0.0"
@@ -6331,13 +6353,6 @@ postcss-calc@^8.2.0:
postcss-selector-parser "^6.0.2"
postcss-value-parser "^4.0.2"
postcss-clamp@^4.0.0:
version "4.0.0"
resolved "https://registry.yarnpkg.com/postcss-clamp/-/postcss-clamp-4.0.0.tgz#766d3dbaa2dc56e8bea1b690291b632c0c5bf728"
integrity sha512-FsMmeBZtymFN7Jtlnw9is8I4nB+qEEb/qS0ZLTIqcKiwZyHBq44Yhv29Q+VQsTGHYFqIr/s/9tqvNM7j+j1d+g==
dependencies:
postcss-value-parser "^4.2.0"
postcss-color-functional-notation@^4.2.2:
version "4.2.2"
resolved "https://registry.yarnpkg.com/postcss-color-functional-notation/-/postcss-color-functional-notation-4.2.2.tgz#f59ccaeb4ee78f1b32987d43df146109cc743073"
@@ -6683,10 +6698,10 @@ postcss-place@^7.0.4:
dependencies:
postcss-value-parser "^4.2.0"
postcss-preset-env@^7.4.1:
version "7.4.1"
resolved "https://registry.yarnpkg.com/postcss-preset-env/-/postcss-preset-env-7.4.1.tgz#ca6131c6e0d0e0bcc429dbef3e8f8d03250041ea"
integrity sha512-UvBVvPJ2vb4odAtckSbryndyBz+Me1q8wawqq0qznpDXy188I+8W5Sa929sCPqw2/NSYnqpHJbo41BKso3+I9A==
postcss-preset-env@^7.4.2:
version "7.4.2"
resolved "https://registry.yarnpkg.com/postcss-preset-env/-/postcss-preset-env-7.4.2.tgz#2ff3e4787bd9d89710659535855d6ce85ce6110b"
integrity sha512-AmOkb8AeNNQwE/z2fHl1iwOIt8J50V8WR0rmLagcgIDoqlJZWjV3NdtOPnLGco1oN8DZe+Ss5B9ULbBeS6HfeA==
dependencies:
"@csstools/postcss-color-function" "^1.0.2"
"@csstools/postcss-font-format-keywords" "^1.0.0"
@@ -6697,13 +6712,12 @@ postcss-preset-env@^7.4.1:
"@csstools/postcss-oklab-function" "^1.0.1"
"@csstools/postcss-progressive-custom-properties" "^1.2.0"
autoprefixer "^10.4.2"
browserslist "^4.19.1"
browserslist "^4.19.3"
css-blank-pseudo "^3.0.3"
css-has-pseudo "^3.0.4"
css-prefers-color-scheme "^6.0.3"
cssdb "^6.3.1"
cssdb "^6.4.0"
postcss-attribute-case-insensitive "^5.0.0"
postcss-clamp "^4.0.0"
postcss-color-functional-notation "^4.2.2"
postcss-color-hex-alpha "^8.0.3"
postcss-color-rebeccapurple "^7.0.2"
@@ -6730,6 +6744,7 @@ postcss-preset-env@^7.4.1:
postcss-pseudo-class-any-link "^7.1.1"
postcss-replace-overflow-wrap "^4.0.0"
postcss-selector-not "^5.0.0"
postcss-value-parser "^4.2.0"
postcss-pseudo-class-any-link@^7.1.1:
version "7.1.1"
@@ -6793,7 +6808,7 @@ postcss-value-parser@^4.0.2, postcss-value-parser@^4.1.0, postcss-value-parser@^
resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
postcss@^8.3.5, postcss@^8.4.5:
postcss@^8.3.5:
version "8.4.5"
resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.5.tgz#bae665764dfd4c6fcc24dc0fdf7e7aa00cc77f95"
integrity sha512-jBDboWM8qpaqwkMwItqTQTiFikhs/67OYVvblFFTM7MrZjt6yMKd6r2kgXizEbTTljacm4NldIlZnhbjr84QYg==
@@ -6811,6 +6826,15 @@ postcss@^8.4.7:
picocolors "^1.0.0"
source-map-js "^1.0.2"
postcss@^8.4.8:
version "8.4.8"
resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.8.tgz#dad963a76e82c081a0657d3a2f3602ce10c2e032"
integrity sha512-2tXEqGxrjvAO6U+CJzDL2Fk2kPHTv1jQsYkSoMeOis2SsYaXRO2COxTdQp99cYvif9JTXaAk9lYGc3VhJt7JPQ==
dependencies:
nanoid "^3.3.1"
picocolors "^1.0.0"
source-map-js "^1.0.2"
prelude-ls@^1.2.1:
version "1.2.1"
resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
@@ -7389,10 +7413,10 @@ rollup@^2.43.1:
optionalDependencies:
fsevents "~2.3.2"
rooks@^5.10.0:
version "5.10.0"
resolved "https://registry.yarnpkg.com/rooks/-/rooks-5.10.0.tgz#af39b75709b9221da454bb9607b58b87dad9413e"
integrity sha512-zKO0dOn/GJYn2vdo/vgy9fbQq4xebvJYntaxtJnZRXODhco/nLcNOWnhtwSPwx9X1vFPzdnLypoVrt9MZ+Cmvg==
rooks@^5.10.2:
version "5.10.2"
resolved "https://registry.yarnpkg.com/rooks/-/rooks-5.10.2.tgz#e886f2f8821a125d5088b3d7406d6eabc386c976"
integrity sha512-xn3xVUiMk6nOfLdZmHEbTHzPJy40mXyJUGSmhiagUZGzxLHVKG0uimnuprAIFRmCZPLrDH6EUdoZx6MomcGa+g==
dependencies:
lodash.debounce "^4.0.8"
raf "^3.4.1"
@@ -8509,10 +8533,10 @@ webpack-dev-server@^4.7.4:
webpack-dev-middleware "^5.3.1"
ws "^8.4.2"
webpack-manifest-plugin@^4.1.1:
version "4.1.1"
resolved "https://registry.yarnpkg.com/webpack-manifest-plugin/-/webpack-manifest-plugin-4.1.1.tgz#10f8dbf4714ff93a215d5a45bcc416d80506f94f"
integrity sha512-YXUAwxtfKIJIKkhg03MKuiFAD72PlrqCiwdwO4VEXdRO5V0ORCNwaOwAZawPZalCbmH9kBDmXnNeQOw+BIEiow==
webpack-manifest-plugin@^5.0.0:
version "5.0.0"
resolved "https://registry.yarnpkg.com/webpack-manifest-plugin/-/webpack-manifest-plugin-5.0.0.tgz#084246c1f295d1b3222d36e955546433ca8df803"
integrity sha512-8RQfMAdc5Uw3QbCQ/CBV/AXqOR8mt03B6GJmRbhWopE8GzRfEpn+k0ZuWywxW+5QZsffhmFDY1J6ohqJo+eMuw==
dependencies:
tapable "^2.0.0"
webpack-sources "^2.2.0"
@@ -8538,10 +8562,10 @@ webpack-sources@^3.2.3:
resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-3.2.3.tgz#2d4daab8451fd4b240cc27055ff6a0c2ccea0cde"
integrity sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==
webpack@^5.69.1:
version "5.69.1"
resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.69.1.tgz#8cfd92c192c6a52c99ab00529b5a0d33aa848dc5"
integrity sha512-+VyvOSJXZMT2V5vLzOnDuMz5GxEqLk7hKWQ56YxPW/PQRUuKimPqmEIJOx8jHYeyo65pKbapbW464mvsKbaj4A==
webpack@^5.70.0:
version "5.70.0"
resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.70.0.tgz#3461e6287a72b5e6e2f4872700bc8de0d7500e6d"
integrity sha512-ZMWWy8CeuTTjCxbeaQI21xSswseF2oNOwc70QSKNePvmxE7XW36i7vpBMYZFAUHPwQiEbNGCEYIOOlyRbdGmxw==
dependencies:
"@types/eslint-scope" "^3.7.3"
"@types/estree" "^0.0.51"
@@ -8552,7 +8576,7 @@ webpack@^5.69.1:
acorn-import-assertions "^1.7.6"
browserslist "^4.14.5"
chrome-trace-event "^1.0.2"
enhanced-resolve "^5.8.3"
enhanced-resolve "^5.9.2"
es-module-lexer "^0.9.0"
eslint-scope "5.1.1"
events "^3.2.0"
@@ -8634,25 +8658,25 @@ word-wrap@^1.2.3:
resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.3.tgz#610636f6b1f703891bd34771ccb17fb93b47079c"
integrity sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==
workbox-background-sync@6.5.0:
version "6.5.0"
resolved "https://registry.yarnpkg.com/workbox-background-sync/-/workbox-background-sync-6.5.0.tgz#50ba6bf19c71d21be29bb15ba0f317df7cfa8f44"
integrity sha512-rrekt/gt6qOIZsisj6QZfmAFPAnocq1Z603zAjt+qHmeXY8DLPOklVtvrXSaHoHH3qIjUq3SQY5s2x240iTIKw==
workbox-background-sync@6.5.1:
version "6.5.1"
resolved "https://registry.yarnpkg.com/workbox-background-sync/-/workbox-background-sync-6.5.1.tgz#df79c6a4a22945d8a44493a4947a6ed0f720ef86"
integrity sha512-T5a35fagLXQvV8Dr4+bDU+XYsP90jJ3eBLjZMKuCNELMQZNj+VekCODz1QK44jgoBeQk+vp94pkZV6G+e41pgg==
dependencies:
idb "^6.1.4"
workbox-core "6.5.0"
workbox-core "6.5.1"
workbox-broadcast-update@6.5.0:
version "6.5.0"
resolved "https://registry.yarnpkg.com/workbox-broadcast-update/-/workbox-broadcast-update-6.5.0.tgz#0104b9ea41b40f8c5e03780226de66bec15141f2"
integrity sha512-JC97c7tYqoGWcCfbKO9KHG6lkU+WhXCnDB2j1oFWEiv53nUHy3yjPpzMmAGNLD9oV5lInO15n6V18HfwgkhISw==
workbox-broadcast-update@6.5.1:
version "6.5.1"
resolved "https://registry.yarnpkg.com/workbox-broadcast-update/-/workbox-broadcast-update-6.5.1.tgz#9aecb116979b0709480b84cfd1beca7a901d01d4"
integrity sha512-mb/oyblyEpDbw167cCTyHnC3RqCnCQHtFYuYZd+QTpuExxM60qZuBH1AuQCgvLtDcztBKdEYK2VFD9SZYgRbaQ==
dependencies:
workbox-core "6.5.0"
workbox-core "6.5.1"
workbox-build@6.5.0:
version "6.5.0"
resolved "https://registry.yarnpkg.com/workbox-build/-/workbox-build-6.5.0.tgz#fd3579de7a91c188e8d857a4b265fe7170197204"
integrity sha512-da0/1b6//P9+ts7ofcIKcMVPyN6suJvjJASXokF7DsqvUmgRBPcCVV4KCy8QWjgfcz7mzuTpkSbdVHcPFJ/p0A==
workbox-build@6.5.1:
version "6.5.1"
resolved "https://registry.yarnpkg.com/workbox-build/-/workbox-build-6.5.1.tgz#6b5e8f090bb608267868540d3072b44b8531b3bc"
integrity sha512-coDUDzHvFZ1ADOl3wKCsCSyOBvkPKlPgcQDb6LMMShN1zgF31Mev/1HzN3+9T2cjjWAgFwZKkuRyExqc1v21Zw==
dependencies:
"@apideck/better-ajv-errors" "^0.3.1"
"@babel/core" "^7.11.1"
@@ -8676,132 +8700,132 @@ workbox-build@6.5.0:
strip-comments "^2.0.1"
tempy "^0.6.0"
upath "^1.2.0"
workbox-background-sync "6.5.0"
workbox-broadcast-update "6.5.0"
workbox-cacheable-response "6.5.0"
workbox-core "6.5.0"
workbox-expiration "6.5.0"
workbox-google-analytics "6.5.0"
workbox-navigation-preload "6.5.0"
workbox-precaching "6.5.0"
workbox-range-requests "6.5.0"
workbox-recipes "6.5.0"
workbox-routing "6.5.0"
workbox-strategies "6.5.0"
workbox-streams "6.5.0"
workbox-sw "6.5.0"
workbox-window "6.5.0"
workbox-background-sync "6.5.1"
workbox-broadcast-update "6.5.1"
workbox-cacheable-response "6.5.1"
workbox-core "6.5.1"
workbox-expiration "6.5.1"
workbox-google-analytics "6.5.1"
workbox-navigation-preload "6.5.1"
workbox-precaching "6.5.1"
workbox-range-requests "6.5.1"
workbox-recipes "6.5.1"
workbox-routing "6.5.1"
workbox-strategies "6.5.1"
workbox-streams "6.5.1"
workbox-sw "6.5.1"
workbox-window "6.5.1"
workbox-cacheable-response@6.5.0:
version "6.5.0"
resolved "https://registry.yarnpkg.com/workbox-cacheable-response/-/workbox-cacheable-response-6.5.0.tgz#cf91b2d4f4707295539596a480ab1c908f6cbfdd"
integrity sha512-sqAtWAiBwWvI8HG/2Do7BeKPhHuUczt22ORkAjkH9DfTq9LuWRFd6T4HAMqX5G8F1gM9XA2UPlxRrEeSpFIz/A==
workbox-cacheable-response@6.5.1:
version "6.5.1"
resolved "https://registry.yarnpkg.com/workbox-cacheable-response/-/workbox-cacheable-response-6.5.1.tgz#f71d0a75b3d6846e39594955e99ac42fd26f8693"
integrity sha512-3TdtH/luDiytmM+Cn72HCBLZXmbeRNJqZx2yaVOfUZhj0IVwZqQXhNarlGE9/k6U5Jelb+TtpH2mLVhnzfiSMg==
dependencies:
workbox-core "6.5.0"
workbox-core "6.5.1"
workbox-core@6.5.0:
version "6.5.0"
resolved "https://registry.yarnpkg.com/workbox-core/-/workbox-core-6.5.0.tgz#076e03840ca568bd04284e9f9f30e86c8dd09f1c"
integrity sha512-5SPwNipUzYBhrneLVT02JFA0fw3LG82jFAN/G2NzxkIW10t4MVZuML2nU94bbkgjq25u0fkY8+4JXzMfHgxEWQ==
workbox-core@6.5.1:
version "6.5.1"
resolved "https://registry.yarnpkg.com/workbox-core/-/workbox-core-6.5.1.tgz#0dba3bccf883a46dfa61cc412eaa3cb09bb549e6"
integrity sha512-qObXZ39aFJ2N8X7IUbGrJHKWguliCuU1jOXM/I4MTT84u9BiKD2rHMkIzgeRP1Ixu9+cXU4/XHJq3Cy0Qqc5hw==
workbox-expiration@6.5.0:
version "6.5.0"
resolved "https://registry.yarnpkg.com/workbox-expiration/-/workbox-expiration-6.5.0.tgz#3cf6a0c8b08b59efa235d26d443c8b7f173179cd"
integrity sha512-y3WRkKRy/gMuZZNkrLFahjY0QZtLoq+QfhTbVAsOGHVg1CCtnNbeFAnEidQs7UisI2BK76VqQPvM7hEOFyZ92A==
workbox-expiration@6.5.1:
version "6.5.1"
resolved "https://registry.yarnpkg.com/workbox-expiration/-/workbox-expiration-6.5.1.tgz#9f105fcf3362852754884ad153888070ce98b692"
integrity sha512-iY/cTADAQATMmPkUBRmQdacqq0TJd2wMHimBQz+tRnPGHSMH+/BoLPABPnu7O7rT/g/s59CUYYRGxe3mEgoJCA==
dependencies:
idb "^6.1.4"
workbox-core "6.5.0"
workbox-core "6.5.1"
workbox-google-analytics@6.5.0:
version "6.5.0"
resolved "https://registry.yarnpkg.com/workbox-google-analytics/-/workbox-google-analytics-6.5.0.tgz#86ee42bd1a72ec5aa41f32631ab7c8e5cf4c1602"
integrity sha512-CHHh55wMNCc/BV1URrzEM2Zjgf6g2CV6QpAAc1pBRqaLY5755PeQZbp3o8KbJEM7YsC9mIBeQVsOkSKkGS30bg==
workbox-google-analytics@6.5.1:
version "6.5.1"
resolved "https://registry.yarnpkg.com/workbox-google-analytics/-/workbox-google-analytics-6.5.1.tgz#685224d439c1e7a943f8241d65e2a34ee95a4ba0"
integrity sha512-qZU46/h4dbionYT6Yk6iBkUwpiEzAfnO1W7KkI+AMmY7G9/gA03dQQ7rpTw8F4vWrG7ahTUGWDFv6fERtaw1BQ==
dependencies:
workbox-background-sync "6.5.0"
workbox-core "6.5.0"
workbox-routing "6.5.0"
workbox-strategies "6.5.0"
workbox-background-sync "6.5.1"
workbox-core "6.5.1"
workbox-routing "6.5.1"
workbox-strategies "6.5.1"
workbox-navigation-preload@6.5.0:
version "6.5.0"
resolved "https://registry.yarnpkg.com/workbox-navigation-preload/-/workbox-navigation-preload-6.5.0.tgz#3b73753a40e4d0cbae9520de232f2fc515f2c0f5"
integrity sha512-ktrRQzXJ0zFy0puOtCa49wE3BSBGUB8KRMot3tEieikCkSO0wMLmiCb9GwTVvNMJLl0THRlsdFoI93si04nTxA==
workbox-navigation-preload@6.5.1:
version "6.5.1"
resolved "https://registry.yarnpkg.com/workbox-navigation-preload/-/workbox-navigation-preload-6.5.1.tgz#a244e3bdf99ce86da7210315ca1ba5aef3710825"
integrity sha512-aKrgAbn2IMgzTowTi/ZyKdQUcES2m++9aGtpxqsX7Gn9ovCY8zcssaMEAMMwrIeveij5HiWNBrmj6MWDHi+0rg==
dependencies:
workbox-core "6.5.0"
workbox-core "6.5.1"
workbox-precaching@6.5.0:
version "6.5.0"
resolved "https://registry.yarnpkg.com/workbox-precaching/-/workbox-precaching-6.5.0.tgz#773d754b98f79cc13b646eaa7858e8b3ab740c37"
integrity sha512-IVLzgHx38T6LphJyEOltd7XAvpDi73p85uCT2ZtT1HHg9FAYC49a+5iHUVOnqye73fLW20eiAMFcnehGxz9RWg==
workbox-precaching@6.5.1:
version "6.5.1"
resolved "https://registry.yarnpkg.com/workbox-precaching/-/workbox-precaching-6.5.1.tgz#177b6424f1e71e601b9c3d6864decad2655f9ff9"
integrity sha512-EzlPBxvmjGfE56YZzsT/vpVkpLG1XJhoplgXa5RPyVWLUL1LbwEAxhkrENElSS/R9tgiTw80IFwysidfUqLihg==
dependencies:
workbox-core "6.5.0"
workbox-routing "6.5.0"
workbox-strategies "6.5.0"
workbox-core "6.5.1"
workbox-routing "6.5.1"
workbox-strategies "6.5.1"
workbox-range-requests@6.5.0:
version "6.5.0"
resolved "https://registry.yarnpkg.com/workbox-range-requests/-/workbox-range-requests-6.5.0.tgz#f36006f11aa86736ff815d200d0a5baf0e66c66e"
integrity sha512-+qTELdGZE5rOjuv+ifFrfRDN8Uvzpbm5Fal7qSUqB1V1DLCMxPwHCj6mWwQBRKBpW7G09kAwewH7zA3Asjkf/Q==
workbox-range-requests@6.5.1:
version "6.5.1"
resolved "https://registry.yarnpkg.com/workbox-range-requests/-/workbox-range-requests-6.5.1.tgz#f40f84aa8765940543eba16131d02f12b38e2fdc"
integrity sha512-57Da/qRbd9v33YlHX0rlSUVFmE4THCjKqwkmfhY3tNLnSKN2L5YBS3qhWeDO0IrMNgUj+rGve2moKYXeUqQt4A==
dependencies:
workbox-core "6.5.0"
workbox-core "6.5.1"
workbox-recipes@6.5.0:
version "6.5.0"
resolved "https://registry.yarnpkg.com/workbox-recipes/-/workbox-recipes-6.5.0.tgz#8400fbb515ac14e15043f13197a37e971e4ed04f"
integrity sha512-7hWZAIcXmvr31NwYSWaQIrnThCH/Dx9+eYv/YdkpUeWIXRiHRkYvP1FdiHItbLSjL4Y6K7cy2Y9y5lGCkgaE4w==
workbox-recipes@6.5.1:
version "6.5.1"
resolved "https://registry.yarnpkg.com/workbox-recipes/-/workbox-recipes-6.5.1.tgz#d2fb21743677cc3ca9e1fc9e3b68f0d1587df205"
integrity sha512-DGsyKygHggcGPQpWafC/Nmbm1Ny3sB2vE9r//3UbeidXiQ+pLF14KEG1/0NNGRaY+lfOXOagq6d1H7SC8KA+rA==
dependencies:
workbox-cacheable-response "6.5.0"
workbox-core "6.5.0"
workbox-expiration "6.5.0"
workbox-precaching "6.5.0"
workbox-routing "6.5.0"
workbox-strategies "6.5.0"
workbox-cacheable-response "6.5.1"
workbox-core "6.5.1"
workbox-expiration "6.5.1"
workbox-precaching "6.5.1"
workbox-routing "6.5.1"
workbox-strategies "6.5.1"
workbox-routing@6.5.0:
version "6.5.0"
resolved "https://registry.yarnpkg.com/workbox-routing/-/workbox-routing-6.5.0.tgz#cbc085a74622d35d599f0b5352d2b46e9b2e7ba8"
integrity sha512-w1A9OVa/yYStu9ds0Dj+TC6zOAoskKlczf+wZI5mrM9nFCt/KOMQiFp1/41DMFPrrN/8KlZTS3Cel/Ttutw93Q==
workbox-routing@6.5.1:
version "6.5.1"
resolved "https://registry.yarnpkg.com/workbox-routing/-/workbox-routing-6.5.1.tgz#5488795ae850fe3ae435241143b54ff25ab0db70"
integrity sha512-yAAncdTwanvlR8KPjubyvFKeAok8ZcIws6UKxvIAg0I+wsf7UYi93DXNuZr6RBSQrByrN6HkCyjuhmk8P63+PA==
dependencies:
workbox-core "6.5.0"
workbox-core "6.5.1"
workbox-strategies@6.5.0:
version "6.5.0"
resolved "https://registry.yarnpkg.com/workbox-strategies/-/workbox-strategies-6.5.0.tgz#40269f7bd8b3160b42f06fa027230370a8b6f981"
integrity sha512-Ngnwo+tfGw4uKSlTz3h1fYKb/lCV7SDI/dtTb8VaJzRl0N9XssloDGYERBmF6BN/DV/x3bnRsshfobnKI/3z0g==
workbox-strategies@6.5.1:
version "6.5.1"
resolved "https://registry.yarnpkg.com/workbox-strategies/-/workbox-strategies-6.5.1.tgz#51cabbddad5a1956eb9d51cf6ce01ab0a6372756"
integrity sha512-JNaTXPy8wXzKkr+6za7/eJX9opoZk7UgY261I2kPxl80XQD8lMjz0vo9EOcBwvD72v3ZhGJbW84ZaDwFEhFvWA==
dependencies:
workbox-core "6.5.0"
workbox-core "6.5.1"
workbox-streams@6.5.0:
version "6.5.0"
resolved "https://registry.yarnpkg.com/workbox-streams/-/workbox-streams-6.5.0.tgz#8c2fd0af9b8e1a25f865ff254c44f6554a248ce1"
integrity sha512-ZbeaZINkju4x45P9DFyRbOYInE+dyNAJIelflz4f9AOAdm+zZUJCooU4MdfsedVhHiTIA6pCD/3jCmW1XbvlbA==
workbox-streams@6.5.1:
version "6.5.1"
resolved "https://registry.yarnpkg.com/workbox-streams/-/workbox-streams-6.5.1.tgz#12036817385fa4449a86a3ef77fce1cb00ecad9f"
integrity sha512-7jaTWm6HRGJ/ewECnhb+UgjTT50R42E0/uNCC4eTKQwnLO/NzNGjoXTdQgFjo4zteR+L/K6AtFAiYKH3ZJbAYw==
dependencies:
workbox-core "6.5.0"
workbox-routing "6.5.0"
workbox-core "6.5.1"
workbox-routing "6.5.1"
workbox-sw@6.5.0:
version "6.5.0"
resolved "https://registry.yarnpkg.com/workbox-sw/-/workbox-sw-6.5.0.tgz#19b47d72f598fd515fe32d2551d67bdb104434cb"
integrity sha512-uPGJ9Yost4yabnCko/IuhouquoQKrWOEqLq7L/xVYtltWe4+J8Hw8iPCVtxvXQ26hffd7MaFWUAN83j2ZWbxRg==
workbox-sw@6.5.1:
version "6.5.1"
resolved "https://registry.yarnpkg.com/workbox-sw/-/workbox-sw-6.5.1.tgz#f9256b40f0a7e94656ccd06f127ba19a92cd23c5"
integrity sha512-hVrQa19yo9wzN1fQQ/h2JlkzFpkuH2qzYT2/rk7CLaWt6tLnTJVFCNHlGRRPhytZSf++LoIy7zThT714sowT/Q==
workbox-webpack-plugin@^6.5.0:
version "6.5.0"
resolved "https://registry.yarnpkg.com/workbox-webpack-plugin/-/workbox-webpack-plugin-6.5.0.tgz#13efad7ebbe672db6e1e6b7ebf58093b76bc0cb0"
integrity sha512-wy4uCBJELNfJVf2b4Tg3mjJQySq/aReWv4Q1RxQweJkY9ihq7DOGA3wLlXvoauek+MX/SuQfS3it+eXIfHKjvg==
workbox-webpack-plugin@^6.5.1:
version "6.5.1"
resolved "https://registry.yarnpkg.com/workbox-webpack-plugin/-/workbox-webpack-plugin-6.5.1.tgz#da88b4b6d8eff855958f0e7ebb7aa3eea50a8282"
integrity sha512-SHtlQBpKruI16CAYhICDMkgjXE2fH5Yp+D+1UmBfRVhByZYzusVOykvnPm8ObJb9d/tXgn9yoppoxafFS7D4vQ==
dependencies:
fast-json-stable-stringify "^2.1.0"
pretty-bytes "^5.4.1"
upath "^1.2.0"
webpack-sources "^1.4.3"
workbox-build "6.5.0"
workbox-build "6.5.1"
workbox-window@6.5.0:
version "6.5.0"
resolved "https://registry.yarnpkg.com/workbox-window/-/workbox-window-6.5.0.tgz#7cc3bf4d5c7e7e0b4da579bee9e8df8bd9ba2718"
integrity sha512-DOrhiTnWup/CsNstO2uvfdKM4kdStgHd31xGGvBcoCE3Are3DRcy5s3zz3PedcAR1AKskQj3BXz0UhzQiOq8nA==
workbox-window@6.5.1:
version "6.5.1"
resolved "https://registry.yarnpkg.com/workbox-window/-/workbox-window-6.5.1.tgz#7b5ca29467b1da45dc9e2b5a1b89159d3eb9957a"
integrity sha512-oRlun9u7b7YEjo2fIDBqJkU2hXtrEljXcOytRhfeQRbqXxjUOpFgXSGRSAkmDx1MlKUNOSbr+zfi8h5n7In3yA==
dependencies:
"@types/trusted-types" "^2.0.2"
workbox-core "6.5.0"
workbox-core "6.5.1"
wrap-ansi@^6.2.0:
version "6.2.0"