From 64e90640b9e74a40a4d287cd8b6542aced1534a0 Mon Sep 17 00:00:00 2001
From: DiamondThree <857159145@qq.com>
Date: Tue, 10 Jan 2023 15:20:54 +0800
Subject: [PATCH] feat:update workspace avatar

---
 .../src/components/workspace-avatar/index.tsx | 60 ++++++++++++++-----
 .../src/components/workspace-modal/index.tsx  |  6 +-
 2 files changed, 50 insertions(+), 16 deletions(-)

diff --git a/packages/app/src/components/workspace-avatar/index.tsx b/packages/app/src/components/workspace-avatar/index.tsx
index bcb5b1aa20..494758100e 100644
--- a/packages/app/src/components/workspace-avatar/index.tsx
+++ b/packages/app/src/components/workspace-avatar/index.tsx
@@ -1,4 +1,6 @@
+import { useAppState } from '@/providers/app-state-provider';
 import { stringToColour } from '@/utils';
+import { useEffect, useState } from 'react';
 
 interface IWorkspaceAvatar {
   size: number;
@@ -9,23 +11,51 @@ interface IWorkspaceAvatar {
 export const WorkspaceAvatar = (props: IWorkspaceAvatar) => {
   const size = props.size || 20;
   const sizeStr = size + 'px';
+  const { dataCenter, currentWorkspace } = useAppState();
+  dataCenter.getBlob(currentWorkspace, props.avatar).then(res => {
+    console.log(res);
+    setAvatar(res ?? '');
+  });
+  const [avatar, setAvatar] = useState<string>(props.avatar);
+
+  useEffect(() => {
+    dataCenter.getBlob(currentWorkspace, props.avatar).then(res => {
+      setAvatar(res ?? '');
+    });
+  }, [props.avatar]);
+
   return (
     <>
-      <div
-        style={{
-          width: sizeStr,
-          height: sizeStr,
-          border: '1px solid #fff',
-          color: '#fff',
-          fontSize: Math.ceil(0.5 * size) + 'px',
-          background: stringToColour(props.name || 'AFFiNE'),
-          borderRadius: '50%',
-          textAlign: 'center',
-          lineHeight: size + 'px',
-        }}
-      >
-        {(props.name || 'AFFiNE').substring(0, 1)}
-      </div>
+      {avatar ? (
+        <div
+          style={{
+            width: sizeStr,
+            height: sizeStr,
+            border: '1px solid #fff',
+            color: '#fff',
+            borderRadius: '50%',
+            overflow: 'hidden',
+          }}
+        >
+          <img src={avatar} alt="" />
+        </div>
+      ) : (
+        <div
+          style={{
+            width: sizeStr,
+            height: sizeStr,
+            border: '1px solid #fff',
+            color: '#fff',
+            fontSize: Math.ceil(0.5 * size) + 'px',
+            background: stringToColour(props.name || 'AFFiNE'),
+            borderRadius: '50%',
+            textAlign: 'center',
+            lineHeight: size + 'px',
+          }}
+        >
+          {(props.name || 'AFFiNE').substring(0, 1)}
+        </div>
+      )}
     </>
   );
 };
diff --git a/packages/app/src/components/workspace-modal/index.tsx b/packages/app/src/components/workspace-modal/index.tsx
index 641d8fbd30..3621d22e47 100644
--- a/packages/app/src/components/workspace-modal/index.tsx
+++ b/packages/app/src/components/workspace-modal/index.tsx
@@ -67,7 +67,11 @@ export const WorkspaceModal = ({ open, onClose }: WorkspaceModalProps) => {
                           marginRight: '10px',
                         }}
                       >
-                        <WorkspaceAvatar size={50} name={item.name} />
+                        <WorkspaceAvatar
+                          size={50}
+                          name={item.name}
+                          avatar={item.avatar ?? ''}
+                        />
                       </div>
 
                       <span