From 232c7f9ed538bb3ae6201a1b9d8e7665ae725767 Mon Sep 17 00:00:00 2001 From: Alexis DRAI Date: Mon, 12 Jun 2023 15:13:00 +0200 Subject: [PATCH] :rotating_light: Use constants in reducer --- redux/actions/moveActions.ts | 31 ++++++++--------------- redux/constants.ts | 5 +++- redux/reducers/moveReducer.ts | 32 +++++++++++++++++------- screens/moves/MoveFormScreen.tsx | 42 +++++++++++++++++--------------- 4 files changed, 59 insertions(+), 51 deletions(-) diff --git a/redux/actions/moveActions.ts b/redux/actions/moveActions.ts index 247098c..051a510 100644 --- a/redux/actions/moveActions.ts +++ b/redux/actions/moveActions.ts @@ -1,17 +1,9 @@ // redux/actions/moveAction.ts +import { CREATE_MOVE, DELETE_MOVE, GET_MOVES, UPDATE_MOVE } from '../constants'; +import { Move } from "../../entities/Move"; +import { Dispatch } from "redux"; +import { API_BASE_URL } from "../../config"; -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(setMoves(moves)); + dispatch({ type: UPDATE_MOVE, payload: updatedMove }); } 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(setMoves(moves)); + dispatch({ type: DELETE_MOVE, payload: id }); } catch (error) { console.error(error); } } } - diff --git a/redux/constants.ts b/redux/constants.ts index a330d8c..f4ff996 100644 --- a/redux/constants.ts +++ b/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'; diff --git a/redux/reducers/moveReducer.ts b/redux/reducers/moveReducer.ts index b9730df..b858c7c 100644 --- a/redux/reducers/moveReducer.ts +++ b/redux/reducers/moveReducer.ts @@ -1,15 +1,14 @@ // redux/reducers/moveReducer.ts -import { FETCH_MOVES } from '../constants'; -import { Move } from "../../entities/Move"; -import { AnyAction } from "redux"; +import { CREATE_MOVE, DELETE_MOVE, GET_MOVES, UPDATE_MOVE } from '../constants'; +import { Move } from "../../entities/Move"; export type MoveState = { moves: Move[]; }; -type MoveAction = AnyAction & { - type: typeof FETCH_MOVES; - payload?: Move[]; +type MoveAction = { + type: string; + 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: - return { ...state, moves: action.payload || [] }; + case GET_MOVES: + 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; } } - diff --git a/screens/moves/MoveFormScreen.tsx b/screens/moves/MoveFormScreen.tsx index b7a0f44..6a3b0ad 100644 --- a/screens/moves/MoveFormScreen.tsx +++ b/screens/moves/MoveFormScreen.tsx @@ -1,19 +1,19 @@ // screens/moves/MoveFormScreen.tsx -import React, { useState } from 'react'; -import { Button, StyleSheet, TextInput, View } from 'react-native'; -import { StackNavigationProp } from '@react-navigation/stack'; -import { RootStackParamList } from "../../navigation/navigationTypes"; -import { useDispatch } from 'react-redux'; -import { createMove, updateMove } from '../../redux/actions/moveActions'; -import { AppDispatch } from "../../redux/store"; -import { Move } from "../../entities/Move"; -import { RouteProp } from "@react-navigation/native"; -import { MOVE_FORM } from "../../navigation/constants"; -import { Picker } from "@react-native-community/picker"; -import { ItemValue } from "@react-native-community/picker/typings/Picker"; -import { MoveCategoryName } from "../../entities/MoveCategoryName"; -import { TypeName } from "../../entities/TypeName"; +import React, { useState } from 'react'; +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'; +import { createMove, updateMove } from '../../redux/actions/moveActions'; +import { AppDispatch } from "../../redux/store"; +import { Move } from "../../entities/Move"; +import { RouteProp } from "@react-navigation/native"; +import { MOVE_FORM } from "../../navigation/constants"; +import { Picker } from "@react-native-community/picker"; +import { ItemValue } from "@react-native-community/picker/typings/Picker"; +import { MoveCategoryName } from "../../entities/MoveCategoryName"; +import { TypeName } from "../../entities/TypeName"; type MoveFormScreenNavigationProp = StackNavigationProp; type MoveFormScreenRouteProp = RouteProp; @@ -49,17 +49,18 @@ const MoveFormScreen = ({ navigation, route }: Props) => { navigation.goBack(); }; - // TODO add labels and remove placeholders return ( + Name: setMove({ ...move, name: text })} - placeholder="Name" style={styles.input} /> + Category: setMove({ ...move, category: itemValue as MoveCategoryName }) }> @@ -67,22 +68,24 @@ const MoveFormScreen = ({ navigation, route }: Props) => { )} + Power: setMove({ ...move, power: Number(text) })} - placeholder="Power" style={styles.input} keyboardType="numeric" /> + Accuracy: setMove({ ...move, accuracy: Number(text) })} - placeholder="Accuracy" style={styles.input} keyboardType="numeric" /> + Type: setMove({ ...move, type: { ...move.type, name: itemValue as TypeName } }) }> @@ -90,13 +93,12 @@ const MoveFormScreen = ({ navigation, route }: Props) => { )} - {/*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*/}