refactor: duration badge

Author: mhenriette

src/components/badges/DurationBadge.tsx

@@ -1,7 +1,7 @@
 import DateManager from "@/utilities/DateManager";
 import classNames from "classnames";
 import { useRouter } from "next/router";
-import React, { useMemo } from "react";
+import React, { useCallback, useMemo } from "react";
 
 interface DurationBadgeProps {
   value: number;
@@ -10,22 +10,21 @@ interface DurationBadgeProps {
 
 export default function DurationBadge({ value, type = "gray" }: DurationBadgeProps) {
   const router = useRouter();
+  const getDuration = useCallback((value: number, locale: string) => {
+    if (!value) return 0;
+    return DateManager.humanize(value, locale);
+  }, []);
   const duration = useMemo(() => {
-    return (value: number) => {
-      if (!value) {
-        return 0;
-      }
-      return DateManager.humanize(value, router.locale as string);
-    };
-  }, [router.locale]);
+    return getDuration(value, router.locale as string);
+  }, [router.locale, value, getDuration]);
   return (
     <div
       className={classNames("text-xxs uppercase font-semibold px-2 rounded-3xl inline-block text-gray-500 text-nowrap", {
         "bg-gray-200": type === "gray",
         "border border-gray-200": type === "bordered",
       })}
     >
-      {duration(value)}
+      {duration}
     </div>
   );
 }