LPs: isr

src/pages/learning-plans/[slug]/index.tsx

@@ -5,23 +5,20 @@ import useTranslation from 'next-translate/useTranslation';
 
 import styles from './courses.module.scss';
 
+import { fetcher } from '@/api';
 import CourseDetails from '@/components/Course/CourseDetails';
-import DataFetcher from '@/components/DataFetcher';
 import NextSeoWrapper from '@/components/NextSeoWrapper';
 import PageContainer from '@/components/PageContainer';
 import Spinner from '@/dls/Spinner/Spinner';
 import { logErrorToSentry } from '@/lib/sentry';
 import layoutStyles from '@/pages/index.module.scss';
 import { Course } from '@/types/auth/Course';
-import { getCourse, privateFetcher } from '@/utils/auth/api';
 import { makeGetCourseUrl } from '@/utils/auth/apiPaths';
 import { getAllChaptersData } from '@/utils/chapter';
 import { getLanguageAlternates } from '@/utils/locale';
 import { getCanonicalUrl, getCourseNavigationUrl } from '@/utils/navigation';
-import {
-  ONE_WEEK_REVALIDATION_PERIOD_SECONDS,
-  REVALIDATION_PERIOD_ON_ERROR_SECONDS,
-} from '@/utils/staticPageGeneration';
+import { REVALIDATION_PERIOD_ON_ERROR_SECONDS } from '@/utils/staticPageGeneration';
+import { getBasePath } from '@/utils/url';
 
 const Loading = () => (
   <div className={layoutStyles.loadingContainer}>
@@ -38,8 +35,9 @@ interface Props {
 const LearningPlanPage: NextPage<Props> = ({ course }) => {
   const { lang, t } = useTranslation('learn');
   const router = useRouter();
-  const { slug } = router.query;
-
+  if (router.isFallback) {
+    return <Loading />;
+  }
   const url = getCourseNavigationUrl(course.slug);
 
   return (
@@ -56,18 +54,7 @@ const LearningPlanPage: NextPage<Props> = ({ course }) => {
       <div className={layoutStyles.pageContainer}>
         <div className={styles.container}>
           <PageContainer>
-            <DataFetcher
-              loading={Loading}
-              queryKey={makeGetCourseUrl(slug as string)}
-              fetcher={privateFetcher}
-              render={
-                ((courseDetailsResponse: Course) => (
-                  <>
-                    <CourseDetails course={courseDetailsResponse} />
-                  </>
-                )) as any
-              }
-            />
+            <CourseDetails course={course} />
           </PageContainer>
         </div>
       </div>
@@ -80,16 +67,21 @@ export const getStaticPaths: GetStaticPaths = async () => ({
   fallback: 'blocking', // will server-render pages on-demand if the path doesn't exist.
 });
 
+// eslint-disable-next-line react-func/max-lines-per-function
 export const getStaticProps: GetStaticProps = async ({ params, locale }) => {
   try {
-    const course = await getCourse(params.slug as string);
+    const course = await fetcher<Course>(makeGetCourseUrl(params.slug as string), {
+      headers: {
+        origin: getBasePath(),
+      },
+    });
     const chaptersData = await getAllChaptersData(locale);
     return {
       props: {
         course,
         chaptersData,
       },
-      revalidate: ONE_WEEK_REVALIDATION_PERIOD_SECONDS,
+      revalidate: REVALIDATION_PERIOD_ON_ERROR_SECONDS,
     };
   } catch (error) {
     logErrorToSentry(error, {

src/pages/learning-plans/index.tsx

@@ -1,15 +1,26 @@
 import { NextPage, GetStaticProps } from 'next';
 import useTranslation from 'next-translate/useTranslation';
 
+import { fetcher } from '@/api';
 import CoursesPageLayout from '@/components/Course/CoursesPageLayout';
 import NextSeoWrapper from '@/components/NextSeoWrapper';
 import { getLearningPlansImageUrl } from '@/lib/og';
+import { logErrorToSentry } from '@/lib/sentry';
+import { Course } from '@/types/auth/Course';
+import { makeGetCoursesUrl } from '@/utils/auth/apiPaths';
 import { getAllChaptersData } from '@/utils/chapter';
 import { getLanguageAlternates } from '@/utils/locale';
 import { getCanonicalUrl, getCoursesNavigationUrl } from '@/utils/navigation';
+import { REVALIDATION_PERIOD_ON_ERROR_SECONDS } from '@/utils/staticPageGeneration';
+import { getBasePath } from '@/utils/url';
 
-const LearningPlansPage: NextPage = () => {
+type LearningPlansPageProps = {
+  courses?: Course[];
+};
+
+const LearningPlansPage: NextPage<LearningPlansPageProps> = ({ courses }) => {
   const { t, lang } = useTranslation('learn');
+  const initialCourses = courses && courses.length > 0 ? courses : undefined;
 
   return (
     <>
@@ -24,19 +35,38 @@ const LearningPlansPage: NextPage = () => {
         imageWidth={1200}
         imageHeight={630}
       />
-      <CoursesPageLayout />
+      <CoursesPageLayout initialCourses={initialCourses} />
     </>
   );
 };
 
 export const getStaticProps: GetStaticProps = async ({ locale }) => {
   const allChaptersData = await getAllChaptersData(locale);
-
-  return {
-    props: {
-      chaptersData: allChaptersData,
-    },
-  };
+  try {
+    const response = await fetcher<{ data?: Course[] }>(makeGetCoursesUrl({ myCourses: false }), {
+      headers: {
+        origin: getBasePath(),
+      },
+    });
+    return {
+      props: {
+        courses: response?.data ?? [],
+        chaptersData: allChaptersData,
+      },
+      revalidate: REVALIDATION_PERIOD_ON_ERROR_SECONDS,
+    };
+  } catch (error) {
+    logErrorToSentry(error, {
+      transactionName: 'getStaticProps-LearningPlansPage',
+    });
+    return {
+      props: {
+        courses: [],
+        chaptersData: allChaptersData,
+      },
+      revalidate: REVALIDATION_PERIOD_ON_ERROR_SECONDS,
+    };
+  }
 };
 
 export default LearningPlansPage;