feat: introduce formatter utility for consistent data formatting across components; replace inline formatting functions in ActorHero, HeroMovie, and MovieCast with formatter methods

src/components/molecules/ActorHero/index.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { BackButton } from "@/components/atoms/BackButton";
+import { formatter } from "@/helpers/formater";
 import { PersonDetailsRich } from "@/lib/tmdb/types";
 import { FC } from "react";
 import {
@@ -21,14 +22,6 @@ type Props = {
 };
 
 export const ActorHero: FC<Props> = ({ personDetails }) => {
-  const formatDate = (dateString: string) => {
-    return new Date(dateString).toLocaleDateString("pl-PL", {
-      year: "numeric",
-      month: "long",
-      day: "numeric",
-    });
-  };
-
   const calculateAge = (birthday: string, deathday?: string | null) => {
     const birth = new Date(birthday);
     const end = deathday ? new Date(deathday) : new Date();
@@ -141,7 +134,9 @@ export const ActorHero: FC<Props> = ({ personDetails }) => {
                     <div className="flex items-center gap-2 text-gray-300">
                       <FaCalendarAlt className="text-purple-400" />
                       <div className="flex">
-                        <span>{formatDate(personDetails.birthday)}</span>
+                        <span>
+                          {formatter.formatDate(personDetails.birthday)}
+                        </span>
                       </div>
                     </div>
                   )}
@@ -152,7 +147,9 @@ export const ActorHero: FC<Props> = ({ personDetails }) => {
                       <FaCalendarAlt className="text-red-400" />
                       <div className="flex flex-col">
                         <span className="text-red-300">Data śmierci:</span>
-                        <span>{formatDate(personDetails.deathday)}</span>
+                        <span>
+                          {formatter.formatDate(personDetails.deathday)}
+                        </span>
                       </div>
                     </div>
                   )}

src/components/molecules/HeroMovie/index.tsx

@@ -14,6 +14,7 @@ import {
   FaEye,
 } from "react-icons/fa";
 import { convertToMovie } from "@/helpers/convertToMovie";
+import { formatter } from "@/helpers/formater";
 
 type Props = {
   movieDetails: MovieDetailsRich;
@@ -29,12 +30,6 @@ export const HeroMovie: FC<Props> = ({ movieDetails }) => {
   const isSeen = movieInStore?.seen || false;
   const loading = movies.length === 0;
 
-  const formatRuntime = (minutes: number) => {
-    const hours = Math.floor(minutes / 60);
-    const mins = minutes % 60;
-    return `${hours}h ${mins}m`;
-  };
-
   const convertedMovie = convertToMovie(movieDetails);
 
   // Convert TMDB movie to our Movie type.
@@ -152,7 +147,9 @@ export const HeroMovie: FC<Props> = ({ movieDetails }) => {
                     {movieDetails.runtime && (
                       <div className="flex items-center gap-2 text-gray-300">
                         <FaClock className="text-purple-400" />
-                        <span>{formatRuntime(movieDetails.runtime)}</span>
+                        <span>
+                          {formatter.formatRuntime(movieDetails.runtime)}
+                        </span>
                       </div>
                     )}
 

src/components/molecules/MovieCast/index.tsx

@@ -4,6 +4,7 @@ import { Button } from "@/components/atoms/Button";
 import { MovieDetailsRich } from "@/lib/tmdb/types";
 import { FC, useState } from "react";
 import { FaDollarSign } from "react-icons/fa";
+import { formatter } from "@/helpers/formater";
 
 type Props = {
   movieDetails: MovieDetailsRich;
@@ -109,7 +110,7 @@ export const MovieCast: FC<Props> = ({ movieDetails }) => {
                       <FaDollarSign className="text-green-400" />
                       <span className="text-gray-400">Budżet:</span>
                       <span className="text-white">
-                        {formatCurrency(movieDetails.budget)}
+                        {formatter.formatCurrency(movieDetails.budget)}
                       </span>
                     </div>
                   )}
@@ -118,7 +119,7 @@ export const MovieCast: FC<Props> = ({ movieDetails }) => {
                       <FaDollarSign className="text-green-400" />
                       <span className="text-gray-400">Przychody:</span>
                       <span className="text-white">
-                        {formatCurrency(movieDetails.revenue)}
+                        {formatter.formatCurrency(movieDetails.revenue)}
                       </span>
                     </div>
                   )}
@@ -127,7 +128,7 @@ export const MovieCast: FC<Props> = ({ movieDetails }) => {
                       <FaDollarSign className="text-green-400" />
                       <span className="text-gray-400">Zysk:</span>
                       <span className="text-white">
-                        {formatCurrency(
+                        {formatter.formatCurrency(
                           movieDetails.revenue - movieDetails.budget
                         )}
                       </span>

src/helpers/formater/index.ts

@@ -0,0 +1,27 @@
+export const formatter = {
+  formatDate: (dateString: string) => {
+    const date = new Date(dateString);
+    return date.toLocaleDateString("pl-PL", {
+      day: "2-digit",
+      month: "2-digit",
+      year: "numeric",
+    });
+  },
+  formatCurrency: (amount: number) => {
+    return new Intl.NumberFormat("pl-PL", {
+      style: "currency",
+      currency: "PLN",
+    }).format(amount);
+  },
+  formatPopularity: (popularity: number) => {
+    return Math.round(popularity);
+  },
+  formatVoteAverage: (voteAverage: number) => {
+    return voteAverage.toFixed(1);
+  },
+  formatRuntime: (runtime: number) => {
+    const hours = Math.floor(runtime / 60);
+    const minutes = runtime % 60;
+    return `${hours}h ${minutes}m`;
+  },
+};