refactor(component): make component pure (#5427)

packages/frontend/core/src/components/pure/workspace-slider-bar/user-with-workspace-list/index.tsx

@@ -107,7 +107,7 @@ export const UserWithWorkspaceList = ({
         <SignInItem />
       )}
       <Divider size="thinner" />
-      <AFFiNEWorkspaceList workspaces={workspaces} onEventEnd={onEventEnd} />
+      <AFFiNEWorkspaceList onEventEnd={onEventEnd} />
       {workspaces.length > 0 ? <Divider size="thinner" /> : null}
       <AddWorkspace
         onAddWorkspace={onAddWorkspace}

packages/frontend/core/src/components/pure/workspace-slider-bar/user-with-workspace-list/workspace-list/index.tsx

@@ -4,8 +4,15 @@ import { WorkspaceList } from '@affine/component/workspace-list';
 import { WorkspaceFlavour, WorkspaceSubPath } from '@affine/env/workspace';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import type { WorkspaceMetadata } from '@affine/workspace';
-import { currentWorkspaceAtom } from '@affine/workspace/atom';
+import {
+  currentWorkspaceAtom,
+  workspaceListAtom,
+} from '@affine/workspace/atom';
 import type { DragEndEvent } from '@dnd-kit/core';
+import {
+  useWorkspaceAvatar,
+  useWorkspaceName,
+} from '@toeverything/hooks/use-workspace-info';
 import { useAtomValue, useSetAtom } from 'jotai';
 // eslint-disable-next-line @typescript-eslint/no-restricted-imports
 import { useSession } from 'next-auth/react';
@@ -54,6 +61,8 @@ const CloudWorkSpaceList = ({
         onSettingClick={onClickWorkspaceSetting}
         onDragEnd={onDragEnd}
         useIsWorkspaceOwner={useIsWorkspaceOwner}
+        useWorkspaceName={useWorkspaceName}
+        useWorkspaceAvatar={useWorkspaceAvatar}
       />
     </div>
   );
@@ -83,18 +92,21 @@ const LocalWorkspaces = ({
         onClick={onClickWorkspace}
         onSettingClick={onClickWorkspaceSetting}
         onDragEnd={onDragEnd}
+        useIsWorkspaceOwner={useIsWorkspaceOwner}
+        useWorkspaceName={useWorkspaceName}
+        useWorkspaceAvatar={useWorkspaceAvatar}
       />
     </div>
   );
 };
 
 export const AFFiNEWorkspaceList = ({
-  workspaces,
   onEventEnd,
 }: {
-  workspaces: WorkspaceMetadata[];
   onEventEnd?: () => void;
 }) => {
+  const workspaces = useAtomValue(workspaceListAtom);
+
   const setOpenCreateWorkspaceModal = useSetAtom(openCreateWorkspaceModalAtom);
 
   const { jumpToSubPath } = useNavigateHelper();

packages/frontend/core/src/components/root-app-sidebar/index.tsx

@@ -4,7 +4,6 @@ import {
   AppDownloadButton,
   AppSidebar,
   appSidebarOpenAtom,
-  AppUpdaterButton,
   CategoryDivider,
   MenuItem,
   MenuLinkItem,
@@ -49,6 +48,7 @@ import FavoriteList from '../pure/workspace-slider-bar/favorite/favorite-list';
 import { UserWithWorkspaceList } from '../pure/workspace-slider-bar/user-with-workspace-list';
 import { WorkspaceCard } from '../pure/workspace-slider-bar/workspace-card';
 import ImportPage from './import-page';
+import { UpdaterButton } from './updater-button';
 
 export type RootAppSidebarProps = {
   isPublicWorkspace: boolean;
@@ -299,7 +299,7 @@ export const RootAppSidebar = ({
         )}
       </SidebarScrollableContainer>
       <SidebarContainer>
-        {environment.isDesktop ? <AppUpdaterButton /> : <AppDownloadButton />}
+        {environment.isDesktop ? <UpdaterButton /> : <AppDownloadButton />}
         <div style={{ height: '4px' }} />
         <AddPageButton onClick={onClickNewPage} />
       </SidebarContainer>

packages/frontend/core/src/components/root-app-sidebar/updater-button.tsx

@@ -0,0 +1,21 @@
+import { AppUpdaterButton } from '@affine/component/app-sidebar/app-updater-button';
+import { useAppUpdater } from '@toeverything/hooks/use-app-updater';
+
+export const UpdaterButton = () => {
+  const appUpdater = useAppUpdater();
+
+  return (
+    <AppUpdaterButton
+      onQuitAndInstall={appUpdater.quitAndInstall}
+      onDownloadUpdate={appUpdater.downloadUpdate}
+      onDismissChangelog={appUpdater.dismissChangelog}
+      onOpenChangelog={appUpdater.openChangelog}
+      changelogUnread={appUpdater.changelogUnread}
+      updateReady={!!appUpdater.updateReady}
+      updateAvailable={appUpdater.updateAvailable}
+      autoDownload={appUpdater.autoDownload}
+      downloadProgress={appUpdater.downloadProgress}
+      appQuitting={appUpdater.appQuitting}
+    />
+  );
+};