refactor: add user info to authData

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();