edSPIRIT · milad-emami · Apr 7, 2024 · Apr 6, 2024
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -52,6 +52,7 @@
     "react": "16.14.0",
     "react-dom": "16.14.0",
     "react-helmet": "6.1.0",
+    "react-query": "^3.39.3",
     "react-redux": "7.2.9",
     "react-router": "5.2.1",
     "react-router-dom": "5.3.0",

diff --git a/src/assets/place-holders/favicon.svg b/src/assets/place-holders/favicon.svg
diff --git a/src/constants/react-query-constants.js b/src/constants/react-query-constants.js
@@ -0,0 +1,15 @@
+const REACT_QUERY_CONSTANTS = {
+  queries: {
+    // Set staleTime to 5 minutes
+    staleTime: 5 * 60 * 1000,
+    // Set cacheTime to 60 minutes
+    cacheTime: 60 * 60 * 1000,
+    // Set the retry count for queries here
+    retry: 1, // Set the retry count for queries here
+  },
+  mutations: {
+    retry: 1, // Set the retry count for mutations here
+  },
+};
+
+export default REACT_QUERY_CONSTANTS;
diff --git a/src/courseware/course/Course.jsx b/src/courseware/course/Course.jsx
@@ -18,6 +18,8 @@ import SidebarTriggers from './sidebar/SidebarTriggers';
 import { useModel } from '../../generic/model-store';
 import { getSessionStorage, setSessionStorage } from '../../data/sessionStorage';
 
