refactor(dashboard): route users pages through formatCountryName

Author: izadoesdev

apps/dashboard/app/(main)/websites/[id]/users/[userId]/page.tsx

@@ -1,8 +1,8 @@
 "use client";
 
 import {
+	formatCountryName,
 	getCountryCode,
-	getCountryName,
 } from "@databuddy/shared/country-codes";
 import type { ProfileSession, Session } from "@/types/sessions";
 import { notFound, useParams, useRouter } from "next/navigation";
@@ -443,7 +443,7 @@ function Header({
 	const countryCode = userProfile
 		? getCountryCode(userProfile.country || "")
 		: "";
-	const countryName = getCountryName(countryCode) || userProfile?.country || "";
+	const countryName = formatCountryName(userProfile?.country);
 	const isReturning = (userProfile?.total_sessions ?? 0) > 1;
 
 	return (
@@ -594,10 +594,7 @@ export default function UserDetailPage() {
 		userProfile.region && userProfile.region !== "Unknown"
 			? userProfile.region
 			: undefined;
-	const countryName =
-		getCountryName(getCountryCode(userProfile.country || "")) ||
-		userProfile.country ||
-		"Unknown";
+	const countryName = formatCountryName(userProfile.country) || "Unknown";
 	const metrics = [
 		{ label: "Sessions", value: totalSessions },
 		{ label: "Pageviews", value: userProfile.total_pageviews ?? 0 },

apps/dashboard/app/(main)/websites/[id]/users/page.tsx

@@ -16,8 +16,8 @@ import { getDeviceIcon } from "@/components/device-icon";
 import { dynamicQueryFiltersAtom } from "@/stores/jotai/filterAtoms";
 import type { DynamicQueryFilter } from "@/stores/jotai/filterAtoms";
 import {
+	formatCountryName,
 	getCountryCode,
-	getCountryName,
 } from "@databuddy/shared/country-codes";
 import type { ProfileData } from "@/types/analytics";
 import {
@@ -363,9 +363,8 @@ export default function UsersPage() {
 				id: "location",
 				header: "Location",
 				cell: ({ row }) => {
-					const country = row.original.country || "";
-					const countryCode = getCountryCode(country);
-					const countryName = getCountryName(countryCode);
+					const countryCode = getCountryCode(row.original.country || "");
+					const countryName = formatCountryName(row.original.country);
 					const isUnknown = !countryCode || countryCode === "Unknown";
 
 					return (
@@ -376,7 +375,7 @@ export default function UsersPage() {
 								<CountryFlag country={countryCode} size="sm" />
 							)}
 							<span className="truncate text-sm">
-								{isUnknown ? "Unknown" : countryName || countryCode}
+								{countryName || "Unknown"}
 							</span>
 						</div>
 					);