feat(admin): use dynamic imports

thematters · Dec 7, 2023 · a79a11f · a79a11f
1 parent 6fae430
commit a79a11f
Show file tree

Hide file tree

Showing 5 changed files with 95 additions and 110 deletions.
diff --git 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
@@ -49,19 +49,21 @@ 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,
 } from './ToggleRecommendArticle/Dialog'
 
 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,24 +445,24 @@ 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 }) => ({
       openToggleRecommendDialog: openDialog,
     })
   )
 
-  return <DropdownActionsWithToggleRecommend />
+  return <WithToggleRecommend />
 }
 
 DropdownActions.fragments = fragments

diff --git 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
@@ -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,28 +248,24 @@ 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 }) => ({
       openTagEditorDialog: viewer.isFrozen ? forbid : openDialog,
     })
   )
 
-  return <DropdownActionsWithTagEditor />
+  return <WithTagEditor />
 }
 
 export default DropdownActions