chore: back and forward buttons nav scroll fix

frontend/appflowy_tauri/package.json

@@ -9,7 +9,7 @@
     "preview": "vite preview",
     "format": "prettier --write .",
     "test:code": "eslint --max-warnings=0 --ext .js,.ts,.tsx .",
-    "test:errors": "eslint --quiet --ext .js,.ts,.tsx .",
+    "test:errors": "tsc --noEmit",
     "test:prettier": "yarn prettier --list-different src",
     "tauri:clean": "cargo make --cwd .. tauri_clean",
     "tauri:dev": "tauri dev",

frontend/appflowy_tauri/src/appflowy_app/components/layout/HeaderPanel/Breadcrumbs.tsx

@@ -2,44 +2,29 @@ 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 [activePageId, setActivePageId] = useState<string>('');
+  const currentLocation = useLocation();
   const pagesStore = useAppSelector((state) => state.pages);
   const foldersStore = useAppSelector((state) => state.folders);
-  const [pageHistory, setPageHistory] = useState<string[]>([]);
+
-  const [historyIndex, setHistoryIndex] = useState(0);
+  useEffect(() => {
+    const { pathname } = currentLocation;
+    const parts = pathname.split('/');
+    const pageId = parts[parts.length - 1];
+    setActivePageId(pageId);
+  }, [currentLocation]);
 
   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'}>
@@ -50,10 +35,10 @@ export const Breadcrumbs = ({ menuHidden, onShowMenuClick }: { menuHidden: boole
         )}
 
         <button className={'p-1'} onClick={() => history.back()}>
-          <img src={'/images/home/arrow_left.svg'} />
+          <img src={'/images/home/arrow_left.svg'} alt={''} />
         </button>
         <button className={'p-1'} onClick={() => history.forward()}>
-          <img src={'/images/home/arrow_right.svg'} />
+          <img src={'/images/home/arrow_right.svg'} alt={''} />
         </button>
       </div>
       <div className={'mr-8 flex items-center gap-4'}>

frontend/appflowy_tauri/src/appflowy_app/components/layout/NavigationPanel/FolderItem.hooks.ts

@@ -7,14 +7,12 @@ import { AppBackendService } from '../../../stores/effects/folder/app/app_bd_svc
 import { WorkspaceBackendService } from '../../../stores/effects/folder/workspace/workspace_bd_svc';
 import { useError } from '../../error/Error.hooks';
 import { AppObserver } from '../../../stores/effects/folder/app/app_observer';
-import { activePageIdActions } from '../../../stores/reducers/activePageId/slice';
 import { useNavigate } from 'react-router-dom';
 import { INITIAL_FOLDER_HEIGHT, PAGE_ITEM_HEIGHT } from '../../_shared/constants';
 
 export const useFolderEvents = (folder: IFolder, pages: IPage[]) => {
   const appDispatch = useAppDispatch();
   const workspace = useAppSelector((state) => state.workspace);
-  const foldersStore = useAppSelector((state) => state.folders);
 
   const navigate = useNavigate();
 
@@ -145,8 +143,6 @@ export const useFolderEvents = (folder: IFolder, pages: IPage[]) => {
 
       setShowPages(true);
 
-      appDispatch(activePageIdActions.setActivePageId(newView.id));
-
       navigate(`/page/document/${newView.id}`);
     } catch (e: any) {
       error.showError(e?.message);
@@ -172,8 +168,6 @@ export const useFolderEvents = (folder: IFolder, pages: IPage[]) => {
         })
       );
 
-      appDispatch(activePageIdActions.setActivePageId(newView.id));
-
       navigate(`/page/board/${newView.id}`);
     } catch (e: any) {
       error.showError(e?.message);
@@ -199,8 +193,6 @@ export const useFolderEvents = (folder: IFolder, pages: IPage[]) => {
         })
       );
 
-      appDispatch(activePageIdActions.setActivePageId(newView.id));
-
       navigate(`/page/grid/${newView.id}`);
     } catch (e: any) {
       error.showError(e?.message);

frontend/appflowy_tauri/src/appflowy_app/components/layout/NavigationPanel/NavigationPanel.hooks.ts

@@ -1,12 +1,10 @@
-import { useAppDispatch, useAppSelector } from '../../../stores/store';
+import { useAppSelector } from '../../../stores/store';
 import { useNavigate } from 'react-router-dom';
 import { IPage } from '../../../stores/reducers/pages/slice';
 import { ViewLayoutTypePB } from '../../../../services/backend';
 import { useState } from 'react';
-import { activePageIdActions } from '../../../stores/reducers/activePageId/slice';
 
 export const useNavigationPanelHooks = function () {
-  const dispatch = useAppDispatch();
   const folders = useAppSelector((state) => state.folders);
   const pages = useAppSelector((state) => state.pages);
   const width = useAppSelector((state) => state.navigationWidth);
@@ -37,8 +35,6 @@ export const useNavigationPanelHooks = function () {
       }
     })();
 
