fix: pr comments

jwplayer · Aug 18, 2023 · 662cc18 · 662cc18
1 parent 67bd642
commit 662cc18
Show file tree

Hide file tree

Showing 9 changed files with 66 additions and 32 deletions.
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
@@ -21,6 +21,7 @@ import type { LanguageDefinition } from '#src/i18n/config';
 import Panel from '#components/Panel/Panel';
 import type { Profile } from '#types/account';
 import ProfileCircle from '#src/icons/ProfileCircle';
+import type { AccessModel } from '#types/Config';
 
 type TypeHeader = 'static' | 'fixed';
 
@@ -49,6 +50,9 @@ type Props = {
   currentLanguage: LanguageDefinition | undefined;
   onLanguageClick: (code: string) => void;
   currentProfile?: Profile;
+  profiles?: Profile[];
+  profilesEnabled?: boolean;
+  accessModel?: AccessModel;
 };
 
 const Header: React.FC<Props> = ({
@@ -76,6 +80,9 @@ const Header: React.FC<Props> = ({
   currentLanguage,
   onLanguageClick,
   currentProfile,
+  profiles,
+  profilesEnabled,
+  accessModel,
 }) => {
   const { t } = useTranslation('menu');
   const [logoLoaded, setLogoLoaded] = useState(false);
@@ -130,7 +137,15 @@ const Header: React.FC<Props> = ({
         </IconButton>
         <Popover isOpen={userMenuOpen} onClose={closeUserMenu}>
           <Panel>
-            <UserMenu onClick={closeUserMenu} showPaymentsItem={showPaymentsMenuItem} small />
+            <UserMenu
+              onClick={closeUserMenu}
+              showPaymentsItem={showPaymentsMenuItem}
+              small
+              accessModel={accessModel}
+              currentProfile={currentProfile}
+              profilesEnabled={profilesEnabled}
+              profiles={profiles}
+            />
           </Panel>
         </Popover>
       </React.Fragment>

diff --git a/src/components/ProfileBox/AddNewProfile.tsx b/src/components/ProfileBox/AddNewProfile.tsx
@@ -12,8 +12,10 @@ type Props = {
 
 const AddNewProfile = ({ onClick }: Props) => {
   const { t } = useTranslation('user');
+  const keyDownHandler = (event: React.KeyboardEvent<HTMLDivElement>) => (event.key === 'Enter' || event.key === ' ') && onClick();
+
   return (
-    <div onClick={onClick} className={classNames(styles.wrapper, styles.addProfileContainer)}>
+    <div onClick={onClick} tabIndex={0} onKeyDown={keyDownHandler} className={classNames(styles.wrapper, styles.addProfileContainer)}>
       <div className={styles.iconContainer}>
         <div className={`${styles.box} ${styles.circle}`}>
           <Plus />

diff --git a/src/components/ProfileBox/ProfileBox.tsx b/src/components/ProfileBox/ProfileBox.tsx
@@ -5,6 +5,7 @@ import styles from './ProfileBox.module.scss';
 
 import Edit from '#src/icons/Edit';
 import Check from '#src/icons/Check';
+import IconButton from '#components/IconButton/IconButton';
 
 type Props = {
   name?: string;
@@ -25,9 +26,9 @@ const ProfileBox = ({ name, image, adult = true, editMode = false, onClick, onEd
           {!adult && <span className={styles.kidsLabel}>Kids</span>}
         </div>
         {editMode && (
-          <div onClick={onEdit} className={styles.overlay}>
+          <IconButton aria-label="edit-profile-button" onClick={onEdit} className={styles.overlay}>
             <Edit />
-          </div>
+          </IconButton>
         )}
       </div>
       {name && <h2 className={styles.title}>{name}</h2>}

diff --git a/src/components/UserMenu/UserMenu.tsx b/src/components/UserMenu/UserMenu.tsx
@@ -11,32 +11,26 @@ import BalanceWallet from '#src/icons/BalanceWallet';
 import Exit from '#src/icons/Exit';
 import MenuButton from '#components/MenuButton/MenuButton';
 import { logout } from '#src/stores/AccountController';
-import { useConfigStore } from '#src/stores/ConfigStore';
 import LoadingOverlay from '#components/LoadingOverlay/LoadingOverlay';
 import Plus from '#src/icons/Plus';
-import { useSelectProfile, useListProfiles, unpersistProfile, useProfilesFeatureEnabled } from '#src/hooks/useProfiles';
+import { useSelectProfile } from '#src/hooks/useProfiles';
 import ProfileCircle from '#src/icons/ProfileCircle';
-import { useProfileStore } from '#src/stores/ProfileStore';
+import type { AccessModel } from '#types/Config';
+import type { Profile } from '#types/account';
 
 type Props = {
   small?: boolean;
   showPaymentsItem: boolean;
   onClick?: () => void;
+  accessModel?: AccessModel;
+  currentProfile?: Profile;
+  profilesEnabled?: boolean;
+  profiles?: Profile[];
 };
 
-const UserMenu = ({ showPaymentsItem, small = false, onClick }: Props) => {
+const UserMenu = ({ showPaymentsItem, small = false, onClick, accessModel, currentProfile, profilesEnabled, profiles }: Props) => {
   const { t } = useTranslation('user');
   const navigate = useNavigate();
-  const { accessModel } = useConfigStore();
-  const { profile: currentProfile } = useProfileStore();
-  const profilesEnabled = useProfilesFeatureEnabled();
-
-  const { data, isFetching } = useListProfiles();
-  const profiles = data?.responseData.collection;
-
-  if (profilesEnabled && !profiles?.length) {
-    unpersistProfile();
-  }
 
   const selectProfile = useSelectProfile();
 
@@ -53,8 +47,8 @@ const UserMenu = ({ showPaymentsItem, small = false, onClick }: Props) => {
     <ul className={styles.menuItems}>
       {accessModel === 'SVOD' && profilesEnabled && (
         <>
-          <div className={styles.sectionHeader}>{t('nav.switch_profiles')}</div>
-          {selectProfile.isLoading || isFetching ? (
+          <li className={styles.sectionHeader}>{t('nav.switch_profiles')}</li>
+          {selectProfile.isLoading ? (
             <LoadingOverlay inline />
           ) : (
             profiles?.map((profile) => (
@@ -81,7 +75,7 @@ const UserMenu = ({ showPaymentsItem, small = false, onClick }: Props) => {
           />
         </>
       )}
-      <div className={styles.sectionHeader}>{t('nav.settings')}</div>
+      <li className={styles.sectionHeader}>{t('nav.settings')}</li>
       {profilesEnabled && currentProfile && (
         <li>
           <MenuButton

diff --git a/src/components/UserMenu/__snapshots__/UserMenu.test.tsx.snap b/src/components/UserMenu/__snapshots__/UserMenu.test.tsx.snap
@@ -5,11 +5,11 @@ exports[`<UserMenu> > renders and matches snapshot 1`] = `
   <ul
     class="_menuItems_457528"
   >
-    <div
+    <li
       class="_sectionHeader_457528"
     >
       nav.settings
-    </div>
+    </li>
     <li>
       <a
         aria-label="nav.account"

diff --git a/src/containers/AppRoutes/AppRoutes.tsx b/src/containers/AppRoutes/AppRoutes.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { Navigate, Route, Routes } from 'react-router-dom';
+import { Navigate, Route, Routes, useLocation } from 'react-router-dom';
 import shallow from 'zustand/shallow';
 
 import ErrorPage from '#components/ErrorPage/ErrorPage';
@@ -23,6 +23,8 @@ import { useProfilesFeatureEnabled } from '#src/hooks/useProfiles';
 import { useProfileStore } from '#src/stores/ProfileStore';
 
 export default function AppRoutes() {
+  const location = useLocation();
+
   const { t } = useTranslation('error');
   const userModal = useQueryParam('u');
 
@@ -31,11 +33,15 @@ export default function AppRoutes() {
   const { profile } = useProfileStore();
   const profilesEnabled = useProfilesFeatureEnabled();
 
-  const shouldManageProfiles = !!user && profilesEnabled && !profile && (accessModel === 'SVOD' || accessModel === 'AUTHVOD') && !userModal;
+  const shouldManageProfiles =
+    !!user && profilesEnabled && !profile && (accessModel === 'SVOD' || accessModel === 'AUTHVOD') && !userModal && !location.pathname.includes('/u/profiles');
+
+  if (shouldManageProfiles) {
+    return <Navigate to="/u/profiles" />;
+  }
 
   return (
     <Routes>
-      <Route index={shouldManageProfiles} element={<Navigate to="/u/profiles" />} />
       <Route path="/u/profiles" element={<Profiles />} />
       <Route path="/u/profiles/create" element={<CreateProfile />} />
       <Route path="/u/profiles/edit" element={<Profiles editMode />} />

diff --git a/src/containers/Layout/Layout.tsx b/src/containers/Layout/Layout.tsx
@@ -20,12 +20,16 @@ import UserMenu from '#components/UserMenu/UserMenu';
 import { addQueryParam } from '#src/utils/location';
 import { getSupportedLanguages } from '#src/i18n/config';
 import { useProfileStore } from '#src/stores/ProfileStore';
+import { unpersistProfile, useListProfiles, useProfilesFeatureEnabled } from '#src/hooks/useProfiles';
 
 const Layout = () => {
   const location = useLocation();
   const navigate = useNavigate();
   const { t, i18n } = useTranslation('common');
   const { config, accessModel } = useConfigStore(({ config, accessModel }) => ({ config, accessModel }), shallow);
+  const { data: profilesData } = useListProfiles();
+  const profiles = profilesData?.responseData.collection;
+  const profilesEnabled = useProfilesFeatureEnabled();
   const { menu, assets, siteName, description, styling, features } = config;
   const metaDescription = description || t('default_description');
   const { clientId } = useClientIntegration();
@@ -34,6 +38,10 @@ const Layout = () => {
   const supportedLanguages = useMemo(() => getSupportedLanguages(), []);
   const currentLanguage = useMemo(() => supportedLanguages.find(({ code }) => code === i18n.language), [i18n.language, supportedLanguages]);
 
+  if (profilesEnabled && !profiles?.length) {
+    unpersistProfile();
+  }
+
   const { searchQuery, searchActive, userMenuOpen, languageMenuOpen } = useUIStore(
     ({ searchQuery, searchActive, userMenuOpen, languageMenuOpen }) => ({
       languageMenuOpen,
@@ -144,6 +152,9 @@ const Layout = () => {
           canLogin={!!clientId}
           showPaymentsMenuItem={accessModel !== 'AVOD'}
           currentProfile={profile ?? undefined}
+          profiles={profiles}
+          profilesEnabled={profilesEnabled}
+          accessModel={accessModel}
         >
           <Button label={t('home')} to="/" variant="text" />
           {menu.map((item) => (

diff --git a/src/containers/Profiles/Profiles.tsx b/src/containers/Profiles/Profiles.tsx
@@ -28,20 +28,22 @@ const Profiles = ({ editMode = false }: Props) => {
   const breakpoint: Breakpoint = useBreakpoint();
   const isMobile = breakpoint === Breakpoint.xs;
 
-  const { data, isLoading, isFetching, refetch, isError } = useListProfiles();
+  const { data, isLoading, isFetching, isError, refetch } = useListProfiles();
   const activeProfiles = data?.responseData.collection.length || 0;
   const canAddNew = activeProfiles < MAX_PROFILES;
 
   useEffect(() => {
-    if (!profilesEnabled || !user?.id || isError) navigate('/');
+    refetch();
+  }, [refetch]);
+
+  useEffect(() => {
+    if (!profilesEnabled || !user?.id || isError) {
+      navigate('/');
+    }
   }, [profilesEnabled, navigate, user?.id, isError]);
 
   const selectProfile = useSelectProfile();
 
-  useEffect(() => {
-    refetch();
-  }, [refetch]);
-
   if (loading || isLoading || isFetching) return <LoadingOverlay inline />;
 
   return (

diff --git a/src/stores/AccountController.ts b/src/stores/AccountController.ts
@@ -26,6 +26,7 @@ import type {
   GetPublisherConsentsResponse,
 } from '#types/account';
 import type { Offer } from '#types/checkout';
+import { unpersistProfile } from '#src/hooks/useProfiles';
 
 const PERSIST_KEY_ACCOUNT = 'auth';
 const PERSIST_PROFILE = 'profile';
@@ -181,6 +182,8 @@ export async function logout() {
       selectingProfileAvatar: null,
     });
 
+    unpersistProfile();
+
     await restoreFavorites();
     await restoreWatchHistory();
     await accountService?.logout();