fix: title siteName replaced with platformName

edSPIRIT · Dec 1, 2024 · 4e77bcc · 4e77bcc
1 parent 8356505
commit 4e77bcc
Show file tree

Hide file tree

Showing 11 changed files with 181 additions and 88 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -58,6 +58,7 @@
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-helmet": "6.1.0",
+    "react-query": "^3.39.3",
     "react-redux": "7.2.9",
     "react-router": "6.15.0",
     "react-router-dom": "6.15.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
@@ -19,6 +19,8 @@ import CourseBreadcrumbs from './CourseBreadcrumbs';
 import ContentTools from './content-tools';
 import Sequence from './sequence';
 
+import useGetConfig from '../../hooks/useGetConfig';
+
 const Course = ({
   courseId,
   sequenceId,
@@ -48,6 +50,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.
@@ -73,7 +79,7 @@ const Course = ({
   return (
     <SidebarProviderComponent 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-xl-center mb-4 mt-1 flex-column flex-xl-row">
         {navigationDisabled || (

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,7 @@ import ReactDOM from 'react-dom';
 import { Routes, Route } from 'react-router-dom';
 
 import { Helmet } from 'react-helmet';
+import { QueryClient, QueryClientProvider } from 'react-query';
 import { fetchDiscussionTab, fetchLiveTab } from './course-home/data/thunks';
 import DiscussionTab from './course-home/discussion-tab/DiscussionTab';
 
@@ -27,7 +28,7 @@ import DatesTab from './course-home/dates-tab';
 import GoalUnsubscribe from './course-home/goal-unsubscribe';
 import ProgressTab from './course-home/progress-tab/ProgressTab';
 import { TabContainer } from './tab-page';
-
+import REACT_QUERY_CONSTANTS from './constants/react-query-constants';
 import { fetchDatesTab, fetchOutlineTab, fetchProgressTab } from './course-home/data';
 import { fetchCourse } from './courseware/data';
 import initializeStore from './store';
@@ -39,104 +40,111 @@ import DecodePageRoute from './decode-page-route';
 import { DECODE_ROUTES, ROUTES } from './constants';
 
 subscribe(APP_READY, () => {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      ...REACT_QUERY_CONSTANTS,
+    },
+  });
   ReactDOM.render(
     <AppProvider store={initializeStore()}>
-      <Helmet>
-        <link rel="shortcut icon" href={getConfig().FAVICON_URL} type="image/x-icon" />
-      </Helmet>
-      <PathFixesProvider>
-        <NoticesProvider>
-          <UserMessagesProvider>
-            <Routes>
-              <Route path={ROUTES.UNSUBSCRIBE} element={<PageWrap><GoalUnsubscribe /></PageWrap>} />
-              <Route path={ROUTES.REDIRECT} element={<PageWrap><CoursewareRedirectLandingPage /></PageWrap>} />
-              <Route
-                path={DECODE_ROUTES.ACCESS_DENIED}
-                element={<DecodePageRoute><CourseAccessErrorPage /></DecodePageRoute>}
-              />
-              <Route
-                path={DECODE_ROUTES.HOME}
-                element={(
-                  <DecodePageRoute>
-                    <TabContainer tab="outline" fetch={fetchOutlineTab} slice="courseHome">
-                      <OutlineTab />
-                    </TabContainer>
-                  </DecodePageRoute>
+      <QueryClientProvider client={queryClient}>
+        <Helmet>
+          <link rel="shortcut icon" href={getConfig().FAVICON_URL} type="image/x-icon" />
+        </Helmet>
+        <PathFixesProvider>
+          <NoticesProvider>
+            <UserMessagesProvider>
+              <Routes>
+                <Route path={ROUTES.UNSUBSCRIBE} element={<PageWrap><GoalUnsubscribe /></PageWrap>} />
+                <Route path={ROUTES.REDIRECT} element={<PageWrap><CoursewareRedirectLandingPage /></PageWrap>} />
+                <Route
+                  path={DECODE_ROUTES.ACCESS_DENIED}
+                  element={<DecodePageRoute><CourseAccessErrorPage /></DecodePageRoute>}
+                />
+                <Route
+                  path={DECODE_ROUTES.HOME}
+                  element={(
+                    <DecodePageRoute>
+                      <TabContainer tab="outline" fetch={fetchOutlineTab} slice="courseHome">
+                        <OutlineTab />
+                      </TabContainer>
+                    </DecodePageRoute>
               )}
-              />
-              <Route
-                path={DECODE_ROUTES.LIVE}
-                element={(
-                  <DecodePageRoute>
-                    <TabContainer tab="lti_live" fetch={fetchLiveTab} slice="courseHome">
-                      <LiveTab />
-                    </TabContainer>
-                  </DecodePageRoute>
-                )}
-              />
-              <Route
-                path={DECODE_ROUTES.DATES}
-                element={(
-                  <DecodePageRoute>
-                    <TabContainer tab="dates" fetch={fetchDatesTab} slice="courseHome">
-                      <DatesTab />
-                    </TabContainer>
-                  </DecodePageRoute>
-                )}
-              />
-              <Route
-                path={DECODE_ROUTES.DISCUSSION}
-                element={(
-                  <DecodePageRoute>
-                    <TabContainer tab="discussion" fetch={fetchDiscussionTab} slice="courseHome">
-                      <DiscussionTab />
-                    </TabContainer>
-                  </DecodePageRoute>
-                )}
-              />
-              {DECODE_ROUTES.PROGRESS.map((route) => (
+                />
                 <Route
-                  key={route}
-                  path={route}
+                  path={DECODE_ROUTES.LIVE}
                   element={(
                     <DecodePageRoute>
-                      <TabContainer
-                        tab="progress"
-                        fetch={fetchProgressTab}
-                        slice="courseHome"
-                        isProgressTab
-                      >
-                        <ProgressTab />
+                      <TabContainer tab="lti_live" fetch={fetchLiveTab} slice="courseHome">
+                        <LiveTab />
                       </TabContainer>
                     </DecodePageRoute>
-                  )}
+                )}
                 />
-              ))}
-              <Route
-                path={DECODE_ROUTES.COURSE_END}
-                element={(
-                  <DecodePageRoute>
-                    <TabContainer tab="courseware" fetch={fetchCourse} slice="courseware">
-                      <CourseExit />
-                    </TabContainer>
-                  </DecodePageRoute>
+                <Route
+                  path={DECODE_ROUTES.DATES}
+                  element={(
+                    <DecodePageRoute>
+                      <TabContainer tab="dates" fetch={fetchDatesTab} slice="courseHome">
+                        <DatesTab />
+                      </TabContainer>
+                    </DecodePageRoute>
                 )}
-              />
-              {DECODE_ROUTES.COURSEWARE.map((route) => (
+                />
                 <Route
-                  key={route}
-                  path={route}
+                  path={DECODE_ROUTES.DISCUSSION}
                   element={(
                     <DecodePageRoute>
-                      <CoursewareContainer />
+                      <TabContainer tab="discussion" fetch={fetchDiscussionTab} slice="courseHome">
+                        <DiscussionTab />
+                      </TabContainer>
                     </DecodePageRoute>
+                )}
+                />
+                {DECODE_ROUTES.PROGRESS.map((route) => (
+                  <Route
+                    key={route}
+                    path={route}
+                    element={(
+                      <DecodePageRoute>
+                        <TabContainer
+                          tab="progress"
+                          fetch={fetchProgressTab}
+                          slice="courseHome"
+                          isProgressTab
+                        >
+                          <ProgressTab />
+                        </TabContainer>
+                      </DecodePageRoute>
                   )}
+                  />
+                ))}
+                <Route
+                  path={DECODE_ROUTES.COURSE_END}
+                  element={(
+                    <DecodePageRoute>
+                      <TabContainer tab="courseware" fetch={fetchCourse} slice="courseware">
+                        <CourseExit />
+                      </TabContainer>
+                    </DecodePageRoute>
+                )}
                 />
-              ))}
-            </Routes>
-          </UserMessagesProvider>
-        </NoticesProvider>
-      </PathFixesProvider>
+                {DECODE_ROUTES.COURSEWARE.map((route) => (
+                  <Route
+                    key={route}
+                    path={route}
+                    element={(
+                      <DecodePageRoute>
+                        <CoursewareContainer />
+                      </DecodePageRoute>
+                  )}
+                  />
+                ))}
+              </Routes>
+            </UserMessagesProvider>
+          </NoticesProvider>
+        </PathFixesProvider>
+      </QueryClientProvider>
     </AppProvider>,
     document.getElementById('root'),
   );