🚨 Use constants in reducer

redux/actions/moveActions.ts

@@ -1,17 +1,9 @@
 // redux/actions/moveAction.ts
-
+import { CREATE_MOVE, DELETE_MOVE, GET_MOVES, UPDATE_MOVE } from '../constants';
-import { FETCH_MOVES }  from '../constants';
 import { Move }                                             from "../../entities/Move";
 import { Dispatch }                                         from "redux";
 import { API_BASE_URL }                                     from "../../config";
-import { RootState }    from "../store";
 
-export const setMoves = (moves: Move[]) => {
-    return {
-        type: FETCH_MOVES,
-        payload: moves,
-    };
-}
 
 export const createMove = (move: Move) => {
     return async (dispatch: Dispatch) => {
@@ -24,7 +16,7 @@ export const createMove = (move: Move) => {
                 body: JSON.stringify(move),
             });
             const data = await response.json();
-            dispatch(setMoves(data));
+            dispatch({ type: CREATE_MOVE, payload: data });
         }
         catch (error) {
             console.error(error);
@@ -37,7 +29,7 @@ export const getMoves = () => {
         try {
             const response = await fetch(`${API_BASE_URL}/move`);
             const data = await response.json();
-            dispatch(setMoves(data));
+            dispatch({ type: GET_MOVES, payload: data });
         }
         catch (error) {
             console.error(error);
@@ -46,7 +38,7 @@ export const getMoves = () => {
 }
 
 export const updateMove = (id: string, move: Move) => {
-    return async (dispatch: Dispatch, getState: () => RootState) => {
+    return async (dispatch: Dispatch) => {
         try {
             const response = await fetch(`${API_BASE_URL}/move/${id}`, {
                 method: 'PUT',
@@ -56,8 +48,7 @@ export const updateMove = (id: string, move: Move) => {
                 body: JSON.stringify(move),
             });
             const updatedMove = await response.json();
-            const moves = getState().move.moves.map((m: Move) => m.id === id ? updatedMove : m);
+            dispatch({ type: UPDATE_MOVE, payload: updatedMove });
-            dispatch(setMoves(moves));
         }
         catch (error) {
             console.error(error);
@@ -66,17 +57,15 @@ export const updateMove = (id: string, move: Move) => {
 }
 
 export const deleteMove = (id: string) => {
-    return async (dispatch: Dispatch, getState: () => RootState) => {
+    return async (dispatch: Dispatch) => {
         try {
             await fetch(`${API_BASE_URL}/move/${id}`, {
                 method: 'DELETE',
             });
-            const moves = getState().move.moves.filter((m: Move) => m.id !== id);
+            dispatch({ type: DELETE_MOVE, payload: id });
-            dispatch(setMoves(moves));
         }
         catch (error) {
             console.error(error);
         }
     }
 }
-

redux/constants.ts

@@ -1,3 +1,6 @@
 // redux/constants.ts
 
-export const FETCH_MOVES = 'FETCH_MOVES';
+export const GET_MOVES = 'FETCH_MOVES';
+export const CREATE_MOVE = 'CREATE_MOVE';
+export const UPDATE_MOVE = 'UPDATE_MOVE';
+export const DELETE_MOVE = 'DELETE_MOVE';

redux/reducers/moveReducer.ts

@@ -1,15 +1,14 @@
 // redux/reducers/moveReducer.ts
-import { FETCH_MOVES } from '../constants';
+import { CREATE_MOVE, DELETE_MOVE, GET_MOVES, UPDATE_MOVE } from '../constants';
 import { Move }                                             from "../../entities/Move";
-import { AnyAction }   from "redux";
 
 export type MoveState = {
     moves: Move[];
 };
 
-type MoveAction = AnyAction & {
+type MoveAction = {
-    type: typeof FETCH_MOVES;
+    type: string;
-    payload?: Move[];
+    payload?: Move | Move[] | string;
 };
 
 const initialState: MoveState = {
@@ -18,10 +17,25 @@ const initialState: MoveState = {
 
 export default function moveReducer(state = initialState, action: MoveAction): MoveState {
     switch (action.type) {
-        case FETCH_MOVES:
+        case GET_MOVES:
-            return { ...state, moves: action.payload || [] };
+            return {
+                ...state, moves: action.payload as Move[] || []
+            };
+        case CREATE_MOVE:
+            return {
+                ...state, moves: [...state.moves, action.payload as Move]
+            };
+        case UPDATE_MOVE:
+            return {
+                ...state,
+                moves: state.moves.map(move => move.id === (action.payload as Move).id ? action.payload as Move : move)
+            };
+        case DELETE_MOVE:
+            return {
+                ...state,
+                moves: state.moves.filter(move => move.id !== action.payload)
+            };
         default:
             return state;
     }
 }
-

screens/moves/MoveFormScreen.tsx

@@ -1,7 +1,7 @@
 // screens/moves/MoveFormScreen.tsx
 
 import React, { useState }                           from 'react';
-import { Button, StyleSheet, TextInput, View } from 'react-native';
+import { Button, StyleSheet, Text, TextInput, View } from 'react-native';
 import { StackNavigationProp }                       from '@react-navigation/stack';
 import { RootStackParamList }                        from "../../navigation/navigationTypes";
 import { useDispatch }                               from 'react-redux';
@@ -49,17 +49,18 @@ const MoveFormScreen = ({ navigation, route }: Props) => {
         navigation.goBack();
     };
 
-    // TODO add labels and remove placeholders
     return (
         <View style={styles.container}>
+            <Text>Name: </Text>
             <TextInput
                 value={move.name}
                 onChangeText={(text) => setMove({ ...move, name: text })}
-                placeholder="Name"
                 style={styles.input}
             />
+            <Text>Category: </Text>
             <Picker
                 selectedValue={move.category}
+                style={styles.input}
                 onValueChange={(itemValue: ItemValue) =>
                     setMove({ ...move, category: itemValue as MoveCategoryName })
                 }>
@@ -67,22 +68,24 @@ const MoveFormScreen = ({ navigation, route }: Props) => {
                     <Picker.Item key={value} label={value} value={value}/>
                 )}
             </Picker>
+            <Text>Power: </Text>
             <TextInput
                 value={move.power.toString()}
                 onChangeText={(text) => setMove({ ...move, power: Number(text) })}
-                placeholder="Power"
                 style={styles.input}
                 keyboardType="numeric"
             />
+            <Text>Accuracy: </Text>
             <TextInput
                 value={move.accuracy.toString()}
                 onChangeText={(text) => setMove({ ...move, accuracy: Number(text) })}
-                placeholder="Accuracy"
                 style={styles.input}
                 keyboardType="numeric"
             />
+            <Text>Type: </Text>
             <Picker
                 selectedValue={move.type.name}
+                style={styles.input}
                 onValueChange={(itemValue: ItemValue) =>
                     setMove({ ...move, type: { ...move.type, name: itemValue as TypeName } })
                 }>
@@ -90,13 +93,12 @@ const MoveFormScreen = ({ navigation, route }: Props) => {
                     <Picker.Item key={value} label={value} value={value}/>
                 )}
             </Picker>
-            {/*TODO add weakAgainst and effectiveAgainst columns... Two pickers for that, and the ability to keep adding types in each column.. but user can't put the same type in each column or twice in a column*/}
+            {/*TODO add type.weakAgainst and type.effectiveAgainst columns... Two pickers for that, and the ability to keep adding types in each column.. but user can't put the same type in each column or twice in a column*/}
             <Button title="Save" onPress={handleSave}/>
         </View>
     );
 };
 
-// TODO improve styles a bit
 const styles = StyleSheet.create({
     container: {
         flex: 1,