fix: resolve hydration error about translations

Author: Odile078

src/components/cards/challenge/Challenge.tsx

@@ -6,8 +6,8 @@ import { Challenge } from "@/types/course";
 import Link from "next/link";
 import RelatedContent from "./RelatedContent";
 import Badges from "./Badges";
-import { useEffect, useMemo, useState } from "react";
-import { useTranslation } from "react-i18next";
+import { useMemo } from "react";
+import { useTranslation } from "next-i18next";
 
 /**
  * `ChallengeCard` is a function component that renders a card
@@ -25,16 +25,12 @@ interface ChallengeCardProps {
 }
 export default function ChallengeCard({ data, community, isCourseEnd }: ChallengeCardProps) {
   const { t } = useTranslation();
-  const [prize, setPrize] = useState("");
 
   const link = `/communities/${community.slug}/challenges/${data.id}`;
   const expiresAt = useMemo(() => (data.expiresAt ? new Date(data.expiresAt).toLocaleDateString() : null), [data.expiresAt]);
   const reward = isCourseEnd ? data?.rewards?.find((reward) => reward.type === "SUBMISSION") : data?.reward;
   const totalReward = data?.rewards?.reduce((acc, reward) => (acc += Number(reward.amount)), 0);
 
-  useEffect(() => {
-    setPrize(`${community?.slug === "celo" ? "NFT" : ""} ${t("communities.overview.challenge.certificate")}`);
-  }, [community, t]);
   return (
     <div className="border-solid border border-gray-200 bg-gray-50 rounded-3xl mb-5 group text-gray-700">
       <div className="border-solid border-b border-gray-300 bg-white rounded-3xl sm:p-8 sm:pb-6 w-full p-6">
@@ -51,7 +47,9 @@ export default function ChallengeCard({ data, community, isCourseEnd }: Challeng
                 <Certificate size="medium" name={community.slug} />
                 <div className="md:pl-2 max-w-max">
                   <div className="flex text-sm text-gray-700">
-                    <span className="block font-medium pr-1">{prize}</span>
+                    <span className="block font-medium pr-1">
+                      {community?.slug === "celo" && "NFT"} {t("communities.overview.challenge.certificate")}
+                    </span>
                   </div>
                   <div className="text-gray-400 text-xs font-normal">Upon successful completion</div>
                 </div>

src/components/cards/challenge/Overview.tsx

@@ -1,4 +1,3 @@
-import React, { useEffect, useState } from "react";
 import Coin from "@/components/ui/Coin";
 import { Challenge, Reward } from "@/types/course";
 import { useTranslation } from "next-i18next";
@@ -22,7 +21,6 @@ export default function Overview({ challenge, community }: Props) {
   const formatToken = (token: string) => {
     return token.charAt(0).toUpperCase() + token.slice(1).toLowerCase();
   };
-  const [prize, setPrize] = useState("");
   // Combine rewards by token
   const rewardsByToken: Reward[] = challenge.rewards.reduce((acc: Reward[], reward: Reward) => {
     const existingReward = acc.find((item) => item.token === reward.token);
@@ -32,10 +30,6 @@ export default function Overview({ challenge, community }: Props) {
 
   const expirationDate = challenge?.expiresAt && DateManager.format(challenge.expiresAt, "MMMM d, yyyy", "en");
 
-  useEffect(() => {
-    setPrize(`${community.slug === "celo" ? "NFT" : ""} ${t("communities.overview.challenge.certificate")}`);
-  }, [community, t]);
-
   return (
     <div className="border border-gray-200 rounded-3xl mb-5 group text-gray-700 p-6">
       <div className="text-gray-900 text-lg leading-normal">
@@ -47,7 +41,9 @@ export default function Overview({ challenge, community }: Props) {
           <Certificate size="medium" name={community.slug} />
           <div className="md:pl-2 max-w-max">
             <div className="flex text-sm text-gray-700">
-              <span className="block font-medium pr-1">{prize}</span>
+              <span className="block font-medium pr-1">
+                {community?.slug === "celo" && "NFT"} {t("communities.overview.challenge.certificate")}
+              </span>
             </div>
             <div className="text-gray-400 text-xs font-medium">{t("communities.overview.challenge.subtitle")}</div>
           </div>

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

@@ -17,7 +17,7 @@ import ChallengeOverviewCard from "@/components/cards/challenge/Overview";
 import LearningModuleSection from "@/components/sections/learning-modules";
 import useNavigation from "@/hooks/useNavigation";
 import ChallengeCard from "@/components/cards/challenge/Challenge";
-import { useTranslation } from "react-i18next";
+import { useTranslation } from "next-i18next";
 import PageNavigation from "@/components/sections/courses/PageNavigation";
 import { NotFoundError } from "@/utilities/errors/NotFoundError";