From 501688c960f1afe00aa356c8a7ec07712c27c4d0 Mon Sep 17 00:00:00 2001 From: zerosoul Date: Thu, 10 Mar 2022 22:11:05 +0800 Subject: [PATCH] feat: updates --- src/app/config.js | 2 + src/app/slices/visit.mark.js | 6 +- src/app/store.js | 2 +- src/app/store.with.persist.js | 83 ------------------- src/common/component/ImagePreviewModal.js | 11 ++- src/common/component/NotificationHub/index.js | 19 +++-- src/routes/home/Loading.js | 2 +- src/routes/home/index.js | 4 +- 8 files changed, 31 insertions(+), 98 deletions(-) delete mode 100644 src/app/store.with.persist.js diff --git a/src/app/config.js b/src/app/config.js index a27556bb..4e85535a 100644 --- a/src/app/config.js +++ b/src/app/config.js @@ -14,5 +14,7 @@ export const KEY_TOKEN = "RUSTCHAT_TOKEN"; export const KEY_EXPIRE = "RUSTCHAT_TOKEN_EXPIRE"; export const KEY_REFRESH_TOKEN = "RUSTCHAT_REFRESH_TOKEN"; export const KEY_UID = "RUSTCHAT_CURR_UID"; +export const KEY_USERS_VERSION = "RUSTCHAT_USERS_VERSION"; +export const KEY_AFTER_MID = "RUSTCHAT_AFTER_MID"; export default BASE_URL; diff --git a/src/app/slices/visit.mark.js b/src/app/slices/visit.mark.js index 6ae8f817..3f643a72 100644 --- a/src/app/slices/visit.mark.js +++ b/src/app/slices/visit.mark.js @@ -1,5 +1,5 @@ import { createSlice } from "@reduxjs/toolkit"; -// import { KEY_REFRESH_TOKEN, KEY_TOKEN, KEY_UID } from "../config"; +import { KEY_AFTER_MID, KEY_USERS_VERSION, KEY_UID } from "../config"; const initialState = { usersVersion: null, afterMid: null, @@ -18,10 +18,14 @@ const visitMarkSlice = createSlice({ 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); }, }, }); diff --git a/src/app/store.js b/src/app/store.js index 0a61ccf0..563918a2 100644 --- a/src/app/store.js +++ b/src/app/store.js @@ -61,7 +61,7 @@ listenerMiddleware.startListening({ effect: async (action, listenerApi) => { const { type = "" } = action; const key = getCacheKey(type); - console.log("listener effect", key, listenerApi.getState(), window.CACHE); + // console.log("listener effect", key, listenerApi.getState(), window.CACHE); if (key && window.CACHE) { await window.CACHE.setItem(key, listenerApi.getState()[key]); } diff --git a/src/app/store.with.persist.js b/src/app/store.with.persist.js deleted file mode 100644 index 0ec5aae7..00000000 --- a/src/app/store.with.persist.js +++ /dev/null @@ -1,83 +0,0 @@ -import { configureStore, combineReducers } from "@reduxjs/toolkit"; -import { setupListeners } from "@reduxjs/toolkit/query"; -import storage from "redux-persist/lib/storage"; -import { - persistReducer, - FLUSH, - REHYDRATE, - PAUSE, - PERSIST, - PURGE, - REGISTER, -} from "redux-persist"; -import authDataReducer from "./slices/auth.data"; -import uiReducer from "./slices/ui"; -import channelsReducer from "./slices/channels"; -import contactsReducer from "./slices/contacts"; -import pendingMsgReducer from "./slices/message.pending"; -import channelMsgReducer from "./slices/message.channel"; -import userMsgReducer from "./slices/message.user"; -import { authApi } from "./services/auth"; -import { contactApi } from "./services/contact"; -import { channelApi } from "./services/channel"; -import { serverApi } from "./services/server"; -const persistConfig = { - key: "root", - version: 1, - storage, -}; -const persistedReducer = persistReducer( - persistConfig, - combineReducers({ - ui: uiReducer, - contacts: contactsReducer, - channels: channelsReducer, - pendingMsg: pendingMsgReducer, - userMsg: userMsgReducer, - channelMsg: channelMsgReducer, - authData: authDataReducer, - [authApi.reducerPath]: authApi.reducer, - [contactApi.reducerPath]: contactApi.reducer, - [channelApi.reducerPath]: channelApi.reducer, - [serverApi.reducerPath]: serverApi.reducer, - }) -); -const store = configureStore({ - reducer: persistedReducer, - middleware: (getDefaultMiddleware) => - getDefaultMiddleware({ - serializableCheck: { - ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER], - }, - }).concat( - authApi.middleware, - contactApi.middleware, - channelApi.middleware, - serverApi.middleware - ), -}); -setupListeners(store.dispatch); -// export function swapToUserStore(userId) { -// console.log({ userId }); -// const newConfig = { -// ...persistConfig, -// keyPrefix: userId, -// }; -// store.replaceReducer( -// persistReducer( -// newConfig, -// combineReducers({ -// ui: uiReducer, -// channels: channelsReducer, -// userMsg: userMsgReducer, -// channelMsg: channelMsgReducer, -// authData: authDataReducer, -// [authApi.reducerPath]: authApi.reducer, -// [contactApi.reducerPath]: contactApi.reducer, -// [channelApi.reducerPath]: channelApi.reducer, -// [serverApi.reducerPath]: serverApi.reducer, -// }) -// ) -// ); -// } -export default store; diff --git a/src/common/component/ImagePreviewModal.js b/src/common/component/ImagePreviewModal.js index a4018057..f029379e 100644 --- a/src/common/component/ImagePreviewModal.js +++ b/src/common/component/ImagePreviewModal.js @@ -1,6 +1,6 @@ import { useRef } from "react"; import styled, { keyframes } from "styled-components"; -import { useOutsideClick } from "rooks"; +import { useOutsideClick, useKey } from "rooks"; import Modal from "./Modal"; const AniFadeIn = keyframes` from{ @@ -43,7 +43,14 @@ const StyledWrapper = styled.div` export default function ImagePreviewModal({ image = null, closeModal }) { const wrapperRef = useRef(); useOutsideClick(wrapperRef, closeModal); - + useKey( + "Escape", + () => { + console.log("close preview modal"); + closeModal(); + }, + { eventTypes: ["keyup"] } + ); if (!image) return null; return ( diff --git a/src/common/component/NotificationHub/index.js b/src/common/component/NotificationHub/index.js index 00a61c38..55e672de 100644 --- a/src/common/component/NotificationHub/index.js +++ b/src/common/component/NotificationHub/index.js @@ -3,7 +3,10 @@ import { useNavigate } from "react-router-dom"; import toast from "react-hot-toast"; import { useDispatch, useSelector } from "react-redux"; import useNotification from "./useNotification"; -import BASE_URL from "../../../app/config"; +import BASE_URL, { + KEY_AFTER_MID, + KEY_USERS_VERSION, +} from "../../../app/config"; import { useRenewMutation } from "../../../app/services/auth"; import { setChannels, @@ -21,8 +24,6 @@ import { } from "../../../app/slices/auth.data"; import { setUsersVersion, setAfterMid } from "../../../app/slices/visit.mark"; -// import { addChannelMsg } from "../../../app/slices/message.channel"; -// import { addUserMsg } from "../../../app/slices/message.user"; import { setReady } from "../../../app/slices/ui"; import useMessageHandler from "./useMessageHandler"; const getQueryString = (params = {}) => { @@ -34,7 +35,7 @@ const getQueryString = (params = {}) => { }); return sp.toString(); }; -const NotificationHub = ({ usersVersion = 0, afterMid = 0 }) => { +const NotificationHub = () => { const { enableNotification } = useNotification(); const dispatch = useDispatch(); const navigate = useNavigate(); @@ -53,11 +54,15 @@ const NotificationHub = ({ usersVersion = 0, afterMid = 0 }) => { useEffect(() => { let sse = null; if (token) { + const users_version = + localStorage.getItem(`${KEY_USERS_VERSION}_${currUser.uid}`) ?? 0; + const after_mid = + localStorage.getItem(`${KEY_AFTER_MID}_${currUser.uid}`) ?? 0; sse = new EventSource( `${BASE_URL}/user/events?${getQueryString({ "api-key": token, - users_version: usersVersion, - after_mid: afterMid, + users_version, + after_mid, })}` ); sse.onopen = () => { @@ -89,7 +94,7 @@ const NotificationHub = ({ usersVersion = 0, afterMid = 0 }) => { sse.close(); } }; - }, [token, refreshToken, usersVersion, afterMid]); + }, [token, refreshToken]); useEffect(() => { if (refreshTokenSuccess) { const { token, refresh_token } = data; diff --git a/src/routes/home/Loading.js b/src/routes/home/Loading.js index d164b9ce..f44646cc 100644 --- a/src/routes/home/Loading.js +++ b/src/routes/home/Loading.js @@ -40,7 +40,7 @@ export default function Loading() { useEffect(() => { const inter = setTimeout(() => { setReloadVisible(true); - }, 1500); + }, 10000); return () => { clearTimeout(inter); diff --git a/src/routes/home/index.js b/src/routes/home/index.js index 12254024..1b4cfb8c 100644 --- a/src/routes/home/index.js +++ b/src/routes/home/index.js @@ -20,10 +20,8 @@ export default function HomePage() { const dispatch = useDispatch(); const { ui: { ready, menuExpand, setting, channelSetting }, - visitMark: { usersVersion, afterMid }, } = useSelector((store) => { return { - visitMark: store.visitMark, ui: store.ui, }; }); @@ -37,7 +35,7 @@ export default function HomePage() { } return ( <> - + {ready ? (