refactor: use usememo in the right way on the duration card

Author: serapieTuyishime

src/components/ui/Duration.tsx renamed to src/components/badges/Duration.tsx

@@ -6,21 +6,22 @@ import { useMemo } from "react";
 export const DurationCard = ({ value, type = "gray" }: { value: number, type?: string }) => {
     const router = useRouter();
     const duration = useMemo(() => {
-        return (value: number) => {
-            if (!value) {
-                return 0;
-            }
-            if (Number(value) !== value) return value
-            return DateManager.humanize(value, router.locale as string);
-        };
-    }, [router.locale]);
+        if (!value) {
+            return 0;
+        }
+        if (Number(value) !== value) return value
+        return DateManager.humanize(value, router.locale as string);
+    }, [router.locale, value]);
+
     return (
         <span className={classNames("text-xxs uppercase font-semibold px-2 rounded-3xl inline-block text-gray-500",
             {
                 "bg-gray-200": type === 'gray',
                 "border border-gray-200": type === "bordered"
             }
-        )}>{duration(value)}</span>
+        )}>
+            {duration}
+        </span>
     )
 }
 

src/components/cards/Learning.tsx

@@ -1,7 +1,7 @@
 import useNavigation from "@/hooks/useNavigation";
 import { useRouter } from "next/router";
 import { ReactElement } from "react";
-import { DurationCard } from "../ui/Duration";
+import { DurationCard } from "../badges/Duration";
 
 /**
  * LearningModule interface

src/components/cards/LearningModule.tsx

@@ -3,7 +3,7 @@ import ArrowButton from "@/components/ui/button/Arrow";
 import Link from "next/link";
 import { useTranslation } from "next-i18next";
 import Tag from "../ui/Tag";
-import { DurationCard } from "../ui/Duration";
+import { DurationCard } from "@/components/badges/Duration";
 import { useMultiSelector } from "@/hooks/useTypedSelector";
 import { IRootState } from "@/store";
 import { LearningModule } from "@/types/course";
@@ -37,7 +37,7 @@ export function LearningModuleCard({ data }: { data: LearningModule }): JSX.Elem
       <div className="flex text-xs items-center justify-between">
         <div className="gap-2 flex items-center">
           <div className="h-4.5 w-4.5 rounded-sm" style={{ backgroundColor: colors?.primary }} />
-          <span className="uppercase">{t("communities.card.module")}</span>
+          <span className="uppercase font-semibold">{t("communities.card.module")}</span>
         </div>
         <div className="gap-2 flex items-center">
           <Tag className="uppercase">{t(level)}</Tag>
@@ -70,7 +70,7 @@ export function LearningModuleCard({ data }: { data: LearningModule }): JSX.Elem
       <div className="w-full mb-0 justify-self-end">
         <Link href={`/communities/${community.slug}/challenges/${challenge?.id}/learning-modules/${data.id}`}>
           <ArrowButton communityStyles={true} variant="outline-primary">
-            Start now
+            {t("communities.overview.challenge.learning.start")}
           </ArrowButton>
         </Link>
       </div>