refactor: learning materials

Author: mhenriette

src/components/sections/communities/overview/LearningMaterials.tsx

@@ -31,14 +31,14 @@ export default function LearningMaterialsOverview() {
                 <div className="text-sm font-light lg:w-full lg:pr-7 pt-2 mb-6 md:mb-0">{t("communities.overview.learning-materials.description")} </div>
             </div>
             <div className="grid gap-6">
-                {courses?.map((course, index) => {
-                    return <CourseCard key={`learning-material-course-${index}`} course={course} community={community} />
+                {courses?.map((course) => {
+                    return <CourseCard key={`learning-material-course-${course.id}`} course={course} community={community} />
                 })}
             </div>
-            <div className="grid md:grid-cols-2 gap-3 w-full ">
-                {learningModules?.map((module, index) => {
+            <div className="grid md:grid-cols-2 gap-3 w-full">
+                {learningModules?.map((module) => {
                     return <RelatedLearningCard
-                        key={`learning-material-material-${index}`}
+                        key={`learning-material-material-${module.id}`}
                         title={module.title}
                         description={module.description}
                         path={`/communities/${community.slug}`} />

src/components/sections/communities/overview/Sidebar.tsx

@@ -3,6 +3,7 @@ import Link from "next/link";
 import { useRouter } from "next/router";
 import { useTranslation } from "next-i18next";
 import classNames from "classnames";
+import { useMemo } from "react";
 
 /**
  * @interface SidebarProps
@@ -29,22 +30,33 @@ export default function Sidebar(): JSX.Element {
     return router.asPath === link;
   };
 
-  const scoreboardLink = hasCurrentCommunity ? `/communities/${currentCommunity.slug}/scoreboard` : "";
-  const learningMaterialsLink = hasCurrentCommunity ? `/communities/${currentCommunity.slug}/learning-materials` : "";
-  const mainLink = hasCurrentCommunity ? `/communities/${currentCommunity.slug}` : "";
+const links = useMemo(() => {
+  if (!hasCurrentCommunity)
+    return {
+      scoreboardLink: "",
+      learningMaterialsLink: "",
+      mainLink: "",
+    };
+  const { slug } = currentCommunity;
+  return {
+    scoreboardLink: `/communities/${slug}/scoreboard`,
+    learningMaterialsLink: `/communities/${slug}/learning-materials`,
+    mainLink: `/communities/${slug}`,
+  };
+}, [hasCurrentCommunity, currentCommunity]);
 
   return (
     <div className="flex flex-col md:divide-y divide-solid divide-gray-100 w-full text-gray-700 space-y-6">
-      <Link href={mainLink}>
-        <div className={isActive(mainLink) ? "" : "text-tertiary"}>
+      <Link href={links.mainLink}>
+        <div className={isActive(links.mainLink) ? "" : "text-tertiary"}>
           <div className="font-medium text-.5xl leading-snug">{t("communities.overview.challenges.title")}</div>
           <div className="text-sm font-light lg:w-full lg:pr-7 pt-2 mb-6 md:mb-0">{t("communities.overview.challenges.description")} </div>
         </div>
       </Link>
-      <Link href={learningMaterialsLink}>
+      <Link href={links.learningMaterialsLink}>
         <div className={classNames("pt-6",
           {
-            "text-tertiary": !isActive(learningMaterialsLink),
+            "text-tertiary": !isActive(links.learningMaterialsLink),
           }
         )}
         >
@@ -53,11 +65,11 @@ export default function Sidebar(): JSX.Element {
         </div>
       </Link>
       {hasCurrentCommunity && (
-        <Link href={scoreboardLink}>
+        <Link href={links.scoreboardLink}>
           <div className={classNames("pt-6",
             {
-              "md:block hidden scroll-smooth": isActive(scoreboardLink),
-              "text-tertiary": !isActive(scoreboardLink)
+              "md:block hidden scroll-smooth": isActive(links.scoreboardLink),
+              "text-tertiary": !isActive(links.scoreboardLink)
             },
           )}>
             <div className="font-medium text-.5xl leading-snug">{t("communities.overview.scoreboard.title")}</div>

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

@@ -15,6 +15,7 @@ import { useTranslation } from "next-i18next";
 import Head from "next/head";
 import { getMetadataDescription, getMetadataTitle } from "@/utilities/Metadata";
 import LearningMaterialsOverview from "@/components/sections/communities/overview/LearningMaterials";
+import { v4 as uuidv4 } from "uuid";
 
 export default function Slug(props: {
   pageProps: {
@@ -28,8 +29,8 @@ export default function Slug(props: {
     <>
       <Head>
         <title>{getMetadataTitle(t("communities.navigation.courses"), community?.name as string)}</title>
-        {getMetadataDescription(community?.description as string).map((attributes, i) => (
-          <meta key={`scoreboard-meta-${i}`} {...attributes} />
+        {getMetadataDescription(community?.description as string).map((attributes) => (
+          <meta key={`scoreboard-meta-${uuidv4()}`} {...attributes} />
         ))}
       </Head>
       <CommunityWrapper>
@@ -64,13 +65,15 @@ export const getServerSideProps = wrapper.getServerSideProps((store) => async ({
       store.dispatch(fetchLearningMaterials({ slug, locale })),
       serverSideTranslations(locale as string),
     ]);
+
     if (!community || !challenges) throw new NotFoundError();
+
     return {
       props: {
         community,
         challenges,
         scoreboard,
-        learningMaterials,
+        learningMaterials: learningMaterials || { courses: [], learningModule: [] },
         ...translations,
       },
     };

src/pages/communities/[slug]/learning-materials.tsx

@@ -12,46 +12,41 @@ import CommunityWrapper from "@/components/sections/communities/overview/Wrapper
 import { Course, LearningModule } from "@/types/course";
 import LearningMaterialsOverview from "@/components/sections/communities/overview/LearningMaterials";
 
-
-
 export default function LearningMaterials(props: {
-    pageProps: {
-        community: Community;
-        learningMaterials: { courses: Course[], learningModules: LearningModule[] };
-    };
+  pageProps: {
+    community: Community;
+    learningMaterials: { courses: Course[]; learningModules: LearningModule[] };
+  };
 }) {
-    const { t } = useTranslation()
-    const { community } = props.pageProps
-    return <div>
-        <Head>
-            <title>{getMetadataTitle(t("communities.navigation.learning-materials"), community?.name as string)}</title>
-            {getMetadataDescription(community?.description as string).map((attributes, i) => (
-                <meta key={`scoreboard-meta-${i}`} {...attributes} />
-            ))}
-        </Head>
-        <CommunityWrapper >
-            <LearningMaterialsOverview />
-        </CommunityWrapper>
+  const { t } = useTranslation();
+  const { community } = props.pageProps;
+  return (
+    <div>
+      <Head>
+        <title>{getMetadataTitle(t("communities.navigation.learning-materials"), community?.name as string)}</title>
+        {getMetadataDescription(community?.description as string).map((attributes, i) => (
+          <meta key={`scoreboard-meta-${i}`} {...attributes} />
+        ))}
+      </Head>
+      <CommunityWrapper>
+        <LearningMaterialsOverview />
+      </CommunityWrapper>
     </div>
-
+  );
 }
 
 LearningMaterials.getLayout = function (page: ReactElement) {
-    return <CommunityLayout>{page}</CommunityLayout>;
+  return <CommunityLayout>{page}</CommunityLayout>;
 };
 
 export const getServerSideProps: GetServerSideProps = wrapper.getServerSideProps((store) => async ({ locale, params }) => {
-    const slug = params?.slug as string;
-    try {
-        const [{ data: community }] = await Promise.all([
-            store.dispatch(fetchCurrentCommunity({ slug, locale })),
-            store.dispatch(fetchLearningMaterials({ slug, locale })),
-        ])
-        return { props: { community, ...(await i18Translate(locale as string)) } };
-    }
-    catch (err) {
-        return {
-            notFound: true,
-        };
-    }
-})
+  const slug = params?.slug as string;
+  try {
+    const [{ data: community }] = await Promise.all([store.dispatch(fetchCurrentCommunity({ slug, locale })), store.dispatch(fetchLearningMaterials({ slug, locale }))]);
+    return { props: { community, ...(await i18Translate(locale as string)) } };
+  } catch (err) {
+    return {
+      notFound: true,
+    };
+  }
+});

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

@@ -53,7 +53,7 @@ export const getServerSideProps: GetServerSideProps = wrapper.getServerSideProps
   const slug = params?.slug as string;
 
   try {
-    const [{ data: community }, { data: scoreboards },] = await Promise.all([
+    const [{ data: community }, { data: scoreboards }] = await Promise.all([
       store.dispatch(fetchCurrentCommunity({ slug, locale })),
       store.dispatch(fetchAllScoreboards({ slug, locale: locale || "en" })),
     ]);

src/store/feature/learningMaterials.slice.ts

@@ -30,7 +30,7 @@ const learningMaterialsSlice = createSlice({
         [HYDRATE]: (state, action) => {
             return {
                 ...state,
-                ...action.payload["learningMaterials"],
+                ...action.payload.learningMaterials,
             };
         },
     }

src/store/services/community.service.ts

@@ -65,11 +65,9 @@ export const communityService = createApi({
           const { data } = await queryFulfilled
           dispatch(setCourseList(data.courses))
           dispatch(setLearningModulesList(data.learningModules))
-          console.log("these are the data", data.courses?.length)
           return data
         }
         catch (error) {
-          console.log("Encoutered an error while fetching the learning materials", error)
           return null
         }
         finally {

src/store/services/learningModules.service.ts

@@ -37,7 +37,6 @@ export const learningModulesService = createApi({
       onQueryStarted: async (_, { dispatch, queryFulfilled }) => {
 
         const { data } = await queryFulfilled;
-        console.log("the learning module data -------------------------", data)
         dispatch(setLearningModuleList(data));
       },
     }),