Feature Flag for MITxOnline API Call (#2305)

* feature flag current user call

* load non-org tabs asap

* get profile from user directly

Author: ChristopherChudzicki

frontends/api/src/mitxonline/hooks/user/index.ts

@@ -2,7 +2,7 @@ import { useQuery } from "@tanstack/react-query"
 import { usersApi } from "../../clients"
 import type { User } from "@mitodl/mitxonline-api-axios/v1"
 
-const useMitxOnlineCurrentUser = () =>
+const useMitxOnlineCurrentUser = (opts: { enabled?: boolean } = {}) =>
   useQuery({
     queryKey: ["mitxonline", "currentUser"],
     queryFn: async (): Promise<User> => {
@@ -11,6 +11,7 @@ const useMitxOnlineCurrentUser = () =>
         ...response.data,
       }
     },
+    ...opts,
   })
 
 export { useMitxOnlineCurrentUser }

frontends/main/src/app-pages/DashboardPage/DashboardLayout.tsx

@@ -308,13 +308,15 @@ const DashboardPage: React.FC<{
 }> = ({ children }) => {
   const pathname = usePathname()
   const { isLoading: isLoadingUser, data: user } = useUserMe()
-  const { isLoading: isLoadingMitxOnlineUser, data: mitxOnlineUser } =
-    useMitxOnlineCurrentUser()
   const orgsEnabled = useFeatureFlagEnabled(FeatureFlags.OrganizationDashboard)
+  const { isLoading: isLoadingMitxOnlineUser, data: mitxOnlineUser } =
+    useMitxOnlineCurrentUser({ enabled: !!orgsEnabled })
 
   const tabData = useMemo(
     () =>
-      isLoadingMitxOnlineUser ? [] : getTabData(orgsEnabled, mitxOnlineUser),
+      isLoadingMitxOnlineUser
+        ? getTabData(orgsEnabled)
+        : getTabData(orgsEnabled, mitxOnlineUser),
     [isLoadingMitxOnlineUser, orgsEnabled, mitxOnlineUser],
   )
 

frontends/main/src/app-pages/DashboardPage/HomeContent.tsx

@@ -13,10 +13,10 @@ import {
   FREE_COURSES_CAROUSEL,
 } from "@/common/carousels"
 import ResourceCarousel from "@/page-components/ResourceCarousel/ResourceCarousel"
-import { useProfileMeQuery } from "api/hooks/profile"
 import { EnrollmentDisplay } from "./CoursewareDisplay/EnrollmentDisplay"
 import { useFeatureFlagEnabled } from "posthog-js/react"
 import { FeatureFlags } from "@/common/feature_flags"
+import { useUserMe } from "api/hooks/user"
 
 const SubTitleText = styled(Typography)(({ theme }) => ({
   color: theme.custom.colors.darkGray2,
@@ -66,9 +66,9 @@ const TitleText = styled(Typography)(({ theme }) => ({
 })) as typeof Typography
 
 const HomeContent: React.FC = () => {
-  const { isLoading: isLoadingProfile, data: profile } = useProfileMeQuery()
-  const topics = profile?.preference_search_filters.topic
-  const certification = profile?.preference_search_filters.certification
+  const { isLoading: isLoadingProfile, data: user } = useUserMe()
+  const topics = user?.profile?.preference_search_filters.topic
+  const certification = user?.profile?.preference_search_filters.certification
   const showEnrollments = useFeatureFlagEnabled(
     FeatureFlags.EnrollmentDashboard,
   )
@@ -93,7 +93,7 @@ const HomeContent: React.FC = () => {
           titleComponent="h2"
           title="Top picks for you"
           isLoading={isLoadingProfile}
-          config={TopPicksCarouselConfig(profile)}
+          config={TopPicksCarouselConfig(user?.profile)}
         />
         {topics?.map((topic, index) => (
           <StyledResourceCarousel