fix: fix env, fix loader logic

jwplayer · Jul 31, 2023 · 5e2dc7a · 5e2dc7a
1 parent c2a815a
commit 5e2dc7a
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 15 deletions.
diff --git a/src/components/Root/Root.tsx b/src/components/Root/Root.tsx
@@ -48,18 +48,22 @@ const Root: FC = () => {
     registerCustomScreens();
   }, []);
 
-  const userData = useAccountStore((s) => ({ loading: s.loading, user: s.user, profile: s.profile }));
+  const userData = useAccountStore((s) => ({ loading: s.loading, user: s.user, profile: s.profile, selectingProfile: s.selectingProfile }));
   const profilesEnabled = useProfilesFeatureEnabled();
 
+  if (userData.user && profilesEnabled && userData.selectingProfile) {
+    return <LoadingOverlay profileImageUrl={userData.profile?.avatar_url} />;
+  }
+
   if (userData.user && !userData.loading && window.location.href.includes('#token')) {
     return <Navigate to="/" />; // component instead of hook to prevent extra re-renders
   }
 
   const IS_DEMO_OR_PREVIEW = IS_DEMO_MODE || IS_PREVIEW_MODE;
 
   // Show the spinner while loading except in demo mode (the demo config shows its own loading status)
-  if (userData.loading || settingsQuery.isLoading || (!IS_DEMO_OR_PREVIEW && configQuery.isLoading)) {
-    return <LoadingOverlay profileImageUrl={userData.profile?.avatar_url} />;
+  if (settingsQuery.isLoading || (!IS_DEMO_OR_PREVIEW && configQuery.isLoading)) {
+    return <LoadingOverlay />;
   }
 
   if (profilesEnabled && userData.user && !userData.profile && !location.pathname.includes('/u/profiles')) {

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

diff --git a/src/hooks/useProfiles.ts b/src/hooks/useProfiles.ts
@@ -23,7 +23,7 @@ export const unpersistProfile = () => {
 
 const handleProfileSelection = async ({ id, navigate }: ProfileSelectionPayload) => {
   try {
-    useAccountStore.setState({ loading: true, profile: null });
+    useAccountStore.setState({ selectingProfile: true, profile: null });
     const response = await enterProfile({ id });
     const profile = response?.responseData;
 
@@ -47,6 +47,8 @@ const handleProfileSelection = async ({ id, navigate }: ProfileSelectionPayload)
     }
   } catch {
     throw new Error('Unable to enter profile.');
+  } finally {
+    useAccountStore.setState({ selectingProfile: false });
   }
 };
 

diff --git a/src/services/inplayer.account.service.ts b/src/services/inplayer.account.service.ts
@@ -43,12 +43,8 @@ enum InPlayerEnv {
   Daily = 'daily',
 }
 
-// TODO: remove ignore
-// @ts-ignore
 export const initialize = async (config: Config, _logoutFn: () => Promise<void>) => {
-  // TODO: Remove this when feature flag exists in dev database
-  // const env: string = config.integrations?.jwp?.useSandbox ? InPlayerEnv.Development : InPlayerEnv.Production;
-  const env: string = InPlayerEnv.Daily;
+  const env: string = config.integrations?.jwp?.useSandbox ? InPlayerEnv.Development : InPlayerEnv.Production;
   InPlayer.setConfig(env as Env);
   const queryParams = new URLSearchParams(window.location.href.split('#')[1]);
   const token = queryParams.get('token');

diff --git a/src/stores/AccountStore.ts b/src/stores/AccountStore.ts
@@ -8,6 +8,7 @@ type AccountStore = {
   user: Customer | null;
   profile: Profile | null;
   canManageProfiles: boolean;
+  selectingProfile: boolean;
   subscription: Subscription | null;
   transactions: Transaction[] | null;
   activePayment: PaymentDetail | null;
@@ -27,8 +28,9 @@ type AccountStore = {
 export const useAccountStore = createStore<AccountStore>('AccountStore', (set) => ({
   loading: true,
   user: null,
-  canManageProfiles: false,
   profile: null,
+  canManageProfiles: false,
+  selectingProfile: false,
   subscription: null,
   transactions: null,
   activePayment: null,