From b30eab78c48a50ba4696107ea481cf2ec325bd16 Mon Sep 17 00:00:00 2001 From: bluecloud <96812901+pitb2022@users.noreply.github.com> Date: Tue, 12 Dec 2023 03:19:55 +0800 Subject: [PATCH] Fix/badges dialog render issus (#4079) * fix(UserProfile): fix infinite loop render issue * fix(lang): fix copy --- lang/default.json | 4 ---- lang/en.json | 4 ---- lang/zh-Hans.json | 4 ---- lang/zh-Hant.json | 4 ---- .../UserProfile/AsideUserProfile/index.tsx | 8 +++++--- src/views/User/UserProfile/index.tsx | 20 ++++++------------- 6 files changed, 11 insertions(+), 33 deletions(-) diff --git a/lang/default.json b/lang/default.json index 5fe4dcda75..e89eaac675 100644 --- 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 index fddadebab2..87fa992a3e 100644 --- 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 index f23cadfac8..d7d8f75238 100644 --- 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 index 28b7e0467c..e1bcc32968 100644 --- 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 index 18dbbe52a8..e405a5ee72 100644 --- 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 index 2637a5bedb..e7ec65dae0 100644 --- 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( 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 (