From a79a11faeb4133af927ad67bf41c82fd0cefadb9 Mon Sep 17 00:00:00 2001
From: robertu <4065233+robertu7@users.noreply.github.com>
Date: Thu, 7 Dec 2023 20:31:53 +0800
Subject: [PATCH] feat(admin): use dynamic imports

---
 .../ToggleRecommendArticle/Dialog.tsx         | 10 ---
 .../ArticleDigest/DropdownActions/index.tsx   | 70 ++++++++-----------
 .../Comment/DropdownActions/index.tsx         | 20 +++---
 src/views/TagDetail/DropdownActions/index.tsx | 37 +++++-----
 .../UserProfile/DropdownActions/index.tsx     | 68 ++++++++++--------
 5 files changed, 95 insertions(+), 110 deletions(-)

diff --git a/src/components/ArticleDigest/DropdownActions/ToggleRecommendArticle/Dialog.tsx b/src/components/ArticleDigest/DropdownActions/ToggleRecommendArticle/Dialog.tsx
index 717a8bb67b..0a16c5e0d1 100644
--- a/src/components/ArticleDigest/DropdownActions/ToggleRecommendArticle/Dialog.tsx
+++ b/src/components/ArticleDigest/DropdownActions/ToggleRecommendArticle/Dialog.tsx
@@ -134,13 +134,3 @@ const ToggleRecommendArticleDialog = ({
 }
 
 export default ToggleRecommendArticleDialog
-
-// const LazyToggleRecommendArticleDialog = (
-//   props: ToggleRecommendArticleDialogProps
-// ) => (
-//   <Dialog.Lazy mounted={<ToggleRecommendArticleDialog {...props} />}>
-//     {({ openDialog }) => <>{props.children({ openDialog })}</>}
-//   </Dialog.Lazy>
-// )
-
-// export default LazyToggleRecommendArticleDialog
diff --git a/src/components/ArticleDigest/DropdownActions/index.tsx b/src/components/ArticleDigest/DropdownActions/index.tsx
index 6ec9db44e6..838e04071f 100644
--- a/src/components/ArticleDigest/DropdownActions/index.tsx
+++ b/src/components/ArticleDigest/DropdownActions/index.tsx
@@ -49,7 +49,6 @@ import SetTagUnselectedButton from './SetTagUnselectedButton'
 import SetTopCollectionButton from './SetTopCollectionButton'
 import ShareButton from './ShareButton'
 import styles from './styles.module.css'
-import ToggleRecommendArticle from './ToggleRecommendArticle'
 import type {
   OpenToggleRecommendArticleDialogWithProps,
   ToggleRecommendArticleDialogProps,
@@ -57,11 +56,14 @@ import type {
 
 const isAdminView = process.env.NEXT_PUBLIC_ADMIN_VIEW === 'true'
 
+const DynamicToggleRecommendArticleButton = dynamic(
+  () => import('./ToggleRecommendArticle/Button'),
+  { loading: () => <Spinner /> }
+)
+
 const DynamicToggleRecommendArticleDialog = dynamic(
   () => import('./ToggleRecommendArticle/Dialog'),
-  {
-    loading: () => <Spinner />,
-  }
+  { loading: () => <Spinner /> }
 )
 
 export interface DropdownActionsControls {
@@ -269,12 +271,12 @@ const BaseDropdownActions = ({
       {isAdminView && viewer.isAdmin && (
         <>
           <Menu.Divider />
-          <ToggleRecommendArticle.Button
+          <DynamicToggleRecommendArticleButton
             id={article.id}
             type="icymi"
             openDialog={openToggleRecommendDialog}
           />
-          <ToggleRecommendArticle.Button
+          <DynamicToggleRecommendArticleButton
             id={article.id}
             type="hottestAndNewest"
             openDialog={openToggleRecommendDialog}
@@ -392,60 +394,46 @@ const DropdownActions = (props: DropdownActionsProps) => {
     return null
   }
 
-  const DropdownActionsWithShareDialog = withDialog<
-    Omit<ShareDialogProps, 'children'>
-  >(
+  const WithShareDialog = withDialog<Omit<ShareDialogProps, 'children'>>(
     BaseDropdownActions,
     ShareDialog,
     { path: props.sharePath },
     ({ openDialog }) => ({ ...props, ...controls, openShareDialog: openDialog })
   )
-  const DropdownActionsWithFingerprint = withDialog<
-    Omit<FingerprintDialogProps, 'children'>
-  >(
-    DropdownActionsWithShareDialog,
+  const WithFingerprint = withDialog<Omit<FingerprintDialogProps, 'children'>>(
+    WithShareDialog,
     FingerprintDialog,
     { article },
     ({ openDialog }) => ({ openFingerprintDialog: openDialog })
   )
-  const DropdownActionsWithAppreciators = withDialog<
+  const WithAppreciators = withDialog<
     Omit<AppreciatorsDialogProps, 'children'>
-  >(
-    DropdownActionsWithFingerprint,
-    AppreciatorsDialog,
-    { article },
-    ({ openDialog }) => ({ openAppreciatorsDialog: openDialog })
-  )
-  const DropdownActionsWithSupporters = withDialog<
-    Omit<SupportersDialogProps, 'children'>
-  >(
-    DropdownActionsWithAppreciators,
+  >(WithFingerprint, AppreciatorsDialog, { article }, ({ openDialog }) => ({
+    openAppreciatorsDialog: openDialog,
+  }))
+  const WithSupporters = withDialog<Omit<SupportersDialogProps, 'children'>>(
+    WithAppreciators,
     SupportersDialog,
     { article },
     ({ openDialog }) => ({ openSupportersDialog: openDialog })
   )
-  const DropdownActionsWithArchiveArticle = withDialog<
+  const WithArchiveArticle = withDialog<
     Omit<ArchiveArticleDialogProps, 'children'>
-  >(
-    DropdownActionsWithSupporters,
-    ArchiveArticle.Dialog,
-    { article },
-    ({ openDialog }) => ({
-      openArchiveDialog: viewer.isFrozen ? forbid : openDialog,
-    })
-  )
-  const DropdownActionsWithAddCollectionsArticle = withDialog<
+  >(WithSupporters, ArchiveArticle.Dialog, { article }, ({ openDialog }) => ({
+    openArchiveDialog: viewer.isFrozen ? forbid : openDialog,
+  }))
+  const WithAddCollectionsArticle = withDialog<
     Omit<AddCollectionsArticleDialogProps, 'children'>
   >(
-    DropdownActionsWithArchiveArticle,
+    WithArchiveArticle,
     AddCollectionsArticleDialog,
     { articleId: article.id },
     ({ openDialog }) => ({ openAddCollectionsArticleDialog: openDialog })
   )
-  const DropdownActionsWithRemoveArticleCollection = withDialog<
+  const WithRemoveArticleCollection = withDialog<
     Omit<RemoveArticleCollectionDialogProps, 'children'>
   >(
-    DropdownActionsWithAddCollectionsArticle,
+    WithAddCollectionsArticle,
     RemoveArticleCollectionDialog,
     {
       articleId: article.id,
@@ -457,16 +445,16 @@ const DropdownActions = (props: DropdownActionsProps) => {
 
   // exclude admin code on build
   if (!isAdminView || !viewer.isAdmin) {
-    return <DropdownActionsWithRemoveArticleCollection />
+    return <WithRemoveArticleCollection />
   }
 
   /**
    * ADMIN ONLY
    */
-  const DropdownActionsWithToggleRecommend = withDialog<
+  const WithToggleRecommend = withDialog<
     Omit<ToggleRecommendArticleDialogProps, 'children'>
   >(
-    DropdownActionsWithRemoveArticleCollection,
+    WithRemoveArticleCollection,
     DynamicToggleRecommendArticleDialog,
     { article },
     ({ openDialog }) => ({
@@ -474,7 +462,7 @@ const DropdownActions = (props: DropdownActionsProps) => {
     })
   )
 
-  return <DropdownActionsWithToggleRecommend />
+  return <WithToggleRecommend />
 }
 
 DropdownActions.fragments = fragments
diff --git a/src/components/Comment/DropdownActions/index.tsx b/src/components/Comment/DropdownActions/index.tsx
index 5f77065af0..453bbd6a17 100644
--- a/src/components/Comment/DropdownActions/index.tsx
+++ b/src/components/Comment/DropdownActions/index.tsx
@@ -231,9 +231,7 @@ const DropdownActions = (props: DropdownActionsProps) => {
     return null
   }
 
-  const DropdownActionsWithEditComment = withDialog<
-    Omit<CommentFormDialogProps, 'children'>
-  >(
+  const WithEditComment = withDialog<Omit<CommentFormDialogProps, 'children'>>(
     BaseDropdownActions,
     CommentFormDialog,
     {
@@ -252,10 +250,10 @@ const DropdownActions = (props: DropdownActionsProps) => {
       }
     }
   )
-  const DropdownActionsWithDeleteComment = withDialog<
+  const WithDeleteComment = withDialog<
     Omit<DeleteCommentDialogProps, 'children'>
   >(
-    DropdownActionsWithEditComment,
+    WithEditComment,
     DeleteComment.Dialog,
     {
       comment,
@@ -267,10 +265,8 @@ const DropdownActions = (props: DropdownActionsProps) => {
       }
     }
   )
-  const DropdownActionsWithBlockUser = withDialog<
-    Omit<BlockUserDialogProps, 'children'>
-  >(
-    DropdownActionsWithDeleteComment,
+  const WithBlockUser = withDialog<Omit<BlockUserDialogProps, 'children'>>(
+    WithDeleteComment,
     BlockUser.Dialog,
     {
       user: comment.author,
@@ -281,10 +277,10 @@ const DropdownActions = (props: DropdownActionsProps) => {
       }
     }
   )
-  const DropdownActionsWithCollapseComment = withDialog<
+  const WithCollapseComment = withDialog<
     Omit<CollapseCommentDialogProps, 'children'>
   >(
-    DropdownActionsWithBlockUser,
+    WithBlockUser,
     CollapseComment.Dialog,
     {
       comment,
@@ -297,7 +293,7 @@ const DropdownActions = (props: DropdownActionsProps) => {
     }
   )
 
-  return <DropdownActionsWithCollapseComment />
+  return <WithCollapseComment />
 }
 
 DropdownActions.fragments = fragments
diff --git a/src/views/TagDetail/DropdownActions/index.tsx b/src/views/TagDetail/DropdownActions/index.tsx
index 8db609a4f2..ca4f161ab7 100644
--- a/src/views/TagDetail/DropdownActions/index.tsx
+++ b/src/views/TagDetail/DropdownActions/index.tsx
@@ -214,19 +214,22 @@ const DropdownActions = (props: DropdownActionsProps) => {
     return null
   }
 
-  const DropdownActionsWithEditTag = withDialog<
-    Omit<EditTagDialogProps, 'children'>
-  >(BaseDropdownActions, EditTagDialog, { ...props.tag }, ({ openDialog }) => {
-    return {
-      ...props,
-      ...controls,
-      openEditTagDialog: viewer.isFrozen ? forbid : openDialog,
+  const WithEditTag = withDialog<Omit<EditTagDialogProps, 'children'>>(
+    BaseDropdownActions,
+    EditTagDialog,
+    { ...props.tag },
+    ({ openDialog }) => {
+      return {
+        ...props,
+        ...controls,
+        openEditTagDialog: viewer.isFrozen ? forbid : openDialog,
+      }
     }
-  })
-  const DropdownActionsWithSearchSelect = withDialog<
+  )
+  const WithSearchSelect = withDialog<
     Omit<SearchSelectDialogProps, 'children'>
   >(
-    DropdownActionsWithEditTag,
+    WithEditTag,
     SearchSelectDialog,
     {
       title: (
@@ -245,20 +248,16 @@ const DropdownActions = (props: DropdownActionsProps) => {
       openTagAddSelectedArticlesDialog: viewer.isFrozen ? forbid : openDialog,
     })
   )
-  const DropdownActionsWithTagLeave = withDialog<
-    Omit<TagLeaveDialogProps, 'children'>
-  >(
-    DropdownActionsWithSearchSelect,
+  const WithTagLeave = withDialog<Omit<TagLeaveDialogProps, 'children'>>(
+    WithSearchSelect,
     TagLeaveDialog,
     { ...props, id: tag.id },
     ({ openDialog }) => ({
       openTagLeaveDialog: viewer.isFrozen ? forbid : openDialog,
     })
   )
-  const DropdownActionsWithTagEditor = withDialog<
-    Omit<TagEditorDialogProps, 'children'>
-  >(
-    DropdownActionsWithTagLeave,
+  const WithTagEditor = withDialog<Omit<TagEditorDialogProps, 'children'>>(
+    WithTagLeave,
     TagEditorDialog,
     { ...props, id: tag.id },
     ({ openDialog }) => ({
@@ -266,7 +265,7 @@ const DropdownActions = (props: DropdownActionsProps) => {
     })
   )
 
-  return <DropdownActionsWithTagEditor />
+  return <WithTagEditor />
 }
 
 export default DropdownActions
diff --git a/src/views/User/UserProfile/DropdownActions/index.tsx b/src/views/User/UserProfile/DropdownActions/index.tsx
index 3714c663b1..cf415aefa5 100644
--- a/src/views/User/UserProfile/DropdownActions/index.tsx
+++ b/src/views/User/UserProfile/DropdownActions/index.tsx
@@ -1,6 +1,7 @@
 import gql from 'graphql-tag'
 import _isEmpty from 'lodash/isEmpty'
 import _pickBy from 'lodash/pickBy'
+import dynamic from 'next/dynamic'
 import { useContext } from 'react'
 import { FormattedMessage, useIntl } from 'react-intl'
 
@@ -17,6 +18,7 @@ import {
   RssFeedDialogProps,
   ShareDialog,
   ShareDialogProps,
+  Spinner,
   Translate,
   ViewerContext,
   withDialog,
@@ -29,16 +31,29 @@ import {
   DropdownActionsUserPublicFragment,
 } from '~/gql/graphql'
 
-import ArchiveUser from './ArchiveUser'
-import { ArchiveUserDialogProps } from './ArchiveUser/Dialog'
-import ToggleRestrictUser from './ToggleRestrictUser'
-import {
+import type { ArchiveUserDialogProps } from './ArchiveUser/Dialog'
+import type {
   OpenToggleRestrictUserDialogWithProps,
   ToggleRestrictUserDialogProps,
 } from './ToggleRestrictUser/Dialog'
 
 const isAdminView = process.env.NEXT_PUBLIC_ADMIN_VIEW === 'true'
 
+const DynamicToggleRestrictUserButton = dynamic(
+  () => import('./ToggleRestrictUser/Button'),
+  { loading: () => <Spinner /> }
+)
+const DynamicToggleRestrictUserDialog = dynamic(
+  () => import('./ToggleRestrictUser/Dialog'),
+  { loading: () => <Spinner /> }
+)
+const DynamicArchiveUserButton = dynamic(() => import('./ArchiveUser/Button'), {
+  loading: () => <Spinner />,
+})
+const DynamicArchiveUserDialog = dynamic(() => import('./ArchiveUser/Dialog'), {
+  loading: () => <Spinner />,
+})
+
 interface DropdownActionsProps {
   user: DropdownActionsUserPublicFragment &
     AuthorRssFeedFragment &
@@ -142,11 +157,11 @@ const BaseDropdownActions = ({
       {isAdminView && viewer.isAdmin && (
         <>
           <Menu.Divider />
-          <ToggleRestrictUser.Button
+          <DynamicToggleRestrictUserButton
             id={user.id}
             openDialog={openToggleRestrictDialog}
           />
-          <ArchiveUser.Button openDialog={openArchiveDialog} />
+          <DynamicArchiveUserButton openDialog={openArchiveDialog} />
         </>
       )}
     </Menu>
@@ -227,9 +242,7 @@ const DropdownActions = ({ user, isMe, isInAside }: DropdownActionsProps) => {
     return null
   }
 
-  const DropdownActionsWithShare = withDialog<
-    Omit<ShareDialogProps, 'children'>
-  >(
+  const WithShare = withDialog<Omit<ShareDialogProps, 'children'>>(
     BaseDropdownActions,
     ShareDialog,
     { tags: [user.displayName, user.userName].filter(Boolean) as string[] },
@@ -241,15 +254,16 @@ const DropdownActions = ({ user, isMe, isInAside }: DropdownActionsProps) => {
       openShareDialog: openDialog,
     })
   )
-  const DropdownActionsWithRssFeed = withDialog<
-    Omit<RssFeedDialogProps, 'children'>
-  >(DropdownActionsWithShare, RssFeedDialog, { user }, ({ openDialog }) => ({
-    openRssFeedDialog: openDialog,
-  }))
-  const DropdownActionsWithBlockUser = withDialog<
-    Omit<BlockUserDialogProps, 'children'>
-  >(
-    DropdownActionsWithRssFeed,
+  const WithRssFeed = withDialog<Omit<RssFeedDialogProps, 'children'>>(
+    WithShare,
+    RssFeedDialog,
+    { user },
+    ({ openDialog }) => ({
+      openRssFeedDialog: openDialog,
+    })
+  )
+  const WithBlockUser = withDialog<Omit<BlockUserDialogProps, 'children'>>(
+    WithRssFeed,
     BlockUser.Dialog,
     { user },
     ({ openDialog }) => ({ openBlockUserDialog: openDialog })
@@ -257,30 +271,28 @@ const DropdownActions = ({ user, isMe, isInAside }: DropdownActionsProps) => {
 
   // exclude admin code on build
   if (!isAdminView || !viewer.isAdmin) {
-    return <DropdownActionsWithBlockUser />
+    return <WithBlockUser />
   }
 
   /**
    * ADMIN ONLY
    */
-  const DropdownActionsWithToggleRestrict = withDialog<
+  const WithToggleRestrict = withDialog<
     Omit<ToggleRestrictUserDialogProps, 'children'>
   >(
-    DropdownActionsWithBlockUser,
-    ToggleRestrictUser.Dialog,
+    WithBlockUser,
+    DynamicToggleRestrictUserDialog,
     { id: user.id, userName: user.userName! },
     ({ openDialog }) => ({ openToggleRestrictDialog: openDialog })
   )
-  const DropdownActionsWithArchiveUser = withDialog<
-    Omit<ArchiveUserDialogProps, 'children'>
-  >(
-    DropdownActionsWithToggleRestrict,
-    ArchiveUser.Dialog,
+  const WithArchiveUser = withDialog<Omit<ArchiveUserDialogProps, 'children'>>(
+    WithToggleRestrict,
+    DynamicArchiveUserDialog,
     { id: user.id, userName: user.userName! },
     ({ openDialog }) => ({ openArchiveDialog: openDialog })
   )
 
-  return <DropdownActionsWithArchiveUser />
+  return <WithArchiveUser />
 }
 
 DropdownActions.fragments = fragments