Sorting players by last access timestamp

daithihearn · Feb 26, 2023 · 1026156 · 1026156
1 parent 93edbca
commit 1026156
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 3 deletions.
diff --git a/src/caches/MyProfileSlice.ts b/src/caches/MyProfileSlice.ts
@@ -9,6 +9,7 @@ const initialProfileState: MyProfile = {
         "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABLCAMAAAAPkIrYAAAAV1BMVEVHcEz/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD5S+t0AAAAHHRSTlMAOAPXFwch/O/lLUINUFmymMWlhPbOYY7eebxrUg5LCAAAAu5JREFUWMOtmFeCgjAQQCEBQg+95v7nFGYCgoqkkC9Xl8f0Ese5PfHYCiEmz7E9cU0FnsIO5Hel2A+3IXl1+CbRIrYgFY1gG2iMiTkpfcsU9rGVofJoI7WdD19QykfX1ycFfCNNidQNnRnyTjMyuk29Mtm/KzY6K+dU3VKVfCrKj9FR71oLViWK+rXygf7j9SToqt0fbabgV1e+fnB//UqSPtppd6hMvrm6tklSyahr3f+hgP/GOqV8YMUfL2SICt377Gr+WAJsha+LApUMQ03ZeOHBSB212o1eW9ZvtVBLIGL8lj9g+Euok8d5+BuWo2sSnWQjGI2fMA/tPutWAYBN5yTAysC1Kx7CTq0gQWMZtBoXIu2QUAT9m5uUzQ6kCM5/i8msBhenZ30QixmW9TQ6aplhBBs3B2hVshdAQ2WBKQutjYLFdmJJwVr42AMrMWf5YLG1/pAB9LVppyBNv0YbiDXasAAxLB9qYAU2LAeyeYmp9m054wPp3DkeFNvajlVjhmOgunYsiIoSkcy3Y4HxI1S1tJxqPVAOp6HiGVZjUpsvWLYJ9MWydKMsD8iy3SmgX7BnWDOWh0dYsubTJ2zfYmBNxt3s040d1rH6AXMtNSd7IIcmTEcnXWsOS21QAduaz4S62lYvaGq5rZIpVOhoLVt+aJlFo9jakBTRfAP2mkPbh5mQGQtWndo+CNkSi7R+TyMpNe+2ODEdCnOyBkhjNH/hoBulHwMB9Ux9yI4LIIERbNLubB37caUSwLDDNWEJrmvlx2NxqA+TqO8VCmGTRpLnzdUKRRBGlb05oq2an4t3DDYLO6Wg3a4emosd3sMbKq4w17mDuNmnSQ9yh6N/tyFvF1D/LJJhSgy5r3IvxlOlV0bjRRYE/UYK74uxXMpFw/MvXDBP7zs/lXGZ5Nt1I2uL2fVAkdRL5oIyIZTvYHba4c5x0Xc54nSUSRhs/SAuTlNpjwzErcvmCxRVmWEvTd254BSJjPI+/3uf+QKDNWmJwx+g3AAAAABJRU5ErkJggg==",
     isPlayer: false,
     isAdmin: false,
+    lastAccess: "1970-01-01T00:00:00",
 }
 
 export const myProfileSlice = createSlice({

diff --git a/src/components/GameStats/PlayerSwitcher.tsx b/src/components/GameStats/PlayerSwitcher.tsx
@@ -1,5 +1,5 @@
 import { useSnackbar } from "notistack"
-import { useCallback, useEffect, useState } from "react"
+import { useCallback, useEffect, useMemo, useState } from "react"
 import {
     Dropdown,
     DropdownItem,
@@ -25,10 +25,21 @@ const PlayerSwitcher: React.FC = () => {
         [showDropdown],
     )
 
+    const sortedPlayers = useMemo(
+        () =>
+            [...players].sort((a, b) => {
+                const aDate = new Date(a.lastAccess)
+                const bDate = new Date(b.lastAccess)
+                if (aDate === bDate) return 0
+                return aDate > bDate ? -1 : 1
+            }),
+        [players],
+    )
+
     useEffect(() => {
         const me = players.find(p => p.id === myProfile.id)
         if (me) setCurrentPlayer(me)
-    }, [players, myProfile])
+    }, [sortedPlayers, myProfile])
 
     useEffect(() => {
         if (currentPlayer)
@@ -54,7 +65,7 @@ const PlayerSwitcher: React.FC = () => {
             <DropdownMenu
                 container="body"
                 style={{ maxHeight: "20em", overflow: "scroll" }}>
-                {players.map(p => {
+                {sortedPlayers.map(p => {
                     return (
                         <DropdownItem
                             key={p.id}

diff --git a/src/components/StartNewGame/StartNewGame.tsx b/src/components/StartNewGame/StartNewGame.tsx
@@ -22,6 +22,7 @@ import { PlayerProfile } from "../../model/Player"
 import { useSnackbar } from "notistack"
 import { customStyles } from "../Tables/CustomStyles"
 import parseError from "../../utils/ErrorUtils"
+import moment from "moment"
 
 const StartNewGame = () => {
     const dispatch = useAppDispatch()
@@ -95,6 +96,14 @@ const StartNewGame = () => {
             selector: row => row.name,
             sortable: true,
         },
+        {
+            name: "Last Access",
+            id: "lastAccess",
+            selector: row => row.lastAccess,
+            format: row => moment(row.lastAccess).format("lll"),
+            sortable: true,
+            omit: true,
+        },
     ]
 
     return (
@@ -140,6 +149,8 @@ const StartNewGame = () => {
                             selectableRows
                             customStyles={customStyles}
                             onSelectedRowsChange={togglePlayer}
+                            defaultSortFieldId="lastAccess"
+                            defaultSortAsc={false}
                         />
                     </FormGroup>
                 </CardBody>

diff --git a/src/model/Player.ts b/src/model/Player.ts
@@ -16,6 +16,7 @@ export interface PlayerProfile {
     id: string
     name: string
     picture: string
+    lastAccess: string
 }
 
 export interface Team extends Scorable {

diff --git a/src/services/ProfileService.ts b/src/services/ProfileService.ts
@@ -25,6 +25,7 @@ interface ProfileResponse {
     name: string
     picture: string
     pictureLocked: boolean
+    lastAccess: string
 }
 
 interface JWTToken {
@@ -56,6 +57,7 @@ const updateProfile =
                 isAdmin:
                     decodedAccessToken.permissions.indexOf("read:admin") !== -1,
                 accessToken: token,
+                lastAccess: response.data.lastAccess,
             }),
         )
     }