From d89f19e542b87064b27b977e32f496a16e7ba585 Mon Sep 17 00:00:00 2001
From: MingLiang Wang <mingliangwang0o0@gmail.com>
Date: Thu, 22 Dec 2022 22:44:22 +0800
Subject: [PATCH] feat: refresh workspaces after create and delete

---
 .../workspace-setting/general/delete/delete.tsx           | 3 +++
 .../WorkspaceSelector/SelectorPopperContent.tsx           | 4 +---
 .../workspace-create/workspace-create.tsx                 | 3 +++
 packages/app/src/providers/app-state-provider/context.ts  | 3 ++-
 .../app/src/providers/app-state-provider/provider.tsx     | 8 ++++++++
 packages/data-services/src/sdks/workspace.ts              | 2 +-
 6 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/packages/app/src/components/workspace-setting/general/delete/delete.tsx b/packages/app/src/components/workspace-setting/general/delete/delete.tsx
index 385cac1600..9d6bba463a 100644
--- a/packages/app/src/components/workspace-setting/general/delete/delete.tsx
+++ b/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();
   };
 
diff --git a/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/SelectorPopperContent.tsx b/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/SelectorPopperContent.tsx
index 28ef05047a..ec8a162dd2 100644
--- a/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/SelectorPopperContent.tsx
+++ b/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) {
diff --git a/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/WorkspaceItem/CreateWorkspaceItem/workspace-create/workspace-create.tsx b/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/WorkspaceItem/CreateWorkspaceItem/workspace-create/workspace-create.tsx
index 44afbdfea9..835c3ec5e2 100644
--- a/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/WorkspaceItem/CreateWorkspaceItem/workspace-create/workspace-create.tsx
+++ b/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 => {
diff --git a/packages/app/src/providers/app-state-provider/context.ts b/packages/app/src/providers/app-state-provider/context.ts
index 406a2be566..77e62140ac 100644
--- a/packages/app/src/providers/app-state-provider/context.ts
+++ b/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 = () => {
diff --git a/packages/app/src/providers/app-state-provider/provider.tsx b/packages/app/src/providers/app-state-provider/provider.tsx
index f43c5e4006..aad9502b89 100644
--- a/packages/app/src/providers/app-state-provider/provider.tsx
+++ b/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] =
diff --git a/packages/data-services/src/sdks/workspace.ts b/packages/data-services/src/sdks/workspace.ts
index e7a88b8f50..17aa3f4e39 100644
--- a/packages/data-services/src/sdks/workspace.ts
+++ b/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: {