reorderPlayers reducer

wyne · Apr 4, 2024 · 3819b22 · 3819b22
1 parent 6f64c47
commit 3819b22
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 9 deletions.
diff --git a/redux/GamesSlice.ts b/redux/GamesSlice.ts
@@ -56,6 +56,17 @@ const gamesSlice = createSlice({
         },
         gameDelete(state, action: PayloadAction<string>) {
             gamesAdapter.removeOne(state, action.payload);
+        },
+        reorderPlayers(state, action: PayloadAction<{ gameId: string, playerIds: string[]; }>) {
+            const game = state.entities[action.payload.gameId];
+            if (!game) { return; }
+
+            gamesAdapter.updateOne(state, {
+                id: action.payload.gameId,
+                changes: {
+                    playerIds: action.payload.playerIds,
+                }
+            });
         }
     }
 });
@@ -179,6 +190,7 @@ export const {
     roundPrevious,
     gameSave,
     gameDelete,
+    reorderPlayers,
 } = gamesSlice.actions;
 
 export default gamesSlice.reducer;

diff --git a/src/screens/EditPlayerScreen.tsx b/src/screens/EditPlayerScreen.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 import { RouteProp } from '@react-navigation/native';
 import { StyleSheet, Text, View } from 'react-native';
-import { Input } from 'react-native-elements';
+import { Button, Input } from 'react-native-elements';
 
 import { palette } from '../constants';
 
@@ -30,11 +30,6 @@ const EditPlayerScreen: React.FC<EditPlayerScreenProps> = ({
 
     return (
         <View>
-            <Text>Edit Player Screen</Text>
-            <Text style={styles.playerNumber}>
-                {index + 1}
-            </Text>
-
             <View style={[
                 styles.colorBadge,
                 { backgroundColor: "#" + palette[index % palette.length] }
@@ -55,6 +50,8 @@ const EditPlayerScreen: React.FC<EditPlayerScreenProps> = ({
                 inputContainerStyle={{ borderBottomWidth: 0 }}
             />
 
+            <Button title="Delete" onPress={() => { }} />
+
         </View>
     );
 };

diff --git a/src/screens/SettingsScreen.tsx b/src/screens/SettingsScreen.tsx
@@ -9,13 +9,14 @@ import DraggableFlatList, { ScaleDecorator } from 'react-native-draggable-flatli
 import { Button, Icon } from 'react-native-elements';
 import Animated, { LinearTransition } from 'react-native-reanimated';
 
-import { selectSortedPlayers, updateGame } from '../../redux/GamesSlice';
+import { reorderPlayers, selectSortedPlayers, updateGame } from '../../redux/GamesSlice';
 import { useAppDispatch, useAppSelector } from '../../redux/hooks';
 import { playerAdd } from '../../redux/PlayersSlice';
 import { selectCurrentGame } from '../../redux/selectors';
 import EditGame from '../components/EditGame';
 import PlayerListItem from '../components/PlayerListItem';
 import { systemBlue } from '../constants';
+import logger from '../Logger';
 
 type RouteParams = {
     Settings: {
@@ -95,8 +96,15 @@ const SettingsScreen: React.FunctionComponent<Props> = ({ navigation }) => {
                     )}
                     keyExtractor={(player) => player.id}
                     onDragEnd={({ data }) => {
-                        // Update your state with the new order of players
-                        console.log('End player reoder', data.map((player) => player.id));
+                        // Reorder players
+                        dispatch(
+                            reorderPlayers({
+                                gameId: currentGameId,
+                                playerIds: data.map((player) => player.id)
+                            })
+                        );
+
+                        logger.info('Reorder players');
                     }}
                 />
             </Animated.View>