diff --git a/src/features/TodolistsList/Todolist/Todolist.tsx b/src/features/TodolistsList/Todolist/Todolist.tsx index cdcda5a..913b354 100644 --- a/src/features/TodolistsList/Todolist/Todolist.tsx +++ b/src/features/TodolistsList/Todolist/Todolist.tsx @@ -104,7 +104,7 @@ export const Todolist = React.memo(function ({ disabled={props.todolist.entityStatus === 'loading'} />
- {tasksForTodolist.map((t) => ( + {tasksForTodolist?.map((t) => ( { - copyState[tl.id] = [] - }) + // action.todolists.forEach((tl) => { + // copyState[tl.id] = [] + // }) return copyState } case 'SET-TASKS': @@ -198,7 +193,5 @@ type ActionsType = | ReturnType | ReturnType | ReturnType - | AddTodolistActionType - | RemoveTodolistActionType - | SetTodolistsActionType | ReturnType + | any diff --git a/src/features/TodolistsList/todolists-reducer.ts b/src/features/TodolistsList/todolists-reducer.ts index cfde4a3..fbe7847 100644 --- a/src/features/TodolistsList/todolists-reducer.ts +++ b/src/features/TodolistsList/todolists-reducer.ts @@ -1,96 +1,90 @@ +import { createSlice, PayloadAction } from '@reduxjs/toolkit' import { todolistsAPI, TodolistType } from 'api/todolists-api' -import { Dispatch } from 'redux' import { RequestStatusType, setAppStatusAC } from 'app/app-reducer' -import { handleServerNetworkError } from 'utils/error-utils' import { AppThunk } from 'app/store' +import { handleServerNetworkError } from 'utils/error-utils' + +export type FilterValuesType = 'all' | 'active' | 'completed' +export type TodolistDomainType = TodolistType & { + filter: FilterValuesType + entityStatus: RequestStatusType +} const initialState: Array = [] -export const todolistsReducer = ( - state: Array = initialState, - action: ActionsType -): Array => { - switch (action.type) { - case 'REMOVE-TODOLIST': - return state.filter((tl) => tl.id != action.id) - case 'ADD-TODOLIST': +const todolistsSlice = createSlice({ + name: 'todolists', + initialState, + reducers: { + removeTodolistAC(state, action: PayloadAction) { + return state.filter((tl) => tl.id != action.payload) + }, + addTodolistAC(state, action: PayloadAction) { return [ - { ...action.todolist, filter: 'all', entityStatus: 'idle' }, + { ...action.payload, filter: 'all', entityStatus: 'idle' }, ...state, ] - - case 'CHANGE-TODOLIST-TITLE': + }, + changeTodolistTitleAC( + state, + action: PayloadAction<{ + id: string + title: string + }> + ) { return state.map((tl) => - tl.id === action.id ? { ...tl, title: action.title } : tl + tl.id === action.payload.id + ? { ...tl, title: action.payload.title } + : tl ) - case 'CHANGE-TODOLIST-FILTER': + }, + changeTodolistFilterAC( + state, + action: PayloadAction<{ + id: string + filter: FilterValuesType + }> + ) { return state.map((tl) => - tl.id === action.id ? { ...tl, filter: action.filter } : tl + tl.id === action.payload.id + ? { ...tl, filter: action.payload.filter } + : tl ) - case 'CHANGE-TODOLIST-ENTITY-STATUS': + }, + changeTodolistEntityStatusAC( + state, + action: PayloadAction<{ + id: string + status: RequestStatusType + }> + ) { return state.map((tl) => - tl.id === action.id ? { ...tl, entityStatus: action.status } : tl + tl.id === action.payload.id + ? { ...tl, entityStatus: action.payload.status } + : tl ) - case 'SET-TODOLISTS': - return action.todolists.map((tl) => ({ + }, + setTodolistsAC(state, action: PayloadAction>) { + return action.payload.map((tl) => ({ ...tl, filter: 'all', entityStatus: 'idle', })) - default: - return state - } -} + }, + }, +}) -// actions -export const removeTodolistAC = (id: string) => - ({ type: 'REMOVE-TODOLIST', id }) as const +export const { + changeTodolistEntityStatusAC, + changeTodolistFilterAC, + changeTodolistTitleAC, + addTodolistAC, + removeTodolistAC, + setTodolistsAC, +} = todolistsSlice.actions -export const addTodolistAC = (todolist: TodolistType) => - ({ type: 'ADD-TODOLIST', todolist }) as const +export const todolistsReducer = todolistsSlice.reducer -export const changeTodolistTitleAC = ({ - id, - title, -}: { - id: string - title: string -}) => - ({ - type: 'CHANGE-TODOLIST-TITLE', - id, - title, - }) as const - -export const changeTodolistFilterAC = ({ - id, - filter, -}: { - id: string - filter: FilterValuesType -}) => - ({ - type: 'CHANGE-TODOLIST-FILTER', - id, - filter, - }) as const - -export const changeTodolistEntityStatusAC = ({ - id, - status, -}: { - id: string - status: RequestStatusType -}) => - ({ - type: 'CHANGE-TODOLIST-ENTITY-STATUS', - id, - status, - }) as const -export const setTodolistsAC = (todolists: Array) => - ({ type: 'SET-TODOLISTS', todolists }) as const - -// thunks export const fetchTodolistsTC = (): AppThunk => { return (dispatch) => { dispatch(setAppStatusAC('loading')) @@ -129,27 +123,10 @@ export const addTodolistTC = (title: string): AppThunk => { }) } } -export const changeTodolistTitleTC = (id: string, title: string) => { - return (dispatch: Dispatch) => { +export const changeTodolistTitleTC = (id: string, title: string): AppThunk => { + return (dispatch) => { todolistsAPI.updateTodolist(id, title).then((res) => { dispatch(changeTodolistTitleAC({ id: id, title: title })) }) } } - -// types -export type AddTodolistActionType = ReturnType -export type RemoveTodolistActionType = ReturnType -export type SetTodolistsActionType = ReturnType -type ActionsType = - | RemoveTodolistActionType - | AddTodolistActionType - | ReturnType - | ReturnType - | SetTodolistsActionType - | ReturnType -export type FilterValuesType = 'all' | 'active' | 'completed' -export type TodolistDomainType = TodolistType & { - filter: FilterValuesType - entityStatus: RequestStatusType -} diff --git a/src/features/TodolistsList/todolists-tasks-reducer.test.ts b/src/features/TodolistsList/todolists-tasks-reducer.test.ts index 6a8a335..e1a4f7f 100644 --- a/src/features/TodolistsList/todolists-tasks-reducer.test.ts +++ b/src/features/TodolistsList/todolists-tasks-reducer.test.ts @@ -26,6 +26,6 @@ test('ids should be equals', () => { const idFromTasks = keys[0] const idFromTodolists = endTodolistsState[0].id - expect(idFromTasks).toBe(action.todolist.id) - expect(idFromTodolists).toBe(action.todolist.id) + expect(idFromTasks).toBe(action.payload.id) + expect(idFromTodolists).toBe(action.payload.id) })