Merge pull request #973 from mapswipe/fix/username-display

Fix username display on user group dashboard table

Author: frozenhelium

community-dashboard/app/components/ItemSelectInput/index.tsx

@@ -6,7 +6,7 @@ import {
     IoPeople,
     IoSearch,
 } from 'react-icons/io5';
-import { _cs } from '@togglecorp/fujs';
+import { isFalsyString, _cs } from '@togglecorp/fujs';
 import {
     useQuery,
     gql,
@@ -192,7 +192,7 @@ function ItemSelectInput<Name extends string>(props: ItemSelectInputProps<Name>)
         () => ([
             ...(usersData?.map((user) => ({
                 id: user.userId,
-                name: user.username ?? 'Unknown',
+                name: (isFalsyString(user.username) ? user.userId : user.username),
                 type: 'user' as const,
             })) ?? []),
             ...(userGroupsData?.map((userGroup) => ({

community-dashboard/app/components/MemberItem/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Link, generatePath } from 'react-router-dom';
-import { isDefined } from '@togglecorp/fujs';
+import { isDefined, isFalsyString } from '@togglecorp/fujs';
 
 import NumberOutput from '#components/NumberOutput';
 import routes from '#base/configs/routes';
@@ -27,14 +27,17 @@ function MemberItem(props: Props) {
         { userId: member.userId },
     );
 
+    // NOTE: OSM user does not have username stored
+    const memberName = isFalsyString(member.username) ? member.userId : member.username;
+
     return (
         <div className={styles.member}>
             <div className={styles.memberName}>
                 <Link
                     className={styles.link}
                     to={path}
                 >
-                    {member.username}
+                    {memberName}
                 </Link>
                 {!member.isActive && (
                     <div className={styles.inactive}>

community-dashboard/app/views/UserDashboard/index.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { gql, useQuery } from '@apollo/client';
-import { encodeDate } from '@togglecorp/fujs';
+import { encodeDate, isDefined, isFalsyString } from '@togglecorp/fujs';
 import { useParams, generatePath, Link } from 'react-router-dom';
 
 import useUrlState from '#hooks/useUrlState';
@@ -181,11 +181,22 @@ function UserDashboard(props: Props) {
 
     const filteredStats = filteredUserStats?.userStats?.filteredStats;
 
+    // NOTE: OSM user does not have username stored
+    const userName = useMemo(() => {
+        if (isDefined(userStats) && isDefined(userStats.user)) {
+            return isFalsyString(userStats.user.username)
+                ? userStats.user.userId
+                : userStats.user.username;
+        }
+
+        return null;
+    }, [userStats]);
+
     return (
         <Page
             className={className}
             variant="user"
-            heading={userStats?.user.username}
+            heading={userName}
             totalSwipes={totalSwipes}
             totalSwipesLastMonth={totalSwipesLastMonth}
             totalTimeSpent={totalSwipeTime}

community-dashboard/app/views/UserGroupDashboard/index.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useMemo, useState } from 'react';
 import { gql, useQuery, useLazyQuery } from '@apollo/client';
-import { encodeDate } from '@togglecorp/fujs';
+import { encodeDate, isFalsyString } from '@togglecorp/fujs';
 import { useParams } from 'react-router-dom';
 
 import StatsBoard from '#views/StatsBoard';
@@ -137,7 +137,7 @@ const USER_MEMBERSHIPS_EXPORT = gql`
 type UserGroupMember = NonNullable<NonNullable<NonNullable<UserGroupStatsQuery['userGroup']>['userMemberships']>['items']>[number];
 
 function memberKeySelector(member: UserGroupMember) {
-    return member.username;
+    return member.userId;
 }
 
 interface DateRangeValue {
@@ -239,7 +239,7 @@ function UserGroupDashboard(props: Props) {
                         ['User', 'Total swipes', 'Project contributed', 'Time spent(mins)'],
                         ...(newUserMembershipsData?.map((user) => (
                             [
-                                user.username,
+                                isFalsyString(user.username) ? user.userId : user.username,
                                 user.totalSwipes,
                                 user.totalMappingProjects,
                                 user.totalSwipeTime,