Client: add recent tab

packages/client/src/pages/Home/Section/Submenu/index.js

@@ -1,28 +1,52 @@
 import { inject, observer } from "mobx-react";
 
 import Submenu from "@docspace/components/submenu";
+import FilesFilter from "@docspace/common/api/files/filter";
+import { getObjectByLocation } from "@docspace/common/utils";
 
-const SectionSubmenuContent = ({ isPersonalRoom }) => {
+const SectionSubmenuContent = ({ isPersonalRoom, isRecentTab, setFilter }) => {
   const submenu = [
     {
-      id: "my-documents",
+      id: "my",
       name: "My documents",
     },
     {
-      id: "recently",
+      id: "recent",
       name: "Recently accessible via link",
     },
   ];
 
-  return isPersonalRoom ? (
-    <Submenu data={submenu} startSelect={0} onSelect={(e) => console.log(e)} />
+  const onSelect = (e) => {
+    const filter = FilesFilter.getDefault();
+    const url = window.DocSpace.location.pathname;
+
+    if (e.id === "recent") {
+      filter.folder = e.id;
+      filter.searchArea = 3;
+    } else {
+      filter.searchArea = null;
+    }
+
+    setFilter(filter);
+    window.DocSpace.navigate(`${url}?${filter.toUrlParams()}`);
+  };
+
+  const showSubmenu = isPersonalRoom || isRecentTab;
+  const startSelect =
+    getObjectByLocation(window.DocSpace.location)?.folder === "recent" ? 1 : 0;
+
+  return showSubmenu ? (
+    <Submenu data={submenu} startSelect={startSelect} onSelect={onSelect} />
   ) : null;
 };
 
-export default inject(({ treeFoldersStore }) => {
-  const { isPersonalRoom } = treeFoldersStore;
+export default inject(({ treeFoldersStore, filesStore }) => {
+  const { isPersonalRoom, isRecentTab } = treeFoldersStore;
+  const { setFilter } = filesStore;
 
   return {
     isPersonalRoom,
+    isRecentTab,
+    setFilter,
   };
 })(observer(SectionSubmenuContent));

packages/client/src/store/TreeFoldersStore.js

@@ -290,6 +290,10 @@ class TreeFoldersStore {
     return FolderType.USER === this.selectedFolderStore.rootFolderType;
   }
 
+  get isRecentTab() {
+    return this.selectedFolderStore.rootFolderType === FolderType.Recent;
+  }
+
   get selectedKeys() {
     const selectedKeys =
       this.selectedTreeNode.length > 0 &&