Fix discord role claim & other display issues in the profile (#7468)

Author: ClementPasteau

newIDE/app/src/Profile/AuthenticatedUserProfileDetails.js

@@ -32,11 +32,6 @@ const AuthenticatedUserProfileDetails = ({
     [authenticatedUser]
   );
 
-  const hideSocials =
-    !!authenticatedUser.limits &&
-    !!authenticatedUser.limits.capabilities.classrooms &&
-    authenticatedUser.limits.capabilities.classrooms.hideSocials;
-
   return firebaseUser && profile ? (
     <ColumnStackLayout noMargin>
       {firebaseUser && !firebaseUser.emailVerified && (
@@ -57,17 +52,9 @@ const AuthenticatedUserProfileDetails = ({
         </AlertMessage>
       )}
       <ProfileDetails
-        // The firebase user is the source of truth for the emails.
-        profile={
-          authenticatedUser.profile
-            ? { ...authenticatedUser.profile, email: firebaseUser.email }
-            : null
-        }
-        subscription={authenticatedUser.subscription}
-        achievements={authenticatedUser.achievements}
+        authenticatedUser={authenticatedUser}
         onOpenChangeEmailDialog={onOpenChangeEmailDialog}
         onOpenEditProfileDialog={onOpenEditProfileDialog}
-        hideSocials={hideSocials}
       />
     </ColumnStackLayout>
   ) : (

newIDE/app/src/Profile/ProfileDetails.js

@@ -13,28 +13,22 @@ import PlaceholderLoader from '../UI/PlaceholderLoader';
 import { getGravatarUrl } from '../UI/GravatarUrl';
 import Text from '../UI/Text';
 import { I18n } from '@lingui/react';
-import PlaceholderError from '../UI/PlaceholderError';
 import RaisedButton from '../UI/RaisedButton';
-import { type Achievement } from '../Utils/GDevelopServices/Badge';
 import Window from '../Utils/Window';
 import { GDevelopGamesPlatform } from '../Utils/GDevelopServices/ApiConfigs';
 import FlatButton from '../UI/FlatButton';
 import ShareExternal from '../UI/CustomSvgIcons/ShareExternal';
 import {
   communityLinksConfig,
-  type CommunityLinks,
   syncDiscordUsername,
 } from '../Utils/GDevelopServices/User';
-import AuthenticatedUserContext from './AuthenticatedUserContext';
+import { type AuthenticatedUser } from './AuthenticatedUserContext';
 import IconButton from '../UI/IconButton';
 import Refresh from '../UI/CustomSvgIcons/Refresh';
 import Check from '../UI/CustomSvgIcons/Check';
 import { MarkdownText } from '../UI/MarkdownText';
 import useAlertDialog from '../UI/Alert/useAlertDialog';
-import {
-  canBenefitFromDiscordRole,
-  type Subscription,
-} from '../Utils/GDevelopServices/Usage';
+import { canBenefitFromDiscordRole } from '../Utils/GDevelopServices/Usage';
 import { extractGDevelopApiErrorStatusAndCode } from '../Utils/GDevelopServices/Errors';
 
 const CommunityLinksLines = ({
@@ -60,39 +54,36 @@ const CommunityLinksLines = ({
   </ColumnStackLayout>
 );
 
-type DisplayedProfile = {
-  id: string,
-  +email?: string, // the "+" allows handling both public and private profile
-  username: ?string,
-  description: ?string,
-  donateLink: ?string,
-  discordUsername: ?string,
-  githubUsername: ?string,
-  +isEmailAutogenerated?: boolean, // the "+" allows handling both public and private profile
-  +communityLinks?: CommunityLinks, // the "+" allows handling both public and private profile
-};
-
 type Props = {|
-  profile: ?DisplayedProfile,
-  subscription?: ?Subscription,
-  achievements: ?Array<Achievement>,
-  error?: ?Error,
-  onRetry?: () => void,
+  authenticatedUser: AuthenticatedUser,
   onOpenChangeEmailDialog?: () => void,
   onOpenEditProfileDialog?: () => void,
-  hideSocials?: boolean,
 |};
 
 const ProfileDetails = ({
-  profile,
-  subscription,
-  achievements,
-  error,
-  onRetry,
+  authenticatedUser,
   onOpenChangeEmailDialog,
   onOpenEditProfileDialog,
-  hideSocials,
 }: Props) => {
+  const {
+    firebaseUser,
+    achievements,
+    badges,
+    subscription,
+    getAuthorizationHeader,
+  } = authenticatedUser;
+  const profile = React.useMemo(
+    () =>
+      authenticatedUser.profile && firebaseUser
+        ? // The firebase user is the source of truth for the emails.
+          { ...authenticatedUser.profile, email: firebaseUser.email }
+        : null,
+    [authenticatedUser.profile, firebaseUser]
+  );
+  const hideSocials =
+    !!authenticatedUser.limits &&
+    !!authenticatedUser.limits.capabilities.classrooms &&
+    authenticatedUser.limits.capabilities.classrooms.hideSocials;
   const email = profile ? profile.email : null;
   const donateLink = profile ? profile.donateLink : null;
   const discordUsername = profile ? profile.discordUsername : null;
@@ -112,26 +103,34 @@ const ProfileDetails = ({
   const redditUsername = profile ? communityLinks.redditUsername : null;
   const snapchatUsername = profile ? communityLinks.snapchatUsername : null;
   const discordServerLink = profile ? communityLinks.discordServerLink : null;
-  const { getAuthorizationHeader } = React.useContext(AuthenticatedUserContext);
   const { showAlert } = useAlertDialog();
   const githubStarAchievement =
     (achievements &&
       achievements.find(achievement => achievement.id === 'github-star')) ||
     null;
+  const hasGithubBadge =
+    !!badges && badges.some(badge => badge.achievementId === 'github-star');
   const tiktokFollowAchievement =
     (achievements &&
       achievements.find(achievement => achievement.id === 'tiktok-follow')) ||
     null;
+  const hasTiktokBadge =
+    !!badges && badges.some(badge => badge.achievementId === 'tiktok-follow');
   const twitterFollowAchievement =
     (achievements &&
       achievements.find(achievement => achievement.id === 'twitter-follow')) ||
     null;
+  const hasTwitterBadge =
+    !!badges && badges.some(badge => badge.achievementId === 'twitter-follow');
   const youtubeSubscriptionAchievement =
     (achievements &&
       achievements.find(
         achievement => achievement.id === 'youtube-subscription'
       )) ||
     null;
+  const hasYoutubeBadge =
+    !!badges &&
+    badges.some(badge => badge.achievementId === 'youtube-subscription');
 
   const [
     discordUsernameSyncStatus,
@@ -176,16 +175,6 @@ const ProfileDetails = ({
 
   const canUserBenefitFromDiscordRole = canBenefitFromDiscordRole(subscription);
 
-  if (error)
-    return (
-      <PlaceholderError onRetry={onRetry}>
-        <Trans>
-          Unable to load the profile, please verify your internet connection or
-          try again later.
-        </Trans>
-      </PlaceholderError>
-    );
-
   if (!profile) {
     return <PlaceholderLoader />;
   }
@@ -280,70 +269,74 @@ const ProfileDetails = ({
                 <CommunityLinksLines
                   communityLinks={[
                     {
-                      text: !githubUsername ? (
-                        <MarkdownText
-                          translatableSource={communityLinksConfig.githubUsername.getRewardMessage(
-                            false,
-                            githubStarAchievement &&
-                              githubStarAchievement.rewardValueInCredits
-                              ? githubStarAchievement.rewardValueInCredits.toString()
-                              : '-'
-                          )}
-                        />
-                      ) : (
-                        githubUsername
-                      ),
+                      text:
+                        !githubUsername && !hasGithubBadge ? (
+                          <MarkdownText
+                            translatableSource={communityLinksConfig.githubUsername.getRewardMessage(
+                              false,
+                              githubStarAchievement &&
+                                githubStarAchievement.rewardValueInCredits
+                                ? githubStarAchievement.rewardValueInCredits.toString()
+                                : '-'
+                            )}
+                          />
+                        ) : (
+                          githubUsername
+                        ),
                       isNotFilled: !githubUsername,
                       icon: communityLinksConfig.githubUsername.icon,
                     },
                     {
-                      text: !twitterUsername ? (
-                        <MarkdownText
-                          translatableSource={communityLinksConfig.twitterUsername.getRewardMessage(
-                            false,
-                            twitterFollowAchievement &&
-                              twitterFollowAchievement.rewardValueInCredits
-                              ? twitterFollowAchievement.rewardValueInCredits.toString()
-                              : '-'
-                          )}
-                        />
-                      ) : (
-                        twitterUsername
-                      ),
+                      text:
+                        !twitterUsername && !hasTwitterBadge ? (
+                          <MarkdownText
+                            translatableSource={communityLinksConfig.twitterUsername.getRewardMessage(
+                              false,
+                              twitterFollowAchievement &&
+                                twitterFollowAchievement.rewardValueInCredits
+                                ? twitterFollowAchievement.rewardValueInCredits.toString()
+                                : '-'
+                            )}
+                          />
+                        ) : (
+                          twitterUsername
+                        ),
                       isNotFilled: !twitterUsername,
                       icon: communityLinksConfig.twitterUsername.icon,
                     },
                     {
-                      text: !youtubeUsername ? (
-                        <MarkdownText
-                          translatableSource={communityLinksConfig.youtubeUsername.getRewardMessage(
-                            false,
-                            youtubeSubscriptionAchievement &&
-                              youtubeSubscriptionAchievement.rewardValueInCredits
-                              ? youtubeSubscriptionAchievement.rewardValueInCredits.toString()
-                              : '-'
-                          )}
-                        />
-                      ) : (
-                        youtubeUsername
-                      ),
+                      text:
+                        !youtubeUsername && !hasYoutubeBadge ? (
+                          <MarkdownText
+                            translatableSource={communityLinksConfig.youtubeUsername.getRewardMessage(
+                              false,
+                              youtubeSubscriptionAchievement &&
+                                youtubeSubscriptionAchievement.rewardValueInCredits
+                                ? youtubeSubscriptionAchievement.rewardValueInCredits.toString()
+                                : '-'
+                            )}
+                          />
+                        ) : (
+                          youtubeUsername
+                        ),
                       isNotFilled: !youtubeUsername,
                       icon: communityLinksConfig.youtubeUsername.icon,
                     },
                     {
-                      text: !tiktokUsername ? (
-                        <MarkdownText
-                          translatableSource={communityLinksConfig.tiktokUsername.getRewardMessage(
-                            false,
-                            tiktokFollowAchievement &&
-                              tiktokFollowAchievement.rewardValueInCredits
-                              ? tiktokFollowAchievement.rewardValueInCredits.toString()
-                              : '-'
-                          )}
-                        />
-                      ) : (
-                        tiktokUsername
-                      ),
+                      text:
+                        !tiktokUsername && !hasTiktokBadge ? (
+                          <MarkdownText
+                            translatableSource={communityLinksConfig.tiktokUsername.getRewardMessage(
+                              false,
+                              tiktokFollowAchievement &&
+                                tiktokFollowAchievement.rewardValueInCredits
+                                ? tiktokFollowAchievement.rewardValueInCredits.toString()
+                                : '-'
+                            )}
+                          />
+                        ) : (
+                          tiktokUsername
+                        ),
                       isNotFilled: !tiktokUsername,
                       icon: communityLinksConfig.tiktokUsername.icon,
                     },