refactor: create collection (#3406)

apps/core/src/components/pure/workspace-slider-bar/collections/add-collection-button.tsx

@@ -3,11 +3,12 @@ import {
   EditCollectionModel,
   useCollectionManager,
 } from '@affine/component/page-list';
+import type { Collection } from '@affine/env/filter';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { PlusIcon } from '@blocksuite/icons';
 import type { Workspace } from '@blocksuite/store';
 import { uuidv4 } from '@blocksuite/store';
-import { useState } from 'react';
+import { useCallback, useState } from 'react';
 
 import { useGetPageInfoById } from '../../../../hooks/use-get-page-info';
 
@@ -22,18 +23,23 @@ export const AddCollectionButton = ({
   const setting = useCollectionManager(workspace.id);
   const t = useAFFiNEI18N();
   const [show, showUpdateCollection] = useState(false);
-  const defaultCollection = {
+  const [defaultCollection, setDefaultCollection] = useState<Collection>();
-    id: uuidv4(),
+  const handleClick = useCallback(() => {
-    name: '',
+    showUpdateCollection(true);
-    pinned: true,
+    setDefaultCollection({
-    filterList: [],
+      id: uuidv4(),
-    workspaceId: workspace.id,
+      name: '',
-  };
+      pinned: true,
+      filterList: [],
+      workspaceId: workspace.id,
+    });
+  }, [showUpdateCollection, workspace.id]);
+
   return (
     <>
       <IconButton
         data-testid="slider-bar-add-collection-button"
-        onClick={() => showUpdateCollection(true)}
+        onClick={handleClick}
         size="small"
       >
         <PlusIcon />

apps/core/src/components/workspace-header.tsx

@@ -9,7 +9,6 @@ import type { WorkspaceHeaderProps } from '@affine/env/workspace';
 import { WorkspaceFlavour, WorkspaceSubPath } from '@affine/env/workspace';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { SettingsIcon } from '@blocksuite/icons';
-import { uuidv4 } from '@blocksuite/store';
 import type { ReactElement } from 'react';
 import { useCallback } from 'react';
 
@@ -71,13 +70,9 @@ export function WorkspaceHeader({
                     currentWorkspace.blockSuiteWorkspace.meta.properties
                   }
                   getPageInfo={getPageInfoById}
-                  init={{
-                    id: uuidv4(),
-                    name: '',
-                    filterList: setting.currentCollection.filterList,
-                    workspaceId: currentWorkspaceId,
-                  }}
                   onConfirm={saveToCollection}
+                  filterList={setting.currentCollection.filterList}
+                  workspaceId={currentWorkspaceId}
                 ></SaveCollectionButton>
               ) : null}
             </div>

packages/component/src/components/page-list/view/create-collection.tsx

@@ -1,4 +1,4 @@
-import type { Collection } from '@affine/env/filter';
+import type { Collection, Filter } from '@affine/env/filter';
 import type { PropertiesMeta } from '@affine/env/filter';
 import type { GetPageInfoById } from '@affine/env/page-info';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
@@ -8,6 +8,7 @@ import {
   RemoveIcon,
   SaveIcon,
 } from '@blocksuite/icons';
+import { uuidv4 } from '@blocksuite/store';
 import { useCallback, useState } from 'react';
 
 import {
@@ -29,6 +30,15 @@ type CreateCollectionProps = {
   getPageInfo: GetPageInfoById;
   propertiesMeta: PropertiesMeta;
 };
+
+type SaveCollectionButtonProps = {
+  onConfirm: (collection: Collection) => void;
+  getPageInfo: GetPageInfoById;
+  propertiesMeta: PropertiesMeta;
+  filterList: Filter[];
+  workspaceId: string;
+};
+
 export const EditCollectionModel = ({
   init,
   onConfirm,
@@ -266,17 +276,28 @@ export const EditCollection = ({
   );
 };
 export const SaveCollectionButton = ({
-  init,
   onConfirm,
   getPageInfo,
   propertiesMeta,
-}: CreateCollectionProps) => {
+  filterList,
+  workspaceId,
+}: SaveCollectionButtonProps) => {
   const [show, changeShow] = useState(false);
+  const [init, setInit] = useState<Collection>();
+  const handleClick = useCallback(() => {
+    changeShow(true);
+    setInit({
+      id: uuidv4(),
+      name: '',
+      filterList,
+      workspaceId,
+    });
+  }, [changeShow, workspaceId, filterList]);
   const t = useAFFiNEI18N();
   return (
     <>
       <Button
-        onClick={() => changeShow(true)}
+        onClick={handleClick}
         data-testid="save-as-collection"
         icon={<SaveIcon />}
         size="large"