-    dispatch(activePageIdActions.setActivePageId(page.id));
-
     navigate(`/page/${pageTypeRoute}/${page.id}`);
   };
 

frontend/appflowy_tauri/src/appflowy_app/components/layout/NavigationPanel/NavigationPanel.tsx

@@ -6,9 +6,8 @@ import { NewFolderButton } from './NewFolderButton';
 import { NavigationResizer } from './NavigationResizer';
 import { IFolder } from '../../../stores/reducers/folders/slice';
 import { IPage } from '../../../stores/reducers/pages/slice';
-import { useNavigate } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom';
 import React, { useEffect, useRef, useState } from 'react';
-import { useDispatch } from 'react-redux';
 import { useAppSelector } from '../../../stores/store';
 import {
   ANIMATION_DURATION,
@@ -34,12 +33,19 @@ export const NavigationPanel = ({
   onPageClick: (page: IPage) => void;
 }) => {
   const el = useRef<HTMLDivElement>(null);
-  const dispatch = useDispatch();
   const foldersStore = useAppSelector((state) => state.folders);
   const pagesStore = useAppSelector((state) => state.pages);
-  const activePageId = useAppSelector((state) => state.activePageId);
+  const [activePageId, setActivePageId] = useState<string>('');
+  const currentLocation = useLocation();
   const [maxHeight, setMaxHeight] = useState(0);
 
+  useEffect(() => {
+    const { pathname } = currentLocation;
+    const parts = pathname.split('/');
+    const pageId = parts[parts.length - 1];
+    setActivePageId(pageId);
+  }, [currentLocation]);
+
   useEffect(() => {
     setTimeout(() => {
       if (!el.current) return;
@@ -70,7 +76,7 @@ export const NavigationPanel = ({
       const elHeight = el.current.getBoundingClientRect().height;
       const scrollTop = el.current.scrollTop;
 
-      if (scrollTop + elHeight < height) {
+      if (scrollTop + elHeight < height || scrollTop > height) {
         el.current.scrollTo({ top: height - elHeight, behavior: 'smooth' });
       }
     }, ANIMATION_DURATION);

frontend/appflowy_tauri/src/appflowy_app/components/layout/NavigationPanel/PageItem.hooks.ts

@@ -1,18 +1,27 @@
 import { IPage, pagesActions } from '../../../stores/reducers/pages/slice';
-import { useAppDispatch, useAppSelector } from '../../../stores/store';
+import { useAppDispatch } from '../../../stores/store';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { nanoid } from 'nanoid';
 import { ViewBackendService } from '../../../stores/effects/folder/view/view_bd_svc';
 import { useError } from '../../error/Error.hooks';
+import { useLocation } from 'react-router-dom';
 
 export const usePageEvents = (page: IPage) => {
   const appDispatch = useAppDispatch();
   const [showPageOptions, setShowPageOptions] = useState(false);
   const [showRenamePopup, setShowRenamePopup] = useState(false);
-  const activePageId = useAppSelector((state) => state.activePageId);
+  const [activePageId, setActivePageId] = useState<string>('');
+  const currentLocation = useLocation();
   const viewBackendService: ViewBackendService = new ViewBackendService(page.id);
   const error = useError();
 
+  useEffect(() => {
+    const { pathname } = currentLocation;
+    const parts = pathname.split('/');
+    const pageId = parts[parts.length - 1];
+    setActivePageId(pageId);
+  }, [currentLocation]);
+
   const onPageOptionsClick = () => {
     setShowPageOptions(!showPageOptions);
   };

frontend/appflowy_tauri/src/appflowy_app/stores/reducers/activePageId/slice.ts

@@ -1,12 +0,0 @@
-import { createSlice, PayloadAction } from '@reduxjs/toolkit';
-export const activePageIdSlice = createSlice({
-  name: 'activePageId',
-  initialState: '',
-  reducers: {
-    setActivePageId(state, action: PayloadAction<string>) {
-      return action.payload;
-    },
-  },
-});
-
-export const activePageIdActions = activePageIdSlice.actions;

frontend/appflowy_tauri/src/appflowy_app/stores/store.ts

@@ -16,7 +16,6 @@ import { workspaceSlice } from './reducers/workspace/slice';
 import { databaseSlice } from './reducers/database/slice';
 import { boardSlice } from './reducers/board/slice';
 import { errorSlice } from './reducers/error/slice';
-import { activePageIdSlice } from './reducers/activePageId/slice';
 
 const listenerMiddlewareInstance = createListenerMiddleware({
   onError: () => console.error,
@@ -26,7 +25,6 @@ const store = configureStore({
   reducer: {
     [foldersSlice.name]: foldersSlice.reducer,
     [pagesSlice.name]: pagesSlice.reducer,
-    [activePageIdSlice.name]: activePageIdSlice.reducer,
     [navigationWidthSlice.name]: navigationWidthSlice.reducer,
     [currentUserSlice.name]: currentUserSlice.reducer,
     [gridSlice.name]: gridSlice.reducer,