From 7fe3c7ff2f069c1a5b5eae5230c260a960fb59f4 Mon Sep 17 00:00:00 2001
From: zerosoul <yanggc888@163.com>
Date: Fri, 13 May 2022 18:55:28 +0800
Subject: [PATCH] feat: remeber navs

---
 src/routes/chat/ChannelChat/index.js | 14 +++++++++++---
 src/routes/contacts/index.js         | 17 +++++++++++++----
 src/routes/home/index.js             | 16 +++++++++++++---
 3 files changed, 37 insertions(+), 10 deletions(-)

diff --git a/src/routes/chat/ChannelChat/index.js b/src/routes/chat/ChannelChat/index.js
index 98f27f36..9817d46d 100644
--- a/src/routes/chat/ChannelChat/index.js
+++ b/src/routes/chat/ChannelChat/index.js
@@ -1,9 +1,10 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { useDebounce } from "rooks";
-import { useSelector } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 import PinList from "./PinList";
 import FavList from "../FavList";
 import { useReadMessageMutation } from "../../../app/services/message";
+import { updateRemeberedNavs } from "../../../app/slices/ui";
 import useChatScroll from "../../../common/hook/useChatScroll";
 import ChannelIcon from "../../../common/component/ChannelIcon";
 import Tooltip from "../../../common/component/Tooltip";
@@ -33,11 +34,11 @@ import Tippy from "@tippyjs/react";
 export default function ChannelChat({ cid = "", dropFiles = [] }) {
   const [toolVisible, setToolVisible] = useState("");
   const { pathname } = useLocation();
+  const dispatch = useDispatch();
   const [updateReadIndex] = useReadMessageMutation();
   const updateReadDebounced = useDebounce(updateReadIndex, 300);
   const [membersVisible, setMembersVisible] = useState(true);
   const [addMemberModalVisible, setAddMemberModalVisible] = useState(false);
-  // const dispatch = useDispatch();
   const {
     selects,
     msgIds,
@@ -63,6 +64,13 @@ export default function ChannelChat({ cid = "", dropFiles = [] }) {
   // const handleClearUnreads = () => {
   //   dispatch(readMessage(msgIds));
   // };
+  useEffect(() => {
+    dispatch(updateRemeberedNavs());
+    return () => {
+      dispatch(updateRemeberedNavs({ path: pathname }));
+    };
+  }, [pathname]);
+
   const toggleMembersVisible = () => {
     setMembersVisible((prev) => !prev);
   };
diff --git a/src/routes/contacts/index.js b/src/routes/contacts/index.js
index d1d11cd6..9fba23bc 100644
--- a/src/routes/contacts/index.js
+++ b/src/routes/contacts/index.js
@@ -1,17 +1,26 @@
-// import { useState, useEffect } from "react";
-import { NavLink, useParams } from "react-router-dom";
-import { useSelector } from "react-redux";
+import { useEffect } from "react";
+import { NavLink, useParams, useLocation } from "react-router-dom";
+import { useDispatch, useSelector } from "react-redux";
+import { updateRemeberedNavs } from "../../app/slices/ui";
 import Search from "../../common/component/Search";
 import Contact from "../../common/component/Contact";
-// import CurrentUser from "../../common/component/CurrentUser";
 import Profile from "../../common/component/Profile";
 
 import StyledWrapper from "./styled";
 import BlankPlaceholder from "../../common/component/BlankPlaceholder";
 
 export default function ContactsPage() {
+  const dispatch = useDispatch();
+  const { pathname } = useLocation();
+
   const { user_id } = useParams();
   const contactIds = useSelector((store) => store.contacts.ids);
+  useEffect(() => {
+    dispatch(updateRemeberedNavs({ key: "contact" }));
+    return () => {
+      dispatch(updateRemeberedNavs({ key: "contact", path: pathname }));
+    };
+  }, [pathname]);
 
   console.log({ contactIds, user_id });
   if (!contactIds) return null;
diff --git a/src/routes/home/index.js b/src/routes/home/index.js
index 3b446dda..caf99914 100644
--- a/src/routes/home/index.js
+++ b/src/routes/home/index.js
@@ -8,8 +8,10 @@ import User from "./User";
 import Loading from "./Loading";
 import Menu from "./Menu";
 import usePreload from "./usePreload";
+import usePWABadge from "../../common/hook/usePWABadge";
 import Tooltip from "../../common/component/Tooltip";
 import Notification from "../../common/component/Notification";
+import Manifest from "../../common/component/Manifest";
 
 import ChatIcon from "../../assets/icons/chat.svg";
 import ContactIcon from "../../assets/icons/contact.svg";
@@ -17,10 +19,14 @@ import FavIcon from "../../assets/icons/bookmark.svg";
 import FolderIcon from "../../assets/icons/folder.svg";
 // const routes = ["/setting", "/setting/channel/:cid"];
 export default function HomePage() {
+  usePWABadge();
   const { pathname } = useLocation();
   const {
     loginUid,
-    ui: { ready },
+    ui: {
+      ready,
+      remeberedNavs: { chat: chatPath, contact: contactPath },
+    },
   } = useSelector((store) => {
     return {
       ui: store.ui,
@@ -41,19 +47,23 @@ export default function HomePage() {
       </>
     );
   }
+  const chatNav = chatPath || "/chat";
+  const contactNav = contactPath || "/contacts";
+
   return (
     <>
+      <Manifest />
       <Notification />
       <StyledWrapper>
         <div className={`col left`}>
           <User uid={loginUid} />
           <nav className="link_navs">
-            <NavLink className="link" to={"/chat"}>
+            <NavLink className="link" to={chatNav}>
               <Tooltip tip="Chat">
                 <ChatIcon />
               </Tooltip>
             </NavLink>
-            <NavLink className="link" to={"/contacts"}>
+            <NavLink className="link" to={contactNav}>
               <Tooltip tip="Members">
                 <ContactIcon />
               </Tooltip>