Merge branch 'stage'

musayann · musayann · commit e7d10802f789 · 2024-03-19T19:36:35.000+03:00
diff --git a/src/components/cards/Reputation.tsx b/src/components/cards/Reputation.tsx
@@ -32,10 +32,16 @@ interface ReputationCardProps {
  */
 export default function ReputationCard({ details = {} }: ReputationCardProps): ReactElement {
   return (
-    <div className="flex space-x-3 text-left hover:bg-gray-50 pb-3 -mx-5 px-5">
-      <Avatar icon={details.community?.icon} color={details.community?.colors?.cover?.background || details.community?.colors.primary} size="medium" shape="rounded" />
+    <div className="flex space-x-3 text-left hover:bg-gray-50 py-3 -mx-5 px-5 relative">
+      <Avatar
+        icon={details.community?.icon}
+        color={details.community?.colors?.cover?.background || details.community?.colors.primary}
+        size="medium"
+        shape="rounded"
+        useLink={false}
+      />
       {details?.score && (
-        <Link href={details?.community ? `/communities/${details.community.slug}` : ""} className="pt-1">
+        <Link href={details?.community ? `/communities/${details.community.slug}` : ""} className="pt-1 before:content-[''] before:absolute before:top-0 before:left-0 before:w-full before:h-full before:z-0 before:block">
           <span className="block text-base font-medium leading-normal">
             <Currency value={details.score} token="REP" />
           </span>
diff --git a/src/components/popups/user/Dropdown.tsx b/src/components/popups/user/Dropdown.tsx
@@ -128,7 +128,7 @@ const UserProfileDropdown = ({ buttonStyles, onClose }: { buttonStyles?: CSSProp
         ) : (
           <></>
         )}
-        {showLanguageSwitcher && <LanguageList />}
+        {showLanguageSwitcher && <LanguageList onSelect={onClose} />}
         <div className="p-4 flex justify-center bg-indigo-50">
           <div className="z-10">
             <Button
diff --git a/src/components/sections/bounties/Navigation.tsx b/src/components/sections/bounties/Navigation.tsx
@@ -55,7 +55,7 @@ export default function BountiesNavigation(): ReactElement {
           ...UniqBy(
             bounties.map((bounty) => {
               return {
-                label: bounty.name,
+                label: bounty.community,
                 exact: true,
                 link: `/bounties/${bounty.slug}`,
               };
diff --git a/src/components/sections/learning-modules/InteractiveModule/index.tsx b/src/components/sections/learning-modules/InteractiveModule/index.tsx
@@ -10,7 +10,8 @@ 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 { submitModuleAnswer } from "@/store/services/learningModules.service";
 import { IRootState } from "@/store";
 
 /**
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
@@ -4,7 +4,8 @@ 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 { findLearningModule } from "@/store/services/learningModules.service";
 import { setCurrentCommunity } from "@/store/feature/community.slice";
 import { getMetadataDescription, getMetadataTitle } from "@/utilities/Metadata";
 import DefaultLayout from "@/components/layout/Default";
@@ -13,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";
@@ -22,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
@@ -38,6 +43,11 @@ interface LearningModulePageProps {
   };
 }
 
+interface LearningModuleMultiselector {
+  learningModule: LearningModule,
+  loading: boolean
+}
+
 /**
  * Learning module module view page
  * @date 4/24/2023 - 8:35:52 PM
@@ -47,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>
@@ -108,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 }, { payload: 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"] })),
-      store.dispatch(findLearningModule(learningModule_id)),
+      store.dispatch(fetchChallenge({ id: challenge_id, relations: ["learning-modules", "rubric"], 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]/challenges/[challenge_id]/submissions/[submission_id].tsx b/src/pages/communities/[slug]/challenges/[challenge_id]/submissions/[submission_id].tsx
@@ -35,7 +35,7 @@ export default function SubmissionPage() {
     };
     setLoading(true);
     await Promise.all([
-      dispatch(fetchChallenge({ id: challenge_id as string, relations: ["rubric"] })),
+      dispatch(fetchChallenge({ id: challenge_id as string, relations: ["rubric"], locale })),
       dispatch(fetchCurrentCommunity(fetchCurrentCommunityPayload)),
       dispatch(findSubmssionById({ id: submission_id as string })),
     ]);
diff --git a/src/pages/communities/[slug]/challenges/[challenge_id]/submissions/index.tsx b/src/pages/communities/[slug]/challenges/[challenge_id]/submissions/index.tsx
@@ -118,7 +118,7 @@ export const getServerSideProps: GetServerSideProps = wrapper.getServerSideProps
     const [{ data: currentCommunity }, { data: submissions }, { data: challenge }, translations] = await Promise.all([
       dispatch(fetchCurrentCommunity({ slug: slug as string, locale: locale as string })),
       dispatch(fetchAllSubmission({ challengeId: challenge_id as string, locale: locale as string })),
-      dispatch(fetchChallenge({ id: challenge_id as string, relations: ["rubric", "courses", "learning-modules"] })),
+      dispatch(fetchChallenge({ id: challenge_id as string, relations: ["rubric", "courses", "learning-modules"], locale })),
       serverSideTranslations(locale as string),
     ]);
 
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
@@ -4,12 +4,12 @@ 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 { findLearningModule } from "@/store/services/learningModules.service";
 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 }, { payload: 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)),
       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/pages/communities/[slug]/index.tsx b/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),
     ]);
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: true,
 };
 
 export const learningModulesSlice = createSlice({
@@ -30,36 +32,22 @@ export const learningModulesSlice = createSlice({
     setLearningModuleList(state, action) {
       state.list = action.payload;
     },
+    setLoading(state, action) {
+      state.loading = action.payload;
+    },
   },
   extraReducers: (builder) => {
-    builder
-      .addCase(findLearningModule.fulfilled, (state, action) => {
-        state.current = action.payload;
-      })
-      .addCase(getAllLearningModules.fulfilled, (state, action) => {
-        state.list = action.payload;
-      })
-      .addCase(HYDRATE, (state, action) => {
-        return {
-          ...state,
-          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-          //@ts-ignore
-          ...action.payload["learningModules"],
-        };
-      });
+    builder.addCase(HYDRATE, (state, action) => {
+      return {
+        ...state,
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        //@ts-ignore
+        ...action.payload["learningModules"],
+      };
+    });
   },
 });
 
-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 submitModuleAnswer = createAsyncThunk("learningModules/submitAnswer", async ({ ref, course }: { ref: string; course: string }) => {
   await api().client.put("interactive-modules/answer", {
     module: ref,
@@ -75,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/index.ts b/src/store/index.ts
diff --git a/src/store/services/communities/challenges/index.ts b/src/store/services/communities/challenges/index.ts
diff --git a/src/store/services/learningModules.service.ts b/src/store/services/learningModules.service.ts
diff --git a/src/types/bounty.d.ts b/src/types/bounty.d.ts