+import useGetConfig from '../../hooks/useGetConfig';
+
 const Course = ({
   courseId,
   sequenceId,
@@ -44,6 +46,10 @@ const Course = ({
   // Below the tabs, above the breadcrumbs alerts (appearing in the order listed here)
   const dispatch = useDispatch();
 
+  const {
+    platformName,
+  } = useGetConfig();
+
   const [firstSectionCelebrationOpen, setFirstSectionCelebrationOpen] = useState(false);
   // If streakLengthToCelebrate is populated, that modal takes precedence. Wait til the next load to display
   // the weekly goal celebration modal.
@@ -80,7 +86,7 @@ const Course = ({
   return (
     <SidebarProvider courseId={courseId} unitId={unitId}>
       <Helmet>
-        <title>{`${pageTitleBreadCrumbs.join(' | ')} | ${getConfig().SITE_NAME}`}</title>
+        <title>{`${pageTitleBreadCrumbs.join(' | ')} | ${platformName || getConfig().siteName}`}</title>
       </Helmet>
       <div className="position-relative d-flex align-items-start">
         <CourseBreadcrumbs

diff --git a/src/courseware/course/course-exit/CourseCelebration.jsx b/src/courseware/course/course-exit/CourseCelebration.jsx
@@ -33,6 +33,7 @@ import SocialIcons from '../../social-share/SocialIcons';
 import { logClick, logVisit } from './utils';
 import { DashboardLink, IdVerificationSupportLink, ProfileLink } from '../../../shared/links';
 import CourseRecommendations from './CourseRecommendations';
+import useGetConfig from '../../../hooks/useGetConfig';
 
 const LINKEDIN_BLUE = '#2867B2';
 
@@ -67,6 +68,10 @@ const CourseCelebration = ({ intl }) => {
 
   const { administrator } = getAuthenticatedUser();
 
+  const {
+    platformName,
+  } = useGetConfig();
+
   const dashboardLink = <DashboardLink />;
   const idVerificationSupportLink = <IdVerificationSupportLink />;
   const profileLink = <ProfileLink />;
@@ -278,7 +283,7 @@ const CourseCelebration = ({ intl }) => {
   return (
     <>
       <Helmet>
-        <title>{`${intl.formatMessage(messages.congratulationsHeader)} | ${title} | ${getConfig().SITE_NAME}`}</title>
+        <title>{`${intl.formatMessage(messages.congratulationsHeader)} | ${title} | ${platformName || getConfig().siteName}`}</title>
       </Helmet>
       <div className="row w-100 mx-0 mb-4 px-5 py-4 border border-light">
         <div className="col-12 p-0 h2 text-center">

diff --git a/src/courseware/course/course-exit/CourseInProgress.jsx b/src/courseware/course/course-exit/CourseInProgress.jsx
@@ -13,6 +13,7 @@ import CatalogSuggestion from './CatalogSuggestion';
 import DashboardFootnote from './DashboardFootnote';
 import messages from './messages';
 import { logClick, logVisit } from './utils';
+import useGetConfig from '../../../hooks/useGetConfig';
 
 const CourseInProgress = ({ intl }) => {
   const { courseId } = useSelector(state => state.courseware);
@@ -23,6 +24,10 @@ const CourseInProgress = ({ intl }) => {
   } = useModel('courseHomeMeta', courseId);
   const { administrator } = getAuthenticatedUser();
 
+  const {
+    platformName,
+  } = useGetConfig();
+
   // Get dates tab link for 'view course schedule' button
   const datesTab = tabs.find(tab => tab.slug === 'dates');
   const datesTabLink = datesTab && datesTab.url;
@@ -32,7 +37,7 @@ const CourseInProgress = ({ intl }) => {
   return (
     <>
       <Helmet>
-        <title>{`${intl.formatMessage(messages.endOfCourseTitle)} | ${title} | ${getConfig().SITE_NAME}`}</title>
+        <title>{`${intl.formatMessage(messages.endOfCourseTitle)} | ${title} | ${platformName || getConfig().siteName}`}</title>
       </Helmet>
       <div className="row w-100 mx-0 mb-4 px-5 py-4 border border-light justify-content-center">
         <div className="col-12 p-0 h2 text-center">

diff --git a/src/courseware/course/course-exit/CourseNonPassing.jsx b/src/courseware/course/course-exit/CourseNonPassing.jsx
@@ -13,6 +13,7 @@ import CatalogSuggestion from './CatalogSuggestion';
 import DashboardFootnote from './DashboardFootnote';
 import messages from './messages';
 import { logClick, logVisit } from './utils';
+import useGetConfig from '../../../hooks/useGetConfig';
 
 const CourseNonPassing = ({ intl }) => {
   const { courseId } = useSelector(state => state.courseware);
@@ -23,6 +24,10 @@ const CourseNonPassing = ({ intl }) => {
   } = useModel('courseHomeMeta', courseId);
   const { administrator } = getAuthenticatedUser();
 
+  const {
+    platformName,
+  } = useGetConfig();
+
   // Get progress tab link for 'view grades' button
   const progressTab = tabs.find(tab => tab.slug === 'progress');
   const progressLink = progressTab && progressTab.url;
@@ -32,7 +37,7 @@ const CourseNonPassing = ({ intl }) => {
   return (
     <>
       <Helmet>
-        <title>{`${intl.formatMessage(messages.endOfCourseTitle)} | ${title} | ${getConfig().SITE_NAME}`}</title>
+        <title>{`${intl.formatMessage(messages.endOfCourseTitle)} | ${title} | ${platformName || getConfig().siteName}`}</title>
       </Helmet>
       <div className="row w-100 mx-0 mb-4 px-5 py-4 border border-light justify-content-center">
         <div className="col-12 p-0 h2 text-center">

diff --git a/src/hooks/useGetConfig.js b/src/hooks/useGetConfig.js
@@ -0,0 +1,39 @@
+import { getConfig } from '@edx/frontend-platform';
+import { useQuery } from 'react-query';
+import faviconPlaceholder from '../assets/place-holders/favicon.svg';
+
+const useGetConfig = () => {
+  const fetchConfig = async ({ baseURL, instanceConfigAPIUrl }) => {
+    const response = await fetch(`${baseURL}${instanceConfigAPIUrl}`);
+    const result = await response.json();
+    return result;
+  };
+
+  const { data, isLoading, isError } = useQuery(
+    'headerLogo',
+    () => fetchConfig({
+      baseURL: getConfig().LMS_BASE_URL,
+      instanceConfigAPIUrl: getConfig().AC_INSTANCE_CONFIG_API_URL,
+    }),
+    {
+      enabled:
+        !!getConfig().LMS_BASE_URL && !!getConfig().AC_INSTANCE_CONFIG_API_URL,
+    },
+  );
+  const faviconVersion = Date.now(); // Update this version number when the favicon updates
+  const favicon = data?.favicon
+    ? `${data.favicon}?v=${faviconVersion}`
+    : faviconPlaceholder;
+  return {
+    headerLogo: data?.logo,
+    hasBilling: data?.has_billing,
+    favicon,
+    platformName: data?.platform_name,
+    gtm: data?.gtm,
+    isTPAOnly: data?.use_tpa_only,
+    TPAQueryparam: data?.tpa_queryparam,
+    loading: isLoading,
+    isError,
+  };
+};
+export default useGetConfig;
diff --git a/src/index.jsx b/src/index.jsx
@@ -12,6 +12,8 @@ import { Switch } from 'react-router-dom';
 
 import { messages as footerMessages } from '@edx/frontend-component-footer';
 import { messages as headerMessages } from '@edx/frontend-component-header';
+import { QueryClient, QueryClientProvider } from 'react-query';
+import REACT_QUERY_CONSTANTS from './constants/react-query-constants';
 import { fetchDiscussionTab, fetchLiveTab } from './course-home/data/thunks';
 import DiscussionTab from './course-home/discussion-tab/DiscussionTab';
 
@@ -38,67 +40,75 @@ import CourseAccessErrorPage from './generic/CourseAccessErrorPage';
 import DecodePageRoute from './decode-page-route';
 
 subscribe(APP_READY, () => {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      ...REACT_QUERY_CONSTANTS,
+    },
+  });
+
   ReactDOM.render(
     <AppProvider store={initializeStore()}>
-      <PathFixesProvider>
-        <NoticesProvider>
-          <UserMessagesProvider>
-            <Switch>
-              <PageRoute exact path="/goal-unsubscribe/:token" component={GoalUnsubscribe} />
-              <PageRoute path="/redirect" component={CoursewareRedirectLandingPage} />
-              <DecodePageRoute path="/course/:courseId/access-denied" component={CourseAccessErrorPage} />
-              <DecodePageRoute path="/course/:courseId/home">
-                <TabContainer tab="outline" fetch={fetchOutlineTab} slice="courseHome">
-                  <OutlineTab />
-                </TabContainer>
-              </DecodePageRoute>
-              <DecodePageRoute path="/course/:courseId/live">
-                <TabContainer tab="lti_live" fetch={fetchLiveTab} slice="courseHome">
-                  <LiveTab />
-                </TabContainer>
-              </DecodePageRoute>
-              <DecodePageRoute path="/course/:courseId/dates">
-                <TabContainer tab="dates" fetch={fetchDatesTab} slice="courseHome">
-                  <DatesTab />
-                </TabContainer>
-              </DecodePageRoute>
-              <DecodePageRoute path="/course/:courseId/discussion/:path*">
-                <TabContainer tab="discussion" fetch={fetchDiscussionTab} slice="courseHome">
-                  <DiscussionTab />
-                </TabContainer>
-              </DecodePageRoute>
-              <DecodePageRoute
-                path={[
-                  '/course/:courseId/progress/:targetUserId/',
-                  '/course/:courseId/progress',
-                ]}
-                render={({ match }) => (
-                  <TabContainer
-                    tab="progress"
-                    fetch={(courseId) => fetchProgressTab(courseId, match.params.targetUserId)}
-                    slice="courseHome"
-                  >
-                    <ProgressTab />
+      <QueryClientProvider client={queryClient}>
+        <PathFixesProvider>
+          <NoticesProvider>
+            <UserMessagesProvider>
+              <Switch>
+                <PageRoute exact path="/goal-unsubscribe/:token" component={GoalUnsubscribe} />
+                <PageRoute path="/redirect" component={CoursewareRedirectLandingPage} />
+                <DecodePageRoute path="/course/:courseId/access-denied" component={CourseAccessErrorPage} />
+                <DecodePageRoute path="/course/:courseId/home">
+                  <TabContainer tab="outline" fetch={fetchOutlineTab} slice="courseHome">
+                    <OutlineTab />
+                  </TabContainer>
+                </DecodePageRoute>
+                <DecodePageRoute path="/course/:courseId/live">
+                  <TabContainer tab="lti_live" fetch={fetchLiveTab} slice="courseHome">
+                    <LiveTab />
+                  </TabContainer>
+                </DecodePageRoute>
+                <DecodePageRoute path="/course/:courseId/dates">
+                  <TabContainer tab="dates" fetch={fetchDatesTab} slice="courseHome">
+                    <DatesTab />
+                  </TabContainer>
+                </DecodePageRoute>
+                <DecodePageRoute path="/course/:courseId/discussion/:path*">
+                  <TabContainer tab="discussion" fetch={fetchDiscussionTab} slice="courseHome">
+                    <DiscussionTab />
+                  </TabContainer>
+                </DecodePageRoute>
+                <DecodePageRoute
+                  path={[
+                    '/course/:courseId/progress/:targetUserId/',
+                    '/course/:courseId/progress',
+                  ]}
+                  render={({ match }) => (
+                    <TabContainer
+                      tab="progress"
+                      fetch={(courseId) => fetchProgressTab(courseId, match.params.targetUserId)}
+                      slice="courseHome"
+                    >
+                      <ProgressTab />
+                    </TabContainer>
+                  )}
+                />
+                <DecodePageRoute path="/course/:courseId/course-end">
+                  <TabContainer tab="courseware" fetch={fetchCourse} slice="courseware">
+                    <CourseExit />
                   </TabContainer>
-                )}
-              />
-              <DecodePageRoute path="/course/:courseId/course-end">
-                <TabContainer tab="courseware" fetch={fetchCourse} slice="courseware">
-                  <CourseExit />
-                </TabContainer>
-              </DecodePageRoute>
-              <DecodePageRoute
-                path={[
-                  '/course/:courseId/:sequenceId/:unitId',
-                  '/course/:courseId/:sequenceId',
-                  '/course/:courseId',
-                ]}
-                component={CoursewareContainer}
-              />
-            </Switch>
-          </UserMessagesProvider>
-        </NoticesProvider>
-      </PathFixesProvider>
+                </DecodePageRoute>
+                <DecodePageRoute
+                  path={[
+                    '/course/:courseId/:sequenceId/:unitId',
+                    '/course/:courseId/:sequenceId',
+                    '/course/:courseId',
+                  ]}
+                  component={CoursewareContainer}
+                />
+              </Switch>
+            </UserMessagesProvider>
+          </NoticesProvider>
+        </PathFixesProvider>
+      </QueryClientProvider>
     </AppProvider>,
     document.getElementById('root'),
   );

diff --git a/src/tab-page/LoadedTabPage.jsx b/src/tab-page/LoadedTabPage.jsx
@@ -14,6 +14,7 @@ import useEnrollmentAlert from '../alerts/enrollment-alert';
 import useLogistrationAlert from '../alerts/logistration-alert';
 
 import ProductTours from '../product-tours/ProductTours';
+import useGetConfig from '../hooks/useGetConfig';
 
 const LoadedTabPage = ({
   activeTabSlug,
@@ -36,6 +37,10 @@ const LoadedTabPage = ({
   const logistrationAlert = useLogistrationAlert(courseId);
   const enrollmentAlert = useEnrollmentAlert(courseId);
 
+  const {
+    platformName,
+  } = useGetConfig();
+
   const activeTab = tabs.filter(tab => tab.slug === activeTabSlug)[0];
 
   const streakLengthToCelebrate = celebrations && celebrations.streakLengthToCelebrate;
@@ -51,7 +56,7 @@ const LoadedTabPage = ({
         org={org}
       />
       <Helmet>
-        <title>{`${activeTab ? `${activeTab.title} | ` : ''}${title} | ${getConfig().SITE_NAME}`}</title>
+        <title>{`${activeTab ? `${activeTab.title} | ` : ''}${title} | ${platformName || getConfig().siteName}`}</title>
       </Helmet>
       {originalUserIsStaff && (
         <InstructorToolbar