fix: attach accept-language header on all requests

Author: serapieTuyishime

src/components/sections/learning-modules/InteractiveModule/index.tsx

@@ -10,8 +10,10 @@ import InteractiveModuleItem from "@/components/sections/learning-modules/Intera
 import { authCheck } from "@/store/feature/auth.slice";
 import { Course, InteractiveModule as InteractiveModuleType } from "@/types/course";
 import { hidePageNavigation, showPageNavigation } from "@/store/feature/communities/navigation.slice";
-import { checkAnswer, submitModuleAnswer } from "@/store/feature/learningModules.slice";
+// import { checkAnswer } from "@/store/feature/learningModules.slice";
 import { IRootState } from "@/store";
+import { checkAnswer, submitModuleAnswer } from "@/store/services/learningModules.service";
+import { useRouter } from "next/router";
 
 /**
  * interface for InteractiveModule multiSelector
@@ -51,6 +53,7 @@ export default function InteractiveModule({ data }: interactiveModuleProps): Rea
   const [ended, setEnded] = useState(false);
   const [loading, setLoading] = useState(true);
   const [answering, setAnswering] = useState(false);
+  const router = useRouter()
   const dispatch = useDispatch();
 
   const { isLoggedIn, course } = useMultiSelector<unknown, InteractiveModuleMultiSelector>({
@@ -62,7 +65,7 @@ export default function InteractiveModule({ data }: interactiveModuleProps): Rea
   const checkIfAnswered = useCallback(async () => {
     try {
       if (!isLoggedIn) return;
-      const answers = await checkAnswer(data.ref);
+      const answers = await checkAnswer({ ref: data.ref, locale: router.locale });
       if (!answers.length) return;
       setCurrent(items.length);
       setEnded(true);

src/pages/communities/[slug]/challenges/[challenge_id]/learning-modules/[id].tsx

@@ -4,7 +4,7 @@ import Head from "next/head";
 import { useDispatch } from "@/hooks/useTypedDispatch";
 import { Community } from "@/types/community";
 import { Challenge, LearningModule } from "@/types/course";
-import { findLearningModule, setCurrentLearningModule } from "@/store/feature/learningModules.slice";
+import { setCurrentLearningModule } from "@/store/feature/learningModules.slice";
 import { setCurrentCommunity } from "@/store/feature/community.slice";
 import { getMetadataDescription, getMetadataTitle } from "@/utilities/Metadata";
 import DefaultLayout from "@/components/layout/Default";
@@ -22,6 +22,8 @@ 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 { findLearningModule } from "@/store/services/learningModules.service";
+
 
 /**
  * Learning module page props interfae
@@ -110,10 +112,10 @@ export const getServerSideProps: GetServerSideProps = wrapper.getServerSideProps
     const challenge_id = params?.challenge_id as string;
     const learningModule_id = params?.id as string;
 
-    const [{ data: community }, { data: challenge }, { payload: learningModule }, translations] = await Promise.all([
+    const [{ data: community }, { data: challenge }, { data: learningModule }, translations] = await Promise.all([
       store.dispatch(fetchCurrentCommunity({ slug: communitySlug, locale })),
-      store.dispatch(fetchChallenge({ id: challenge_id, relations: ["learning-modules", "rubric"] })),
-      store.dispatch(findLearningModule(learningModule_id)),
+      store.dispatch(fetchChallenge({ id: challenge_id, relations: ["learning-modules", "rubric"], locale })),
+      store.dispatch(findLearningModule({ id: learningModule_id, locale })),
       serverSideTranslations(locale as string),
     ]);
 

src/pages/communities/[slug]/courses/[course_slug]/learning-modules/[id].tsx

@@ -4,7 +4,6 @@ import Head from "next/head";
 import { useDispatch } from "@/hooks/useTypedDispatch";
 import { Community } from "@/types/community";
 import { Challenge, Course, LearningModule } from "@/types/course";
-import { findLearningModule } from "@/store/feature/learningModules.slice";
 import { getMetadataDescription, getMetadataTitle } from "@/utilities/Metadata";
 import DefaultLayout from "@/components/layout/Default";
 import Header from "@/components/sections/learning-modules/Header";
@@ -20,6 +19,7 @@ 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 { findLearningModule } from "@/store/services/learningModules.service";
 
 /**
  * Learning module page props interfae
@@ -108,11 +108,11 @@ export const getServerSideProps = wrapper.getServerSideProps((store) => async ({
     const communitySlug = params?.slug as string;
     const courseSlug = params?.course_slug as string;
     const id = params?.id as string;
-
-    const [{ data: community }, { data: course }, { payload: learningModule }, translations] = await Promise.all([
+    console.log("me sending data")
+    const [{ data: community }, { data: course }, { data: learningModule }, translations] = await Promise.all([
       store.dispatch(fetchCurrentCommunity({ slug: communitySlug, locale })),
       store.dispatch(fetchCourse({ slug: courseSlug, locale })),
-      store.dispatch(findLearningModule(id)),
+      store.dispatch(findLearningModule({ id, locale })),
       serverSideTranslations(locale as string),
     ]);
     if (!community || !course || !learningModule) throw new NotFoundError();

src/pages/communities/[slug]/index.tsx

@@ -47,7 +47,7 @@ export const getServerSideProps = wrapper.getServerSideProps((store) => async ({
 
     const [{ data: community }, { data: challenges }, { data: scoreboard }, translations] = await Promise.all([
       store.dispatch(fetchCurrentCommunity({ slug, locale })),
-      store.dispatch(fetchAllChallenges({ slug })),
+      store.dispatch(fetchAllChallenges({ slug, locale })),
       store.dispatch(fetchAllScoreboards({ slug, locale: locale || "en" })),
       serverSideTranslations(locale as string),
     ]);

src/store/feature/learningModules.slice.ts

@@ -33,12 +33,12 @@ export const learningModulesSlice = createSlice({
   },
   extraReducers: (builder) => {
     builder
-      .addCase(findLearningModule.fulfilled, (state, action) => {
-        state.current = action.payload;
-      })
-      .addCase(getAllLearningModules.fulfilled, (state, action) => {
-        state.list = action.payload;
-      })
+      // .addCase(findLearningModule.fulfilled, (state, action) => {
+      //   state.current = action.payload;
+      // })
+      // .addCase(getAllLearningModules.fulfilled, (state, action) => {
+      //   state.list = action.payload;
+      // })
       .addCase(HYDRATE, (state, action) => {
         return {
           ...state,
@@ -50,15 +50,15 @@ export const learningModulesSlice = createSlice({
   },
 });
 
-export const findLearningModule = createAsyncThunk("learningModules/find", async (id: string) => {
-  const { data } = await api().server.get(`learning-modules/${id}`);
-  return data;
-});
+// export const findLearningModule = createAsyncThunk("learningModules/find", async (id: string) => {
+//   const { data } = await api().server.get(`learning-modules/${id}`);
+//   return data;
+// });
 
-export const getAllLearningModules = createAsyncThunk("learningModules/all", async (slug: string) => {
-  const { data } = await api().server.get<LearningModule[]>(`courses/${slug}/learning-modules`);
-  return data;
-});
+// export const getAllLearningModules = createAsyncThunk("learningModules/all", async (slug: string) => {
+//   const { data } = await api().server.get<LearningModule[]>(`courses/${slug}/learning-modules`);
+//   return data;
+// });
 
 export const submitModuleAnswer = createAsyncThunk("learningModules/submitAnswer", async ({ ref, course }: { ref: string; course: string }) => {
   await api().client.put("interactive-modules/answer", {

src/store/index.ts

@@ -47,6 +47,7 @@ import challengeService from "@/store/services/communities/challenges";
 import scoreboardService from "./services/communities/scoreboard.service";
 import communitiesProfile from "./feature/profile/communities.slice";
 import reputationSlice from "./feature/profile/reputation.slice";
+import { learningModulesService } from "./services/learningModules.service";
 
 export interface IRootState {
   communities: ReturnType<typeof communities.reducer>;
@@ -95,6 +96,7 @@ export interface IRootState {
   teams: ReturnType<typeof teamsSlice.reducer>;
   teamsService: ReturnType<typeof teamsService.reducer>;
   invites: ReturnType<typeof invitesSlice.reducer>;
+  learningModuleService: ReturnType<typeof learningModulesService.reducer>;
 }
 
 export const makeStore = () =>
@@ -145,6 +147,7 @@ export const makeStore = () =>
       [invitesSlice.name]: invitesSlice.reducer,
       [communitiesProfile.name]: communitiesProfile.reducer,
       [reputationSlice.name]: reputationSlice.reducer,
+      [learningModulesService.reducerPath]: learningModulesService.reducer,
     },
 
     middleware: (getDefaultMiddleware) => {
@@ -164,7 +167,8 @@ export const makeStore = () =>
         authService.middleware,
         teamsService.middleware,
         challengeService.middleware,
-        scoreboardService.middleware
+        scoreboardService.middleware,
+        learningModulesService.middleware
       );
     },
   });

src/store/services/communities/challenges/index.ts

@@ -16,10 +16,13 @@ export const challengeService = createApi({
   refetchOnMountOrArgChange: true,
   endpoints: (builder) => ({
     findChallengeById: builder.query({
-      query: ({ id, relations }) => {
+      query: ({ id, relations, locale }) => {
         const params = queryString.stringify({ relations: relations || [] }, { arrayFormat: "bracket" });
         return {
           url: `challenges/${id}?${params}`,
+          headers: {
+            "accept-language": locale,
+          },
         };
       },
       onQueryStarted: async (_, { dispatch, queryFulfilled }) => {
@@ -36,7 +39,14 @@ export const challengeService = createApi({
     }),
 
     getAllChallenges: builder.query({
-      query: (slug) => `communities/${slug}/challenges`,
+      query: ({ slug, locale }) => {
+        return {
+          url: `communities/${slug}/challenges`,
+          headers: {
+            "accept-language": locale,
+          },
+        };
+      },
       onQueryStarted: async (_, { dispatch, queryFulfilled }) => {
         try {
           const { data } = await queryFulfilled;
@@ -49,10 +59,13 @@ export const challengeService = createApi({
     }),
 
     fetchChallengeByIdAuthenticated: builder.query({
-      query: ({ id, relations }) => {
+      query: ({ id, relations, locale }) => {
         const params = queryString.stringify({ relations: relations || [] }, { arrayFormat: "bracket" });
         return {
           url: `challenges/${id}?${params}`,
+          headers: {
+            "accept-language": locale,
+          },
         };
       },
       onQueryStarted: async (_, { dispatch, queryFulfilled }) => {
@@ -95,14 +108,15 @@ export const challengeService = createApi({
   }),
 });
 
-export const fetchChallenge = ({ id, relations }: { id: string; relations?: string[] }) =>
+export const fetchChallenge = ({ id, relations, locale }: { id: string; relations?: string[]; locale?: string }) =>
   challengeService.endpoints.findChallengeById.initiate({
     id,
     relations: relations || [],
+    locale,
   });
 
-export const fetchAllChallenges = ({ slug }: { slug: string }) => {
-  return challengeService.endpoints.getAllChallenges.initiate(slug);
+export const fetchAllChallenges = ({ slug, locale }: { slug: string; locale?: string }) => {
+  return challengeService.endpoints.getAllChallenges.initiate({ slug, locale });
 };
 
 /**

src/store/services/learningModules.service.ts

@@ -0,0 +1,66 @@
+import { createApi } from "@reduxjs/toolkit/query/react";
+import baseQuery from "@/config/baseQuery";
+
+export const learningModulesService = createApi({
+  reducerPath: "learningModulesService",
+  baseQuery: baseQuery(),
+  refetchOnMountOrArgChange: true,
+  endpoints: (builder) => ({
+    findLearningModule: builder.query({
+      query: ({ id, locale }: any) => ({
+        url: `learning-modules/${id}`,
+        headers: {
+          "accept-language": locale,
+        },
+      }),
+    }),
+
+    getAllLearningModules: builder.query({
+      query: ({ slug, locale }: { slug: string; locale?: string }) => ({
+        url: `courses/${slug}/learning-modules}`,
+        headers: {
+          "accept-language": locale,
+        },
+      }),
+    }),
+
+    submitModuleAnswer: builder.query({
+      query: ({ ref, course, locale }: { ref: string; course: string; locale?: string }) => ({
+        url: `interactive-modules/answer`,
+        headers: {
+          "accept-language": locale,
+        },
+        body: {
+          module: ref,
+          course,
+          score: 100,
+        },
+        method: "PUT",
+      }),
+    }),
+
+    checkAnswer: builder.query({
+      query: ({ ref, locale }: { ref: string; locale?: string }) => ({
+        url: "interactive-modules/check-answer",
+        body: {
+          module: ref,
+        },
+        headers: {
+          "accept-language": locale,
+        },
+      }),
+    }),
+  }),
+});
+
+export const findLearningModule = ({ id, locale }: { id: string; locale?: string }) => learningModulesService.endpoints.findLearningModule.initiate({ locale, id });
+
+export const getAllLearningModules = ({ slug, locale }: { slug: string; locale?: string }) => learningModulesService.endpoints.getAllLearningModules.initiate({ slug, locale });
+
+export const submitModuleAnswer = ({ ref, course, locale }: { ref: string; course: string; locale?: string }) =>
+  learningModulesService.endpoints.submitModuleAnswer.initiate({ ref, course, locale });
+
+export const checkAnswer = ({ ref, locale }: { ref: string; locale?: string }) => {
+  console.log("the locale from check answer in the learning modules");
+  return learningModulesService.endpoints.checkAnswer.initiate({ ref, locale });
+};