Merge remote-tracking branch 'upstream/main' into refactor/typescript

# Conflicts:
#	src/common/component/ForwardModal/index.tsx
#	src/common/component/GoogleLoginButton.tsx
#	src/common/component/ManageMembers.tsx
#	src/routes/settingChannel/Overview.tsx
#	src/routes/settingChannel/index.tsx

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

@@ -19,7 +19,7 @@ interface Props {
 
 const ChannelModal: FC<Props> = ({ 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<CreateChannelDTO>({

src/common/component/CurrentUser.tsx

@@ -64,7 +64,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

@@ -1,10 +1,11 @@
-import { useState, MouseEvent, FC, ChangeEvent } from "react";
-import toast from "react-hot-toast";
+import { useState, MouseEvent } from "react";
+// import toast from "react-hot-toast";
 import Modal from "../Modal";
 import Button from "../styled/Button";
 import Input from "../styled/Input";
 import Channel from "../Channel";
 import Contact from "../Contact";
+// import Channel from "../Channel";
 import Reply from "../Message/Reply";
 import StyledWrapper from "./styled";
 import useForwardMessage from "../../hook/useForwardMessage";
@@ -13,41 +14,31 @@ import useFilteredChannels from "../../hook/useFilteredChannels";
 import useFilteredUsers from "../../hook/useFilteredUsers";
 import CloseIcon from "../../../assets/icons/close.circle.svg";
 import StyledCheckbox from "../styled/Checkbox";
+import toast from "react-hot-toast";
 
-interface Props {
-  mids: number[];
-  closeModal: () => void;
-}
-
-const ForwardModal: FC<Props> = ({ mids, closeModal }) => {
+export default function ForwardModal({ mids, closeModal }) {
   const [appendText, setAppendText] = useState("");
   const { sendMessages } = useSendMessage();
   const { forwardMessage, forwarding } = useForwardMessage();
-  const [selectedMembers, setSelectedMembers] = useState<number[]>([]);
-  const [selectedChannels, setSelectedChannels] = useState<number[]>([]);
+  const [selectedMembers, setSelectedMembers] = useState([]);
+  const [selectedChannels, setSelectedChannels] = useState([]);
   const {
     channels,
     // input: channelInput,
     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: number[] = type == "user" ? selectedMembers : selectedChannels;
+    const ids = type == "user" ? selectedMembers : selectedChannels;
     const updateState = type == "user" ? setSelectedMembers : setSelectedChannels;
-    const id_num = Number(id);
-    let tmp = ids.includes(id_num) ? ids.filter((m) => m !== id_num) : [...ids, id_num];
+    let tmp = ids.includes(+id) ? ids.filter((m) => m != id) : [...ids, +id];
+    console.log(id, currentTarget);
     updateState(tmp);
   };
-
-  const updateAppendText = (evt: ChangeEvent<HTMLInputElement>) => {
+  const updateAppendText = (evt) => {
     setAppendText(evt.target.value);
   };
-
   const handleForward = async () => {
     await forwardMessage({
       mids: mids.map((mid) => +mid),
@@ -64,25 +55,21 @@ const ForwardModal: FC<Props> = ({ mids, closeModal }) => {
     toast.success("Forward Message Successfully");
     closeModal();
   };
-
-  const removeSelected = (id: number, from = "user") => {
+  const removeSelected = (id, from = "user") => {
     if (from == "user") {
       setSelectedMembers(selectedMembers.filter((m) => m != id));
     } else {
       setSelectedChannels(selectedChannels.filter((cid) => cid != id));
     }
   };
-
-  const handleSearchChange = (evt: ChangeEvent<HTMLInputElement>) => {
+  const handleSearchChange = (evt) => {
     const newVal = evt.target.value;
     updateChannelInput(newVal);
     updateInput(newVal);
   };
-
   let selectedCount = selectedMembers.length + selectedChannels.length;
   const sendButtonDisabled =
     (selectedChannels.length == 0 && selectedMembers.length == 0) || forwarding;
-
   return (
     <Modal>
       <StyledWrapper>
@@ -99,6 +86,7 @@ const ForwardModal: FC<Props> = ({ mids, closeModal }) => {
               channels.map((c) => {
                 const { gid } = c;
                 const checked = selectedChannels.includes(gid);
+                console.log({ checked });
                 return (
                   <li
                     key={gid}
@@ -116,6 +104,7 @@ const ForwardModal: FC<Props> = ({ mids, closeModal }) => {
               contacts.map((u) => {
                 const { uid } = u;
                 const checked = selectedMembers.includes(uid);
+                console.log({ checked });
                 return (
                   <li
                     key={uid}
@@ -187,6 +176,4 @@ const ForwardModal: FC<Props> = ({ mids, closeModal }) => {
       </StyledWrapper>
     </Modal>
   );
-};
-
-export default ForwardModal;
+}

src/common/component/GoogleLoginButton.tsx

@@ -1,5 +1,5 @@
-import { FC, useEffect } from "react";
-import { useGoogleLogin } from "react-google-login";
+import { FC, useEffect, useState } from "react";
+import { useGoogleLogin, GoogleOAuthProvider } from "@react-oauth/google";
 import toast from "react-hot-toast";
 import styled from "styled-components";
 import { KEY_LOCAL_MAGIC_TOKEN } from "../../app/config";
@@ -24,31 +24,30 @@ const StyledSocialButton = styled(Button)`
 `;
 
 interface Props {
-  clientId: string;
+  loadError?: boolean;
+  loaded?: boolean;
+  clientId?: string;
   type?: "login" | "register";
 }
 
-const GoogleLoginButton: FC<Props> = ({ type = "login", clientId }) => {
+const GoogleLogin: FC<Props> = ({ type = "login", loaded, loadError }) => {
   const [login, { isSuccess, isLoading, error }] = useLoginMutation();
-  // 拿本地存的magic token
+  //拿本地存的magic token
   const magic_token = localStorage.getItem(KEY_LOCAL_MAGIC_TOKEN);
-  const { signIn, loaded } = useGoogleLogin({
-    onScriptLoadFailure: (wtf) => {
-      console.error("google login script load failure", wtf);
-    },
-    clientId,
+  const googleLogin = useGoogleLogin({
+    // flow: "auth-code",
     onSuccess: (res) => {
       if ("code" in res) {
         console.error(`google login failed: ${res.code}`);
       } else {
-        login({ magic_token, id_token: res.tokenId, type: "google" });
+        login({
+          magic_token,
+          id_token: res.access_token,
+          type: "google"
+        });
       }
-    },
-    onFailure: (wtf) => {
-      console.error("google login failure", wtf);
     }
   });
-
   useEffect(() => {
     if (isSuccess) {
       toast.success("Login Successfully");
@@ -70,17 +69,38 @@ const GoogleLoginButton: FC<Props> = ({ type = "login", clientId }) => {
       return;
     }
   }, [error]);
-
   const handleGoogleLogin = () => {
-    signIn();
+    googleLogin();
   };
 
   return (
     <StyledSocialButton disabled={!loaded || isLoading} onClick={handleGoogleLogin}>
       <IconGoogle className="icon" />
-      {loaded ? `${type === "login" ? "Sign in" : "Sign up"} with Google` : `Initializing`}
+      {loadError
+        ? "Script Load Error!"
+        : loaded
+        ? `${type === "login" ? "Sign in" : "Sign up"} with Google`
+        : `Initializing`}
     </StyledSocialButton>
   );
 };
 
+const GoogleLoginButton: FC<Props> = ({ type = "login", clientId }) => {
+  const [scriptLoaded, setScriptLoaded] = useState(false);
+  const [hasError, setHasError] = useState(false);
+  return (
+    <GoogleOAuthProvider
+      onScriptLoadError={() => {
+        setHasError(true);
+      }}
+      onScriptLoadSuccess={() => {
+        setScriptLoaded(true);
+      }}
+      clientId={clientId}
+    >
+      <GoogleLogin type={type} loaded={scriptLoaded} loadError={hasError} />
+    </GoogleOAuthProvider>
+  );
+};
+
 export default GoogleLoginButton;

src/common/component/ManageMembers.tsx

@@ -1,4 +1,4 @@
-import { FC, useEffect } from "react";
+import { useEffect } from "react";
 import styled from "styled-components";
 import Tippy from "@tippyjs/react";
 import { hideAll } from "tippy.js";
@@ -114,17 +114,12 @@ const StyledWrapper = styled.section`
     }
   }
 `;
-
-interface Props {
-  cid?: number;
-}
-
-const ManageMembers: FC<Props> = ({ 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 } =
@@ -250,6 +245,4 @@ const ManageMembers: FC<Props> = ({ cid = null }) => {
       </ul>
     </StyledWrapper>
   );
-};
-
-export default ManageMembers;
+}

src/common/component/Manifest/index.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState, useRef } from "react";
+import { useEffect, useState, useRef, SyntheticEvent } from "react";
 import Prompt from "./Prompt";
 import usePrompt from "./usePrompt";
 
@@ -6,9 +6,8 @@ export default function Manifest() {
   const { setCanceled: setCanceled, prompted } = usePrompt();
   const deferredPromptRef = useRef(null);
   const [popup, setPopup] = useState(false);
-  // const { data, isSuccess } = useGetServerQuery();
   useEffect(() => {
-    const handleInstallPromotion = (e) => {
+    const handleInstallPromotion = (e: SyntheticEvent) => {
       // Prevent the mini-infobar from appearing on mobile
       e.preventDefault();
       // Stash the event so it can be triggered later.
@@ -36,10 +35,10 @@ export default function Manifest() {
     //   }
 
     // }
-    window.addEventListener("beforeinstallprompt", handleInstallPromotion);
+    window.addEventListener("beforeinstallprompt", handleInstallPromotion, true);
     window.addEventListener("appinstalled", handleInstalled);
     return () => {
-      window.removeEventListener("beforeinstallprompt", handleInstallPromotion);
+      window.removeEventListener("beforeinstallprompt", handleInstallPromotion, true);
       window.removeEventListener("appinstalled", handleInstalled);
     };
   }, []);

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