From 4619af236cb4d4787a2e52bc0d227eb10ccbbc77 Mon Sep 17 00:00:00 2001
From: lin onetwo <linonetwo012@gmail.com>
Date: Mon, 1 Jan 2024 01:59:58 +0800
Subject: [PATCH] fix: acticative page flashing

---
 .../SortablePageSelectorList.tsx               |  1 -
 src/components/Sidebar.tsx                     | 18 ++----------------
 src/services/pages/hooks.ts                    |  4 +++-
 src/services/pages/index.ts                    |  4 ----
 4 files changed, 5 insertions(+), 22 deletions(-)

diff --git a/src/components/PageIconAndSelector/SortablePageSelectorList.tsx b/src/components/PageIconAndSelector/SortablePageSelectorList.tsx
index 2561e654..4fd389fc 100644
--- a/src/components/PageIconAndSelector/SortablePageSelectorList.tsx
+++ b/src/components/PageIconAndSelector/SortablePageSelectorList.tsx
@@ -42,7 +42,6 @@ export function SortablePageSelectorList({ pagesList, showSideBarText, showSideB
     >
       <SortableContext items={pageIDs} strategy={verticalListSortingStrategy}>
         {pagesList
-          .sort((a, b) => a.order - b.order)
           .map((page, index) => (
             <SortablePageSelectorButton
               key={`item-${page.id}`}
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index c9cf4ac2..f202b8e7 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -10,13 +10,11 @@ import { latestStableUpdateUrl } from '@/constants/urls';
 import { usePromiseValue } from '@/helpers/useServiceValue';
 import { IconButton as IconButtonRaw, Tooltip } from '@mui/material';
 import { usePagesListObservable } from '@services/pages/hooks';
-import { PageType } from '@services/pages/interface';
 import { usePreferenceObservable } from '@services/preferences/hooks';
 import { useUpdaterObservable } from '@services/updater/hooks';
 import { IUpdaterStatus } from '@services/updater/interface';
 import { WindowNames } from '@services/windows/WindowProperties';
 import { useWorkspacesListObservable } from '@services/workspaces/hooks';
-import { useMemo } from 'react';
 import { SortablePageSelectorList } from './PageIconAndSelector';
 
 const sideBarStyle = css`
@@ -87,18 +85,6 @@ export function SideBar(): JSX.Element {
 
   const workspacesList = useWorkspacesListObservable();
   const pagesList = usePagesListObservable();
-  const noActiveWorkspace = workspacesList?.some((workspace) => workspace.active) === false;
-  const noActiveWorkspaceAndPage = noActiveWorkspace && pagesList?.some((page) => page.active) === false;
-  // when no active workspace and no active page, the guide page is active in src/pages/index.tsx 's route. so we make sidebar icon active too.
-  const pagesListWithProperActiveStatus = useMemo(() =>
-    pagesList?.map?.((page) => {
-      if (page.type === PageType.guide) {
-        // set guide active if no active workspace and page
-        return { ...page, active: page.active || noActiveWorkspaceAndPage };
-      }
-      // active workspace has priority to show, so if a page is also active, don't show it as active because it is hidden
-      return { ...page, active: page.active && noActiveWorkspace };
-    }), [pagesList, noActiveWorkspaceAndPage, noActiveWorkspace]);
   const preferences = usePreferenceObservable();
   const updaterMetaData = useUpdaterObservable();
   if (preferences === undefined) return <div>{t('Loading')}</div>;
@@ -118,12 +104,12 @@ export function SideBar(): JSX.Element {
           showSidebarTexts={showSideBarText}
           onClick={() => void window.service.window.open(WindowNames.addWorkspace)}
         />
-        {pagesListWithProperActiveStatus === undefined
+        {pagesList === undefined
           ? <div>{t('Loading')}</div>
           : (
             <SortablePageSelectorList
               showSideBarText={showSideBarText}
-              pagesList={pagesListWithProperActiveStatus}
+              pagesList={pagesList}
               showSideBarIcon={showSideBarIcon}
             />
           )}
diff --git a/src/services/pages/hooks.ts b/src/services/pages/hooks.ts
index 6dbb0953..d8e32d5a 100644
--- a/src/services/pages/hooks.ts
+++ b/src/services/pages/hooks.ts
@@ -4,6 +4,8 @@ import { IPage } from './interface';
 
 export function usePagesListObservable(): IPage[] | undefined {
   const [pages, pagesSetter] = useState<IPage[] | undefined>();
-  useObservable(window.observables.pages.pages$, pagesSetter as any);
+  useObservable(window.observables.pages.pages$, (newPages: IPage[]) => {
+    pagesSetter(newPages.sort((a, b) => a.order - b.order));
+  });
   return pages;
 }
diff --git a/src/services/pages/index.ts b/src/services/pages/index.ts
index 07c9fa8a..ddc88260 100644
--- a/src/services/pages/index.ts
+++ b/src/services/pages/index.ts
@@ -35,8 +35,6 @@ export class Pages implements IPagesService {
   }
 
   private async updatePageSubject(): Promise<void> {
-    // DEBUG: console this.getPagesAsListSync()
-    logger.info(`updatePageSubject this.getPagesAsListSync() ${JSON.stringify(this.getPagesAsListSync())}`);
     this.pages$.next(this.getPagesAsListSync());
   }
 
@@ -78,8 +76,6 @@ export class Pages implements IPagesService {
     if (id !== PageType.wiki) {
       await this.workspaceViewService.clearActiveWorkspaceView();
     }
-    // DEBUG: console oldActivePageID === id
-    console.log(`oldActivePageID === id`, oldActivePageID, id);
     if (oldActivePageID === id) return;
     if (oldActivePageID === undefined) {
       await this.update(id, { active: true });