chore: observer app change (#1922)

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

@@ -2,10 +2,11 @@ import { foldersActions, IFolder } from '../../../stores/reducers/folders/slice'
 import { useEffect, useState } from 'react';
 import { useAppDispatch, useAppSelector } from '../../../stores/store';
 import { IPage, pagesActions } from '../../../stores/reducers/pages/slice';
-import { ViewLayoutTypePB } from '../../../../services/backend';
+import { AppPB, ViewLayoutTypePB } from '../../../../services/backend';
 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';
 
 const initialFolderHeight = 40;
 const initialPageHeight = 40;
@@ -13,19 +14,48 @@ const animationDuration = 500;
 
 export const useFolderEvents = (folder: IFolder, pages: IPage[]) => {
   const appDispatch = useAppDispatch();
+  const workspace = useAppSelector((state) => state.workspace);
 
+  // Actions
   const [showPages, setShowPages] = useState(false);
   const [showFolderOptions, setShowFolderOptions] = useState(false);
   const [showNewPageOptions, setShowNewPageOptions] = useState(false);
   const [showRenamePopup, setShowRenamePopup] = useState(false);
 
+  // UI configurations
   const [folderHeight, setFolderHeight] = useState(`${initialFolderHeight}px`);
 
-  const workspace = useAppSelector((state) => state.workspace);
+  // Observers
+  const appObserver = new AppObserver(folder.id);
 
+  // Backend services
   const appBackendService = new AppBackendService(folder.id);
   const workspaceBackendService = new WorkspaceBackendService(workspace.id || '');
+
+  // Error
   const error = useError();
+
+  useEffect(() => {
+    void appObserver.subscribe({
+      onAppChanged: (change) => {
+        if (change.ok) {
+          const app: AppPB = change.val;
+          const updatedPages: IPage[] = app.belongings.items.map((view) => ({
+            id: view.id,
+            folderId: view.app_id,
+            pageType: view.layout,
+            title: view.name,
+          }));
+          appDispatch(pagesActions.didReceivePages(updatedPages));
+        }
+      },
+    });
+    return () => {
+      // Unsubscribe when the component is unmounted.
+      void appObserver.unsubscribe();
+    };
+  }, []);
+
   useEffect(() => {
     if (showPages) {
       setFolderHeight(`${initialFolderHeight + pages.length * initialPageHeight}px`);

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

@@ -56,13 +56,10 @@ export const useNavigationPanelHooks = function () {
 
   return {
     width,
-
     folders,
     pages,
-
     navigate,
     onPageClick,
-
     onCollapseNavigationClick,
     onFixNavigationClick,
     navigationPanelFixed,

frontend/appflowy_tauri/src/appflowy_app/stores/effects/folder/app/app_observer.ts

@@ -3,11 +3,10 @@ import { AppPB, FlowyError, FolderNotification } from '../../../../../services/b
 import { ChangeNotifier } from '../../../../utils/change_notifier';
 import { FolderNotificationObserver } from '../notifications/observer';
 
-export type AppUpdateNotifyValue = Result<AppPB, FlowyError>;
+export type AppUpdateNotifyCallback = (value: Result<AppPB, FlowyError>) => void;
-export type AppUpdateNotifyCallback = (value: AppUpdateNotifyValue) => void;
 
 export class AppObserver {
-  _appNotifier = new ChangeNotifier<AppUpdateNotifyValue>();
+  _appNotifier = new ChangeNotifier<Result<AppPB, FlowyError>>();
   _listener?: FolderNotificationObserver;
 
   constructor(public readonly appId: string) {}

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

@@ -14,6 +14,14 @@ export const pagesSlice = createSlice({
   name: 'pages',
   initialState: initialState,
   reducers: {
+    didReceivePages(state, action: PayloadAction<IPage[]>) {
+      action.payload.forEach((updatedPage) => {
+        const index = state.findIndex((page) => page.id === updatedPage.id);
+        if (index !== -1) {
+          state.splice(index, 1, updatedPage);
+        }
+      });
+    },
     addPage(state, action: PayloadAction<IPage>) {
       state.push(action.payload);
     },