feat: lots of updates

src/routes/home/CurrentUser.js

@@ -6,7 +6,6 @@ import { useSelector, useDispatch } from "react-redux";
 import { useNavigate } from "react-router-dom";
 
 import { clearAuthData } from "../../app/slices/auth.data";
-
 import { useLazyLogoutQuery } from "../../app/services/auth";
 
 const StyledWrapper = styled.div`

src/routes/home/index.js

@@ -1,8 +1,9 @@
 // import React from 'react';
-// import { useState } from "react";
+// import { useEffect } from "react";
 import { Outlet, NavLink } from "react-router-dom";
 import { useSelector, useDispatch } from "react-redux";
 import { toggleMenuExpand } from "../../app/slices/ui";
+// import { setAuthData } from "../../app/slices/auth.data";
 import StyledWrapper from "./styled";
 import ServerDropList from "./ServerDropList";
 import Tools from "./Tools";
@@ -16,21 +17,37 @@ import NotificationHub from "../../common/component/NotificationHub";
 
 export default function HomePage() {
   const dispatch = useDispatch();
-  const { menuExpand, token, usersVersion } = useSelector((store) => {
+  const {
+    menuExpand,
+    authData: { token, usersVersion, afterMid },
+  } = useSelector((store) => {
     return {
-      token: store.authData.token,
-      usersVersion: store.authData.usersVersion,
+      authData: store.authData,
       menuExpand: store.ui.menuExpand,
     };
   });
-  const { data, error, success } = usePreload();
+  const { data, loading, error, success } = usePreload();
+
+  // useEffect(() => {
+  //   if (authData) {
+  //     dispatch(setAuthData(data));
+  //   }
+  // }, [authData]);
+
   const toggleExpand = () => {
     dispatch(toggleMenuExpand());
   };
   console.log({ data, error, success });
+  if (loading) {
+    return "loading";
+  }
   return (
     <>
-      <NotificationHub token={token} usersVersion={usersVersion} />
+      <NotificationHub
+        token={token}
+        usersVersion={usersVersion}
+        afterMid={afterMid}
+      />
       <StyledWrapper>
         <div className={`col left ${menuExpand ? "expand" : ""}`}>
           <ServerDropList

src/routes/home/usePreload.js

@@ -1,5 +1,9 @@
-// import React from 'react';
+import { useEffect, useState } from "react";
+import { useSelector, useDispatch } from "react-redux";
+import { useNavigate } from "react-router-dom";
 import { useGetContactsQuery } from "../../app/services/contact";
+import { clearAuthData } from "../../app/slices/auth.data";
+
 // import { useGetChannelsQuery } from "../../app/services/channel";
 import { useGetServerQuery } from "../../app/services/server";
 // pollingInterval: 0,
@@ -7,6 +11,12 @@ const querySetting = {
   refetchOnMountOrArgChange: true,
 };
 export default function usePreload() {
+  const [checked, setChecked] = useState(false);
+  const loginedUser = useSelector((store) => {
+    return store.authData.user;
+  });
+  const dispatch = useDispatch();
+  const navigate = useNavigate();
   const {
     isLoading: contactsLoading,
     isSuccess: contactsSuccess,
@@ -25,9 +35,19 @@ export default function usePreload() {
   //   isError: groupsError,
   //   data: groups,
   // } = useGetChannelsQuery(undefined, querySetting);
+  useEffect(() => {
+    if (contacts) {
+      const matchedUser = contacts.find((c) => c.uid == loginedUser.uid);
+      if (!matchedUser) {
+        dispatch(clearAuthData());
+        navigate("/login");
+      }
+      setChecked(true);
+    }
+  }, [contacts]);
 
   return {
-    loading: contactsLoading && serverLoading,
+    loading: contactsLoading || serverLoading || !checked,
     error: contactsError && serverError,
     success: contactsSuccess && serverSuccess,
     data: {