Optimize score table renders

wyne · Apr 21, 2024 · 01a75a0 · 01a75a0
1 parent 2bc7b8d
commit 01a75a0
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 18 deletions.
diff --git a/redux/PlayersSlice.ts b/redux/PlayersSlice.ts
@@ -82,7 +82,7 @@ export const selectPlayerNameById = createSelector(
     (player) => player?.playerName
 );
 
-export const makeSelectPlayerScoreByRound = () => createSelector(
+export const selectPlayerScoreByRound = createSelector(
     [
         (state: RootState, playerId: string, round: number) => state.players.entities[playerId]?.scores[round]
     ],

diff --git a/src/components/ScoreLog/PlayerNameColumn.tsx b/src/components/ScoreLog/PlayerNameColumn.tsx
@@ -62,7 +62,6 @@ const MemoizedPlayerNameCell = React.memo(PlayerNameCell);
 
 const PlayerNameColumn: React.FunctionComponent = () => {
     const sortKey = useAppSelector(state => selectCurrentGame(state)?.sortSelectorKey);
-
     const sortSelector = sortSelectors[sortKey || SortSelectorKey.ByIndex];
     const sortedPlayerIds = useAppSelector(sortSelector);
 

diff --git a/src/components/ScoreLog/RoundScoreCell.tsx b/src/components/ScoreLog/RoundScoreCell.tsx
@@ -3,7 +3,7 @@ import React, { memo } from 'react';
 import { StyleSheet, Text } from 'react-native';
 
 import { useAppSelector } from '../../../redux/hooks';
-import { makeSelectPlayerScoreByRound, selectPlayerScoreByRound } from '../../../redux/PlayersSlice';
+import { selectPlayerScoreByRound } from '../../../redux/PlayersSlice';
 
 interface Props {
     playerId: string;
@@ -12,7 +12,6 @@ interface Props {
 }
 
 const RoundScoreCell: React.FunctionComponent<Props> = ({ playerId, round, playerIndex }) => {
-    const selectPlayerScoreByRound = makeSelectPlayerScoreByRound();
     const scoreRound = useAppSelector(state => selectPlayerScoreByRound(state, playerId, round));
 
     return (

diff --git a/src/components/ScoreLog/SortHelper.ts b/src/components/ScoreLog/SortHelper.ts
@@ -4,31 +4,30 @@ import { GameState } from '../../../redux/GamesSlice';
 import { ScoreState, selectAllPlayers } from '../../../redux/PlayersSlice';
 import { RootState } from '../../../redux/store';
 
-export const selectPlayerIdsByIndex: SortSelector = createSelector(
+export const selectSortedPlayerIdsByIndex = createSelector(
     [
-        selectAllPlayers,
         (state: RootState) => state.settings.currentGameId ? state.games.entities[state.settings.currentGameId] : undefined,
         (state: RootState) => state.settings.currentGameId ? state.games.entities[state.settings.currentGameId]?.sortDirectionKey : undefined
     ],
-    (players: ScoreState[], currentGame: GameState | undefined) => {
-        if (!currentGame) return [];
+    (game: GameState | undefined, sortDirectionKey: SortDirectionKey | undefined) => {
+        if (!game) return [];
 
-        const playerIds = players.filter(player => currentGame.playerIds?.includes(player.id))
+        const playerIds = game.playerIds
             .sort((a, b) => {
-                if (currentGame?.playerIds == undefined) return 0;
-                return currentGame.playerIds.indexOf(a.id) - currentGame.playerIds.indexOf(b.id);
+                if (game?.playerIds == undefined) return 0;
+                return game.playerIds.indexOf(a) - game.playerIds.indexOf(b);
             })
-            .map(player => player.id);
+            .map(player => player);
 
-        if (SortDirectionKey.Normal === currentGame.sortDirectionKey) {
+        if (SortDirectionKey.Normal === sortDirectionKey) {
             return playerIds;
         } else {
             return playerIds.reverse();
         }
     }
 );
 
-export const selectPlayerIdsByScore: SortSelector = createSelector(
+export const selectSortedPlayerIdsByScore: SortSelector = createSelector(
     [
         selectAllPlayers,
         (state: RootState) => state.settings.currentGameId ? state.games.entities[state.settings.currentGameId] : undefined,
@@ -78,6 +77,6 @@ export enum SortDirectionKey {
 }
 
 export const sortSelectors = {
-    [SortSelectorKey.ByScore]: selectPlayerIdsByScore,
-    [SortSelectorKey.ByIndex]: selectPlayerIdsByIndex,
+    [SortSelectorKey.ByScore]: selectSortedPlayerIdsByScore,
+    [SortSelectorKey.ByIndex]: selectSortedPlayerIdsByIndex,
 };
diff --git a/src/screens/SettingsScreen.tsx b/src/screens/SettingsScreen.tsx
@@ -14,7 +14,7 @@ import { playerAdd } from '../../redux/PlayersSlice';
 import { selectCurrentGame } from '../../redux/selectors';
 import EditGame from '../components/EditGame';
 import PlayerListItem from '../components/PlayerListItem';
-import { selectPlayerIdsByIndex } from '../components/ScoreLog/SortHelper';
+import { selectSortedPlayerIdsByIndex } from '../components/ScoreLog/SortHelper';
 import { MAX_PLAYERS, systemBlue } from '../constants';
 import logger from '../Logger';
 
@@ -36,7 +36,7 @@ const SettingsScreen: React.FunctionComponent<Props> = ({ navigation }) => {
     if (typeof currentGameId == 'undefined') return null;
 
     const currentGame = useAppSelector(selectCurrentGame);
-    const playerIds = useAppSelector(selectPlayerIdsByIndex);
+    const playerIds = useAppSelector(selectSortedPlayerIdsByIndex);
 
     const [edit, setEdit] = React.useState(false);