fix: resolve the netflify timeout error on learning modules

serapieTuyishime · serapieTuyishime · commit aec88ce8f398 · 2024-03-14T18:03:15.000+02:00
diff --git a/src/pages/communities/[slug]/challenges/[challenge_id]/learning-modules/[id].tsx b/src/pages/communities/[slug]/challenges/[challenge_id]/learning-modules/[id].tsx
@@ -14,7 +14,7 @@ import { initChallengeNavigationMenu } from "@/store/feature/communities/navigat
 import { setColors } from "@/store/feature/ui.slice";
 import useNavigation from "@/hooks/useNavigation";
 import { GetServerSideProps } from "next";
-import { wrapper } from "@/store";
+import { IRootState, wrapper } from "@/store";
 import { fetchCurrentCommunity } from "@/store/services/community.service";
 import { serverSideTranslations } from "next-i18next/serverSideTranslations";
 import ChallengeOverviewCard from "@/components/cards/challenge/Overview";
@@ -23,6 +23,10 @@ import { fetchChallenge } from "@/store/services/communities/challenges";
 import PageNavigation from "@/components/sections/courses/PageNavigation";
 import ChallengeCard from "@/components/cards/challenge/Challenge";
 import { useTranslation } from "next-i18next";
+import { useMultiSelector } from "@/hooks/useTypedSelector";
+import Section from "@/components/ui/Section";
+import Loader from "@/components/ui/Loader";
+import { useRouter } from "next/router";
 
 /**
  * Learning module page props interfae
@@ -39,6 +43,11 @@ interface LearningModulePageProps {
   };
 }
 
+interface LearningModuleMultiselector {
+  learningModule: LearningModule,
+  loading: boolean
+}
+
 /**
  * Learning module module view page
  * @date 4/24/2023 - 8:35:52 PM
@@ -48,27 +57,45 @@ interface LearningModulePageProps {
  * @returns
  */
 export default function LearningModulePage(props: LearningModulePageProps) {
-  const { community, learningModule, challenge } = props.pageProps;
+  const { community, challenge } = props.pageProps;
+  const { learningModule, loading } = useMultiSelector<unknown, LearningModuleMultiselector>({
+    learningModule: (state: IRootState) => state.learningModules.current,
+    loading: (state: IRootState) => state.learningModules.loading
+  })
   const dispatch = useDispatch();
   const { t } = useTranslation();
   const navigation = useNavigation();
+  const router = useRouter()
+  const { query, locale } = router
 
   useEffect(() => {
     dispatch(setCurrentCommunity(community));
     dispatch(setCurrentLearningModule(learningModule));
     dispatch(setColors(community.colors));
     dispatch(initChallengeNavigationMenu(navigation.community));
-  }, [community, learningModule, navigation.community]);
+    dispatch(findLearningModule({ id: query?.id as string, locale }))
+  }, [community?.colors, locale]);
+
 
   const title = getMetadataTitle(learningModule?.title);
   const descriptions = getMetadataDescription(learningModule?.description);
 
