Web:Client: fix Profile and Notifications route

packages/client/src/pages/Accounts.jsx

@@ -1,14 +1,12 @@
 import React, { useEffect } from "react";
 import { inject, observer } from "mobx-react";
-import { Navigate, Routes, Route } from "react-router-dom";
+import { Navigate, Routes, Route, useLocation } from "react-router-dom";
 import ErrorBoundary from "@docspace/common/components/ErrorBoundary";
 import toastr from "@docspace/components/toast/toastr";
 import PrivateRoute from "@docspace/common/components/PrivateRoute";
 import AppLoader from "@docspace/common/components/AppLoader";
 import { /*combineUrl,*/ updateTempContent } from "@docspace/common/utils";
 import Home from "./AccountsHome";
-import Profile from "./Profile";
-import NotificationComponent from "./Notifications";
 
 import Filter from "@docspace/common/api/people/filter";
 import { showLoader, hideLoader } from "@docspace/common/utils";
@@ -26,32 +24,13 @@ const Error404Route = (props) => (
 const HomeRedirectToFilter = () => {
   const filter = Filter.getDefault();
   const urlFilter = filter.toUrlParams();
-  console.log("call");
+
   return <Navigate replace to={`/accounts/filter?${urlFilter}`} />;
 };
 
 const PeopleSection = React.memo(() => {
-  console.log("call 2");
   return (
     <Routes>
-      <Route
-        path="/view/@self"
-        element={
-          <PrivateRoute location={location}>
-            <Profile />
-          </PrivateRoute>
-        }
-      />
-
-      <Route
-        path="/view/@self/notification"
-        element={
-          <PrivateRoute location={location}>
-            <NotificationComponent />
-          </PrivateRoute>
-        }
-      />
-
       <Route
         path="/"
         element={

packages/client/src/pages/Files.jsx

@@ -30,6 +30,8 @@ import {
 
 import GlobalEvents from "../components/GlobalEvents";
 import Accounts from "./Accounts";
+import Profile from "./Profile";
+import NotificationComponent from "./Notifications";
 
 // const homepage = config.homepage;
 
@@ -184,10 +186,19 @@ const FilesSection = React.memo(({ withMainButton }) => {
       />
 
       <Route
-        path="/accounts/view/@self/*"
+        path="/accounts/view/@self"
         element={
           <PrivateRoute location={location}>
-            <Accounts />
+            <Profile />
+          </PrivateRoute>
+        }
+      />
+
+      <Route
+        path="accounts/view/@self/notification"
+        element={
+          <PrivateRoute location={location}>
+            <NotificationComponent />
           </PrivateRoute>
         }
       />
@@ -317,6 +328,8 @@ const Files = inject(({ auth, filesStore }) => {
     isEncryptionSupport,
   } = auth.settingsStore;
 
+  if (!auth.userStore.user) return;
+
   const { isVisitor } = auth.userStore.user;
 
   const withMainButton = !isVisitor;

packages/client/src/pages/Notifications/index.js

@@ -8,10 +8,11 @@ import SectionBodyContent from "./Section/Body/index";
 import SectionHeaderContent from "./Section/Header/index";
 
 const NotificationComponent = (props) => {
-  const { setSelectedNode } = props;
+  const { setSelectedNode, setFirstLoad } = props;
   const { t, ready } = useTranslation("Notifications");
 
   useEffect(() => {
+    setFirstLoad(false);
     setSelectedNode(["accounts"]);
   }, []);
 
@@ -28,10 +29,11 @@ const NotificationComponent = (props) => {
   );
 };
 
-export default inject(({ treeFoldersStore }) => {
+export default inject(({ treeFoldersStore, filesStore }) => {
   const { setSelectedNode } = treeFoldersStore;
-
+  const { setFirstLoad } = filesStore;
   return {
+    setFirstLoad,
     setSelectedNode,
   };
 })(observer(NotificationComponent));

packages/client/src/pages/Profile/index.js

@@ -18,7 +18,6 @@ class Profile extends React.Component {
     const {
       fetchProfile,
       profile,
-      location,
       t,
       setDocumentTitle,
       setFirstLoad,
@@ -28,10 +27,12 @@ class Profile extends React.Component {
       isVisitor,
       selectedTreeNode,
       setSelectedNode,
+      setFirstLoadGlobal,
     } = this.props;
     const userId = "@self";
 
     setFirstLoad(false);
+    setFirstLoadGlobal(false);
     setIsEditTargetUser(false);
 
     isVisitor
@@ -40,16 +41,16 @@ class Profile extends React.Component {
 
     setDocumentTitle(t("Common:Profile"));
     this.documentElement = document.getElementsByClassName("hidingHeader");
-    const queryString = ((location && location.search) || "").slice(1);
-    const queryParams = queryString.split("&");
-    const arrayOfQueryParams = queryParams.map((queryParam) =>
-      queryParam.split("=")
-    );
-    const linkParams = Object.fromEntries(arrayOfQueryParams);
+    // const queryString = ((location && location.search) || "").slice(1);
+    // const queryParams = queryString.split("&");
+    // const arrayOfQueryParams = queryParams.map((queryParam) =>
+    //   queryParam.split("=")
+    // );
+    // const linkParams = Object.fromEntries(arrayOfQueryParams);
 
-    if (linkParams.email_change && linkParams.email_change === "success") {
-      toastr.success(t("ChangeEmailSuccess"));
-    }
+    // if (linkParams.email_change && linkParams.email_change === "success") {
+    //   toastr.success(t("ChangeEmailSuccess"));
+    // }
     if (!profile || profile.userName !== userId) {
       setIsLoading(true);
       setLoadedProfile(false);
@@ -67,14 +68,14 @@ class Profile extends React.Component {
   }
 
   componentDidUpdate(prevProps) {
-    const { match, fetchProfile, profile, setIsLoading } = this.props;
-    const { userId } = match.params;
-    const prevUserId = prevProps.match.params.userId;
+    const { fetchProfile, profile, setIsLoading } = this.props;
+    // const { userId } = match.params;
+    // const prevUserId = prevProps.match.params.userId;
 
-    if (userId !== undefined && userId !== prevUserId) {
-      setIsLoading(true);
-      fetchProfile(userId).finally(() => setIsLoading(false));
-    }
+    // if (userId !== undefined && userId !== prevUserId) {
+    //   setIsLoading(true);
+    //   fetchProfile(userId).finally(() => setIsLoading(false));
+    // }
 
     if (profile && this.documentElement) {
       for (var i = 0; i < this.documentElement.length; i++) {
@@ -108,13 +109,13 @@ class Profile extends React.Component {
 
 Profile.propTypes = {
   fetchProfile: PropTypes.func.isRequired,
-  match: PropTypes.object.isRequired,
   profile: PropTypes.object,
   language: PropTypes.string,
 };
 
-export default inject(({ auth, peopleStore, treeFoldersStore }) => {
+export default inject(({ auth, peopleStore, filesStore, treeFoldersStore }) => {
   const { setDocumentTitle, language } = auth;
+  const { setFirstLoad: setFirstLoadGlobal } = filesStore;
   const { targetUserStore, loadingStore } = peopleStore;
   const {
     getTargetUser: fetchProfile,
@@ -125,6 +126,7 @@ export default inject(({ auth, peopleStore, treeFoldersStore }) => {
   const { setFirstLoad, setIsLoading, setLoadedProfile } = loadingStore;
   const { selectedTreeNode, setSelectedNode } = treeFoldersStore;
   return {
+    setFirstLoadGlobal,
     setDocumentTitle,
     language,
     fetchProfile,