format score

LinuzJ · Nov 12, 2023 · 485dd82 · 485dd82
1 parent 38b3ae9
commit 485dd82
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 2 deletions.
diff --git 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
@@ -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>
   );
 };