fix various bugs on the profile page

Author: maslianok

app/profile/[login]/components/layout-left-column.tsx

@@ -76,7 +76,10 @@ export const LayoutLeftColumn: FC<LayoutLeftColumnProps> = ({ user, children, cl
         </ActionsContainer>
         <DetailsContainer>
           <div className="flex flex-col gap-1.5">
-            <ProfileListItem value={user.location} Icon={MapPin} />
+            <ProfileListItem
+              value={`${user.countryFlag ? `${user.countryFlag} ` : ''}${user.location}`}
+              Icon={MapPin}
+            />
             <ProfileListItem value={user.company} Icon={BriefcaseBusiness} />
             <ProfileListItem value={'Profile age: ' + formatDistanceToNow(user.githubCreatedAt)} Icon={Hourglass} />
             <ProfileListItem

app/profile/[login]/components/overview-cards/overview-rank-card.tsx

@@ -32,9 +32,9 @@ const CardFooterRank: FC<PropsWithChildren> = ({ children }) => {
 
 export const ProfileRankCard: FC<ProfileRankCardProps> = ({ login, ranks, tiers, country }) => {
   const { sTier, cTier, fTier, bestTier } = calculateTiers(ranks, tiers as RankTier);
-  const sRank = ranks?.s ?? ranks?.sProvisional ?? 0;
-  const cRank = ranks?.c ?? ranks?.cProvisional ?? 0;
-  const fRank = ranks?.f ?? ranks?.fProvisional ?? 0;
+  const sRank = sTier?.notRanked || sTier?.notAvailable ? 0 : ranks?.s ?? ranks?.sProvisional ?? 0;
+  const cRank = cTier?.notRanked || cTier?.notAvailable ? 0 : ranks?.c ?? ranks?.cProvisional ?? 0;
+  const fRank = fTier?.notRanked || fTier?.notAvailable ? 0 : ranks?.f ?? ranks?.fProvisional ?? 0;
 
   const getCardContent = () => {
     if (sTier?.notAvailable && cTier?.notAvailable && fTier?.notAvailable) {

app/profile/[login]/languages/components/languages-page.tsx

@@ -27,9 +27,11 @@ export const LanguagesPage: FC<OverviewPageProps> = ({ user, isGlobalContext })
     const rankProp = isGlobalContext ? 'rankGlobal' : 'rankCountry';
     const langsWithRank = langsWithScore?.filter((lang) => lang[rankProp]);
 
-    return langsWithScore?.length && !langsWithRank?.length;
+    return !!langsWithScore?.length && !langsWithRank?.length;
   }, [langsWithScore, isGlobalContext]);
 
+  const ranksAreNotAvailable = !langsWithScore?.length;
+
   if (user.fetchingStatus === 'FETCHING' && !user.avatarUrl) {
     // user is being fetched for the first time
     return <NotFound fetchingStatus={user.fetchingStatus} fetchingUpdatedAt={user.fetchingUpdatedAt} />;
@@ -50,16 +52,23 @@ export const LanguagesPage: FC<OverviewPageProps> = ({ user, isGlobalContext })
           </p>
         )}
 
-        <ProfileCardsGrid>
-          {langsWithScore?.map((language) => (
-            <LanguageRankCard
-              key={language.name}
-              language={language as UserLanguage}
-              isGlobalContext={isGlobalContext}
-              country={user.country}
-            />
-          ))}
-        </ProfileCardsGrid>
+        {ranksAreNotAvailable ? (
+          <p>
+            No language rankings yet! We parsed languages from your public repositories, but none have enough stars to
+            generate rankings. Once your projects gain stars, we&apos;ll show your top languages here.
+          </p>
+        ) : (
+          <ProfileCardsGrid>
+            {langsWithScore?.map((language) => (
+              <LanguageRankCard
+                key={language.name}
+                language={language as UserLanguage}
+                isGlobalContext={isGlobalContext}
+                country={user.country}
+              />
+            ))}
+          </ProfileCardsGrid>
+        )}
       </>
     </LayoutLeftColumn>
   );

app/profile/[login]/timeline/components/profile-timeline.tsx

@@ -24,13 +24,15 @@ type ProfileTimelineDescriptionProps = {
 
 const parseChangesetItem = (changesetItem: ChangeItemType, type: ChangeItemType) => {
   if (isObject<NonNullable<SocialAccountChangeItem>>(changesetItem)) {
-    if (!changesetItem.totalCount) {
-      return null;
+    if (changesetItem.totalCount) {
+      return changesetItem.nodes
+        ?.map((account) => `${account.provider?.toLowerCase()}: ${account.displayName}`)
+        .join('; ');
     }
 
-    return changesetItem.nodes
-      ?.map((account) => `${account.provider?.toLowerCase()}: ${account.displayName}`)
-      .join('; ');
+    if ('name' in changesetItem) {
+      return `${changesetItem.name}`;
+    }
   }
 
   if (Array.isArray(changesetItem) && type === 'repoRemoved') {

graphql/fragments/profile-base-fields.gql

@@ -5,6 +5,7 @@ fragment UserBaseFields on User {
   avatarUrl
   location
   country
+  countryFlag
   company
   email
   f

types/generated/graphql.ts

@@ -363,6 +363,7 @@ type User {
   contributedRepoCount: Int
   contributions(limit: Int, offset: Int! = 0): [Contribution!]
   country: String
+  countryFlag: String
   createdAt: DateTime!
   email: String
   f: Int

types/generated/schema.graphql

@@ -1,8 +1,9 @@
 import { PageProfileOverviewQuery } from './generated/graphql';
 
 export type SocialAccountChangeItem = NonNullable<PageProfileOverviewQuery['user']>['socialAccounts'];
+export type OrganizationChangeItem = { name?: string; login?: string };
 
-export type ChangeItemType = string | number | boolean | SocialAccountChangeItem;
+export type ChangeItemType = string | number | boolean | SocialAccountChangeItem | OrganizationChangeItem;
 
 export type ChangeSetItemType = {
   a: ChangeItemType;