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)
})