refactor: use metadata component on the community and learning materials page

serapieTuyishime · serapieTuyishime · commit 3d66dae53f79 · 2024-07-25T18:08:44.000+02:00
diff --git a/__tests__/components/ui/MetaData.test.tsx b/__tests__/components/ui/MetaData.test.tsx
@@ -13,6 +13,12 @@ describe("MetaData", () => {
     expect(metaTags).toHaveLength(expectedMetaTags.length);
   });
 
+  it("should render the title when applicable", () => {
+    render(<MetaData description={description} title="Any title" />);
+    const metatitle = screen.getByTestId("page-title");
+    expect(metatitle).toHaveTextContent("Any title");
+  })
+
   it("should render the correct content in the meta tags", () => {
     render(<MetaData description={description} />);
     const mockMetas = getMetadataDescription(description);
diff --git a/src/components/ui/MetaData.tsx b/src/components/ui/MetaData.tsx
@@ -1,4 +1,4 @@
-import { getMetadataDescription } from "@/utilities/Metadata";
+import { getMetadataDescription, getMetadataTitle } from "@/utilities/Metadata";
 import { ReactElement, useMemo } from "react";
 
 /**
@@ -8,10 +8,19 @@ import { ReactElement, useMemo } from "react";
  * @export
  * @returns {ReactElement}
  */
-export default function MetaData({ description, testId = "meta-id" }: { description?: string; testId?: string }): ReactElement {
+
+interface MetadataProps {
+  description?: string;
+  title?: string | null;
+  community?: string;
+  testId?: string
+}
+
+export default function MetaData({ description, title, community, testId = "meta-id" }: MetadataProps): ReactElement {
   const metas = useMemo(() => getMetadataDescription(description), [description]);
   return (
     <>
+      {title && <title data-testid="page-title">{getMetadataTitle(title, community as string)}</title>}
       {metas.map((meta, index) => (
         <meta data-testid={testId} key={`meta-${index}`} content={meta.content} name={meta.name} />
       ))}
diff --git a/src/pages/communities/[slug]/index.tsx b/src/pages/communities/[slug]/index.tsx
@@ -13,7 +13,7 @@ import { NotFoundError } from "@/utilities/errors/NotFoundError";
 import { fetchAllScoreboards } from "@/store/services/communities/scoreboard.service";
 import { useTranslation } from "next-i18next";
 import Head from "next/head";
-import { getMetadataDescription, getMetadataTitle } from "@/utilities/Metadata";
+import MetaData from "@/components/ui/MetaData";
 import LearningMaterialsOverview from "@/components/sections/communities/overview/LearningMaterials";
 import { fetchCommunities } from "@/services/community";
 import { GetStaticPathsContext } from "next";
@@ -29,10 +29,7 @@ export default function Slug(props: {
   return (
     <>
       <Head>
-        <title>{getMetadataTitle(t("communities.navigation.courses"), community?.name as string)}</title>
-        {getMetadataDescription(community?.description as string).map((attributes) => (
-          <meta key={`scoreboard-meta-${attributes.hid}`} {...attributes} />
-        ))}
+        <MetaData community={community.name} title={t("communities.navigation.courses")} description={community?.description} />
       </Head>
       <CommunityWrapper>
         <div className="md:hidden">
diff --git a/src/pages/communities/[slug]/learning-materials.tsx b/src/pages/communities/[slug]/learning-materials.tsx
@@ -6,7 +6,7 @@ import { GetServerSideProps } from "next";
 import { ReactElement } from "react";
 import { useTranslation } from "next-i18next";
 import Head from "next/head";
-import { getMetadataDescription, getMetadataTitle } from "@/utilities/Metadata";
+import MetaData from "@/components/ui/MetaData";
 import { Community } from "@/types/community";
 import CommunityWrapper from "@/components/sections/communities/overview/Wrapper";
 import { Course, LearningModule } from "@/types/course";
@@ -23,10 +23,7 @@ export default function LearningMaterials(props: {
   return (
     <div>
       <Head>
-        <title>{getMetadataTitle(t("communities.navigation.learning-materials"), community?.name as string)}</title>
-        {getMetadataDescription(community?.description as string).map((attributes) => (
-          <meta key={`scoreboard-meta-${attributes.hid}`} {...attributes} />
-        ))}
+        <MetaData community={community.name} title={t("communities.navigation.learning-materials")} description={community?.description} />
       </Head>
       <CommunityWrapper>
         <LearningMaterialsOverview />
diff --git a/src/store/services/community.service.ts b/src/store/services/community.service.ts
@@ -68,6 +68,7 @@ export const communityService = createApi({
           return data
         }
         catch (error) {
+          dispatch(setError(error))
           return null
         }
         finally {

Original file line number	Diff line number	Diff line change
`@@ -68,6 +68,7 @@ export const communityService = createApi({`
`68`	`68`	`return data`
`69`	`69`	`}`
`70`	`70`	`catch (error) {`
	`71`	`+ dispatch(setError(error))`
`71`	`72`	`return null`
`72`	`73`	`}`
`73`	`74`	`finally {`