fix: apply user name getter in whole places

taskany-inc · Sep 28, 2023 · 553c257 · 553c257
1 parent 5481285
commit 553c257
Show file tree

Hide file tree

Showing 9 changed files with 91 additions and 49 deletions.
diff --git a/src/components/DashboardPage/DashboardPage.tsx b/src/components/DashboardPage/DashboardPage.tsx
@@ -23,6 +23,7 @@ import { useGoalPreview } from '../GoalPreview/GoalPreviewProvider';
 import { useFMPMetric } from '../../utils/telemetry';
 import { LoadMoreButton } from '../LoadMoreButton/LoadMoreButton';
 import { InlineCreateGoalControl } from '../InlineCreateGoalControl/InlineCreateGoalControl';
+import { getUserName } from '../../utils/getUserName';
 
 import { tr } from './DashboardPage.i18n';
 
@@ -144,10 +145,10 @@ export const DashboardPage = ({ user, ssrTime, defaultPresetFallback }: External
         <PageTitlePreset
             activityId={user.activityId}
             currentPresetActivityId={currentPreset?.activityId}
-            currentPresetActivityUserName={currentPreset?.activity?.user?.name}
+            currentPresetActivityUserName={getUserName(currentPreset?.activity?.user)}
             currentPresetTitle={currentPreset?.title}
             shadowPresetActivityId={shadowPreset?.activityId}
-            shadowPresetActivityUserName={shadowPreset?.activity?.user?.name}
+            shadowPresetActivityUserName={getUserName(shadowPreset?.activity?.user)}
             shadowPresetId={shadowPreset?.id}
             shadowPresetTitle={shadowPreset?.title}
             title={tr('Dashboard')}

diff --git a/src/components/FiltersPanel/FiltersPanel.tsx b/src/components/FiltersPanel/FiltersPanel.tsx
@@ -30,6 +30,7 @@ import { SortFilter } from '../SortFilter/SortFilter';
 import { StarredFilter } from '../StarredFilter/StarredFilter';
 import { WatchingFilter } from '../WatchingFilter/WatchingFilter';
 import { FilterPopup } from '../FilterPopup/FilterPopup';
+import { getUserName } from '../../utils/getUserName';
 
 import { tr } from './FiltersPanel.i18n';
 
@@ -40,7 +41,7 @@ function mapUserToView(list: ActivityByIdReturnType[]): Users {
         if (user != null && user.activityId) {
             acc.push({
                 id: user.activityId,
-                name: user.name,
+                name: getUserName(user),
                 email: user.email,
                 image: user.image,
             });

diff --git a/src/components/GoalsPage/GoalsPage.tsx b/src/components/GoalsPage/GoalsPage.tsx
@@ -22,6 +22,7 @@ import { Nullish } from '../../types/void';
 import { PageTitlePreset } from '../PageTitlePreset/PageTitlePreset';
 import { useGoalPreview } from '../GoalPreview/GoalPreviewProvider';
 import { useFMPMetric } from '../../utils/telemetry';
+import { getUserName } from '../../utils/getUserName';
 
 import { tr } from './GoalsPage.i18n';
 
@@ -144,10 +145,10 @@ export const GoalsPage = ({ user, ssrTime, defaultPresetFallback }: ExternalPage
         <PageTitlePreset
             activityId={user.activityId}
             currentPresetActivityId={currentPreset?.activityId}
-            currentPresetActivityUserName={currentPreset?.activity?.user?.name}
+            currentPresetActivityUserName={getUserName(currentPreset?.activity?.user)}
             currentPresetTitle={currentPreset?.title}
             shadowPresetActivityId={shadowPreset?.activityId}
-            shadowPresetActivityUserName={shadowPreset?.activity?.user?.name}
+            shadowPresetActivityUserName={getUserName(shadowPreset?.activity?.user)}
             shadowPresetId={shadowPreset?.id}
             shadowPresetTitle={shadowPreset?.title}
             title={tr('Goals')}

diff --git a/src/components/HistoryRecord/HistoryRecord.tsx b/src/components/HistoryRecord/HistoryRecord.tsx
@@ -16,6 +16,7 @@ import { HistoryAction, HistoryRecordSubject } from '../../types/history';
 import { calculateDiffBetweenArrays } from '../../utils/calculateDiffBetweenArrays';
 import { Circle, CircledIcon } from '../Circle';
 import { useLocale } from '../../hooks/useLocale';
+import { getUserName } from '../../utils/getUserName';
 
 import { tr } from './HistoryRecord.i18n';
 
@@ -234,9 +235,11 @@ export const HistoryRecord: React.FC<HistoryRecordProps> = ({ author, subject, a
                 <StyledHistoryRecordWrapper>
                     <UserPic size={18} src={author?.image} email={author?.email} />
                     <StyledTextWrapper multiline={subject.toString() === 'description'}>
-                        <Text size="xs" weight="bold">
-                            {author?.nickname ?? author?.name ?? author?.email}
-                        </Text>
+                        {nullable(author, (data) => (
+                            <Text size="xs" weight="bold">
+                                {getUserName(data)}
+                            </Text>
+                        ))}
 
                         <Text size="xs">
                             {translates[actionText]} {translates[subjectText]}
@@ -436,24 +439,12 @@ export const HistoryRecordParticipant: React.FC<HistoryChangeProps<Activity & {
 }) => (
     <HistorySimplifyRecord
         withPretext={false}
-        from={
-            from ? (
-                <HistoryParticipant
-                    name={from.user?.nickname ?? from.user?.name ?? from.user?.email}
-                    email={from.user?.email}
-                    pic={from.user?.image}
-                />
-            ) : null
-        }
-        to={
-            to ? (
-                <HistoryParticipant
-                    name={to.user?.nickname ?? to.user?.name ?? to.user?.email}
-                    pic={to.user?.image}
-                    email={to.user?.email}
-                />
-            ) : null
-        }
+        from={nullable(from?.user, (data) => (
+            <HistoryParticipant name={getUserName(data)} email={data.email} pic={data.image} />
+        ))}
+        to={nullable(to?.user, (data) => (
+            <HistoryParticipant name={getUserName(data)} email={data.email} pic={data.image} />
+        ))}
     />
 );
 

diff --git a/src/components/ProjectsPage/ProjectsPage.tsx b/src/components/ProjectsPage/ProjectsPage.tsx
@@ -28,6 +28,7 @@ import { WatchButton } from '../WatchButton/WatchButton';
 import { StarButton } from '../StarButton/StarButton';
 import { routes } from '../../hooks/router';
 import { pageActiveTabItem, pageTabs } from '../../utils/domObjects';
+import { getUserName } from '../../utils/getUserName';
 
 import { tr } from './ProjectsPage.i18n';
 
@@ -195,10 +196,10 @@ export const ProjectsPage = ({ user, ssrTime, params: { id }, defaultPresetFallb
         <PageTitlePreset
             activityId={user.activityId}
             currentPresetActivityId={currentPreset?.activityId}
-            currentPresetActivityUserName={currentPreset?.activity?.user?.name}
+            currentPresetActivityUserName={getUserName(currentPreset?.activity?.user)}
             currentPresetTitle={currentPreset?.title}
             shadowPresetActivityId={shadowPreset?.activityId}
-            shadowPresetActivityUserName={shadowPreset?.activity?.user?.name}
+            shadowPresetActivityUserName={getUserName(shadowPreset?.activity?.user)}
             shadowPresetId={shadowPreset?.id}
             shadowPresetTitle={shadowPreset?.title}
             title={project?.title || tr('Projects')}

diff --git a/src/components/UserBadge.tsx b/src/components/UserBadge.tsx
@@ -4,6 +4,7 @@ import { IconXCircleSolid } from '@taskany/icons';
 import { gapS, gapXs, gray8, gray9 } from '@taskany/colors';
 
 import { ActivityByIdReturnType } from '../../trpc/inferredTypes';
+import { getUserName } from '../utils/getUserName';
 
 interface UserBadgeProps {
     user?: ActivityByIdReturnType['user'];
@@ -48,9 +49,11 @@ export const UserBadge: React.FC<UserBadgeProps> = ({ user, onCleanButtonClick }
     return (
         <StyledIssuer>
             <StyledUserPick src={user?.image} email={user?.email} size={24} />
-            <Text color={gray9} size="s">
-                {user?.nickname || user?.name || user?.email}
-            </Text>
+            {nullable(user, (data) => (
+                <Text color={gray9} size="s">
+                    {getUserName(data)}
+                </Text>
+            ))}
             {nullable(onCleanButtonClick, (onClick) => (
                 <StyledCleanButton onClick={onClick} />
             ))}

diff --git a/src/components/UserComboBox.tsx b/src/components/UserComboBox.tsx
@@ -1,9 +1,10 @@
-import React, { useState, ChangeEvent, useCallback } from 'react';
+import React, { useState, ChangeEvent, useCallback, useMemo } from 'react';
 import styled from 'styled-components';
 import { Button, ComboBox, UserPic, Input, UserMenuItem, nullable } from '@taskany/bricks';
 
 import { trpc } from '../utils/trpcClient';
 import { ActivityByIdReturnType } from '../../trpc/inferredTypes';
+import { getUserName, prepareUserDataFromActivity } from '../utils/getUserName';
 
 interface UserComboBoxProps {
     text?: React.ComponentProps<typeof Button>['text'];
@@ -42,9 +43,20 @@ export const UserComboBox = React.forwardRef<HTMLDivElement, UserComboBoxProps>(
         ref,
     ) => {
         const [completionVisible, setCompletionVisibility] = useState(false);
-        const [inputState, setInputState] = useState(
-            value?.user?.name || value?.user?.email || value?.ghost?.email || query,
-        );
+        const [inputState, setInputState] = useState(() => {
+            if (value == null) {
+                return query;
+            }
+
+            const current = prepareUserDataFromActivity(value);
+            if (current != null) {
+                const existingName = getUserName(current);
+
+                return existingName;
+            }
+
+            return query;
+        });
 
         const suggestions = trpc.user.suggestions.useQuery(
             {
@@ -62,10 +74,20 @@ export const UserComboBox = React.forwardRef<HTMLDivElement, UserComboBoxProps>(
             cb();
         }, []);
 
+        const textValue = useMemo(() => {
+            if (value) {
+                const current = prepareUserDataFromActivity(value);
+
+                return current?.name || current?.email || text;
+            }
+
+            return text;
+        }, [value, text]);
+
         return (
             <ComboBox
                 ref={ref}
-                text={value?.user?.name || value?.user?.email || value?.ghost?.email || text}
+                text={textValue}
                 value={inputState}
                 visible={completionVisible}
                 disabled={disabled}
@@ -83,9 +105,11 @@ export const UserComboBox = React.forwardRef<HTMLDivElement, UserComboBoxProps>(
                             text={props.text}
                             disabled={props.disabled}
                             onClick={props.onClick}
-                            iconLeft={nullable(value, (v) => (
-                                <UserPic src={v.user?.image} email={v.user?.email || v.ghost?.email} size={16} />
-                            ))}
+                            iconLeft={nullable(value, (v) =>
+                                nullable(prepareUserDataFromActivity(v), (user) => (
+                                    <UserPic src={user?.image} email={user?.email} size={16} />
+                                )),
+                            )}
                         />
                     )
                 }
@@ -104,7 +128,7 @@ export const UserComboBox = React.forwardRef<HTMLDivElement, UserComboBoxProps>(
                 renderItem={(props) => (
                     <UserMenuItem
                         key={props.item.id}
-                        name={props.item.user?.name}
+                        name={getUserName(props.item.user)}
                         email={props.item.user?.email || props.item.ghost?.email}
                         image={props.item.user?.image}
                         focused={props.cursor === props.index}

diff --git a/src/components/UserFilter/UserFilter.tsx b/src/components/UserFilter/UserFilter.tsx
@@ -8,12 +8,13 @@ import { FilterBase } from '../FilterBase/FilterBase';
 import { FilterCheckbox } from '../FilterCheckbox';
 import { FilterTabLabel } from '../FilterTabLabel';
 import { FilterAutoCompleteInput } from '../FilterAutoCompleteInput/FilterAutoCompleteInput';
+import { getUserName } from '../../utils/getUserName';
 
 import { tr } from './UserFilter.i18n';
 
 interface User {
     id: string;
-    name: string | null;
+    name: string;
     email: string;
     image?: string | null;
 }
@@ -32,8 +33,6 @@ interface UserFilterProps {
 
 const getId = (item: User) => item.id;
 
-const pickUserName = (user: User) => user.name ?? user.email ?? 'Unknonw';
-
 export const UserFilter: React.FC<UserFilterProps> = ({
     text,
     tabName,
@@ -56,7 +55,7 @@ export const UserFilter: React.FC<UserFilterProps> = ({
         const nextUserList: User[] = [
             {
                 id: authorizedUser.id,
-                name: authorizedUser.name,
+                name: getUserName(authorizedUser),
                 email: authorizedUser.email,
                 image: authorizedUser.email,
             },
@@ -76,7 +75,7 @@ export const UserFilter: React.FC<UserFilterProps> = ({
     }, [value, users]);
 
     return (
-        <Tab name={tabName} label={<FilterTabLabel text={text} selected={values.map(pickUserName)} />}>
+        <Tab name={tabName} label={<FilterTabLabel text={text} selected={values.map(getUserName)} />}>
             <FilterBase
                 key={tabName}
                 mode="multiple"
@@ -86,7 +85,7 @@ export const UserFilter: React.FC<UserFilterProps> = ({
                 value={values}
                 onChange={onChange}
                 renderItem={({ item, checked, onItemClick }) => {
-                    let label = pickUserName(item);
+                    let label = item.name;
 
                     if (item.id === authorizedUser.activityId) {
                         label += ` (${tr('You')})`;

diff --git a/src/components/UserGroup.tsx b/src/components/UserGroup.tsx
@@ -1,13 +1,34 @@
 import { ComponentProps, useMemo } from 'react';
 import { UserGroup as UserGroupBricks } from '@taskany/bricks';
 
-import { ActivityByIdReturnType } from '../../trpc/inferredTypes';
+import { getUserName, prepareUserDataFromActivity } from '../utils/getUserName';
+
+type User = ComponentProps<typeof UserGroupBricks>['users'][number];
 
 interface UserGroupProps extends ComponentProps<typeof UserGroupBricks> {
-    users: NonNullable<ActivityByIdReturnType>[];
+    users: Array<{
+        user?: User | null;
+        ghost?: User | null;
+    }>;
 }
 
 export const UserGroup = ({ users, ...rest }: UserGroupProps) => {
-    const extractedUsers = useMemo(() => users.map((a) => a.user || a.ghost).filter(Boolean) ?? [], [users]);
+    const extractedUsers = useMemo(
+        () =>
+            users.reduce<User>((acc, activity) => {
+                const target = prepareUserDataFromActivity(activity);
+
+                if (target != null) {
+                    acc.push({
+                        email: target.email,
+                        name: getUserName(target),
+                        image: target.image,
+                    });
+                }
+
+                return acc;
+            }, []),
+        [users],
+    );
     return <UserGroupBricks users={extractedUsers} {...rest} />;
 };