refactor: add user info to authData

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vocechat-web",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "private": true,
   "homepage": "https://privoce.voce.chat",
   "dependencies": {

src/app/config.ts

@@ -1,6 +1,6 @@
 // const BASE_URL = `${location.origin}/api`;
 const BASE_URL = `https://dev.voce.chat/api`;
-export const CACHE_VERSION = `0.3.0`;
+export const CACHE_VERSION = `0.3.1`;
 export const ContentTypes = {
   text: "text/plain",
   markdown: "text/markdown",
@@ -27,6 +27,7 @@ export const vapidKey = `BGXCn-5YRXSFw38Q9lUKJ5bibL212-yIQn1pCvthGhp6_KwA29FO1Ax
 export const tokenHeader = "X-API-Key";
 export const FILE_SLICE_SIZE = 1000 * 200 * 8; //200kb
 export const FILE_IMAGE_SIZE = 1000 * 10000 * 8; //10mb
+export const KEY_LOGIN_USER = "VOCECHAT_LOGIN_USER";
 export const KEY_TOKEN = "VOCECHAT_TOKEN";
 export const KEY_EXPIRE = "VOCECHAT_TOKEN_EXPIRE";
 export const KEY_REFRESH_TOKEN = "VOCECHAT_REFRESH_TOKEN";

src/app/services/contact.ts

@@ -2,7 +2,7 @@ import { createApi } from "@reduxjs/toolkit/query/react";
 // import toast from "react-hot-toast";
 import { KEY_UID } from "../config";
 import baseQuery from "./base.query";
-import { resetAuthData, setUid } from "../slices/auth.data";
+import { resetAuthData } from "../slices/auth.data";
 import { updateMute } from "../slices/footprint";
 import { fullfillContacts } from "../slices/contacts";
 import BASE_URL, { ContentTypes } from "../config";
@@ -39,7 +39,6 @@ export const contactApi = createApi({
             const markedContacts = contacts.map((u) => {
               return u.uid == matchedUser.uid ? { ...u, online: true } : u;
             });
-            dispatch(setUid(matchedUser.uid));
             dispatch(fullfillContacts(markedContacts));
           }
         } catch {

src/app/services/message.ts

@@ -132,7 +132,7 @@ export const messageApi = createApi({
       async onQueryStarted(id, { dispatch, queryFulfilled, getState }) {
         try {
           const { data } = await queryFulfilled;
-          const loginUid = getState().authData.uid;
+          const loginUid = getState().authData.user.uid;
           const messages = normalizeArchiveData(data, id, loginUid);
           dispatch(populateFavorite({ id, messages }));
         } catch (err) {

src/app/slices/auth.data.ts

@@ -1,20 +1,25 @@
 import { createSlice, PayloadAction } from "@reduxjs/toolkit";
-import { KEY_EXPIRE, KEY_PWA_INSTALLED, KEY_REFRESH_TOKEN, KEY_TOKEN, KEY_UID } from "../config";
+import {
+  KEY_EXPIRE,
+  KEY_PWA_INSTALLED,
+  KEY_LOGIN_USER,
+  KEY_REFRESH_TOKEN,
+  KEY_TOKEN,
+  KEY_UID
+} from "../config";
 import { AuthData, AuthToken, User } from "../../types/auth";
 
 interface State {
   initialized: boolean;
-  uid: string | null;
-  user: User | null;
+  user: User | undefined;
   token: string | null;
   expireTime: number;
   refreshToken: string | null;
 }
-
+const loginUser = localStorage.getItem(KEY_LOGIN_USER) || "";
 const initialState: State = {
   initialized: true,
-  uid: null,
-  user: null,
+  user: loginUser ? JSON.parse(loginUser) : undefined,
   token: localStorage.getItem(KEY_TOKEN),
   expireTime: Number(localStorage.getItem(KEY_EXPIRE) || +new Date()),
   refreshToken: localStorage.getItem(KEY_REFRESH_TOKEN)
@@ -22,8 +27,7 @@ const initialState: State = {
 
 const emptyState: State = {
   initialized: true,
-  uid: null,
-  user: null,
+  user: undefined,
   token: null,
   expireTime: +new Date(),
   refreshToken: null
@@ -34,22 +38,17 @@ const authDataSlice = createSlice({
   initialState,
   reducers: {
     setAuthData(state, { payload }: PayloadAction<AuthData>) {
-      const {
-        initialized = true,
-        user: { uid },
-        token,
-        refresh_token,
-        expired_in = 0
-      } = payload;
+      const { initialized = true, user, token, refresh_token, expired_in = 0 } = payload;
+      const { uid } = user;
       state.initialized = initialized;
-      state.uid = `${uid}`;
-      state.user = payload.user;
+      state.user = user;
       state.token = token;
       state.refreshToken = refresh_token;
       // 当前时间往后推expire时长
       const expireTime = +new Date() + Number(expired_in) * 1000;
       state.expireTime = expireTime;
       // set local data
+      localStorage.setItem(KEY_LOGIN_USER, JSON.stringify(user));
       localStorage.setItem(KEY_EXPIRE, `${expireTime}`);
       localStorage.setItem(KEY_TOKEN, token);
       localStorage.setItem(KEY_REFRESH_TOKEN, refresh_token);
@@ -65,16 +64,11 @@ const authDataSlice = createSlice({
 
       return emptyState;
     },
-    setUid(state, action: PayloadAction<string>) {
-      state.uid = action.payload;
-      console.log("set uid original");
-    },
     updateInitialized(state, action: PayloadAction<boolean>) {
       state.initialized = action.payload;
     },
     updateToken(state, action: PayloadAction<AuthToken>) {
       const { token, refresh_token, expired_in } = action.payload;
-      console.log("refresh token");
       state.token = token;
       const et = +new Date() + Number(expired_in) * 1000;
       state.expireTime = et;
@@ -86,6 +80,5 @@ const authDataSlice = createSlice({
   }
 });
 
-export const { updateInitialized, setAuthData, resetAuthData, setUid, updateToken } =
-  authDataSlice.actions;
+export const { updateInitialized, setAuthData, resetAuthData, updateToken } = authDataSlice.actions;
 export default authDataSlice.reducer;

src/app/slices/server.ts

@@ -39,11 +39,14 @@ const serverSlice = createSlice({
     },
     updateInfo(state, action: PayloadAction<Partial<StoredServer>>) {
       const values = action.payload || {};
+      const tmp = { ...state, ...values };
+      console.log("ssss", tmp);
+
       // todo: check and remove old logic
       // Object.keys(values).forEach((_key) => {
       //   state[_key] = values[_key];
       // });
-      state = { ...state, ...values };
+      return { ...state, ...values };
     }
   }
 });

src/common/component/AddEntriesMenu.tsx

@@ -41,7 +41,6 @@ const Styled = styled.ul`
   }
 `;
 export default function AddEntriesMenu() {
-  // const currentUser = useSelector((store) => store.contacts.byId[store.authData.uid]);
   const [isPrivate, setIsPrivate] = useState(false);
   const [inviteModalVisible, setInviteModalVisible] = useState(false);
 

src/common/component/ChannelModal/index.tsx

@@ -15,7 +15,7 @@ import { useAppSelector } from "../../../app/store";
 
 export default function ChannelModal({ personal = false, closeModal }) {
   const { contactsData, loginUid } = useAppSelector((store) => {
-    return { contactsData: store.contacts.byId, loginUid: store.authData.uid };
+    return { contactsData: store.contacts.byId, loginUid: store.authData.user?.uid };
   });
   const navigateTo = useNavigate();
   const [data, setData] = useState({

src/common/component/CurrentUser.tsx

@@ -65,7 +65,7 @@ const StyledWrapper = styled.div`
 export default function CurrentUser() {
   const { values: agoraConfig } = useConfig("agora");
   const currUser = useAppSelector((store) => {
-    return store.contacts.byId[store.authData.uid];
+    return store.authData.user;
   });
 
   if (!currUser) return null;

src/common/component/ForwardModal/index.tsx

@@ -28,9 +28,6 @@ export default function ForwardModal({ mids, closeModal }) {
     updateInput: updateChannelInput
   } = useFilteredChannels();
   const { contacts, input, updateInput } = useFilteredUsers();
-  // const { conactsData, loginUid } = useSelector((store) => {
-  //   return { conactsData: store.contacts.byId, loginUid: store.authData.uid };
-  // });
   const toggleCheck = ({ currentTarget }: MouseEvent<HTMLLIElement>) => {
     const { id, type = "user" } = currentTarget.dataset;
     const ids = type == "user" ? selectedMembers : selectedChannels;

src/common/component/ManageMembers.tsx

@@ -114,13 +114,12 @@ const StyledWrapper = styled.section`
     }
   }
 `;
-
-export default function ManageMembers({ cid = null }) {
+export default function ManageMembers({ cid = 0 }) {
   const { contacts, channels, loginUser } = useAppSelector((store) => {
     return {
       contacts: store.contacts,
       channels: store.channels,
-      loginUser: store.contacts.byId[store.authData.uid]
+      loginUser: store.authData.user
     };
   });
   const { copyEmail, removeFromChannel, removeUser, canRemove, canRemoveFromChannel } =

src/common/component/Message/Reaction.tsx

@@ -9,6 +9,7 @@ import ReactionPicker from "./ReactionPicker";
 import Tooltip from "../Tooltip";
 import { useReactMessageMutation } from "../../../app/services/message";
 import addEmojiIcon from "../../../assets/icons/add.emoji.svg?url";
+import { useAppSelector } from "../../../app/store";
 
 const StyledWrapper = styled.span`
   position: relative;
@@ -129,9 +130,9 @@ const ReactionDetails = ({ uids = [], emoji, index }) => {
 };
 export default function Reaction({ mid, reactions = null }) {
   const [reactWithEmoji] = useReactMessageMutation();
-  const { currUid } = useSelector((store) => {
+  const { currUid } = useAppSelector((store) => {
     return {
-      currUid: store.authData.uid
+      currUid: store.authData.user?.uid
     };
   });
   const handleReact = (emoji) => {

src/common/component/Message/ReactionPicker.tsx

@@ -41,7 +41,7 @@ export default function ReactionPicker({ mid, hidePicker }) {
   const { reactionData, currUid } = useAppSelector((store) => {
     return {
       reactionData: store.reactionMessage[mid] || {},
-      currUid: store.authData.uid
+      currUid: store.authData.user?.uid
     };
   });
   // useOutsideClick(wrapperRef, hidePicker);

src/common/component/Message/useMessageOperation.tsx

@@ -22,7 +22,7 @@ export default function useMessageOperation({ mid, context, contextId }: Params)
       from_uid: store.message[mid]?.from_uid,
       content_type: store.message[mid]?.content_type,
       properties: store.message[mid]?.properties,
-      currUid: store.authData.uid
+      currUid: store.authData.user?.uid
     };
   });
   const { canPin, pins, unpinMessage, isUnpinSuccess } = usePinMessage(

src/common/component/Send/index.tsx

@@ -47,7 +47,7 @@ function Send({
       uids: store.contacts.ids,
       contactsData: store.contacts.byId,
       mode: store.ui.inputMode,
-      from_uid: store.authData.uid,
+      from_uid: store.authData.user?.uid,
       replying_mid: store.message.replying[`${context}_${id}`],
       uploadFiles: store.ui.uploadFiles[`${context}_${id}`]
     };

src/common/component/Server.tsx

@@ -60,7 +60,7 @@ export default function Server() {
       server: store.server
     };
   });
-  // console.log("server info", server);
+  console.log("server info", server);
   const { name, description, logo } = server;
 
   return (
@@ -68,7 +68,7 @@ export default function Server() {
       <NavLink to={`/setting?f=${pathname}`}>
         <div className="server">
           <div className="logo">
-            <img alt="logo" src={logo} />
+            <img alt={`${name} logo`} src={logo} />
           </div>
           <div className="info">
             <h3 className="name" title={description}>

src/common/component/Tooltip.tsx

@@ -42,7 +42,7 @@ const StyledTip = styled.div`
 
 interface Props {
   tip: string;
-  placement: Placement;
+  placement?: Placement;
   delay?: number | [number | null, number | null];
   children: ReactElement;
 }

src/common/component/UploadModal/index.tsx

@@ -8,7 +8,7 @@ import useSendMessage from "../../hook/useSendMessage";
 import { useAppSelector } from "../../../app/store";
 
 export default function UploadModal({ context = "user", sendTo = 0, files = [], closeModal }) {
-  const from_uid = useAppSelector((store) => store.authData.uid);
+  const from_uid = useAppSelector((store) => store.authData.user?.uid);
   const {
     sendMessage,
     isSuccess: sendMessageSuccess,

src/common/hook/useContactOperation.ts

@@ -17,18 +17,17 @@ export default function useContactOperation({ uid, cid }: { uid: number; cid: nu
   const [removeInChannel, { isSuccess: removeSuccess }] = useRemoveMembersMutation();
   const navigateTo = useNavigate();
   const { copy } = useCopy();
-  const { user, channel, loginUid, isAdmin } = useAppSelector((store) => {
+  const { user, channel, loginUser, isAdmin } = useAppSelector((store) => {
     return {
       user: store.contacts.byId[uid],
       channel: store.channels.byId[cid],
-      loginUid: store.authData.uid,
-      isAdmin: store.contacts.byId[store.authData.uid]?.is_admin
+      loginUser: store.authData.user
     };
   });
 
   useEffect(() => {
-    setPassedUid(uid ?? loginUid);
-  }, [uid, loginUid]);
+    setPassedUid(uid ?? loginUser.uid);
+  }, [uid, loginUser]);
 
   useEffect(() => {
     if (removeSuccess || removeUserSuccess) {
@@ -68,7 +67,7 @@ export default function useContactOperation({ uid, cid }: { uid: number; cid: nu
     toast.success("Cooming Soon...");
     hideAll();
   };
-
+  const loginUid = loginUser?.uid;
   const canRemoveFromChannel =
     cid && !channel?.is_public && (isAdmin || channel?.owner == loginUid);
   const canCall = agoraConfig.enabled && loginUid != uid;

src/common/hook/useDeleteMessage.ts

@@ -7,7 +7,7 @@ export default function useDeleteMessage() {
   const { loginUser, messageData } = useAppSelector((store) => {
     return {
       messageData: store.message,
-      loginUser: store.contacts.byId[store.authData.uid]
+      loginUser: store.authData.user
     };
   });
   const [

src/common/hook/useLeaveChannel.ts

@@ -3,7 +3,7 @@ import { useAppSelector } from "../../app/store";
 
 export default function useLeaveChannel(cid: number) {
   const { channel, loginUid } = useAppSelector((store) => {
-    return { channel: store.channels.byId[cid], loginUid: store.authData.uid };
+    return { channel: store.channels.byId[cid], loginUid: store.authData.user?.uid };
   });
   const [update, { isLoading: transfering, isSuccess: transferSuccess }] =
     useUpdateChannelMutation();

src/common/hook/useMessageFeed.ts

@@ -1,9 +1,19 @@
 import { useEffect, useState, useRef } from "react";
-import { useSelector } from "react-redux";
 import { useLazyGetHistoryMessagesQuery } from "../../app/services/channel";
 import { useLazyGetHistoryMessagesQuery as useLazyGetDMHistoryMsg } from "../../app/services/contact";
-
-const getFeedWithPagination = (config) => {
+import { useAppSelector } from "../../app/store";
+export interface PageInfo {
+  isFirst: boolean;
+  isLast: boolean;
+  pageCount: number;
+  pageSize: number;
+  pageNumber: number;
+  ids: number[];
+}
+interface Config extends Partial<PageInfo> {
+  mids: number[];
+}
+const getFeedWithPagination = (config: Config): PageInfo => {
   const { pageNumber = 1, pageSize = 40, mids = [], isLast = false } = config || {};
   const shadowMids = mids.slice(0);
 
@@ -41,16 +51,16 @@ let oldScroll = 0;
 export default function useMessageFeed({ context = "channel", id = null }) {
   const [loadMoreChannelMsgs] = useLazyGetHistoryMessagesQuery();
   const [loadMoreDmMsgs] = useLazyGetDMHistoryMsg();
-  const listRef = useRef([]);
-  const pageRef = useRef(null);
-  const containerRef = useRef(null);
+  const listRef = useRef<number[]>([]);
+  const pageRef = useRef<object | null>(null);
+  const containerRef = useRef<HTMLElement | null>(null);
   const [hasMore, setHasMore] = useState(true);
   const [appends, setAppends] = useState([]);
-  const [items, setItems] = useState([]);
+  const [items, setItems] = useState<number[]>([]);
   const loadMoreMsgsFromServer = context == "channel" ? loadMoreChannelMsgs : loadMoreDmMsgs;
-  const { mids, messageData, loginUid } = useSelector((store) => {
+  const { mids, messageData, loginUid } = useAppSelector((store) => {
     return {
-      loginUid: store.authData.uid,
+      loginUid: store.authData.user?.uid,
       mids:
         context == "channel" ? store.channelMessage[id] || [] : store.userMessage.byId[id] || [],
       messageData: store.message
@@ -58,7 +68,7 @@ export default function useMessageFeed({ context = "channel", id = null }) {
   });
   useEffect(() => {
     listRef.current = [];
-    pageRef.current = [];
+    pageRef.current = null;
     setItems([]);
     setHasMore(true);
     setAppends([]);
@@ -91,10 +101,10 @@ export default function useMessageFeed({ context = "channel", id = null }) {
     } else {
       //   追加
       const [lastMid] = listRef.current.slice(-1);
-      const sorteds = mids.slice(0).sort((a, b) => {
+      const sorteds = mids.slice(0).sort((a: number, b: number) => {
         return Number(a) - Number(b);
       });
-      const appends = sorteds.filter((s) => s > lastMid);
+      const appends = sorteds.filter((s: number) => s > lastMid);
       console.log("appends", appends, sorteds, lastMid, mids);
       if (appends.length) {
         setAppends(appends);

src/common/hook/usePinMessage.ts

@@ -7,7 +7,7 @@ export default function usePinMessage(cid: number) {
   const { channel, loginUser } = useAppSelector((store) => {
     return {
       channel: store.channels.byId[cid],
-      loginUser: store.contacts.byId[store.authData.uid]
+      loginUser: store.authData.user
     };
   });
   const [pin, { isError, isLoading, isSuccess }] = usePinMessageMutation();

src/routes/chat/ChannelChat/index.tsx

@@ -58,15 +58,13 @@ export default function ChannelChat({ cid = "", dropFiles = [] }) {
     userIds,
     data,
     messageData,
-    loginUid,
     loginUser,
     footprint
   } = useSelector((store) => {
     return {
       selects: store.ui.selectMessages[`channel_${cid}`],
       footprint: store.footprint,
-      loginUser: store.contacts.byId[store.authData.uid],
-      loginUid: store.authData.uid,
+      loginUser: store.authData.user,
       // msgIds: store.channelMessage[cid] || [],
       userIds: store.contacts.ids,
       data: store.channels.byId[cid] || {},
@@ -93,7 +91,7 @@ export default function ChannelChat({ cid = "", dropFiles = [] }) {
   if (!data) return null;
   const { name, description, is_public, members = [], owner } = data;
   const memberIds = is_public ? userIds : members.slice(0).sort((n) => (n == owner ? -1 : 0));
-  const addVisible = loginUser?.is_admin || owner == loginUid;
+  const addVisible = loginUser?.is_admin || owner == loginUser.uid;
   console.log("channel message list", msgIds);
   const readIndex = footprint.readChannels[cid];
   const pinCount = data?.pinned_messages?.length || 0;
@@ -236,7 +234,7 @@ export default function ChannelChat({ cid = "", dropFiles = [] }) {
             if (!curr) return null;
             const isFirst = idx == 0;
             const prev = isFirst ? null : messageData[feeds[idx - 1]];
-            const read = curr?.from_uid == loginUid || mid <= readIndex;
+            const read = curr?.from_uid == loginUser.uid || mid <= readIndex;
             return renderMessageFragment({
               selectMode: !!selects,
               updateReadIndex: updateReadDebounced,

src/routes/chat/ChannelList/NavItem.tsx

@@ -29,21 +29,12 @@ const NavItem = ({ id, setFiles, toggleRemoveConfirm }) => {
     handleContextMenuEvent,
     hideContextMenu
   } = useContextMenu();
-  const {
-    channel,
-    mids,
-    messageData,
-    readIndex,
-    muted,
-    loginUid
-    //  loginUser,
-  } = useSelector((store) => {
+  const { channel, mids, messageData, readIndex, muted, loginUid } = useSelector((store) => {
     return {
-      // loginUser: store.contacts.byId[store.authData.uid],
       channel: store.channels.byId[id],
       mids: store.channelMessage[id],
       messageData: store.message,
-      loginUid: store.authData.uid,
+      loginUid: store.authData.user?.uid,
       readIndex: store.footprint.readChannels[id],
       muted: store.footprint.muteChannels[id]
     };

src/routes/chat/DMChat/index.tsx

@@ -1,5 +1,4 @@
 // import { useState, useEffect } from "react";
-import { useSelector } from "react-redux";
 import { useDebounce } from "rooks";
 import Tippy from "@tippyjs/react";
 import FavList from "../FavList";
@@ -15,6 +14,7 @@ import { StyledHeader, StyledDMChat } from "./styled";
 import LoadMore from "../LoadMore";
 import { renderMessageFragment } from "../utils";
 import useMessageFeed from "../../../common/hook/useMessageFeed";
+import { useAppSelector } from "../../../app/store";
 
 export default function DMChat({ uid = "", dropFiles = [] }) {
   const {
@@ -29,10 +29,10 @@ export default function DMChat({ uid = "", dropFiles = [] }) {
   const [updateReadIndex] = useReadMessageMutation();
   const updateReadDebounced = useDebounce(updateReadIndex, 300);
   console.log("dm files", dropFiles);
-  const { currUser, messageData, footprint, loginUid, selects } = useSelector((store) => {
+  const { currUser, messageData, footprint, loginUid, selects } = useAppSelector((store) => {
     return {
       selects: store.ui.selectMessages[`user_${uid}`],
-      loginUid: store.authData.uid,
+      loginUid: store.authData.user?.uid,
       footprint: store.footprint,
       currUser: store.contacts.byId[uid],
       messageData: store.message

src/routes/chat/DMList/index.tsx

@@ -11,7 +11,7 @@ interface Props {
 const DMList: FC<Props> = ({ uids, setDropFiles }) => {
   const { userMessage, messageData, readUsers, loginUid } = useAppSelector((store) => {
     return {
-      loginUid: store.authData.uid,
+      loginUid: store.authData.user?.uid,
       readUsers: store.footprint.readUsers,
       contactData: store.contacts.byId,
       userMessage: store.userMessage.byId,

src/routes/chat/SessionList/Session.tsx

@@ -55,7 +55,7 @@ export default function Session({
     (store) => {
       return {
         mids: type == "user" ? store.userMessage.byId[id] : store.channelMessage[id],
-        loginUid: store.authData.uid,
+        loginUid: store.authData.user?.uid,
         readIndex:
           type == "user" ? store.footprint.readUsers[id] : store.footprint.readChannels[id],
         messageData: store.message,

src/routes/chat/SessionList/index.tsx

@@ -12,7 +12,7 @@ export default function SessionList({ tempSession = null }) {
   const { channelIDs, DMs, readChannels, readUsers, channelMessage, userMessage, loginUid } =
     useAppSelector((store) => {
       return {
-        loginUid: store.authData.uid,
+        loginUid: store.authData.user?.uid,
         channelIDs: store.channels.ids,
         DMs: store.userMessage.ids,
         userMessage: store.userMessage.byId,

src/routes/home/index.tsx

@@ -1,7 +1,6 @@
 // import React from 'react';
 // import { useEffect } from "react";
 import { Outlet, NavLink, useLocation, useMatch } from "react-router-dom";
-import { useSelector } from "react-redux";
 import StyledWrapper from "./styled";
 import User from "./User";
 // import Tools from "./Tools";
@@ -17,6 +16,7 @@ import ChatIcon from "../../assets/icons/chat.svg";
 import ContactIcon from "../../assets/icons/contact.svg";
 import FavIcon from "../../assets/icons/bookmark.svg";
 import FolderIcon from "../../assets/icons/folder.svg";
+import { useAppSelector } from "../../app/store";
 // const routes = ["/setting", "/setting/channel/:cid"];
 export default function HomePage() {
   usePWABadge();
@@ -29,10 +29,10 @@ export default function HomePage() {
       ready,
       remeberedNavs: { chat: chatPath, contact: contactPath }
     }
-  } = useSelector((store) => {
+  } = useAppSelector((store) => {
     return {
       ui: store.ui,
-      loginUid: store.authData.uid
+      loginUid: store.authData.user?.uid
     };
   });
   const { loading } = usePreload();

src/routes/home/usePreload.ts

@@ -13,7 +13,7 @@ import { useAppSelector } from "../../app/store";
 export default function usePreload() {
   const { rehydrate, rehydrated } = useRehydrate();
   const { loginUid, token } = useAppSelector((store) => {
-    return { loginUid: store.authData.uid, token: store.authData.token };
+    return { loginUid: store.authData.user?.uid, token: store.authData.token };
   });
   const { setStreamingReady } = useStreaming();
   const [
@@ -54,6 +54,8 @@ export default function usePreload() {
     }
   }, [rehydrated]);
   const canStreaming = loginUid && rehydrated && !!token;
+  console.log("ttt", loginUid, rehydrated, token);
+
   useEffect(() => {
     setStreamingReady(canStreaming);
   }, [canStreaming]);

src/routes/invite/index.tsx

@@ -13,8 +13,6 @@ export default function InvitePage() {
   const [samePwd, setSamePwd] = useState(true);
   const [token, setToken] = useState("");
   const [valid, setValid] = useState(false);
-  // const [sp] = useSearchParams();
-  // const navigateTo = useNavigate();
   const [register, { data, isLoading, isSuccess, isError, error }] = useRegisterMutation();
   const [checkToken, { data: isValid, isLoading: checkLoading, isSuccess: checkSuccess }] =
     useCheckMagicTokenValidMutation();

src/routes/setting/MyAccount.tsx

@@ -116,7 +116,7 @@ export default function MyAccount() {
   const [editModal, setEditModal] = useState(null);
   const [uploadAvatar, { isSuccess: uploadSuccess }] = useUpdateAvatarMutation();
   const loginUser = useAppSelector((store) => {
-    return store.contacts.byId[store.authData.uid];
+    return store.authData.user;
   });
 
   useEffect(() => {

src/routes/setting/navs.tsx

@@ -96,7 +96,7 @@ const navs = [
 
 const useNavs = () => {
   const loginUser = useAppSelector((store) => {
-    return store.contacts.byId[store.authData.uid];
+    return store.authData.user;
   });
   return navs.filter((nav) => {
     if (loginUser?.is_admin) {

src/routes/settingChannel/Overview.tsx

@@ -46,7 +46,7 @@ const StyledWrapper = styled.div`
 export default function Overview({ id = 0 }) {
   const { loginUser, channel } = useAppSelector((store) => {
     return {
-      loginUser: store.contacts.byId[store.authData.uid],
+      loginUser: store.authData.user,
       channel: store.channels.byId[id]
     };
   });

src/routes/settingChannel/index.tsx

@@ -10,10 +10,9 @@ let from: string | null = null;
 
 export default function ChannelSetting() {
   const { cid } = useParams();
-  const { isAdmin, loginUid, channel } = useAppSelector((store) => {
+  const { loginUser, channel } = useAppSelector((store) => {
     return {
-      loginUid: store.authData.uid,
-      isAdmin: store.contacts.byId[store.authData.uid]?.is_admin,
+      loginUser: store.authData.user,
       channel: store.channels.byId[cid]
     };
   });
@@ -41,7 +40,7 @@ export default function ChannelSetting() {
   };
   if (!cid) return null;
   const currNav = flatenNavs.find((n) => n.name == navKey) || flatenNavs[0];
-  const canDelete = isAdmin || channel?.owner == loginUid;
+  const canDelete = loginUser.isAdmin || channel?.owner == loginUser.uid;
   const canLeave = !channel?.is_public;
 
   return (

src/types/auth.ts

@@ -17,6 +17,7 @@ export interface User {
   is_admin: boolean;
   avatar_updated_at: number;
   create_by: string;
+  avatar?: string;
 }
 
 export interface AuthData extends AuthToken {