fix: set default avatarUrl for profiles in store, group profile relat…

…ed props
jwplayer · Oct 18, 2023 · 98116a8 · 98116a8
1 parent 296c548
commit 98116a8
Show file tree

Hide file tree

Showing 9 changed files with 52 additions and 32 deletions.
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
@@ -22,7 +22,6 @@ import Panel from '#components/Panel/Panel';
 import type { Profile } from '#types/account';
 import ProfileCircle from '#src/icons/ProfileCircle';
 import type { AccessModel } from '#types/Config';
-import defaultAvatar from '#src/assets/profiles/default_avatar.png';
 
 type TypeHeader = 'static' | 'fixed';
 
@@ -50,12 +49,15 @@ type Props = {
   supportedLanguages: LanguageDefinition[];
   currentLanguage: LanguageDefinition | undefined;
   onLanguageClick: (code: string) => void;
-  currentProfile?: Profile;
-  profiles?: Profile[];
-  profilesEnabled?: boolean;
-  selectProfile?: UseMutateFunction<unknown, unknown, { id: string; avatarUrl: string }, unknown>;
-  isSelectingProfile?: boolean;
+
   accessModel?: AccessModel;
+  profilesData?: {
+    currentProfile?: Profile;
+    profiles?: Profile[];
+    profilesEnabled?: boolean;
+    selectProfile?: UseMutateFunction<unknown, unknown, { id: string; avatarUrl: string }, unknown>;
+    isSelectingProfile?: boolean;
+  };
 };
 
 const Header: React.FC<Props> = ({
@@ -82,12 +84,8 @@ const Header: React.FC<Props> = ({
   supportedLanguages,
   currentLanguage,
   onLanguageClick,
-  currentProfile,
-  profiles,
-  profilesEnabled,
-  selectProfile,
-  isSelectingProfile,
   accessModel,
+  profilesData: { currentProfile, profiles, profilesEnabled, selectProfile, isSelectingProfile } = {},
 }) => {
   const { t } = useTranslation('menu');
   const [logoLoaded, setLogoLoaded] = useState(false);
@@ -138,7 +136,7 @@ const Header: React.FC<Props> = ({
     return isLoggedIn ? (
       <React.Fragment>
         <IconButton className={classNames(styles.iconButton, styles.actionButton)} aria-label={t('open_user_menu')} onClick={openUserMenu}>
-          <ProfileCircle src={currentProfile?.avatar_url || defaultAvatar} alt={currentProfile?.name ?? t('profile_icon')} />
+          <ProfileCircle src={currentProfile?.avatar_url ?? ''} alt={currentProfile?.name ?? t('profile_icon')} />
         </IconButton>
         <Popover isOpen={userMenuOpen} onClose={closeUserMenu}>
           <Panel>

diff --git a/src/components/ProfileBox/ProfileBox.tsx b/src/components/ProfileBox/ProfileBox.tsx
@@ -7,7 +7,6 @@ import styles from './ProfileBox.module.scss';
 import Edit from '#src/icons/Edit';
 import Check from '#src/icons/Check';
 import IconButton from '#components/IconButton/IconButton';
-import defaultAvatar from '#src/assets/profiles/default_avatar.png';
 
 type Props = {
   name?: string;
@@ -27,7 +26,7 @@ const ProfileBox = ({ name, image, editMode = false, onClick, onEdit, selected =
     <div className={styles.wrapper}>
       <div className={classNames(styles.inner, selected && styles.selected)}>
         <div onClick={onClick} className={styles.box} role="button" tabIndex={0} onKeyDown={keyDownHandler}>
-          <img className={styles.image} src={image || defaultAvatar} alt="" />
+          <img className={styles.image} src={image} alt="" />
         </div>
         {editMode && (
           <IconButton aria-label={t('profile.edit')} onClick={onEdit} className={styles.overlay}>

diff --git a/src/components/UserMenu/ProfilesMenu/ProfilesMenu.tsx b/src/components/UserMenu/ProfilesMenu/ProfilesMenu.tsx
@@ -15,7 +15,6 @@ type ProfilesMenuProps = {
   small?: boolean;
   selectingProfile: boolean;
   selectProfile: UseMutateFunction<unknown, unknown, { id: string; avatarUrl: string }, unknown>;
-  defaultAvatar: string;
   createButtonLabel?: string;
   switchProfilesLabel?: string;
   onCreateButtonClick: () => void;
@@ -27,7 +26,6 @@ const ProfilesMenu = ({
   small,
   selectingProfile,
   selectProfile,
-  defaultAvatar,
   createButtonLabel,
   switchProfilesLabel,
   onCreateButtonClick,
@@ -46,7 +44,7 @@ const ProfilesMenu = ({
             small={small}
             onClick={() => selectProfile({ id: profile.id, avatarUrl: profile.avatar_url })}
             label={profile.name}
-            startIcon={<ProfileCircle src={profile.avatar_url || defaultAvatar} alt={profile.name} />}
+            startIcon={<ProfileCircle src={profile.avatar_url} alt={profile.name} />}
           />
         </li>
       ))

diff --git a/src/components/UserMenu/UserMenu.tsx b/src/components/UserMenu/UserMenu.tsx
@@ -16,7 +16,6 @@ import { logout } from '#src/stores/AccountController';
 import ProfileCircle from '#src/icons/ProfileCircle';
 import type { AccessModel } from '#types/Config';
 import type { Profile } from '#types/account';
-import defaultAvatar from '#src/assets/profiles/default_avatar.png';
 
 type Props = {
   small?: boolean;
@@ -62,7 +61,6 @@ const UserMenu = ({
           small={small}
           selectingProfile={!!isSelectingProfile}
           selectProfile={selectProfile}
-          defaultAvatar={defaultAvatar}
           createButtonLabel={t('nav.add_profile')}
           switchProfilesLabel={t('nav.switch_profiles')}
           onCreateButtonClick={() => navigate('/u/profiles/create')}
@@ -76,7 +74,7 @@ const UserMenu = ({
             onClick={onClick}
             to={`/u/my-profile/${currentProfile?.id ?? ''}`}
             label={t('nav.profile')}
-            startIcon={<ProfileCircle src={currentProfile?.avatar_url || defaultAvatar} alt={currentProfile?.name ?? ''} />}
+            startIcon={<ProfileCircle src={currentProfile?.avatar_url} alt={currentProfile?.name ?? ''} />}
           />
         </li>
       )}

diff --git a/src/containers/Layout/Layout.tsx b/src/containers/Layout/Layout.tsx
@@ -153,12 +153,14 @@ const Layout = () => {
           closeLanguageMenu={closeLanguageMenu}
           canLogin={!!clientId}
           showPaymentsMenuItem={accessModel !== 'AVOD'}
-          currentProfile={profile ?? undefined}
-          profiles={profiles}
-          profilesEnabled={profilesEnabled}
-          selectProfile={selectProfile.mutate}
-          isSelectingProfile={!!selectProfile.isLoading}
           accessModel={accessModel}
+          profilesData={{
+            currentProfile: profile ?? undefined,
+            profiles,
+            profilesEnabled,
+            selectProfile: selectProfile.mutate,
+            isSelectingProfile: !!selectProfile.isLoading,
+          }}
         >
           <Button label={t('home')} to="/" variant="text" />
           {menu.map((item) => (

diff --git a/src/hooks/useProfiles.ts b/src/hooks/useProfiles.ts
@@ -10,6 +10,7 @@ import { useWatchHistoryStore } from '#src/stores/WatchHistoryStore';
 import * as persist from '#src/utils/persist';
 import type { CommonAccountResponse, ListProfilesResponse, ProfileDetailsPayload, ProfilePayload } from '#types/account';
 import { useAccountStore } from '#src/stores/AccountStore';
+import defaultAvatar from '#src/assets/profiles/default_avatar.png';
 
 const PERSIST_PROFILE = 'profile';
 
@@ -35,7 +36,7 @@ export const useSelectProfile = () => {
         });
         useFavoritesStore.setState({ favorites: [] });
         useWatchHistoryStore.setState({ watchHistory: [] });
-        useProfileStore.setState({ profile });
+        useProfileStore.getState().setProfile(profile);
         await initializeAccount().finally(() => {
           useProfileStore.setState({ selectingProfileAvatar: null });
           navigate('/');
@@ -105,5 +106,20 @@ export const useProfiles = (
   if (!canManageProfiles && query.data?.responseData.canManageProfiles) {
     useAccountStore.setState({ canManageProfiles: true });
   }
-  return { ...query, profilesEnabled: query.data?.responseData.canManageProfiles && canManageProfiles };
+
+  return {
+    ...query,
+    data: {
+      ...query.data,
+      responseData: {
+        ...query.data?.responseData,
+        collection:
+          query.data?.responseData.collection.map((profile) => ({
+            ...profile,
+            avatar_url: profile?.avatar_url || defaultAvatar,
+          })) ?? [],
+      },
+    },
+    profilesEnabled: query.data?.responseData.canManageProfiles && canManageProfiles,
+  };
 };
diff --git a/src/pages/User/User.tsx b/src/pages/User/User.tsx
@@ -25,7 +25,6 @@ import { PersonalShelf, useConfigStore } from '#src/stores/ConfigStore';
 import { clear as clearFavorites } from '#src/stores/FavoritesController';
 import { useProfileStore } from '#src/stores/ProfileStore';
 import { useProfiles } from '#src/hooks/useProfiles';
-import defaultAvatar from '#src/assets/profiles/default_avatar.png';
 
 const User = (): JSX.Element => {
   const { accessModel, favoritesList } = useConfigStore(
@@ -86,7 +85,7 @@ const User = (): JSX.Element => {
                     to={`my-profile/${profile?.id}`}
                     label={profile?.name ?? t('nav.profile')}
                     variant="text"
-                    startIcon={<img className={styles.profileIcon} src={profile?.avatar_url || defaultAvatar} alt={profile?.name} />}
+                    startIcon={<img className={styles.profileIcon} src={profile?.avatar_url} alt={profile?.name} />}
                     className={styles.button}
                   />
                 </li>

diff --git a/src/stores/AccountController.ts b/src/stores/AccountController.ts
@@ -47,9 +47,7 @@ export const initializeAccount = async () => {
       canShowReceipts: accountService.canShowReceipts,
     });
 
-    useProfileStore.setState({
-      profile: persist.getItem(PERSIST_PROFILE) || null,
-    });
+    useProfileStore.getState().setProfile(persist.getItem(PERSIST_PROFILE) || null);
 
     await accountService.initialize(config, logout);
 

diff --git a/src/stores/ProfileStore.ts b/src/stores/ProfileStore.ts
@@ -1,12 +1,24 @@
 import { createStore } from '#src/stores/utils';
 import type { Profile } from '#types/account';
+import defaultAvatar from '#src/assets/profiles/default_avatar.png';
 
 type ProfileStore = {
   profile: Profile | null;
   selectingProfileAvatar: string | null;
+  setProfile: (profile: Profile | null) => void;
 };
 
 export const useProfileStore = createStore<ProfileStore>('AccountStore', () => ({
   profile: null,
   selectingProfileAvatar: null,
+  setProfile: (profile) => {
+    useProfileStore.setState({
+      profile: profile
+        ? {
+            ...profile,
+            avatar_url: profile?.avatar_url || defaultAvatar,
+          }
+        : null,
+    });
+  },
 }));