feat: refresh workspaces after create and delete

packages/app/src/components/workspace-setting/general/delete/delete.tsx

@@ -13,6 +13,7 @@ import { ModalCloseButton } from '@/ui/modal';
 import { Button } from '@/ui/button';
 import { deleteWorkspace } from '@pathfinder/data-services';
 import { useRouter } from 'next/router';
+import { useAppState } from '@/providers/app-state-provider';
 
 interface WorkspaceDeleteProps {
   open: boolean;
@@ -31,6 +32,7 @@ export const WorkspaceDelete = ({
 }: WorkspaceDeleteProps) => {
   const [deleteStr, setDeleteStr] = useState<string>('');
   const router = useRouter();
+  const { refreshWorkspacesMeta } = useAppState();
 
   const handlerInputChange = (workspaceName: string) => {
     setDeleteStr(workspaceName);
@@ -39,6 +41,7 @@ export const WorkspaceDelete = ({
   const handleDelete = async () => {
     await deleteWorkspace({ id: workspaceId });
     router.push(`/workspace/${nextWorkSpaceId}`);
+    refreshWorkspacesMeta();
     onClose();
   };
 

packages/app/src/components/workspace-slider-bar/WorkspaceSelector/SelectorPopperContent.tsx

@@ -103,10 +103,8 @@ export const SelectorPopperContent = ({
       workspaces[id] = workspace;
     });
 
-    console.log('workspaces', workspaces);
-
     setWorkspaces(workspaces);
-  }, []);
+  }, [workspacesMeta]);
 
   useEffect(() => {
     if (isShow) {

packages/app/src/components/workspace-slider-bar/WorkspaceSelector/WorkspaceItem/CreateWorkspaceItem/workspace-create/workspace-create.tsx

@@ -17,6 +17,7 @@ import {
 import { useState } from 'react';
 import { ModalCloseButton } from '@/ui/modal';
 import router from 'next/router';
+import { useAppState } from '@/providers/app-state-provider';
 
 interface WorkspaceCreateProps {
   open: boolean;
@@ -34,6 +35,7 @@ const DefaultHeadImgColors = [
 export const WorkspaceCreate = ({ open, onClose }: WorkspaceCreateProps) => {
   const [workspaceName, setWorkspaceId] = useState<string>('');
   const [canCreate, setCanCreate] = useState<boolean>(false);
+  const { refreshWorkspacesMeta } = useAppState();
   const handlerInputChange = (workspaceName: string) => {
     setWorkspaceId(workspaceName);
   };
@@ -74,6 +76,7 @@ export const WorkspaceCreate = ({ open, onClose }: WorkspaceCreateProps) => {
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore
         router.push(`/workspace/${data.created_at}`);
+        refreshWorkspacesMeta();
         onClose();
       })
       .catch(err => {

packages/app/src/providers/app-state-provider/context.ts

@@ -23,6 +23,7 @@ export interface AppStateValue {
 
   editor: EditorContainer | null;
   synced: boolean;
+  refreshWorkspacesMeta: () => void;
 }
 
 export interface AppStateContext extends AppStateValue {
@@ -55,7 +56,7 @@ export const AppState = createContext<AppStateContext>({
   loadPage: () => Promise.resolve(null),
   createPage: () => Promise.resolve(null),
   synced: false,
-  // workspaces: {},
+  refreshWorkspacesMeta: () => {},
 });
 
 export const useAppState = () => {

packages/app/src/providers/app-state-provider/provider.tsx

@@ -19,6 +19,13 @@ const DynamicBlocksuite = dynamic(() => import('./dynamic-blocksuite'), {
 });
 
 export const AppStateProvider = ({ children }: { children?: ReactNode }) => {
+  const refreshWorkspacesMeta = useCallback(async () => {
+    const workspacesMeta = await getWorkspaces().catch(() => {
+      return [];
+    });
+    setState(state => ({ ...state, workspacesMeta }));
+  }, []);
+
   const [state, setState] = useState<AppStateValue>({
     user: null,
     workspacesMeta: [],
@@ -29,6 +36,7 @@ export const AppStateProvider = ({ children }: { children?: ReactNode }) => {
     // Synced is used to ensure that the provider has synced with the server,
     // So after Synced set to true, the other state is sure to be set.
     synced: false,
+    refreshWorkspacesMeta,
   });
 
   const [loadWorkspaceHandler, _setLoadWorkspaceHandler] =

packages/data-services/src/sdks/workspace.ts

@@ -155,7 +155,7 @@ export async function downloadWorkspace(
 }
 
 export async function uploadBlob(params: { blob: Blob }): Promise<string> {
-  return client.post('/api/blob', { body: params.blob }).text();
+  return client.put('/api/blob', { body: params.blob }).text();
 }
 
 export async function getBlob(params: {