Fix OSM username in user and user group dashboard

Author: puranban

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) ?? 'Unknown',
                 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, isFalsyString, isNotDefined } from '@togglecorp/fujs';
+import { isDefined, isFalsyString } from '@togglecorp/fujs';
 
 import NumberOutput from '#components/NumberOutput';
 import routes from '#base/configs/routes';

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, isNotDefined } 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 isNotDefined(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';
@@ -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,