From d1722bc235218723b31c05ad4e10fc135bb46e1d Mon Sep 17 00:00:00 2001
From: VictorNanka <victornanka@gmail.com>
Date: Fri, 17 Mar 2023 11:27:37 +0900
Subject: [PATCH] refactor: use explicit memo import (#1596)

Co-authored-by: Himself65 <himself65@outlook.com>
---
 .../pure/workspace-avatar/index.tsx           | 115 +++++++++---------
 .../src/providers/AffineSWRConfigProvider.tsx |   5 +-
 apps/web/src/providers/ThemeProvider.tsx      |   5 +-
 3 files changed, 66 insertions(+), 59 deletions(-)

diff --git a/apps/web/src/components/pure/workspace-avatar/index.tsx b/apps/web/src/components/pure/workspace-avatar/index.tsx
index af1559cccd..bc88f166e8 100644
--- a/apps/web/src/components/pure/workspace-avatar/index.tsx
+++ b/apps/web/src/components/pure/workspace-avatar/index.tsx
@@ -1,5 +1,6 @@
 import { UNTITLED_WORKSPACE_NAME } from '@affine/env';
-import React from 'react';
+import type React from 'react';
+import { memo } from 'react';
 
 import { useBlockSuiteWorkspaceAvatarUrl } from '../../../hooks/use-blocksuite-workspace-avatar-url';
 import type { BlockSuiteWorkspace, RemWorkspace } from '../../../shared';
@@ -12,61 +13,65 @@ interface AvatarProps {
   style?: React.CSSProperties;
 }
 
-export const Avatar: React.FC<AvatarProps> = React.memo<AvatarProps>(
-  function Avatar({ size: _size, avatar_url, style, name, ...props }) {
-    const size = _size || 20;
-    const sizeStr = size + 'px';
+export const Avatar: React.FC<AvatarProps> = memo<AvatarProps>(function Avatar({
+  size: _size,
+  avatar_url,
+  style,
+  name,
+  ...props
+}) {
+  const size = _size || 20;
+  const sizeStr = size + 'px';
 
-    return (
-      <>
-        {avatar_url ? (
-          <div
-            {...props}
-            style={{
-              ...style,
-              width: sizeStr,
-              height: sizeStr,
-              color: '#fff',
-              borderRadius: '50%',
-              overflow: 'hidden',
-              display: 'inline-block',
-              verticalAlign: 'middle',
-            }}
-          >
-            <picture>
-              <img
-                style={{ width: sizeStr, height: sizeStr }}
-                src={avatar_url}
-                alt=""
-                referrerPolicy="no-referrer"
-              />
-            </picture>
-          </div>
-        ) : (
-          <div
-            {...props}
-            style={{
-              ...style,
-              width: sizeStr,
-              height: sizeStr,
-              border: '1px solid #fff',
-              color: '#fff',
-              fontSize: Math.ceil(0.5 * size) + 'px',
-              background: stringToColour(name || 'AFFiNE'),
-              borderRadius: '50%',
-              display: 'inline-flex',
-              lineHeight: '1',
-              justifyContent: 'center',
-              alignItems: 'center',
-            }}
-          >
-            {(name || 'AFFiNE').substring(0, 1)}
-          </div>
-        )}
-      </>
-    );
-  }
-);
+  return (
+    <>
+      {avatar_url ? (
+        <div
+          {...props}
+          style={{
+            ...style,
+            width: sizeStr,
+            height: sizeStr,
+            color: '#fff',
+            borderRadius: '50%',
+            overflow: 'hidden',
+            display: 'inline-block',
+            verticalAlign: 'middle',
+          }}
+        >
+          <picture>
+            <img
+              style={{ width: sizeStr, height: sizeStr }}
+              src={avatar_url}
+              alt=""
+              referrerPolicy="no-referrer"
+            />
+          </picture>
+        </div>
+      ) : (
+        <div
+          {...props}
+          style={{
+            ...style,
+            width: sizeStr,
+            height: sizeStr,
+            border: '1px solid #fff',
+            color: '#fff',
+            fontSize: Math.ceil(0.5 * size) + 'px',
+            background: stringToColour(name || 'AFFiNE'),
+            borderRadius: '50%',
+            display: 'inline-flex',
+            lineHeight: '1',
+            justifyContent: 'center',
+            alignItems: 'center',
+          }}
+        >
+          {(name || 'AFFiNE').substring(0, 1)}
+        </div>
+      )}
+    </>
+  );
+});
 
 export type WorkspaceUnitAvatarProps = {
   size?: number;
diff --git a/apps/web/src/providers/AffineSWRConfigProvider.tsx b/apps/web/src/providers/AffineSWRConfigProvider.tsx
index 1612171005..1f79304086 100644
--- a/apps/web/src/providers/AffineSWRConfigProvider.tsx
+++ b/apps/web/src/providers/AffineSWRConfigProvider.tsx
@@ -1,4 +1,5 @@
-import React from 'react';
+import type React from 'react';
+import { memo } from 'react';
 import type { SWRConfiguration } from 'swr';
 import { SWRConfig } from 'swr';
 
@@ -9,7 +10,7 @@ const config: SWRConfiguration = {
   fetcher,
 };
 
-export const AffineSWRConfigProvider = React.memo<React.PropsWithChildren>(
+export const AffineSWRConfigProvider = memo<React.PropsWithChildren>(
   function AffineSWRConfigProvider({ children }) {
     return <SWRConfig value={config}>{children}</SWRConfig>;
   }
diff --git a/apps/web/src/providers/ThemeProvider.tsx b/apps/web/src/providers/ThemeProvider.tsx
index 4a0b539c87..401c2e0190 100644
--- a/apps/web/src/providers/ThemeProvider.tsx
+++ b/apps/web/src/providers/ThemeProvider.tsx
@@ -8,13 +8,14 @@ import {
 import { GlobalStyles } from '@mui/material';
 import { ThemeProvider as NextThemeProvider, useTheme } from 'next-themes';
 import type { PropsWithChildren } from 'react';
-import React, { memo, useEffect, useMemo, useState } from 'react';
+import type React from 'react';
+import { memo, useEffect, useMemo, useState } from 'react';
 
 import { useCurrentPage } from '../hooks/current/use-current-page-id';
 import { useCurrentWorkspace } from '../hooks/current/use-current-workspace';
 import { usePageMeta } from '../hooks/use-page-meta';
 
-const ThemeInjector = React.memo<{
+const ThemeInjector = memo<{
   themeStyle: AffineTheme;
 }>(function ThemeInjector({ themeStyle }) {
   return (