Fix/badges dialog render issus (#4079)

* fix(UserProfile): fix infinite loop render issue * fix(lang): fix copy
thematters · Dec 11, 2023 · b30eab7 · b30eab7
1 parent 385be1d
commit b30eab7
Show file tree

Hide file tree

Showing 6 changed files with 11 additions and 33 deletions.
diff --git a/lang/default.json b/lang/default.json
@@ -1484,10 +1484,6 @@
     "defaultMessage": "Number of readers",
     "description": "src/components/ArticleDigest/Published/FooterActions/index.tsx"
   },
-  "iIa+u8": {
-    "defaultMessage": "Badge Name",
-    "description": "src/views/User/UserProfile/BadgeNomadLabel/index.tsx"
-  },
   "icdrwy": {
     "defaultMessage": "Followed You",
     "description": "src/components/Buttons/FollowUser/FollowState.tsx"

diff --git a/lang/en.json b/lang/en.json
@@ -1484,10 +1484,6 @@
     "defaultMessage": "Number of readers",
     "description": "src/components/ArticleDigest/Published/FooterActions/index.tsx"
   },
-  "iIa+u8": {
-    "defaultMessage": "Badge Name",
-    "description": "src/views/User/UserProfile/BadgeNomadLabel/index.tsx"
-  },
   "icdrwy": {
     "defaultMessage": "Followed You",
     "description": "src/components/Buttons/FollowUser/FollowState.tsx"

diff --git a/lang/zh-Hans.json b/lang/zh-Hans.json
@@ -1484,10 +1484,6 @@
     "defaultMessage": "读者数量",
     "description": "src/components/ArticleDigest/Published/FooterActions/index.tsx"
   },
-  "iIa+u8": {
-    "defaultMessage": "徽章名称",
-    "description": "src/views/User/UserProfile/BadgeNomadLabel/index.tsx"
-  },
   "icdrwy": {
     "defaultMessage": "追踪了你",
     "description": "src/components/Buttons/FollowUser/FollowState.tsx"

diff --git a/lang/zh-Hant.json b/lang/zh-Hant.json
@@ -1484,10 +1484,6 @@
     "defaultMessage": "讀者數量",
     "description": "src/components/ArticleDigest/Published/FooterActions/index.tsx"
   },
-  "iIa+u8": {
-    "defaultMessage": "徽章名稱",
-    "description": "src/views/User/UserProfile/BadgeNomadLabel/index.tsx"
-  },
   "icdrwy": {
     "defaultMessage": "追蹤了你",
     "description": "src/components/Buttons/FollowUser/FollowState.tsx"

diff --git a/src/views/User/UserProfile/AsideUserProfile/index.tsx b/src/views/User/UserProfile/AsideUserProfile/index.tsx
@@ -1,5 +1,5 @@
 import dynamic from 'next/dynamic'
-import { useContext, useEffect } from 'react'
+import { useContext, useEffect, useState } from 'react'
 import { FormattedMessage } from 'react-intl'
 
 import {
@@ -56,6 +56,7 @@ export const AsideUserProfile = () => {
   const showBadges =
     getQuery(URL_USER_PROFILE.OPEN_NOMAD_BADGE_DIALOG.key) ===
     URL_USER_PROFILE.OPEN_NOMAD_BADGE_DIALOG.value
+  const [hasShowBadges, setHasShowBadges] = useState(false)
   const isInUserPage = isInPath('USER_ARTICLES') || isInPath('USER_COLLECTIONS')
   const isMe = !userName || viewer.userName === userName
 
@@ -256,10 +257,11 @@ export const AsideUserProfile = () => {
                 shareLink={shareLink}
               >
                 {({ openDialog }) => {
-                  if (showBadges) {
+                  if (showBadges && !hasShowBadges) {
                     setTimeout(() => {
-                      // deleteQuery(URL_USER_PROFILE.OPEN_NOMAD_BADGE_DIALOG.key)
                       openDialog()
+                      // FIXED: infinite loop render of BadgeNomadDialog
+                      setHasShowBadges(true)
                     })
                   }
                   return (

diff --git a/src/views/User/UserProfile/index.tsx b/src/views/User/UserProfile/index.tsx
@@ -1,13 +1,9 @@
 import classNames from 'classnames'
 import dynamic from 'next/dynamic'
-import { useContext, useEffect } from 'react'
+import { useContext, useEffect, useState } from 'react'
 import { FormattedMessage } from 'react-intl'
 
-import {
-  OPEN_SHOW_NOMAD_BADGE_DIALOG,
-  TEST_ID,
-  URL_USER_PROFILE,
-} from '~/common/enums'
+import { TEST_ID, URL_USER_PROFILE } from '~/common/enums'
 import { numAbbr, toPath } from '~/common/utils'
 import {
   Avatar,
@@ -53,6 +49,7 @@ export const UserProfile = () => {
   const showBadges =
     getQuery(URL_USER_PROFILE.OPEN_NOMAD_BADGE_DIALOG.key) ===
     URL_USER_PROFILE.OPEN_NOMAD_BADGE_DIALOG.value
+  const [hasShowBadges, setHasShowBadges] = useState(false)
   const isMe = !userName || viewer.userName === userName
   const { data, loading, client } = usePublicQuery<UserProfileUserPublicQuery>(
     USER_PROFILE_PUBLIC,
@@ -75,12 +72,6 @@ export const UserProfile = () => {
     })
   }, [user?.id, viewer.id])
 
-  useEffect(() => {
-    if (showBadges) {
-      window.dispatchEvent(new CustomEvent(OPEN_SHOW_NOMAD_BADGE_DIALOG))
-    }
-  }, [showBadges])
-
   /**
    * Render
    */
@@ -223,10 +214,11 @@ export const UserProfile = () => {
                 shareLink={shareLink}
               >
                 {({ openDialog }) => {
-                  if (showBadges && hasNomadBadge) {
+                  if (showBadges && hasNomadBadge && !hasShowBadges) {
                     setTimeout(() => {
-                      // deleteQuery(URL_USER_PROFILE.OPEN_NOMAD_BADGE_DIALOG.key)
                       openDialog('nomad')
+                      // FIXED: infinite loop render of BadgesDialog
+                      setHasShowBadges(true)
                     })
                   }
                   return (