-  const paths = useMemo(() => [challenge.name, learningModule?.title], [challenge.name, learningModule?.title]);
+  const paths = useMemo(() => [challenge.name, learningModule?.title], [challenge.name, learningModule]);
 
   const isLastLearningModule = useMemo(() => {
+    if (!learningModule) return false
     if (!challenge.learningModules || !challenge.learningModules.length) return false;
     return learningModule.id === challenge.learningModules[challenge.learningModules.length - 1].id;
-  }, [learningModule.id, challenge.learningModules]);
+  }, [learningModule, challenge.learningModules]);
+
+  if (loading)
+
+    return (
+      <Section className="h-[50vh] flex items-center justify-center">
+        <Loader />
+      </Section>
+    );
+
   return (
     <>
       <Head>
@@ -109,22 +136,19 @@ export const getServerSideProps: GetServerSideProps = wrapper.getServerSideProps
   try {
     const communitySlug = params?.slug as string;
     const challenge_id = params?.challenge_id as string;
-    const learningModule_id = params?.id as string;
 
-    const [{ data: community }, { data: challenge }, { data: learningModule }, translations] = await Promise.all([
+    const [{ data: community }, { data: challenge }, translations] = await Promise.all([
       store.dispatch(fetchCurrentCommunity({ slug: communitySlug, locale })),
       store.dispatch(fetchChallenge({ id: challenge_id, relations: ["learning-modules", "rubric"], locale })),
-      store.dispatch(findLearningModule({ id: learningModule_id, locale })),
       serverSideTranslations(locale as string),
     ]);
 
-    if (Object.entries(community).length === 0 || Object.entries(challenge).length === 0 || Object.entries(learningModule).length === 0)
+    if (Object.entries(community).length === 0 || Object.entries(challenge).length === 0)
       throw new Error("Failed to fetch learning module");
 
     return {
       props: {
         community,
-        learningModule,
         challenge,
         ...translations,
       },
diff --git a/src/pages/communities/[slug]/courses/[course_slug]/learning-modules/[id].tsx b/src/pages/communities/[slug]/courses/[course_slug]/learning-modules/[id].tsx
@@ -9,7 +9,7 @@ import { getMetadataDescription, getMetadataTitle } from "@/utilities/Metadata";
 import DefaultLayout from "@/components/layout/Default";
 import Header from "@/components/sections/learning-modules/Header";
 import { initCourseNavigationMenu } from "@/store/feature/communities/navigation.slice";
-import { wrapper } from "@/store";
+import { IRootState, wrapper } from "@/store";
 import { fetchCurrentCommunity } from "@/store/services/community.service";
 import { fetchCourse } from "@/store/services/course.service";
 import { serverSideTranslations } from "next-i18next/serverSideTranslations";
@@ -20,6 +20,10 @@ import ChallengeCard from "@/components/cards/challenge/Challenge";
 import { useTranslation } from "next-i18next";
 import PageNavigation from "@/components/sections/courses/PageNavigation";
 import { NotFoundError } from "@/utilities/errors/NotFoundError";
+import { useRouter } from "next/router";
+import { useMultiSelector } from "@/hooks/useTypedSelector";
+import Section from "@/components/ui/Section";
+import Loader from "@/components/ui/Loader";
 
 /**
  * Learning module page props interfae
@@ -32,11 +36,15 @@ interface LearningModulePageProps {
   pageProps: {
     community: Community;
     course: Course;
-    learningModule: LearningModule;
     challenges: Challenge[];
   };
 }
 
+interface LearningModuleMultiselector {
+  learningModule: LearningModule,
+  loading: boolean
+}
+
 /**
  * Learning module module view page
  * @date 4/24/2023 - 8:35:52 PM
@@ -46,23 +54,37 @@ interface LearningModulePageProps {
  * @returns
  */
 export default function LearningModulePage(props: LearningModulePageProps): ReactElement {
-  const { course, learningModule, community } = props.pageProps;
+  const { course, community } = props.pageProps;
+  const { learningModule, loading } = useMultiSelector<unknown, LearningModuleMultiselector>({
+    learningModule: (state: IRootState) => state.learningModules.current,
+    loading: (state: IRootState) => state.learningModules.loading
+  })
   const dispatch = useDispatch();
   const navigation = useNavigation();
   const { t } = useTranslation();
+  const router = useRouter()
+  const { query, locale } = router
 
   useEffect(() => {
     dispatch(initCourseNavigationMenu(navigation.community));
-  }, [dispatch]);
+    dispatch(findLearningModule({ id: query?.id as string, locale }))
+  }, [dispatch, locale]);
 
-  const title = getMetadataTitle(learningModule.title!, course.name!);
-  const descriptions = getMetadataDescription(learningModule.description!);
+  const title = useMemo(() => getMetadataTitle(learningModule?.title, course.name!), [course.name, learningModule]);
+  const descriptions = useMemo(() => getMetadataDescription(learningModule?.description), [learningModule]);
   const paths = useMemo(() => [learningModule?.title], [learningModule?.title]);
   const isLastLearningModule = useMemo(() => {
+    if (!learningModule) return false
     if (!course.learningModules || !course.learningModules.length) return false;
     return learningModule.id === course.learningModules[course.learningModules.length - 1].id;
-  }, [learningModule.id, course.learningModules]);
+  }, [learningModule, course.learningModules]);
 
+  if (loading)
+    return (
+      <Section className="h-[50vh] flex items-center justify-center">
+        <Loader />
+      </Section>
+    );
   return (
     <>
       <Head>
@@ -107,20 +129,17 @@ export const getServerSideProps = wrapper.getServerSideProps((store) => async ({
   try {
     const communitySlug = params?.slug as string;
     const courseSlug = params?.course_slug as string;
-    const id = params?.id as string;
 
-    const [{ data: community }, { data: course }, { data: learningModule }, translations] = await Promise.all([
+    const [{ data: community }, { data: course }, translations] = await Promise.all([
       store.dispatch(fetchCurrentCommunity({ slug: communitySlug, locale })),
       store.dispatch(fetchCourse({ slug: courseSlug, locale })),
-      store.dispatch(findLearningModule({ id, locale })),
       serverSideTranslations(locale as string),
     ]);
-    if (!community || !course || !learningModule) throw new NotFoundError();
+    if (!community || !course) throw new NotFoundError();
     return {
       props: {
         community,
         course,
-        learningModule,
         ...translations,
       },
     };
diff --git a/src/store/feature/learningModules.slice.ts b/src/store/feature/learningModules.slice.ts
@@ -13,11 +13,13 @@ import { HYDRATE } from "next-redux-wrapper";
 interface LearningModulesState {
   list: LearningModule[];
   current?: LearningModule | null;
+  loading: boolean;
 }
 
 const initialState: LearningModulesState = {
   list: [],
   current: null,
+  loading: false,
 };
 
 export const learningModulesSlice = createSlice({
@@ -30,6 +32,9 @@ export const learningModulesSlice = createSlice({
     setLearningModuleList(state, action) {
       state.list = action.payload;
     },
+    setLoading(state, action) {
+      state.loading = action.payload;
+    },
   },
   extraReducers: (builder) => {
     builder.addCase(HYDRATE, (state, action) => {
@@ -58,5 +63,5 @@ export const checkAnswer = async (ref: string) => {
   return data;
 };
 
-export const { setCurrentLearningModule, setLearningModuleList } = learningModulesSlice.actions;
+export const { setCurrentLearningModule, setLearningModuleList, setLoading } = learningModulesSlice.actions;
 export default learningModulesSlice;
diff --git a/src/store/services/learningModules.service.ts b/src/store/services/learningModules.service.ts
@@ -1,6 +1,6 @@
 import { createApi } from "@reduxjs/toolkit/query/react";
 import baseQuery from "@/config/baseQuery";
-import { setCurrentLearningModule, setLearningModuleList } from "../feature/learningModules.slice";
+import { setCurrentLearningModule, setLearningModuleList, setLoading } from "../feature/learningModules.slice";
 
 /**
  * Learning module api service
@@ -21,8 +21,10 @@ export const learningModulesService = createApi({
         },
       }),
       onQueryStarted: async (_, { dispatch, queryFulfilled }) => {
+        dispatch(setLoading(true));
         const { data } = await queryFulfilled;
         dispatch(setCurrentLearningModule(data));
+        dispatch(setLoading(false));
       },
     }),
 
