Show the device count in short scale notation

app/models/profile.server.ts

@@ -7,8 +7,9 @@ import {
 import { type PgTransaction } from 'drizzle-orm/pg-core'
 import { type PostgresJsQueryResultHKT } from 'drizzle-orm/postgres-js'
 import { drizzleClient } from '~/db.server'
-import { type User, type Profile, profile, sensor, measurement } from '~/schema'
+import { type User, type Profile, profile, measurement } from '~/schema'
 import type * as schema from '~/schema'
+import { formatCount } from '~/utils/misc'
 
 export async function getProfileByUserId(id: Profile['id']) {
 	return drizzleClient.query.profile.findFirst({
@@ -74,16 +75,6 @@ export async function createProfileWithTransaction(
 	})
 }
 
-function formatCount(num: number): string {
-	if (num >= 1_000_000) {
-		return `${(num / 1_000_000).toFixed(1).replace(/\.0$/, '')}M`
-	}
-	if (num >= 1_000) {
-		return `${(num / 1_000).toFixed(1).replace(/\.0$/, '')}k`
-	}
-	return num.toString()
-}
-
 // function to get sensors and measurements count for a profile
 export async function getProfileSensorsAndMeasurementsCount(profile: Profile) {
 	const userId = profile.userId

app/routes/profile.$username.tsx

@@ -9,7 +9,7 @@ import {
 	getProfileByUsername,
 	getProfileSensorsAndMeasurementsCount,
 } from '~/models/profile.server'
-import { getInitials } from '~/utils/misc'
+import { formatCount, getInitials } from '~/utils/misc'
 import { getUserId } from '~/utils/session.server'
 
 export async function loader({ params, request }: LoaderFunctionArgs) {
@@ -117,7 +117,7 @@ export default function () {
 					<div className="grid grid-cols-2 gap-4 md:pt-6">
 						<div className="flex flex-col items-center rounded-lg bg-gray-100 p-4 dark:bg-dark-boxes">
 							<span className="text-2xl font-bold dark:text-dark-green">
-								{profile?.user?.devices.length}
+								{formatCount(profile?.user?.devices.length || 0)}
 							</span>
 							<span className="text-sm text-gray-500 dark:text-gray-400">
 								{t('devices')}

app/utils/misc.ts

@@ -1,28 +1,38 @@
 export function getUserImgSrc(imageId?: string | null) {
-  return `/resources/file/${imageId}`;
+	return `/resources/file/${imageId}`
 }
 
 export function getErrorMessage(error: unknown) {
-  if (typeof error === "string") return error;
-  if (
-    error &&
-    typeof error === "object" &&
-    "message" in error &&
-    typeof error.message === "string"
-  ) {
-    return error.message;
-  }
-  console.error("Unable to get error message for error", error);
-  return "Unknown Error";
+	if (typeof error === 'string') return error
+	if (
+		error &&
+		typeof error === 'object' &&
+		'message' in error &&
+		typeof error.message === 'string'
+	) {
+		return error.message
+	}
+	console.error('Unable to get error message for error', error)
+	return 'Unknown Error'
 }
 
 export function getInitials(string: string) {
-  if (!string) return "";
-  var names = string.split(" "),
-    initials = names[0].substring(0, 1).toUpperCase();
+	if (!string) return ''
+	var names = string.split(' '),
+		initials = names[0].substring(0, 1).toUpperCase()
 
-  if (names.length > 1) {
-    initials += names[names.length - 1].substring(0, 1).toUpperCase();
-  }
-  return initials;
+	if (names.length > 1) {
+		initials += names[names.length - 1].substring(0, 1).toUpperCase()
+	}
+	return initials
+}
+
+export function formatCount(num: number): string {
+	if (num >= 1_000_000) {
+		return `${(num / 1_000_000).toFixed(1).replace(/\.0$/, '')}M`
+	}
+	if (num >= 1_000) {
+		return `${(num / 1_000).toFixed(1).replace(/\.0$/, '')}k`
+	}
+	return num.toString()
 }