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

refactor: updates

Browse Source
This commit is contained in:
zerosoul
2022-03-11 10:30:25 +08:00
parent 501688c960
commit 5d363b5a5f
6 changed files with 108 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/listener.middleware.js
+39
View File
@@ -0,0 +1,39 @@
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/store.js
+3 -39
View File
@@ -1,9 +1,6 @@
import {
configureStore,
combineReducers,
createListenerMiddleware,
} from "@reduxjs/toolkit";
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 uiReducer from "./slices/ui";
@@ -17,19 +14,7 @@ import { contactApi } from "./services/contact";
import { channelApi } from "./services/channel";
import { messageApi } from "./services/message";
import { serverApi } from "./services/server";
const getCacheKey = (action = "") => {
const [type] = action.split("/");
const keys = [
"visitMark",
"channels",
"contacts",
"userMessage",
"channelMessage",
// "pendingMessage",
];
const [tmp = ""] = keys.filter((k) => k == type);
return tmp;
};
const reducer = combineReducers({
ui: uiReducer,
visitMark: visitMarkReducer,
@@ -45,28 +30,7 @@ const reducer = combineReducers({
[channelApi.reducerPath]: channelApi.reducer,
[serverApi.reducerPath]: serverApi.reducer,
});
// 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]);
}
},
});
const store = configureStore({
reducer,
middleware: (getDefaultMiddleware) =>
src/common/component/Message/index.js
+12 -15
View File
@@ -24,7 +24,6 @@ function Message({
content_type = "text/plain",
unread = false,
pending,
removed = false,
edited = false,
likes = {},
}) {
@@ -49,29 +48,27 @@ function Message({
const toggleEmojiPopover = () => {
setEmojiPopVisible((prev) => !prev);
};
useEffect(() => {
if (!unread) {
avatarRef.current?.scrollIntoView();
}
}, [unread]);
// useEffect(() => {
// if (!unread) {
// avatarRef.current?.scrollIntoView();
// }
// }, [unread]);
useEffect(() => {
if (inView) {
if (unread) {
const setMsgRead = gid ? setChannelMsgRead : setUserMsgRead;
disptach(setMsgRead({ id: gid || uid, mid }));
}
if (inView && unread) {
const setMsgRead = gid ? setChannelMsgRead : setUserMsgRead;
disptach(setMsgRead({ id: gid || uid, mid }));
}
}, [gid, mid, uid, unread, inView]);
if (!contacts) return null;
const currUser = contacts.find((c) => c.uid == fromUid) || {};
return removed ? (
"removed"
) : (
return (
<StyledWrapper
ref={myRef}
className={`${menuVisible ? "menu" : ""} ${inView ? "in_view" : ""}`}
className={`message ${menuVisible ? "menu" : ""} ${
inView ? "in_view" : ""
}`}
>
<Tippy
interactive
src/routes/chat/ChannelChat/index.js
-2
View File
@@ -110,7 +110,6 @@ export default function ChannelChat({
content_type,
created_at,
unread,
removed = false,
edited,
reply,
} = msg;
@@ -119,7 +118,6 @@ export default function ChannelChat({
reply={reply}
edited={edited}
likes={likes}
removed={removed}
pending={pending}
content_type={content_type}
unread={unread}
src/routes/chat/DMChat/index.js
-2
View File
@@ -83,7 +83,6 @@ export default function DMChat({ uid = "", dropFiles = [] }) {
created_at,
unread,
pending = false,
removed = false,
edited,
reply,
} = msg;
@@ -92,7 +91,6 @@ export default function DMChat({ uid = "", dropFiles = [] }) {
reply={reply}
likes={likes}
edited={edited}
removed={removed}
pending={pending}
content_type={content_type}
unread={unread}
src/routes/login/MetamaskLoginButton.js
+54 -49
View File
@@ -1,54 +1,59 @@
/* eslint-disable no-undef */
import { useState, useEffect, useRef } from 'react';
import MetaMaskOnboarding from '@metamask/onboarding';
import { useLazyGetMetamaskNonceQuery } from '../../app/services/auth';
import { useState, useEffect, useRef } from "react";
import MetaMaskOnboarding from "@metamask/onboarding";
import { useLazyGetMetamaskNonceQuery } from "../../app/services/auth";
export default function MetamaskLoginButton({ login }) {
const [requesting, setRequesting] = useState(false);
const [getNonce] = useLazyGetMetamaskNonceQuery();
const onboarding = useRef();
const [requesting, setRequesting] = useState(false);
const [getNonce] = useLazyGetMetamaskNonceQuery();
const onboarding = useRef();
useEffect(() => {
if (!onboarding.current) {
onboarding.current = new MetaMaskOnboarding();
}
}, []);
const getSignature = async (address, nonce) => {
console.log('get sn');
const signature = await ethereum.request({
method: 'personal_sign',
params: [nonce, address, 'hello from rustchat']
});
return signature;
};
const handleMetamaskLogin = async () => {
if (MetaMaskOnboarding.isMetaMaskInstalled()) {
setRequesting(true);
const [address] = await ethereum.request({
method: 'eth_requestAccounts'
});
const { data: nonce, isSuccess } = await getNonce(address);
if (isSuccess) {
const signature = await getSignature(address, nonce);
login({
public_address: address,
nonce,
signature,
type: 'metamask'
useEffect(() => {
if (!onboarding.current) {
onboarding.current = new MetaMaskOnboarding();
}
}, []);
const getSignature = async (address, nonce) => {
console.log("get sn");
const signature = await ethereum.request({
method: "personal_sign",
params: [nonce, address, "hello from rustchat"],
});
setRequesting(false);
}
} else {
onboarding.current.startOnboarding();
}
};
return (
<button disabled={requesting} onClick={handleMetamaskLogin} href="#" className="btn social">
<img
className="icon"
src="https://upload.wikimedia.org/wikipedia/commons/3/36/MetaMask_Fox.svg"
alt="meta mask icon"
/>
Sign in with MetaMask
</button>
);
return signature;
};
const handleMetamaskLogin = async () => {
if (MetaMaskOnboarding.isMetaMaskInstalled()) {
setRequesting(true);
const [address] = await ethereum.request({
method: "eth_requestAccounts",
});
const { data: nonce, isSuccess } = await getNonce(address);
if (isSuccess) {
const signature = await getSignature(address, nonce);
login({
public_address: address,
nonce,
signature,
type: "metamask",
});
setRequesting(false);
}
} else {
onboarding.current.startOnboarding();
}
};
return (
<button
disabled={requesting}
onClick={handleMetamaskLogin}
href="#"
className="btn social"
>
<img
className="icon"
src="data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiBoZWlnaHQ9IjMzIiB2aWV3Qm94PSIwIDAgMzUgMzMiIHdpZHRoPSIzNSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iLjI1Ij48cGF0aCBkPSJtMzIuOTU4MiAxLTEzLjEzNDEgOS43MTgzIDIuNDQyNC01LjcyNzMxeiIgZmlsbD0iI2UxNzcyNiIgc3Ryb2tlPSIjZTE3NzI2Ii8+PGcgZmlsbD0iI2UyNzYyNSIgc3Ryb2tlPSIjZTI3NjI1Ij48cGF0aCBkPSJtMi42NjI5NiAxIDEzLjAxNzE0IDkuODA5LTIuMzI1NC01LjgxODAyeiIvPjxwYXRoIGQ9Im0yOC4yMjk1IDIzLjUzMzUtMy40OTQ3IDUuMzM4NiA3LjQ4MjkgMi4wNjAzIDIuMTQzNi03LjI4MjN6Ii8+PHBhdGggZD0ibTEuMjcyODEgMjMuNjUwMSAyLjEzMDU1IDcuMjgyMyA3LjQ2OTk0LTIuMDYwMy0zLjQ4MTY2LTUuMzM4NnoiLz48cGF0aCBkPSJtMTAuNDcwNiAxNC41MTQ5LTIuMDc4NiAzLjEzNTggNy40MDUuMzM2OS0uMjQ2OS03Ljk2OXoiLz48cGF0aCBkPSJtMjUuMTUwNSAxNC41MTQ5LTUuMTU3NS00LjU4NzA0LS4xNjg4IDguMDU5NzQgNy40MDQ5LS4zMzY5eiIvPjxwYXRoIGQ9Im0xMC44NzMzIDI4Ljg3MjEgNC40ODE5LTIuMTYzOS0zLjg1ODMtMy4wMDYyeiIvPjxwYXRoIGQ9Im0yMC4yNjU5IDI2LjcwODIgNC40Njg5IDIuMTYzOS0uNjEwNS01LjE3MDF6Ii8+PC9nPjxwYXRoIGQ9Im0yNC43MzQ4IDI4Ljg3MjEtNC40NjktMi4xNjM5LjM2MzggMi45MDI1LS4wMzkgMS4yMzF6IiBmaWxsPSIjZDViZmIyIiBzdHJva2U9IiNkNWJmYjIiLz48cGF0aCBkPSJtMTAuODczMiAyOC44NzIxIDQuMTU3MiAxLjk2OTYtLjAyNi0xLjIzMS4zNTA4LTIuOTAyNXoiIGZpbGw9IiNkNWJmYjIiIHN0cm9rZT0iI2Q1YmZiMiIvPjxwYXRoIGQ9Im0xNS4xMDg0IDIxLjc4NDItMy43MTU1LTEuMDg4NCAyLjYyNDMtMS4yMDUxeiIgZmlsbD0iIzIzMzQ0NyIgc3Ryb2tlPSIjMjMzNDQ3Ii8+PHBhdGggZD0ibTIwLjUxMjYgMjEuNzg0MiAxLjA5MTMtMi4yOTM1IDIuNjM3MiAxLjIwNTF6IiBmaWxsPSIjMjMzNDQ3IiBzdHJva2U9IiMyMzM0NDciLz48cGF0aCBkPSJtMTAuODczMyAyOC44NzIxLjY0OTUtNS4zMzg2LTQuMTMxMTcuMTE2N3oiIGZpbGw9IiNjYzYyMjgiIHN0cm9rZT0iI2NjNjIyOCIvPjxwYXRoIGQ9Im0yNC4wOTgyIDIzLjUzMzUuNjM2NiA1LjMzODYgMy40OTQ2LTUuMjIxOXoiIGZpbGw9IiNjYzYyMjgiIHN0cm9rZT0iI2NjNjIyOCIvPjxwYXRoIGQ9Im0yNy4yMjkxIDE3LjY1MDctNy40MDUuMzM2OS42ODg1IDMuNzk2NiAxLjA5MTMtMi4yOTM1IDIuNjM3MiAxLjIwNTF6IiBmaWxsPSIjY2M2MjI4IiBzdHJva2U9IiNjYzYyMjgiLz48cGF0aCBkPSJtMTEuMzkyOSAyMC42OTU4IDIuNjI0Mi0xLjIwNTEgMS4wOTEzIDIuMjkzNS42ODg1LTMuNzk2Ni03LjQwNDk1LS4zMzY5eiIgZmlsbD0iI2NjNjIyOCIgc3Ryb2tlPSIjY2M2MjI4Ii8+PHBhdGggZD0ibTguMzkyIDE3LjY1MDcgMy4xMDQ5IDYuMDUxMy0uMTAzOS0zLjAwNjJ6IiBmaWxsPSIjZTI3NTI1IiBzdHJva2U9IiNlMjc1MjUiLz48cGF0aCBkPSJtMjQuMjQxMiAyMC42OTU4LS4xMTY5IDMuMDA2MiAzLjEwNDktNi4wNTEzeiIgZmlsbD0iI2UyNzUyNSIgc3Ryb2tlPSIjZTI3NTI1Ii8+PHBhdGggZD0ibTE1Ljc5NyAxNy45ODc2LS42ODg2IDMuNzk2Ny44NzA0IDQuNDgzMy4xOTQ5LTUuOTA4N3oiIGZpbGw9IiNlMjc1MjUiIHN0cm9rZT0iI2UyNzUyNSIvPjxwYXRoIGQ9Im0xOS44MjQyIDE3Ljk4NzYtLjM2MzggMi4zNTg0LjE4MTkgNS45MjE2Ljg3MDQtNC40ODMzeiIgZmlsbD0iI2UyNzUyNSIgc3Ryb2tlPSIjZTI3NTI1Ii8+PHBhdGggZD0ibTIwLjUxMjcgMjEuNzg0Mi0uODcwNCA0LjQ4MzQuNjIzNi40NDA2IDMuODU4NC0zLjAwNjIuMTE2OS0zLjAwNjJ6IiBmaWxsPSIjZjU4NDFmIiBzdHJva2U9IiNmNTg0MWYiLz48cGF0aCBkPSJtMTEuMzkyOSAyMC42OTU4LjEwNCAzLjAwNjIgMy44NTgzIDMuMDA2Mi42MjM2LS40NDA2LS44NzA0LTQuNDgzNHoiIGZpbGw9IiNmNTg0MWYiIHN0cm9rZT0iI2Y1ODQxZiIvPjxwYXRoIGQ9Im0yMC41OTA2IDMwLjg0MTcuMDM5LTEuMjMxLS4zMzc4LS4yODUxaC00Ljk2MjZsLS4zMjQ4LjI4NTEuMDI2IDEuMjMxLTQuMTU3Mi0xLjk2OTYgMS40NTUxIDEuMTkyMSAyLjk0ODkgMi4wMzQ0aDUuMDUzNmwyLjk2Mi0yLjAzNDQgMS40NDItMS4xOTIxeiIgZmlsbD0iI2MwYWM5ZCIgc3Ryb2tlPSIjYzBhYzlkIi8+PHBhdGggZD0ibTIwLjI2NTkgMjYuNzA4Mi0uNjIzNi0uNDQwNmgtMy42NjM1bC0uNjIzNi40NDA2LS4zNTA4IDIuOTAyNS4zMjQ4LS4yODUxaDQuOTYyNmwuMzM3OC4yODUxeiIgZmlsbD0iIzE2MTYxNiIgc3Ryb2tlPSIjMTYxNjE2Ii8+PHBhdGggZD0ibTMzLjUxNjggMTEuMzUzMiAxLjEwNDMtNS4zNjQ0Ny0xLjY2MjktNC45ODg3My0xMi42OTIzIDkuMzk0NCA0Ljg4NDYgNC4xMjA1IDYuODk4MyAyLjAwODUgMS41Mi0xLjc3NTItLjY2MjYtLjQ3OTUgMS4wNTIzLS45NTg4LS44MDU0LS42MjIgMS4wNTIzLS44MDM0eiIgZmlsbD0iIzc2M2UxYSIgc3Ryb2tlPSIjNzYzZTFhIi8+PHBhdGggZD0ibTEgNS45ODg3MyAxLjExNzI0IDUuMzY0NDctLjcxNDUxLjUzMTMgMS4wNjUyNy44MDM0LS44MDU0NS42MjIgMS4wNTIyOC45NTg4LS42NjI1NS40Nzk1IDEuNTE5OTcgMS43NzUyIDYuODk4MzUtMi4wMDg1IDQuODg0Ni00LjEyMDUtMTIuNjkyMzMtOS4zOTQ0eiIgZmlsbD0iIzc2M2UxYSIgc3Ryb2tlPSIjNzYzZTFhIi8+PHBhdGggZD0ibTMyLjA0ODkgMTYuNTIzNC02Ljg5ODMtMi4wMDg1IDIuMDc4NiAzLjEzNTgtMy4xMDQ5IDYuMDUxMyA0LjEwNTItLjA1MTloNi4xMzE4eiIgZmlsbD0iI2Y1ODQxZiIgc3Ryb2tlPSIjZjU4NDFmIi8+PHBhdGggZD0ibTEwLjQ3MDUgMTQuNTE0OS02Ljg5ODI4IDIuMDA4NS0yLjI5OTQ0IDcuMTI2N2g2LjExODgzbDQuMTA1MTkuMDUxOS0zLjEwNDg3LTYuMDUxM3oiIGZpbGw9IiNmNTg0MWYiIHN0cm9rZT0iI2Y1ODQxZiIvPjxwYXRoIGQ9Im0xOS44MjQxIDE3Ljk4NzYuNDQxNy03LjU5MzIgMi4wMDA3LTUuNDAzNGgtOC45MTE5bDIuMDAwNiA1LjQwMzQuNDQxNyA3LjU5MzIuMTY4OSAyLjM4NDIuMDEzIDUuODk1OGgzLjY2MzVsLjAxMy01Ljg5NTh6IiBmaWxsPSIjZjU4NDFmIiBzdHJva2U9IiNmNTg0MWYiLz48L2c+PC9zdmc+"
alt="meta mask icon"
/>
Sign in with MetaMask
</button>
);
}