Merge pull request #132 from daithihearn/enhancement/format-names

Formatting user names

package.json

@@ -1,6 +1,6 @@
 {
     "name": "frontend",
-    "version": "5.3.1",
+    "version": "5.3.2",
     "description": "React frontend for the Cards 110",
     "author": "Daithi Hearn",
     "license": "MIT",

public/manifest.json

@@ -1,7 +1,7 @@
 {
   "short_name": "Cards 110",
   "name": "Cards 110",
-  "version": "5.3.1",
+  "version": "5.3.2",
   "icons": [
     {
       "src": "./assets/favicon.png",

src/components/GameStats/PlayerSwitcher.tsx

@@ -11,6 +11,7 @@ import { getMyProfile } from "../../caches/MyProfileSlice"
 import { getPlayerProfiles } from "../../caches/PlayerProfilesSlice"
 import { PlayerProfile } from "../../model/Player"
 import StatsService from "../../services/StatsService"
+import { FormatName } from "../../utils/FormattingUtils"
 
 const PlayerSwitcher: React.FC = () => {
     const dispatch = useAppDispatch()
@@ -70,7 +71,7 @@ const PlayerSwitcher: React.FC = () => {
                         <DropdownItem
                             key={p.id}
                             onClick={() => setCurrentPlayer(p)}>
-                            {p.name}
+                            {FormatName(p.name)}
                         </DropdownItem>
                     )
                 })}

src/components/Leaderboard/DoublesLeaderboard.tsx

@@ -99,7 +99,6 @@ const DoublesLeaderboard = () => {
 
     const columns: TableColumn<DoublesLeaderboardItem>[] = [
         {
-            name: "Player 1",
             cell: row => (
                 <>
                     <div>
@@ -137,7 +136,6 @@ const DoublesLeaderboard = () => {
             ),
         },
         {
-            name: "Player 2",
             cell: row => (
                 <div>
                     <img

src/components/Leaderboard/SinglesLeaderboard.tsx

@@ -65,7 +65,6 @@ const SinglesLeaderboard = () => {
     const columns: TableColumn<LeaderboardItem>[] = useMemo(
         () => [
             {
-                name: "Avatar",
                 cell: row => (
                     <img alt={row.name} src={row.picture} className="avatar" />
                 ),

src/components/StartNewGame/StartNewGame.tsx

@@ -23,6 +23,7 @@ import { useSnackbar } from "notistack"
 import { customStyles } from "../Tables/CustomStyles"
 import parseError from "../../utils/ErrorUtils"
 import moment from "moment"
+import { FormatName } from "../../utils/FormattingUtils"
 
 const StartNewGame = () => {
     const dispatch = useAppDispatch()
@@ -94,6 +95,7 @@ const StartNewGame = () => {
         {
             name: "Player",
             selector: row => row.name,
+            format: row => FormatName(row.name),
             sortable: true,
         },
         {

src/utils/FormattingUtils.ts

@@ -0,0 +1,10 @@
+export const FormatName = (name: string) =>
+    name
+        .split(" ")
+        .map(word =>
+            word.length < 3
+                ? word
+                : word.charAt(0).toUpperCase() +
+                  word.slice(1).toLocaleLowerCase(),
+        )
+        .join(" ")