From 485dd82312daa4776d008c973ed490c6f79d3ab5 Mon Sep 17 00:00:00 2001
From: Markus Nyman <markus@nyman.dev>
Date: Sun, 12 Nov 2023 04:09:40 +0200
Subject: [PATCH] format score

---
 dance-app/src/components/Leaderboard.tsx |  3 ++-
 dance-app/src/sections/MainScore.tsx     | 10 +++++++++-
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/dance-app/src/components/Leaderboard.tsx b/dance-app/src/components/Leaderboard.tsx
index c9da852..d2a2c9b 100644
--- a/dance-app/src/components/Leaderboard.tsx
+++ b/dance-app/src/components/Leaderboard.tsx
@@ -3,6 +3,7 @@ import Loader from "./Loader";
 import "../Leaderboard.css";
 import { Card, CardContent, CardMedia, Stack, Typography } from "@mui/material";
 import pb from "../pocketBase";
+import { formatScore } from "../sections/MainScore";
 
 interface VideoData {
   id: string;
@@ -67,7 +68,7 @@ function Leaderboard() {
                 <Typography variant="body2">
                   {expand?.user?.name}
                   {": "}
-                  <b>{score}</b>
+                  <b>{formatScore(score)}</b>
                 </Typography>
               </CardContent>
             </Card>
diff --git a/dance-app/src/sections/MainScore.tsx b/dance-app/src/sections/MainScore.tsx
index 72e73c2..921433d 100644
--- a/dance-app/src/sections/MainScore.tsx
+++ b/dance-app/src/sections/MainScore.tsx
@@ -1,6 +1,14 @@
 import { Box, useTheme } from "@mui/material";
 import Loader from "../components/Loader";
 
+const formatter = Intl.NumberFormat("en", {
+  maximumFractionDigits: 2,
+});
+
+// eslint-disable-next-line
+export const formatScore = (score?: number | null) =>
+  score ? formatter.format(score) : score;
+
 const MainScore = ({
   score,
   subscribed,
@@ -16,7 +24,7 @@ const MainScore = ({
       className="submit-container"
       sx={{ fontSize: "4rem", color: theme.palette.success.main }}
     >
-      {(!score || score === -1) && subscribed ? <Loader /> : score}
+      {subscribed && (!score || score === -1) ? <Loader /> : formatScore(score)}
     </Box>
   );
 };