fix: fix user page tabs

jwplayer · Aug 3, 2023 · 67bd642 · 67bd642
1 parent bba1c70
commit 67bd642
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 20 deletions.
diff --git a/src/components/Root/Root.tsx b/src/components/Root/Root.tsx
@@ -1,7 +1,7 @@
 import React, { FC, useEffect, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useQuery } from 'react-query';
-import { Navigate, useLocation, useSearchParams } from 'react-router-dom';
+import { Navigate, useSearchParams } from 'react-router-dom';
 
 import ErrorPage from '#components/ErrorPage/ErrorPage';
 import AccountModal from '#src/containers/AccountModal/AccountModal';
@@ -27,7 +27,6 @@ const Root: FC = () => {
   });
 
   const [searchParams, setSearchParams] = useSearchParams();
-  const location = useLocation();
 
   const configSource = useMemo(() => getConfigSource(searchParams, settingsQuery.data), [searchParams, settingsQuery.data]);
 
@@ -69,10 +68,6 @@ const Root: FC = () => {
     return <LoadingOverlay />;
   }
 
-  if (profilesEnabled && userData.user && !profile && !location.pathname.includes('/u/profiles')) {
-    return <Navigate to="/u/profiles" />;
-  }
-
   if (settingsQuery.isError) {
     return (
       <ErrorPage

diff --git a/src/components/UserMenu/UserMenu.tsx b/src/components/UserMenu/UserMenu.tsx
@@ -36,7 +36,6 @@ const UserMenu = ({ showPaymentsItem, small = false, onClick }: Props) => {
 
   if (profilesEnabled && !profiles?.length) {
     unpersistProfile();
-    navigate('/u/profiles');
   }
 
   const selectProfile = useSelectProfile();
@@ -83,7 +82,7 @@ const UserMenu = ({ showPaymentsItem, small = false, onClick }: Props) => {
         </>
       )}
       <div className={styles.sectionHeader}>{t('nav.settings')}</div>
-      {profilesEnabled && (
+      {profilesEnabled && currentProfile && (
         <li>
           <MenuButton
             small={small}

diff --git a/src/hooks/useProfiles.ts b/src/hooks/useProfiles.ts
@@ -1,5 +1,5 @@
 import type { ProfilesData } from '@inplayer-org/inplayer.js';
-import { UseMutationOptions, useMutation, useQuery } from 'react-query';
+import { UseMutationOptions, UseQueryOptions, useMutation, useQuery } from 'react-query';
 import { useNavigate } from 'react-router';
 
 import { initializeAccount } from '#src/stores/AccountController';
@@ -10,7 +10,7 @@ import { createProfile, deleteProfile, enterProfile, listProfiles, updateProfile
 import { useProfileStore } from '#src/stores/ProfileStore';
 import { useWatchHistoryStore } from '#src/stores/WatchHistoryStore';
 import * as persist from '#src/utils/persist';
-import type { AuthData, CommonAccountResponse, ProfileDetailsPayload, ProfilePayload } from '#types/account';
+import type { AuthData, CommonAccountResponse, ListProfilesResponse, ProfileDetailsPayload, ProfilePayload } from '#types/account';
 
 const PERSIST_KEY_ACCOUNT = 'auth';
 const PERSIST_PROFILE = 'profile';
@@ -57,18 +57,19 @@ export const useSelectProfile = () => {
   });
 };
 
-export const useCreateProfile = () => {
+export const useCreateProfile = (options?: UseMutationOptions<ServiceResponse<ProfilesData> | undefined, unknown, ProfilePayload, unknown>) => {
   const listProfiles = useListProfiles();
   const navigate = useNavigate();
 
-  return useMutation(createProfile, {
+  return useMutation<ServiceResponse<ProfilesData> | undefined, unknown, ProfilePayload, unknown>(createProfile, {
     onSuccess: (res) => {
       const profile = res?.responseData;
       if (profile?.id) {
         listProfiles.refetch();
         navigate('/u/profiles');
       }
     },
+    ...options,
   });
 };
 
@@ -103,7 +104,9 @@ export const useDeleteProfile = (options?: UseMutationOptions<ServiceResponse<Co
   });
 };
 
-export const useListProfiles = () => useQuery(['listProfiles'], listProfiles);
+export const useListProfiles = (
+  options?: UseQueryOptions<ServiceResponse<ListProfilesResponse> | undefined, unknown, ServiceResponse<ListProfilesResponse> | undefined, string[]>,
+) => useQuery(['listProfiles'], listProfiles, { ...options });
 
 export const useProfilesFeatureEnabled = (): boolean => {
   const canManageProfiles = useAccountStore((s) => s.canManageProfiles);

diff --git a/src/pages/User/User.tsx b/src/pages/User/User.tsx
@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Navigate, Route, Routes, useNavigate } from 'react-router-dom';
+import { Navigate, Route, Routes, useLocation, useNavigate } from 'react-router-dom';
 import shallow from 'zustand/shallow';
 
 import styles from './User.module.scss';
@@ -40,13 +40,16 @@ const User = (): JSX.Element => {
   const { t } = useTranslation('user');
   const breakpoint = useBreakpoint();
   const [clearFavoritesOpen, setClearFavoritesOpen] = useState(false);
+  const location = useLocation();
 
   const isLargeScreen = breakpoint > Breakpoint.md;
   const { user: customer, subscription, loading, canUpdateEmail } = useAccountStore();
   const { profile } = useProfileStore();
 
   const profilesEnabled = useProfilesFeatureEnabled();
 
+  const profileAndFavoritesPage = location.pathname?.includes('my-profile') || location.pathname.includes('favorites');
+
   const onCardClick = (playlistItem: PlaylistItem) => navigate(mediaURL({ media: playlistItem }));
   const onLogout = useCallback(async () => {
     // Empty customer on a user page leads to navigate (code bellow), so we don't repeat it here
@@ -79,7 +82,7 @@ const User = (): JSX.Element => {
         <div className={styles.leftColumn}>
           <div className={styles.panel}>
             <ul>
-              {accessModel === 'SVOD' && profilesEnabled && (
+              {accessModel === 'SVOD' && profilesEnabled && profileAndFavoritesPage && (
                 <li>
                   <Button
                     to={`my-profile/${profile?.id}`}
@@ -90,16 +93,18 @@ const User = (): JSX.Element => {
                   />
                 </li>
               )}
-              <li>
-                <Button to="my-account" label={t('nav.account')} variant="text" startIcon={<AccountCircle />} className={styles.button} />
-              </li>
-              {favoritesList && (
+              {(!profilesEnabled || !profileAndFavoritesPage) && (
+                <li>
+                  <Button to="my-account" label={t('nav.account')} variant="text" startIcon={<AccountCircle />} className={styles.button} />
+                </li>
+              )}
+              {favoritesList && (!profilesEnabled || profileAndFavoritesPage) && (
                 <li>
                   <Button to="favorites" label={t('nav.favorites')} variant="text" startIcon={<Favorite />} className={styles.button} />
                 </li>
               )}
 
-              {accessModel !== 'AVOD' && (
+              {accessModel !== 'AVOD' && (!profilesEnabled || !profileAndFavoritesPage) && (
                 <li>
                   <Button to="payments" label={t('nav.payments')} variant="text" startIcon={<BalanceWallet />} className={styles.button} />
                 </li>