From da8c39d0b68125d88a6636e4d22aff28909180ee Mon Sep 17 00:00:00 2001
From: ascarbek <ascarbek@gmail.com>
Date: Fri, 10 Mar 2023 19:50:10 +0600
Subject: [PATCH] fix: breadcrumbs

---
 .../layout/HeaderPanel/Breadcrumbs.tsx        | 49 +++++++++++++++++--
 .../NavigationPanel/NavigationPanel.tsx       |  2 -
 2 files changed, 44 insertions(+), 7 deletions(-)

diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/layout/HeaderPanel/Breadcrumbs.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/layout/HeaderPanel/Breadcrumbs.tsx
index e4258f30b3..a055e5f1c4 100644
--- a/frontend/appflowy_tauri/src/appflowy_app/components/layout/HeaderPanel/Breadcrumbs.tsx
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/layout/HeaderPanel/Breadcrumbs.tsx
@@ -1,6 +1,45 @@
 import { ShowMenuSvg } from '../../_shared/svg/ShowMenuSvg';
+import { useEffect, useState } from 'react';
+import { useAppSelector } from '../../../stores/store';
+import { useLocation } from 'react-router-dom';
+import { useDispatch } from 'react-redux';
+import { activePageIdActions } from '../../../stores/reducers/activePageId/slice';
 
 export const Breadcrumbs = ({ menuHidden, onShowMenuClick }: { menuHidden: boolean; onShowMenuClick: () => void }) => {
+  const dispatch = useDispatch();
+  const [folderName, setFolderName] = useState('');
+  const [pageName, setPageName] = useState('');
+  const activePageId = useAppSelector((state) => state.activePageId);
+  const pagesStore = useAppSelector((state) => state.pages);
+  const foldersStore = useAppSelector((state) => state.folders);
+  const [pageHistory, setPageHistory] = useState<string[]>([]);
+  const [historyIndex, setHistoryIndex] = useState(0);
+
+  useEffect(() => {
+    const page = pagesStore.find((p) => p.id === activePageId);
+    const folder = foldersStore.find((f) => f.id === page?.folderId);
+    setFolderName(folder?.title || '');
+    setPageName(page?.title || '');
+    setPageHistory([...pageHistory, activePageId]);
+  }, [pagesStore, foldersStore, activePageId]);
+
+  const currentLocation = useLocation();
+
+  useEffect(() => {
+    // if there is no active page, we should try to get the page id from the url
+    if (!activePageId?.length) {
+      const { pathname } = currentLocation;
+      const parts = pathname.split('/');
+      // `/"page"/{pageType}/{pageId}`
+      if (parts.length !== 4) return;
+
+      const pageId = parts[parts.length - 1];
+      // const pageType = parts[parts.length - 2];
+
+      dispatch(activePageIdActions.setActivePageId(pageId));
+    }
+  }, [activePageId, currentLocation]);
+
   return (
     <div className={'flex items-center'}>
       <div className={'mr-4 flex items-center'}>
@@ -13,14 +52,14 @@ export const Breadcrumbs = ({ menuHidden, onShowMenuClick }: { menuHidden: boole
         <button className={'p-1'} onClick={() => history.back()}>
           <img src={'/images/home/arrow_left.svg'} />
         </button>
-        <button className={'p-1'}>
+        <button className={'p-1'} onClick={() => history.forward()}>
           <img src={'/images/home/arrow_right.svg'} />
         </button>
       </div>
-      <div className={'flex items-center'}>
-        <span className={'mr-8'}>Getting Started</span>
-        <span className={'mr-8'}>/</span>
-        <span className={'mr-8'}>Read Me</span>
+      <div className={'mr-8 flex items-center gap-4'}>
+        <span>{folderName}</span>
+        <span>/</span>
+        <span>{pageName}</span>
       </div>
     </div>
   );
diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/layout/NavigationPanel/NavigationPanel.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/layout/NavigationPanel/NavigationPanel.tsx
index 245175391c..ede89094d9 100644
--- a/frontend/appflowy_tauri/src/appflowy_app/components/layout/NavigationPanel/NavigationPanel.tsx
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/layout/NavigationPanel/NavigationPanel.tsx
@@ -70,8 +70,6 @@ export const NavigationPanel = ({
       const elHeight = el.current.getBoundingClientRect().height;
       const scrollTop = el.current.scrollTop;
 
-      console.log(`scrollTop: ${scrollTop}, elHeight: ${elHeight.toFixed(0)}, height: ${height}`);
-
       if (scrollTop + elHeight < height) {
         el.current.scrollTo({ top: height - elHeight, behavior: 'smooth' });
       }