chore: rename types to remove word "Type"

This commit is contained in:
2024-08-17 19:30:09 +02:00
parent 7b88633fba
commit 74cb0d45af
19 changed files with 112 additions and 122 deletions

View File

@@ -14,22 +14,21 @@ const instance = axios.create({
// api
export const todolistsAPI = {
getTodolists() {
const promise = instance.get<TodolistType[]>('todo-lists')
const promise = instance.get<Todolist[]>('todo-lists')
return promise
},
createTodolist(title: string) {
const promise = instance.post<ResponseType<{ item: TodolistType }>>(
'todo-lists',
{ title: title }
)
const promise = instance.post<Response<{ item: Todolist }>>('todo-lists', {
title: title,
})
return promise
},
deleteTodolist(id: string) {
const promise = instance.delete<ResponseType>(`todo-lists/${id}`)
const promise = instance.delete<Response>(`todo-lists/${id}`)
return promise
},
updateTodolist(id: string, title: string) {
const promise = instance.put<ResponseType>(`todo-lists/${id}`, {
const promise = instance.put<Response>(`todo-lists/${id}`, {
title: title,
})
return promise
@@ -38,25 +37,23 @@ export const todolistsAPI = {
return instance.get<GetTasksResponse>(`todo-lists/${todolistId}/tasks`)
},
deleteTask(todolistId: string, taskId: string) {
return instance.delete<ResponseType>(
`todo-lists/${todolistId}/tasks/${taskId}`
)
return instance.delete<Response>(`todo-lists/${todolistId}/tasks/${taskId}`)
},
createTask(todolistId: string, taskTitile: string) {
return instance.post<ResponseType<{ item: TaskType }>>(
return instance.post<Response<{ item: TaskEntity }>>(
`todo-lists/${todolistId}/tasks`,
{ title: taskTitile }
)
},
updateTask(todolistId: string, taskId: string, model: UpdateTaskModelType) {
return instance.put<ResponseType<TaskType>>(
updateTask(todolistId: string, taskId: string, model: UpdateTaskModel) {
return instance.put<Response<TaskEntity>>(
`todo-lists/${todolistId}/tasks/${taskId}`,
model
)
},
}
export type LoginParamsType = {
export type LoginParams = {
email: string
password: string
rememberMe: boolean
@@ -64,21 +61,20 @@ export type LoginParamsType = {
}
export const authAPI = {
login(data: LoginParamsType) {
const promise = instance.post<ResponseType<{ userId?: number }>>(
login(data: LoginParams) {
const promise = instance.post<Response<{ userId?: number }>>(
'auth/login',
data
)
return promise
},
logout() {
const promise =
instance.delete<ResponseType<{ userId?: number }>>('auth/login')
const promise = instance.delete<Response<{ userId?: number }>>('auth/login')
return promise
},
me() {
const promise =
instance.get<ResponseType<{ id: number; email: string; login: string }>>(
instance.get<Response<{ id: number; email: string; login: string }>>(
'auth/me'
)
return promise
@@ -86,13 +82,13 @@ export const authAPI = {
}
// types
export type TodolistType = {
export type Todolist = {
id: string
title: string
addedDate: string
order: number
}
export type ResponseType<D = {}> = {
export type Response<D = {}> = {
resultCode: number
messages: Array<string>
data: D
@@ -113,7 +109,7 @@ export enum TaskPriorities {
Later = 4,
}
export type TaskType = {
export type TaskEntity = {
description: string
title: string
status: TaskStatuses
@@ -125,7 +121,7 @@ export type TaskType = {
order: number
addedDate: string
}
export type UpdateTaskModelType = {
export type UpdateTaskModel = {
title: string
description: string
status: TaskStatuses
@@ -136,5 +132,5 @@ export type UpdateTaskModelType = {
type GetTasksResponse = {
error: string | null
totalCount: number
items: TaskType[]
items: TaskEntity[]
}

View File

@@ -3,8 +3,8 @@ import './App.css'
import { TodolistsList } from 'features/TodolistsList/TodolistsList'
import { ErrorSnackbar } from 'components/ErrorSnackbar/ErrorSnackbar'
import { useDispatch, useSelector } from 'react-redux'
import { AppRootStateType } from './store'
import { initializeAppTC, RequestStatusType } from './app-reducer'
import { AppRootState } from './store'
import { initializeAppTC, RequestStatus } from './app-reducer'
import { BrowserRouter, Route, Routes } from 'react-router-dom'
import { Login } from 'features/Login/Login'
import { logoutTC } from 'features/Login/auth-reducer'
@@ -20,18 +20,18 @@ import {
} from '@mui/material'
import { Menu } from '@mui/icons-material'
type PropsType = {
type Props = {
demo?: boolean
}
function App({ demo = false }: PropsType) {
const status = useSelector<AppRootStateType, RequestStatusType>(
function App({ demo = false }: Props) {
const status = useSelector<AppRootState, RequestStatus>(
(state) => state.app.status
)
const isInitialized = useSelector<AppRootStateType, boolean>(
const isInitialized = useSelector<AppRootState, boolean>(
(state) => state.app.isInitialized
)
const isLoggedIn = useSelector<AppRootStateType, boolean>(
const isLoggedIn = useSelector<AppRootState, boolean>(
(state) => state.auth.isLoggedIn
)
const dispatch = useDispatch<any>()

View File

@@ -1,11 +1,11 @@
import {
appReducer,
InitialStateType,
InitialState,
setAppError,
setAppStatus,
} from './app-reducer'
let startState: InitialStateType
let startState: InitialState
beforeEach(() => {
startState = {

View File

@@ -3,18 +3,18 @@ import { authAPI } from 'api/todolists-api'
import { setIsLoggedIn } from 'features/Login/auth-reducer'
import { AppThunk } from 'app/store'
export type RequestStatusType = 'idle' | 'loading' | 'succeeded' | 'failed'
export type RequestStatus = 'idle' | 'loading' | 'succeeded' | 'failed'
export type InitialStateType = {
export type InitialState = {
// происходит ли сейчас взаимодействие с сервером
status: RequestStatusType
status: RequestStatus
// если ошибка какая-то глобальная произойдёт - мы запишем текст ошибки сюда
error: string | null
// true когда приложение проинициализировалось (проверили юзера, настройки получили и т.д.)
isInitialized: boolean
}
const initialState: InitialStateType = {
const initialState: InitialState = {
status: 'idle',
error: null,
isInitialized: false,
@@ -27,7 +27,7 @@ const appSlice = createSlice({
setAppError(state, action: PayloadAction<string | null>) {
return { ...state, error: action.payload }
},
setAppStatus(state, action: PayloadAction<RequestStatusType>) {
setAppStatus(state, action: PayloadAction<RequestStatus>) {
return { ...state, status: action.payload }
},
setAppInitialized(state, action: PayloadAction<boolean>) {

View File

@@ -17,20 +17,16 @@ const rootReducer = combineReducers({
// const store = createStore(rootReducer, applyMiddleware(thunkMiddleware));
export const store = configureStore({ reducer: rootReducer })
export type AppRootStateType = ReturnType<typeof rootReducer>
export type AppRootState = ReturnType<typeof rootReducer>
// ❗ UnknownAction вместо AnyAction
export type AppThunk<ReturnType = void> = ThunkAction<
ReturnType,
AppRootStateType,
AppRootState,
unknown,
UnknownAction
>
// export type AppDispatch = typeof store.dispatch
// ❗ UnknownAction вместо AnyAction
export type AppDispatch = ThunkDispatch<
AppRootStateType,
unknown,
UnknownAction
>
export type AppDispatch = ThunkDispatch<AppRootState, unknown, UnknownAction>

View File

@@ -2,7 +2,7 @@ import React, { ChangeEvent, KeyboardEvent, useState } from 'react'
import { IconButton, TextField } from '@mui/material'
import { AddBox } from '@mui/icons-material'
type AddItemFormPropsType = {
type AddItemFormProps = {
addItem: (title: string) => void
disabled?: boolean
}
@@ -10,7 +10,7 @@ type AddItemFormPropsType = {
export const AddItemForm = React.memo(function ({
addItem,
disabled = false,
}: AddItemFormPropsType) {
}: AddItemFormProps) {
let [title, setTitle] = useState('')
let [error, setError] = useState<string | null>(null)

View File

@@ -1,12 +1,12 @@
import React, { ChangeEvent, useState } from 'react'
import { TextField } from '@mui/material'
type EditableSpanPropsType = {
type EditableSpanProps = {
value: string
onChange: (newValue: string) => void
}
export const EditableSpan = React.memo(function (props: EditableSpanPropsType) {
export const EditableSpan = React.memo(function (props: EditableSpanProps) {
let [editMode, setEditMode] = useState(false)
let [title, setTitle] = useState(props.value)

View File

@@ -1,6 +1,6 @@
import React from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { AppRootStateType } from 'app/store'
import { AppRootState } from 'app/store'
import { setAppError } from 'app/app-reducer'
import { AlertProps, Snackbar } from '@mui/material'
import MuiAlert from '@mui/material/Alert'
@@ -19,7 +19,7 @@ const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
)
export function ErrorSnackbar() {
const error = useSelector<AppRootStateType, string | null>(
const error = useSelector<AppRootState, string | null>(
(state) => state.app.error
)
const dispatch = useDispatch()

View File

@@ -2,7 +2,7 @@ import React from 'react'
import { useFormik } from 'formik'
import { useSelector } from 'react-redux'
import { loginTC } from './auth-reducer'
import { AppRootStateType } from 'app/store'
import { AppRootState } from 'app/store'
import { Navigate } from 'react-router-dom'
import { useAppDispatch } from 'hooks/useAppDispatch'
import {
@@ -19,7 +19,7 @@ import {
export const Login = () => {
const dispatch = useAppDispatch()
const isLoggedIn = useSelector<AppRootStateType, boolean>(
const isLoggedIn = useSelector<AppRootState, boolean>(
(state) => state.auth.isLoggedIn
)

View File

@@ -1,5 +1,5 @@
import { createSlice, PayloadAction } from '@reduxjs/toolkit'
import { authAPI, LoginParamsType } from 'api/todolists-api'
import { authAPI, LoginParams } from 'api/todolists-api'
import { setAppStatus } from 'app/app-reducer'
import {
handleServerAppError,
@@ -7,11 +7,11 @@ import {
} from 'utils/error-utils'
import { AppThunk } from 'app/store'
type InitialStateType = {
type InitialState = {
isLoggedIn: boolean
}
const initialState: InitialStateType = {
const initialState: InitialState = {
isLoggedIn: false,
}
@@ -31,7 +31,7 @@ export const { setIsLoggedIn } = authSlice.actions
// thunks
export const loginTC =
(data: LoginParamsType): AppThunk =>
(data: LoginParams): AppThunk =>
(dispatch) => {
dispatch(setAppStatus('loading'))
authAPI

View File

@@ -2,10 +2,10 @@ import React, { ChangeEvent, useCallback } from 'react'
import { Checkbox, IconButton } from '@mui/material'
import { EditableSpan } from 'components/EditableSpan/EditableSpan'
import { Delete } from '@mui/icons-material'
import { TaskStatuses, TaskType } from 'api/todolists-api'
import { TaskStatuses, TaskEntity } from 'api/todolists-api'
type TaskPropsType = {
task: TaskType
type TaskProps = {
task: TaskEntity
todolistId: string
changeTaskStatus: (
id: string,
@@ -19,7 +19,7 @@ type TaskPropsType = {
) => void
removeTask: (taskId: string, todolistId: string) => void
}
export const Task = React.memo((props: TaskPropsType) => {
export const Task = React.memo((props: TaskProps) => {
const onClickHandler = useCallback(
() => props.removeTask(props.task.id, props.todolistId),
[props.task.id, props.todolistId]

View File

@@ -2,17 +2,17 @@ import React, { useCallback, useEffect } from 'react'
import { AddItemForm } from 'components/AddItemForm/AddItemForm'
import { EditableSpan } from 'components/EditableSpan/EditableSpan'
import { Task } from './Task/Task'
import { TaskStatuses, TaskType } from 'api/todolists-api'
import { FilterValuesType, TodolistDomainType } from '../todolists-reducer'
import { TaskStatuses, TaskEntity } from 'api/todolists-api'
import { FilterValues, TodolistDomain } from '../todolists-reducer'
import { fetchTasksTC } from '../tasks-reducer'
import { useAppDispatch } from 'hooks/useAppDispatch'
import { Button, IconButton } from '@mui/material'
import { Delete } from '@mui/icons-material'
type PropsType = {
todolist: TodolistDomainType
tasks: Array<TaskType>
changeFilter: (value: FilterValuesType, todolistId: string) => void
type Props = {
todolist: TodolistDomain
tasks: Array<TaskEntity>
changeFilter: (value: FilterValues, todolistId: string) => void
addTask: (title: string, todolistId: string) => void
changeTaskStatus: (
id: string,
@@ -33,7 +33,7 @@ type PropsType = {
export const Todolist = React.memo(function ({
demo = false,
...props
}: PropsType) {
}: Props) {
const dispatch = useAppDispatch()
useEffect(() => {

View File

@@ -1,19 +1,19 @@
import React, { useCallback, useEffect } from 'react'
import { useSelector } from 'react-redux'
import { AppRootStateType } from 'app/store'
import { AppRootState } from 'app/store'
import {
addTodolistTC,
changeTodolistFilter,
changeTodolistTitleTC,
fetchTodolistsTC,
FilterValuesType,
FilterValues,
removeTodolistTC,
TodolistDomainType,
TodolistDomain,
} from './todolists-reducer'
import {
addTaskTC,
removeTaskTC,
TasksStateType,
TasksState,
updateTaskTC,
} from './tasks-reducer'
import { TaskStatuses } from 'api/todolists-api'
@@ -23,18 +23,16 @@ import { Todolist } from './Todolist/Todolist'
import { Navigate } from 'react-router-dom'
import { useAppDispatch } from 'hooks/useAppDispatch'
type PropsType = {
type Props = {
demo?: boolean
}
export const TodolistsList: React.FC<PropsType> = ({ demo = false }) => {
const todolists = useSelector<AppRootStateType, Array<TodolistDomainType>>(
export const TodolistsList: React.FC<Props> = ({ demo = false }) => {
const todolists = useSelector<AppRootState, Array<TodolistDomain>>(
(state) => state.todolists
)
const tasks = useSelector<AppRootStateType, TasksStateType>(
(state) => state.tasks
)
const isLoggedIn = useSelector<AppRootStateType, boolean>(
const tasks = useSelector<AppRootState, TasksState>((state) => state.tasks)
const isLoggedIn = useSelector<AppRootState, boolean>(
(state) => state.auth.isLoggedIn
)
@@ -77,7 +75,7 @@ export const TodolistsList: React.FC<PropsType> = ({ demo = false }) => {
}, [])
const changeFilter = useCallback(function (
value: FilterValuesType,
value: FilterValues,
todolistId: string
) {
const action = changeTodolistFilter({ id: todolistId, filter: value })

View File

@@ -3,14 +3,14 @@ import {
removeTask,
setTasks,
tasksReducer,
TasksStateType,
TasksState,
updateTask,
} from './tasks-reducer'
import { addTodolist, removeTodolist, setTodolists } from './todolists-reducer'
import { TaskPriorities, TaskStatuses } from 'api/todolists-api'
let startState: TasksStateType = {}
let startState: TasksState = {}
beforeEach(() => {
startState = {
todolistId1: [

View File

@@ -1,9 +1,9 @@
import {
TaskPriorities,
TaskStatuses,
TaskType,
TaskEntity,
todolistsAPI,
UpdateTaskModelType,
UpdateTaskModel,
} from 'api/todolists-api'
import { createSlice, PayloadAction } from '@reduxjs/toolkit'
import {
@@ -11,14 +11,14 @@ import {
removeTodolist,
setTodolists,
} from 'features/TodolistsList/todolists-reducer'
import { AppRootStateType, AppThunk } from 'app/store'
import { AppRootState, AppThunk } from 'app/store'
import { setAppStatus } from 'app/app-reducer'
import {
handleServerAppError,
handleServerNetworkError,
} from 'utils/error-utils'
export type UpdateDomainTaskModelType = {
export type UpdateDomainTaskModel = {
title?: string
description?: string
status?: TaskStatuses
@@ -27,11 +27,11 @@ export type UpdateDomainTaskModelType = {
deadline?: string
}
export type TasksStateType = {
[key: string]: Array<TaskType>
export type TasksState = {
[key: string]: Array<TaskEntity>
}
const initialState: TasksStateType = {}
const initialState: TasksState = {}
const tasksSlice = createSlice({
name: 'tasks',
@@ -51,7 +51,7 @@ const tasksSlice = createSlice({
),
}
},
addTask(state, action: PayloadAction<TaskType>) {
addTask(state, action: PayloadAction<TaskEntity>) {
return {
...state,
[action.payload.todoListId]: [
@@ -64,7 +64,7 @@ const tasksSlice = createSlice({
state,
action: PayloadAction<{
taskId: string
model: UpdateDomainTaskModelType
model: UpdateDomainTaskModel
todolistId: string
}>
) {
@@ -81,7 +81,7 @@ const tasksSlice = createSlice({
setTasks(
state,
action: PayloadAction<{
tasks: Array<TaskType>
tasks: Array<TaskEntity>
todolistId: string
}>
) {
@@ -156,10 +156,10 @@ export const addTaskTC =
export const updateTaskTC =
(
taskId: string,
domainModel: UpdateDomainTaskModelType,
domainModel: UpdateDomainTaskModel,
todolistId: string
): AppThunk =>
(dispatch, getState: () => AppRootStateType) => {
(dispatch, getState: () => AppRootState) => {
const state = getState()
const task = state.tasks[todolistId].find((t) => t.id === taskId)
if (!task) {
@@ -168,7 +168,7 @@ export const updateTaskTC =
return
}
const apiModel: UpdateTaskModelType = {
const apiModel: UpdateTaskModel = {
deadline: task.deadline,
description: task.description,
priority: task.priority,

View File

@@ -3,19 +3,19 @@ import {
changeTodolistEntityStatus,
changeTodolistFilter,
changeTodolistTitle,
FilterValuesType,
FilterValues,
removeTodolist,
setTodolists,
TodolistDomainType,
TodolistDomain,
todolistsReducer,
} from './todolists-reducer'
import { v1 } from 'uuid'
import { TodolistType } from 'api/todolists-api'
import { RequestStatusType } from 'app/app-reducer'
import { Todolist } from 'api/todolists-api'
import { RequestStatus } from 'app/app-reducer'
let todolistId1: string
let todolistId2: string
let startState: Array<TodolistDomainType> = []
let startState: Array<TodolistDomain> = []
beforeEach(() => {
todolistId1 = v1()
@@ -48,7 +48,7 @@ test('correct todolist should be removed', () => {
})
test('correct todolist should be added', () => {
let todolist: TodolistType = {
let todolist: Todolist = {
title: 'New Todolist',
id: 'any id',
addedDate: '',
@@ -77,7 +77,7 @@ test('correct todolist should change its name', () => {
})
test('correct filter of todolist should be changed', () => {
let newFilter: FilterValuesType = 'completed'
let newFilter: FilterValues = 'completed'
const action = changeTodolistFilter({ id: todolistId2, filter: newFilter })
@@ -94,7 +94,7 @@ test('todolists should be added', () => {
expect(endState.length).toBe(2)
})
test('correct entity status of todolist should be changed', () => {
let newStatus: RequestStatusType = 'loading'
let newStatus: RequestStatus = 'loading'
const action = changeTodolistEntityStatus({
id: todolistId2,

View File

@@ -1,16 +1,16 @@
import { createSlice, PayloadAction } from '@reduxjs/toolkit'
import { todolistsAPI, TodolistType } from 'api/todolists-api'
import { RequestStatusType, setAppStatus } from 'app/app-reducer'
import { todolistsAPI, Todolist } from 'api/todolists-api'
import { RequestStatus, setAppStatus } from 'app/app-reducer'
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
export type FilterValues = 'all' | 'active' | 'completed'
export type TodolistDomain = Todolist & {
filter: FilterValues
entityStatus: RequestStatus
}
const initialState: Array<TodolistDomainType> = []
const initialState: Array<TodolistDomain> = []
const todolistsSlice = createSlice({
name: 'todolists',
@@ -19,7 +19,7 @@ const todolistsSlice = createSlice({
removeTodolist(state, action: PayloadAction<string>) {
return state.filter((tl) => tl.id != action.payload)
},
addTodolist(state, action: PayloadAction<TodolistType>) {
addTodolist(state, action: PayloadAction<Todolist>) {
return [
{ ...action.payload, filter: 'all', entityStatus: 'idle' },
...state,
@@ -42,7 +42,7 @@ const todolistsSlice = createSlice({
state,
action: PayloadAction<{
id: string
filter: FilterValuesType
filter: FilterValues
}>
) {
return state.map((tl) =>
@@ -55,7 +55,7 @@ const todolistsSlice = createSlice({
state,
action: PayloadAction<{
id: string
status: RequestStatusType
status: RequestStatus
}>
) {
return state.map((tl) =>
@@ -64,7 +64,7 @@ const todolistsSlice = createSlice({
: tl
)
},
setTodolists(state, action: PayloadAction<Array<TodolistType>>) {
setTodolists(state, action: PayloadAction<Array<Todolist>>) {
return action.payload.map((tl) => ({
...tl,
filter: 'all',

View File

@@ -1,16 +1,16 @@
import {
addTodolist,
TodolistDomainType,
TodolistDomain,
todolistsReducer,
} from './todolists-reducer'
import { tasksReducer, TasksStateType } from './tasks-reducer'
import { TodolistType } from 'api/todolists-api'
import { tasksReducer, TasksState } from './tasks-reducer'
import { Todolist } from 'api/todolists-api'
test('ids should be equals', () => {
const startTasksState: TasksStateType = {}
const startTodolistsState: Array<TodolistDomainType> = []
const startTasksState: TasksState = {}
const startTodolistsState: Array<TodolistDomain> = []
let todolist: TodolistType = {
let todolist: Todolist = {
title: 'new todolist',
id: 'any id',
addedDate: '',

View File

@@ -1,9 +1,9 @@
import { setAppError, setAppStatus } from 'app/app-reducer'
import { ResponseType } from 'api/todolists-api'
import { Response } from 'api/todolists-api'
import { Dispatch } from 'redux'
export const handleServerAppError = <D>(
data: ResponseType<D>,
data: Response<D>,
dispatch: Dispatch
) => {
if (data.messages.length) {